Victoria Reiter-Project 03-Dynamic Drawing

sketch

/*Victoria Reiter
Section B
vreiter@andrew.cmu.edu
Project-03
*/

// establishes global variables
// states amount of increase for angular rotation
var increment = 5;
// states angle of rotation
var angle = 0;
// states sizes of rectangles
var sizeA = 25;
var sizeB = 75;
// states center points of rectangles
var rect1X;
var rect2X;
var rect3X;
// states colors
var colorA = 255;
var colorB = 0;
var colorYellow = 'rgb(255, 251, 155)';
var colorBlue = 'rgb(181, 243, 255)';
var colorGreen = 'rgb(201, 255, 165)';

function setup() {
    // creates canvas dimensions
    createCanvas(640, 480);
    // defines positions of central points
    // for the drawing of rectangles
    rect1X = width / 6;
    rect2X = width / 2;
    rect3X = (5 * width) / 6;
}

function draw() {
    // sets background color to be pink
    // and a little opaque
    background('rgba(255,187,203,0.05)');
    // left most rectangle rotation
    push();
    translate(rect1X, height - mouseY);
    rotate(radians(angle));
    // draws rectangle from center point
    rectMode(CENTER);
    // sets visual aspects of rectangle
    strokeWeight(4);
    stroke(colorA);
    fill(colorB);
    rect(0, 0, sizeA, sizeA);
    pop();
    angle = angle + increment;
    // center rect rotation
    push();
    translate(rect2X, mouseY);
    rotate(radians(angle));
    // draws center rect
    rectMode(CENTER);
    strokeWeight(10);
    stroke(colorB);
    fill(colorA);
    rect(0, 0, sizeB, sizeB);
    pop();
    angle = angle - increment;
    // rightmost rect rotation
    push();
    translate(rect3X, height - mouseY);
    rotate(radians(angle));
    // draws right most rect
    rectMode(CENTER);
    strokeWeight(4);
    stroke(colorA);
    fill(colorB);
    rect(0, 0, sizeA, sizeA);
    pop();
    angle = angle + increment;

    // if mouse is located on bottom half of canvas
    // then rectangles change size and direction of rotation
    if (mouseY > height / 2) {
        sizeA = 75;
        sizeB = 25;
        increment = 5;
    }
    // if mouse is located on top half of canvas
    // then rectangles change size and direction of rotation
    if (mouseY < height / 2) {
        sizeA = 25;
        sizeB = 75;
        increment = -5;
    }
    // defines visual characteristics for when mouse is
    // in upper left section of canvas
    if ((mouseX < width / 3) & (mouseY < height / 2)) {
        colorA = colorYellow;
        colorB = 0;
    }
    // defines visual characteristics for when mouse is
    // in bottom left section of canvas
    if ((mouseX < width / 3) & (mouseY > height / 2)) {
        colorA = 0;
        colorB = colorYellow;
    }
    // defines visual characteristics for when mouse is
    // in upper middle section of canvas
    if ((mouseX > width / 3) & (mouseX < (2 * width) / 3) && (mouseY < height / 2)) {
        colorA = 0;
        colorB = colorBlue;
    }
    // defines visual characteristics for when mouse is
    // in bottom middle section of canvas
    if ((mouseX > width / 3) & (mouseX < (2 * width) / 3) && (mouseY > height / 2)) {
        colorA = colorBlue;
        colorB = 0;
    }
    // defines visual characteristics for when mouse is
    // in upper right section of canvas
    if ((mouseX > (2 * width) / 3) & (mouseY < height / 2)) {
        colorA = colorGreen;
        colorB = 0;
    }
    // defines visual characteristics for when mouse is
    // in bottom right section of canvas
    if ((mouseX > (2 * width) / 3) & (mouseY > height / 2)) {
        colorA = 0;
        colorB = colorGreen;
    }
    // defines visual characteristics for when mouse is
    // on the left section of the canvas
    if (mouseX < width / 3) {
        fill('rgb(187, 4, 131)');
        textAlign(CENTER);
        textSize(25);
        textFont('Georgia');
        textStyle(BOLD);
        text("YOU", rect1X, mouseY);
    }   else {
        noStroke();
        }
    // defines visual characteristics for when mouse is
    // on the middle section of the canvas
    if ((mouseX > width / 3) & (mouseX < (5 * width) / 6)) {
        fill('rgb(187, 4, 131)');
        textAlign(CENTER);
        textSize(25);
        textFont('Georgia');
        textStyle(BOLD);
        text("ARE", rect2X, height - mouseY);
    }   else {
        noStroke();
        }
    // defines visual characteristics for when mouse is
    // on the right section of the canvas
    if (mouseX > (5 * width) / 6) {
        fill('rgb(187, 4, 131)');
        textAlign(CENTER);
        textSize(25);
        textFont('Georgia');
        textStyle(BOLD);
        text("BEAUTIFUL", rect3X, mouseY);
    }   else {
        noStroke();
        }
}

Here is the design I made! As the mouse moves from left to right, the colors of the rectangles, as well as their outline, changes, and different words appear depending on where the mouse is located. Two squares move in opposite direction of the y-value of the mouse, and one moves along with the mouse’s y-value, and opposite for the words. As the mouse moves from top to bottom of the screen, the squares also change size and direction of rotation. Also, the background is not completely opaque, allowing you to see the outlines of the shapes as they move, which I think creates a kind of soothing echo-effect that adds to the aesthetics of the graphic.

Ultimately, the factors that change are: position, size, color, and angle.

I think it is a pretty little interactive image with a good message that can cheer you up if you’re ever feeling gloomy. :’)