the hardest part for me was sticking with an idea, and resisting the urge to scrap my code constantly. it was also tricky to keep my variables in check without rewriting them with each function… anyway, try moving your mouse around the canvas and clicking!
sketch
// Jaden Luscher
// section A
// project 03
var x = 0;
var y = 0;
var square1 = 0;
var square2 = 0;
var rot1 = 0;
var rot2 = 0;
var col = 200;
function setup() {
createCanvas(600, 450);
background(200,200,100);
}
function draw() {
background(200,200,100);
rectMode(CENTER);
noStroke();
fill(col);
translate(width/2, height/2); // move origin to center of canvas
square1 = (mouseX + mouseY) / 2; // move mouse to change square size
rot1 += 0.01; // makes square 1 spin
rotate(rot1);
rect(x, y, square1, square1); // center square (square 1)
square2 = (mouseX - mouseY); // size of four squares differs from square 1
if(mouseX > mouseY) {
rot2 = 2 * rot1; // spins clockwise
} else {
rot2 = -2 * rot1; // spins counter clockwise
}
rotate(rot2);
rect(x + square2, y + square2, square2, square2);
rect(x - square2, y - square2, square2, square2);
rect(x + square2, y - square2, square2, square2);
rect(x - square2, y + square2, square2, square2); // four squares at corners
if (mouseIsPressed) { // squares "jitter" & turn white
rot1 *= -1;
col = 255;
} else {
col = 0;
}
print("square2 = ", square2);
}