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.

Leave a Reply