Project 02 – Dynamic Drawing

//Stefanie Suk
//15104 Section D

var x = 180; //starting position of rectangle 
var y = 200; //y position of rectangle

function setup() {
    createCanvas(600, 450);
}

function draw() {
	background(0);

	//white rectangle box
	noFill()
	stroke(255);
	strokeWeight(2);
	rect(150, 160, 310, 125);
	
	// Rectangles from left to right
	noStroke();
	fill(235, 234, 232); //color of rectangle
	rect(x, map(mouseX, 0, width, y, y+8), 10, 50); //position of rectangle
	fill(172, 176, 191);
	rect(x+20, map(mouseX, 0, width, y, y-2), 10, 40);
	fill(178, 208, 235);
	rect(x+20*2, map(mouseX, 0, width, y, y+5), 10, 30);
	fill(195, 217, 240);
	rect(x+20*3, map(mouseX, 0, width, y, y-5), 10, 45);
	fill(214, 231, 243);
	rect(x+20*4, map(mouseX, 0, width, y, y-3), 10, 15);
	fill(226, 238, 249);
	rect(x+20*5, map(mouseX, 0, width, y, y+3), 10, 50);
	fill(214, 231, 243);
	rect(x+20*6, map(mouseX, 0, width, y, y+7), 10, 35);
	fill(195, 217, 240);
	rect(x+20*7, map(mouseX, 0, width, y, y-7), 10, 60);
	fill(178, 208, 235);
	rect(x+20*8, map(mouseX,0,width,y,y-2), 10, 50);
	fill(172, 176, 191);
	rect(x+20*9, map(mouseX, 0, width, y, y+2), 10, 30);
	fill(235, 234, 232);
	rect(x+20*10, map(mouseX, 0, width, y, y-6), 10, 35);
	fill(172, 176, 191);
	rect(x+20*11, map(mouseX, 0, width, y, y-4), 10, 10);
	fill(178, 208, 235);
	rect(x+20*12, map(mouseX, 0, width, y, y+5), 10, 20);


	// Top circles, left to right
    let d = map(mouseY, 0, width, 15, 30); //scale mouseY value
    fill(249, map(mouseX, 0, height, 240, 200), 225); //color of circle, change
    ellipse(width/7, height/7, d, d); //position and size of circle
    fill(254, map(mouseX, 0, height, 230, 240), 223);
    ellipse(width/7*2, height/4, d, d);
    fill(map(mouseX, 0, height, 230, 190), 186, 192);
    ellipse(width/7*3, height/7, d, d);
    fill(map(mouseX, 0, height, 190, 230), 132, 143);
    ellipse(width/7*4, height/4, d, d);
    fill(179, 203, map(mouseX, 0, height, 130, 180));
    ellipse(width/7*5, height/7, d, d);
    fill(203, 220, map(mouseX, 0, height, 180, 230));
    ellipse(width/7*6, height/4, d, d);

    // Bottom circles, left to right
    fill(203, 220, map(mouseX, 0, height, 180, 230));
    ellipse(width/7, height/8*6, d, d);
    fill(179, 203, map(mouseX, 0, height, 130, 180));
    ellipse(width/7*2, height/7*6, d, d);
    fill(map(mouseX, 0, height, 190, 230), 132, 143);
    ellipse(width/7*3, height/8*6, d, d);
    fill(map(mouseX, 0, height, 230, 190), 186, 192);
    ellipse(width/7*4, height/7*6, d, d);
    fill(254, map(mouseX, 0, height, 230, 240), 223);
    ellipse(width/7*5, height/8*6, d, d);
    fill(249, map(mouseX, 0, height, 240, 200), 225);
    ellipse(width/7*6, height/7*6, d, d);
}