Project 3: Dynamic Drawing

sketch

/*Emma Shi
Section B
eyshi@andrew.cmu.edu
Project 3
*/

function setup() {
    createCanvas(640, 480);
}
function draw() {
    var ellipseR = map(0, mouseX, height, 255, 254);
    var ellipseG = map(0, mouseX, height, 203, 138);
    var ellipseB = map(0, mouseX, height, 2, 5);
    var backR = map(0, mouseX, height, 15, 139);
    var backG = map(0, mouseX, height, 19, 237);
    var backB = map(0, mouseX, height, 37, 255);

    background(backR, backG, backB);
    //background changes from navy to light blue as mouse moves across
    fill(ellipseR, ellipseG, ellipseB);
    ellipse(320, 240, 100, 100);
    //circle changes from yellow to orange as mouse moves across

    var xHeight = map(0, mouseX, height, 640, 480);
    var xWidth = map(0, mouseX, height, 640, 480);
    ellipse(width/2, height/2, xWidth, xHeight);
    //changes size (height) of circle 

    fill(255);
    rect(width-mouseX, height/500, 50, 50);
    rect(width-mouseX, height/8, 50, 50);
    rect(width-mouseX, height/4, 50, 50);
    rect(width-mouseX, height/2.67, 50, 50);
    rect(width-mouseX, height/2, 50, 50);
    rect(width-mouseX, height/1.6, 50, 50);
    rect(width-mouseX, height/1.33, 50, 50);
    rect(width-mouseX, height/1.14, 50, 50);
    //transition rectangles that change direction with mouseX

    fill(248, 221, 136);
    noStroke();
    angleMode(DEGREES);
    var rot = atan2(mouseY-height/2, mouseX-width/2);
    push();
    translate(width/2, height/2);
    rotate(rot);
    rect(130, 150, 60, 60);
    rect(-190, 150, 60, 60);
    rect(-250, -100, 60, 60);
    rect(-80, -250, 60, 60);
    rect(160, -170, 60, 60);
    rect(200, -10, 60, 60);
    pop();
    //changes rotation of rectangles around the circle

    }

For this project, I had for the screen to switch from an abstract, simplistic version of nighttime to daytime. As the user moves the mouse from left to right, the background changes from navy to light blue, and the “sun” (circle in the middle) changes from yellow to orange. The rotating rectangles around can represent craters of the moon or rays of sun.

I also took the idea of a changing “slide” (the column of rectangles that moves through the image) as a transition aide that allows the viewer to move from seeing the “night” to “day” (and vice versa).