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.