this is my project:
var d = 40;
var d2 = 30;
var rotateV = 1;
var rotateR = 2;
var rotateR2 = -1;
var rotateB = 0;
var rotateL = 1;
var r = 100;
var g = 100;
var b = 100;
function setup() {
createCanvas(600, 450);
text("Xinran Yu, Seciton A");
}
function draw() {
background(0);
fill(255, 255, 0)
//background rotating green circles
fill(188, 225, 40, 220);
push();
translate(500, 350);
rotate(radians(rotateB)); //1
ellipse(60, 60, d2+20, d2+20);
rotateB += 0.6;
rotate(radians(rotateB)); //2
ellipse(60, 60, d2+15, d2+15);
rotateB += 0.5;
rotate(radians(rotateB)); //3
ellipse(60, 60, d2+10, d2+10);
rotateB += 0.3;
rotate(radians(rotateB)); //4
ellipse(60, 60, d2+5, d2+5);
rotateB += 0.2;
rotate(radians(rotateB)); //5
ellipse(60, 60, d2, d2);
rotateB += 0.1;
pop()
//background lines
push();
translate(100, 100);
stroke(43, 255, 248, 50);
strokeWeight(1);
for (var rotateL = 30; rotateL<360; rotateL++) {
rotate(radians(rotateL));
line(0, 0, 90, 90);
}
pop();
//rotating squares
fill(221, 4, 137, 200);
noStroke();
push();
translate(mouseX, mouseY);
rotate(radians(rotateR));
rotateR = rotateR - 3;
rect(-10, 0, 100, 100);
rotate(radians(rotateR2));
rotateR2 = rotateR2 + 2;
rect(0, 10, 60, 60);
pop();
// rotating circles,changing color due to mouseX & mouseY
fill(126, 198, 231);
ellipse(mouseX, mouseY, 50, 50); // center circle
push();
translate(mouseX, mouseY);
if (mouseX <= width/2 & mouseY <= height/2) {
r = 218; //yellow
g = 177;
b = 79;
} else if (mouseX < width/2 & mouseY > height/2) {
r = 205; //orange
g = 110;
b = 74;
} else if (mouseX > width/2 & mouseY < height/2) {
r = 224; //pink
g = 128;
b = 231;
} else if (mouseX > width/2 & mouseY > height/2) {
r = 135; //red
g = 30;
b = 12;
}
fill(r, g, b);
rotate(radians(rotateV));
rotateV = rotateV + 2;
//change circle's raduis
//distance to canvas center increases, rotating radius & d increases
var x1 = dist(mouseX, mouseY, width/2, height/2);
d = dist(mouseX, mouseY, width/2, height/2)/3;
d = constrain(d, 10, 100);
ellipse(x1, x1, d, d);
ellipse(-x1, -x1, d, d);
ellipse(-x1, x1, d, d);
ellipse(x1, -x1, d, d);
ellipse(0, x1*1.5, d, d);
ellipse(0, -x1*1.5, d, d);
ellipse(x1*1.5, 0, d, d);
ellipse(-x1*1.5, 0, d, d);
pop();
}