/*
* Angela Lee
* Section E
* ahl2@andrew.cmu.edu
* Assignment-03
*/
// variables for x & y position of circle following cursor
var x = 300;
var y = 300;
var diffx = 0;
var diffy = 0;
function setup(){
createCanvas(640, 480);
}
function draw(){
// defining variable for distance from mouse position to center
mouseDist = dist(mouseX, mouseY, width/2, height/2);
// width and height of the circles
circle = 80 + mouseDist/6;
background(0);
noStroke();
// small white circle following the mouse
diffx = mouseX - x;
diffy = mouseY - y;
x = x + 0.2 * diffx;
y = y + 0.2 * diffy;
fill ("white");
ellipse(x, y, 20, 20);
// middle square
push();
translate(320, 240);
rectMode (CENTER);
rotate(radians(mouseDist));
fill(mouseX, mouseY, 100);
rect(0, 0, 15, 15);
pop();
// TOP CIRCLE
// red, yellow values change based on mouse's x and y position
fill(mouseX, mouseY, 150);
// ellipse goes top based on mouse's distance from center
ellipse(320, 114 - mouseDist/2, circle,
circle);
// RIGHT CIRCLE
// green, blue values change based on mouse's x and y position
fill(242, mouseX, mouseY);
// ellipse goes right based on mouse's distance from center
// ellipse gets bigger as mouseDist gets bigger
ellipse(445 + mouseDist/2, 240, circle,
circle);
// LOWER CIRCLE
// red, green values change based on mouse's x and y position
fill(mouseX, mouseY, 40);
// ellipse goes bottom based on mouse's distance from center
// ellipse gets bigger as mouseDist gets bigger
ellipse(320, 365 + mouseDist/2, circle,
circle);
// LEFT CIRCLE
// red value changes based on mouse's x position
fill(mouseX, 13, 174);
// ellipse goes left based on mouse's distance from center
// ellipse gets bigger as mouseDist gets bigger
ellipse(195 - mouseDist/2, 240, circle,
circle);
// TOP RIGHT SQUARE
push();
// translate origin to where the square is, based on mouseDist
translate(407.5 + mouseDist/5, 151 - mouseDist/5);
// rotate the square from its center as it moves
rectMode(CENTER);
rotate(radians(mouseDist));
fill(23, 250, 255);
rect(0, 0, 50, 50);
pop();
// BOTTOM RIGHT SQUARE
push();
// translate origin to where the square is, based on mouseDist
translate(407.5 + mouseDist/5, 328.5 + mouseDist/5);
// rotate the square from its center as it moves
rectMode(CENTER);
rotate(radians(-mouseDist));
fill(141, 29, 221);
rect(0, 0, 50, 50);
pop();
// BOTTOM LEFT SQUARE
push();
// translate origin to where the square is, based on mouseDist
translate(231 - mouseDist/5, 328.5 + mouseDist/5);
// rotate the square from its center as it moves
rectMode(CENTER);
rotate(radians(mouseDist));
fill(255, 169, 210);
rect(0, 0, 50, 50);
pop();
// TOP LEFT SQUARE
push();
// translate origin to where the square is, based on mouseDist
translate(231 - mouseDist/5, 151 - mouseDist/5);
// rotate the square from its center as it moves
rectMode(CENTER);
rotate(radians(-mouseDist));
fill(7, 57, 239);
rect(0, 0, 50, 50);
pop();
}
This project helped me really understand the mechanisms of push, pop, and translation in the context of rotation. I think it was tricky to figure out how to make things rotate a certain place (e.g. rotate on its center while the position of the object changed places depending on the user). I also think that proportion was especially important for me in this exercise. While most of my user interaction was based on how far the cursor was from the center of the canvas, determining how fast something was moving or big something got depended on a fraction of that distance.