Project – 03- Dynamic Drawing

function setup() {
    createCanvas(600, 450);
    text("p5.js vers 0.9.0 test.", 10, 15);
}
var s;	//rect scale
var x1;
var y1;
var x2;
var y2;
var x3;
var y3;
var x4;
var y4;
var x5;
var y5;
var w = 30;	//rect
var r;	//rotation


function draw() {
	background(255);
	//change background color based on four quadrants
	if(mouseX < (width/2) & mouseY < (height/2)){
		w = mouseX;
		background(245, 209, 213);
		
		

	} else if(mouseX > (width/2) & mouseY < (height/2)){
		w = mouseX - (mouseX/2);
		background(225, 164, 186);
		
		
	} else if (mouseX < (width/2) & mouseY > (height/2)){
		w = mouseX;
		background(224, 186, 241);
		
		
	} else if(mouseX > (width/2) & mouseY > (height/2)){
		w = mouseX - (mouseX/2);
		background(251, 186, 207);
		
		
	}
	//heart
	if (200<=mouseX & mouseX<=400 && mouseY>100 && mouseY<300){
		x1 = mouseX + 80;
		x2 = mouseX + 130;
		x3 = mouseX + 10;
		x4 = mouseX + 110;
		x5 = mouseX + 60;
		y1 = mouseY + 130;
		y2 = mouseY - 10;
		y3 = mouseY + 10;
		y4 = mouseY + 60;
		y5 = mouseY + 90;
		s = 0.77;
		r = 0;
	} else{
		x1 = 90;
		y1 = 90;
		x2 = 130;
		y2 = 300;
		x3 = 333;
		y3 = 120;
		x4 = 500;
		y4 = 260;
		x5 = 400;
		y5 = 390;
		r += 0.5;
	}

	fill(251, 250, 186);
	circle(x1, y1, 60);	//light yellow
	fill(205, 189, 173);
	circle(x2, y2, 99);	//gray
	fill(179, 246, 195);
	circle(x3, y3, 140);	//green
	fill(244, 247, 6);
	circle(x4, y4, 90);	//yellow
	fill(161, 128, 196);
	circle(x5, y5, 80);	//purple
	noStroke();
	fill(164, 225, 209);
	scale(s);
	push();
	rotate(radians(r));
	rectMode(CENTER);
	rect(mouseX, mouseY, w, 60);
	pop();

	

}