Dynamic Drawing

sketch
function setup() {
    createCanvas(400, 400);
}

function draw() {
    background(0);
    fill(255, 255, 0);
    var m = max(min(mouseX, 400), 0);
    var size = m * 350.0 / 400.0;
    ellipse(10 + m * 190.0 / 400.0, height/4, size, size); //yellow circle
    fill(255, 0, 0);
    ellipse(200 + m * 190.0 / 400.0, 3*height/4, size, size); //red circle
    size = 350 - size;
    fill(0, 0, 255);
    ellipse(200 + m * 190.0 / 400.0, height/4, size, size); //blue circle
    fill(0,255,0); 
    ellipse(10 + m * 190.0 / 400.0, 3*height/4, size, size); //green circle

}

I really liked the live movements of the squares in the example, so I took my own spin-off of it using circles. The trickiest part was figuring out how to make it change size diagonally.

Leave a Reply