Project 3: Dynamic Drawing

sketchDownload

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

function draw() {
    background(79, 88, 161); //dark blue
    noStroke();
    fill(252, 243, 199); //light yellow
    ellipse(300, 225, 100, 100); //main center circle

    // restricing the x and y coords of the mouse
    var x = max(min(mouseX, 600), 0);
    var y = max(min(mouseY, 450), 0);
    var d = dist(x, y, 300, 225);
    var size = 60 - 0.16 * d;

    fill(255 - 0.65 * d, 204, 204); //pink   

    ellipse(300, 150 - 0.5 * d, size, size); //circles in clockwise order
    ellipse(350 + 0.5 * d, 170 - 0.5 * d, size, size);
    ellipse(375 + 0.5 * d, 217, size, size);
    ellipse(362 + 0.5 * d, 267 + 0.5 * d, size, size);
    ellipse(320 + 0.1 * d, 297 + 0.5 * d, size, size);
    ellipse(268 - 0.3 * d, 293 + 0.5 * d, size, size);
    ellipse(232 - 0.6 * d, 257 + 0.4 * d, size, size);
    ellipse(228 - 0.5 * d, 205, size, size);
    ellipse(255 - 0.5 * d, 165 - 0.5 * d, size, size);
}

I thought this project was really fun because I got to be super creative with it. The circles move away from the big circle when you move your cursor as well as the size and color.