Project-03

sketch3
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.

Leave a Reply