# Denise Jiang-Project-03-Dynamic-Drawing

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.