I enjoyed the freeform in this project which was more open-ended. I had lots of fun playing tricks on the eye in addition to the mouse interaction. Move your mouse left and right and see what happens!!
dynamic drawing sketch
var angle = 0;
var x;
var y;
var w = 80;
var h = 80;
var xe;
function setup() {
createCanvas(600, 450);
background(220);
frameRate(15);
}
function draw() {
background(204);
var x = width/2;
var y = height/2;
var xe = width/2;
var ye = height/2;
angle = angle + 1;
if (mouseX <= width/2) { // when mouse moves to left
background(255); // black background
// make square bigger
w = w + 8;
h = h + 8;
// bigger white rectangle
push();
translate(x,y);
rotate(-angle);
rectMode(CENTER);
fill (0);
rect(0, 0, w*20, h*20);
pop();
//bigger white circle
fill(255);
ellipse(xe, ye, w*17);
// big black rectangle
push();
translate(x,y);
rotate(angle);
rectMode(CENTER);
fill (0);
rect(0, 0, w*10, h*10);
pop();
// big white circle
fill(255);
ellipse(xe, ye, w*8);
// black rectangle
push(); // this keeps whatever code that is inside push and pop "self contained" without affecting other code/ "undo"
translate (x,y);
rotate(-angle);
rectMode(CENTER);
fill(0);
rect(0, 0, w*4, h*4);
// draw black ellipse in center of square
pop();
fill(255);
ellipse (xe, ye, w*3);
// square inside of ellipse that rotates the opposite direction
push();
translate(x,y);
rotate(angle);
rectMode(CENTER);
fill(0);
rect(0, 0, w, h);
pop();
// small white circle that approaches center
push();
translate(300, 225);
rotate(radians(angle));
ellipse(xe -100, ye - 100, 50);
pop();
angle = angle + 8; // used to be 50
} else if (mouseX >= width/2) { // when mouse moves to right
background(0); // white background
// make square bigger
w = w - 8;
h = h - 8;
// bigger black rectangle
push();
translate(x,y);
rotate(angle);
rectMode(CENTER);
fill (255);
rect(0, 0, w*20, h*20);
pop();
// bigger black circle
fill(0);
ellipse(xe, ye, w*17);
// big white rectangle
push();
translate(x,y);
rotate(-angle);
rectMode(CENTER);
fill (255);
rect(0, 0, w*10, h*10);
pop();
// really big black circle
fill(0);
ellipse(xe, ye, w*8);
// big white rectangle
push();
translate (x,y);
rotate(angle);
rectMode(CENTER);
fill(255);
rect(0, 0, w*4, h*4);
pop();
// smaller black circle
fill(0);
ellipse (xe, ye, w*3);
// white rectangle that rotates in opposite direction
fill(255);
translate(x,y);
rotate(-angle);
rectMode(CENTER);
fill(255);
rect(0, 0, w, h);
// small black circle with white outline that approaches center
push();
translate(300, 225);
rotate(radians(angle));
stroke(255);
fill(0);
ellipse(xe -100, ye - 100, 50);
pop();
angle = angle - 8;
}
}