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.
// 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();
}