Joseph Zhang –– Project –– 03 

Throughout the process of making this piece of interactive art, I was really focused on the relationship between the mouse and the shapes and how to change the temporal speed of movement. Often times, I would divide mouseX or mouseY by a number to have a slower animation than the actual speed of the mouse.

sketch

// Joseph Zhang
// Section E
// haozhez@andrew.cmue.edu
// Project-03: Dynamic Drawing

function setup() {
    createCanvas(480, 640);
}
 
function draw() {
    //Changes color depending on mouseX and mouseY position
    background(mouseY, mouseX, 200);
    noStroke();

    // resizing rectangle (left) - width increases by a factor of -mouseX / 2
    rect(480, 500, (-mouseX / 2), 60);

    // right resizing rectangle (right) - width increases by a factor of mouseX / 2
    rect(0, 100, (mouseX / 2), 60);

    // Rotating + Resizing Purple-to-Pink Rectangle
    push();
        rectMode(CENTER);
        // Trailing mouse parallax
        translate(180 + mouseX / 10, 430 + mouseY / 10);
        //Rotates rectangle depending on mouseX position
        rotate(radians(-mouseX / 3));
        //Changes color depending on mouseX position
        fill(170 + mouseX,180,210);
        //Drawing rectangle –　width increases by a factor of mouseX / 4
        rect(0, 0, 160 + mouseX / 4, 160);
    pop();

    // Rotating Purple Squares
    push();
        rectMode(CENTER);
        translate(200,450);
        fill(170,160,210);
        //Rotates Rectangle depending on – mouseX position divided by 10
        rotate(radians(mouseX/10));
        //Drawing rectangle
        rect(0, 0, 130, 130);
    pop();

    // Resizing Black-to-White Ellipse
    push();
        // Trailing mouse parallax – position moves at a speed of mouseX divided by 10
        translate(200 + mouseX / 10, 200 + mouseY / 10);
        //Changes color depending on mouseX position
        fill(255 - mouseX)
        //Drawing ellipse
        ellipse(0, 0, -40 + (mouseY + mouseX) / 3, -40 + (mouseY + mouseX) / 3);
    pop();
}