Project 3 – Dynamic Drawings

Move your mouse over the canvas to change the size of the bubbles.
Moving your mouse will also change the colors of the bubbles.
Holding down left click while mousing over the canvas will keep the bubbles on the canvas until you let go of left click.
Left clicking will while moving will change lighten the background.

//holly liu
//section d
//dynamic drawing

var x = 25;
var y = 25;
var s = 20;
var b = 50;

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

function mouseMoved(){														//for as long as mouse is held down, the generated circles will not refesh
	clear();
	background(b);
	draw();
}

function draw(){
	noStroke();
	var r = 0.425 * mouseX;													//r value changes with x movement of mouse; values scaled to size of canvas 
	var g = 0.425 * mouseY;													//g value changes with y movement of mouse; values scaled to size of canvas
	var b = 108;
	fill(r, g, b);
	for (let i = 25; i <= 575; i += 50){									//generates circles
		for(let j = 25; j <= 575; j+= 50){
			s = 75 * exp(((-1) * dist(mouseX, mouseY, i, j))/100); 			//changes size of circles based on distance from mouse
			circle(i, j, s);
		}
	}
}

function mouseClicked(){													//bkg change w/ left click
	b += 10
	if(b == 200){
		b = 50
	}
}