function setup() {
createCanvas(600, 450);
background(220);
text("p5.js vers 0.9.0 test.", 10, 15);
}
function draw() {
background(240, 156, 215);
var h = min(mouseY/3, 50);
var c = min(mouseY/2, 255);
var w = max(min(mouseY/3, 50), mouseX/6);
noStroke();
fill(c);
//perimeter circles
ellipse(30, 25, w, h);
ellipse(30, 75, w, h);
ellipse(30, 125, w, h);
ellipse(30, 175, w, h);
ellipse(30, 225, w, h);
ellipse(30, 275, w, h);
ellipse(30, 325, w, h);
ellipse(30, 375, w, h);
ellipse(30, 425, w, h);
ellipse(138, 25, w, h);
ellipse(246, 25, w, h);
ellipse(354, 25, w, h);
ellipse(462, 25, w, h);
ellipse(570, 25, w, h);
ellipse(570, 75, w, h);
ellipse(570, 125, w, h);
ellipse(570, 175, w, h);
ellipse(570, 225, w, h);
ellipse(570, 275, w, h);
ellipse(570, 325, w, h);
ellipse(570, 375, w, h);
ellipse(570, 425, w, h);
ellipse(138, 425, w, h);
ellipse(246, 425, w, h);
ellipse(354, 425, w, h);
ellipse(462, 425, w, h);
//lots of layered rectangles
push();
translate(300, 225);
rotate(radians(mouseX));
rectMode(CENTER);
fill(214, 33, 235, mouseX/2); //purple
rect(0, 0, mouseX, mouseX);
fill(48, 167, 246, mouseX/2); //light blue
rect(0, 0, (mouseX-20), (mouseX-20));
fill(33, 236, 141, mouseX/2); //light green
rect(0, 0, (mouseX-40), (mouseX-40));
fill(236, 33, 101, mouseX/2); //hot pink
rect(0, 0, (mouseX-60), (mouseX-60));
fill(236, 128, 33, mouseX/2); //orange
rect(0, 0, (mouseX-80), (mouseX-80));
fill(229, 236, 33, mouseX/2); //yellow
rect(0, 0, (mouseX-100), (mouseX-100));
fill(214, 33, 235, mouseX/2); //purple (start repeat)
rect(0, 0, (mouseX-120), (mouseX-120));
fill(48, 167, 246, mouseX/2); //light blue
rect(0, 0, (mouseX-140), (mouseX-140));
fill(33, 236, 141, mouseX/2); //light green
rect(0, 0, (mouseX-160), (mouseX-160));
fill(236, 33, 101, mouseX/2); //hot pink
rect(0, 0, (mouseX-180), (mouseX-180));
fill(236, 128, 33, mouseX/2); //orange
rect(0, 0, (mouseX-200), (mouseX-200));
fill(229, 236, 33, mouseX/2); //yellow
rect(0, 0, (mouseX-220), (mouseX-220));
fill(214, 33, 235, mouseX/2); //purple (round 3)
rect(0, 0, (mouseX-240), (mouseX-240));
fill(48, 167, 246, mouseX/2); //light blue
rect(0, 0, (mouseX-260), (mouseX-260));
fill(33, 236, 141, mouseX/2); //light green
rect(0, 0, (mouseX-280), (mouseX-280));
fill(236, 33, 101, mouseX/2); //hot pink
rect(0, 0, (mouseX-300), (mouseX-300));
fill(236, 128, 33, mouseX/2); //orange
rect(0, 0, (mouseX-320), (mouseX-320));
fill(229, 236, 33, mouseX/2); //yellow
rect(0, 0, (mouseX-340), (mouseX-340));
fill(214, 33, 235, mouseX/2); //purple (round 4)
rect(0, 0, (mouseX-360), (mouseX-360));
fill(48, 167, 246, mouseX/2); //light blue
rect(0, 0, (mouseX-380), (mouseX-380));
fill(33, 236, 141, mouseX/2); //light green
rect(0, 0, (mouseX-400), (mouseX-400));
fill((236-(mouseX/2)), 33, 101, mouseX/2); //color will change on a scale between hot pink and dark blue
rect(0, 0, (mouseX-420), (mouseX-420));
pop();
//curves
noFill();
stroke(255);
strokeWeight(3);
bezier(0, 0, 200, mouseY, 400, mouseY, 600, 0);
bezier(0, 0, 200, (mouseY - 20), 400, (mouseY - 20), 600, 0);
bezier(0, 0, 200, (mouseY - 40), 400, (mouseY - 40), 600, 0);
bezier(0, 0, 200, (mouseY - 60), 400, (mouseY - 60), 600, 0);
bezier(0, 0, 200, (mouseY - 80), 400, (mouseY - 80), 600, 0);
bezier(0, 450, 200, (450 - mouseY), 400, (450 - mouseY), 600, 450);
bezier(0, 450, 200, (470 - mouseY), 400, (470 - mouseY), 600, 450);
bezier(0, 450, 200, (490 - mouseY), 400, (490 - mouseY), 600, 450);
bezier(0, 450, 200, (510 - mouseY), 400, (510 - mouseY), 600, 450);
bezier(0, 450, 200, (530 - mouseY), 400, (530 - mouseY), 600, 450);
}
I made this to experiment with different shapes, colors, and shapes. My original idea had a circle in the center instead of the rectangle, but after writing it, I realized that you couldn’t tell that the circle was rotating. I tried adding some lines across the circle to get the effect, but then I tried changing the shape and I liked that a lot more. I was also still able to include ellipses along the perimeter of the canvas. For the colors, I used a color reference website and started layering colors that I liked. Once I settled on the ones that I would use, I experimented with the order and the fade.