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
}
}