Project-03: Dynamic Drawing

// Lauren Kenny (lkenny)
// Project 3 - Dynamic Drawing
// Section A

var xpos = 10;
var ypos = 10;
var xstep = 30;
var ystep = 30;
var r = 200;
var g = 10;
var b = 10;
var d = 5;

function setup() {
    createCanvas(450, 600);
    frameRate(35);
    background(220);
}

function draw() {
    //background gets lighter as you move your mouse down
    background(0+mouseY*0.1);
    //color changes with mouse position
    r = .5*mouseX;
    g = .5*mouseY;
    b = 75;
    //creates grid of circles
    //color and size change with mouse position
    noStroke();
    fill(r, g, b);
    for (let j = 0; j < width; j++) {
        for (let i = 0; i < height; i++) {
            ellipse(xpos+(xstep*j), ypos+(ystep*i), (d+mouseY*0.02), (d+mouseY*0.02));
        }
    }
    //ellipse moves with mouse
    stroke(r, g, b);
    noFill();
    ellipse(mouseX, mouseY, 150, 150);
    //changes the horizontal spacing between the circles
    if (xstep > 40) {
        xstep = 30
    }
    if (30<xstep<40) {
        xstep = xstep + 1
    }      
}