sketch
function setup() {
createCanvas(400, 400);
rectMode(CENTER);
}
function draw() {
background(30, 30, 40);
noStroke();
translate(200, 200);
let angle = mouseY;
rotate(radians(angle));
//rectangle
translate(-200, -200);
fill(221, 115, 115);
var m = max(min(mouseX, 400), 0);
var size = m * 350.0 / 400.0;
rect(10 + m * 190.0 / 400.0, 200.0,
size/2, size/2);
fill(234, 217, 76);
size = 350 - size;
rect(200 + m * 190.0 / 400.0, 200.0,
size/2, size/2);
//circles
fill(209, 209, 209);
var m = max(min(mouseY, 400), 0);
var size = m * 350.0 / 400.0;
circle(10 + m * 190.0 / 400.0, 200.0,
size/2);
fill(81, 163, 163);
size = 350 - size;
circle(200 + m * 190.0 / 400.0, 200.0,
size/2);
//small circle
var m = min(min(mouseX, 400), 0);
var size = m * 350.0 / 400.0;
fill(100, 178, 200);
size = 250 - size;
circle(m * 190.0 / 400.0, 200.0,
size/10);
//small circle pink
var m = min(min(mouseX, 400), 0);
var size = m * 350.0 / 400.0;
fill(240, 178, 200);
size = 250 - size;
circle(width - (m * 190.0 / 400.0), height - (200.0),
size/10);
//vertex circles
fill(59, 53, 97);
var m = max(min(mouseY, 400), 0);
var size = m * 350.0 / 400.0;
circle((10 + m * 190.0 / 400.0) + 100, (200.0) + 100,
size/5);
fill(196, 224, 249);
size = 350 - size;
circle((200 + m * 190.0 / 400.0) - 100, (200.0) - 100,
size/5);
//other vertex circles
fill(171, 73, 103);
var m = max(min(mouseY, 400), 0);
var size = m * 350.0 / 400.0;
circle(width - ((10 + m * 190.0 / 400.0) + 100), height - ((200.0) + 100),
size/5);
fill(173, 246, 177);
size = 350 - size;
circle(width - ((200 + m * 190.0 / 400.0) - 100), height - ((200.0) - 100),
size/5);
}
I was inspired by random movements of shapes and the pattern that could be formed from it. The color palette was a big factor in this project.