Move mouse to the left,the size of the circles will be smaller; move mouse to the right, the size of the circles will be bigger. Mouse X and Mouse Y also control colors of the circles.
sketch
var a=100;//square size
var b=200;//circle size
var c=100;//x,y of squares and circles
function setup() {
createCanvas(640, 480);
}
function draw() {
background(220);
fill(232,180,mouseY);
strokeWeight(5);
ellipse(mouseX,height/2,480,480);
//element 1
push()
translate(width/2,height/2);
rotate(millis()/500);
strokeWeight(5);
fill(mouseX,155,mouseY);
rect(-c,-c,a,a);
ellipse(-c,-c,b,b);
pop();
//element 2
push()
translate(width/2,height/2);
rotate(millis()/-500);
strokeWeight(5);
fill(234,mouseX,mouseY);
rect(-c,-c,a,a);
ellipse(-c,-c,b,b);
pop();
//element 3
push()
translate(width/2,height/2);
rotate(millis()/-500);
strokeWeight(5);
fill(120,mouseX+50,178);
rect(0,0,a,a);
ellipse(c,c,b,b);
pop();
//element 4
push()
translate(width/2,height/2);
rotate(millis()/500);
strokeWeight(5);
fill(mouseX,202,178);
rect(0,0,a,a);
ellipse(c,c,b,b);
pop();
//element 4-2
push()
translate(width/2,height/2);
rotate(millis()/2000);
strokeWeight(5);
fill(mouseX,202,178);
rect(0,0,a,a);
ellipse(c,c,b,b);
pop();
//element 2-2
push()
translate(width/2,height/2);
rotate(millis()/-2000);
strokeWeight(5);
fill(234,mouseX,mouseY);
rect(-c,-c,a,a);
ellipse(-c,-c,b,b);
pop();
//element 3-2
push()
translate(width/2,height/2);
rotate(millis()/-2000);
strokeWeight(5);
fill(120,mouseX+50,178);
rect(0,0,a,a);
ellipse(c,c,b,b);
pop();
//element 1-2
push()
translate(width/2,height/2);
rotate(millis()/2000);
strokeWeight(5);
fill(mouseX,155,mouseY);
rect(-c,-c,a,a);
ellipse(-c,-c,b,b);
pop();
if (mouseX>width/2){
b+=0.5;
}
if (mouseX<width/2){
b=b-0.5;
}
}
I used basic geometries(squares and circles) in this project. There are two layers of the elements rotating in different speed and directions. Mouse X controls the sizes of the circles and Mouse X, Mouse Y together change the colors.