Project-03 Dynamic Drawing

Because I had trouble figuring out where to begin on this project, I took a more structured approach and thought of a concept and composition beforehand. I chose to depict the rotting of a banana as time passes, an experience that is unfortunately all too familiar to me 🙁

zimmy banan


function setup() {
    createCanvas(480, 640);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
	background (255, 246, 234);
	fill (247, 210, 228);
	noStroke();
	rect (0, 330, 480, 310); // table

	fill(200, 138, 94);
	circle(100, 150, 145);
	fill(255, 255, 255);
	circle(100, 150, 130); // clock

	fill(14, 16, 51);
	push();
	translate(100, 150); // center of clock
	rotate(radians(mouseX/20)); // rotates at 1/60 of the speed of minute hand
    ellipse(0, -15, 4, 30); // hour hand 
	pop();

	push();
	translate(100, 150); // center of clock
	rotate(radians(mouseX*3)) // rotates 60x speed of hour hand
	ellipse(0, -25, 4, 50); // minute hand
	pop();

	stroke(140, 156, 190);
	strokeWeight(10);
	noFill();
	bezier(280, 208, 280, 100, 400, 100, 400, 208);
	line(400, 208, 400, 485);
	fill(140, 156, 190);
	noStroke();
	ellipse(400, 500, 105, 40); // banana hook

	fill(140, 156, 190, 50);
	ellipse(constrain(mouseX, 160, 235), 550, 200, 45); // right shadow; moves in a confined space with mouseX
	ellipse((320-(constrain(mouseX, 160, 220))), 550, 200, 45); // left shadow; moves opposite mouseX

	fill(254, 218, 65);
	stroke(228, 170, 36);
	strokeWeight(2);
	arc(80, 253, 400, 400, radians(-15), radians(105), CHORD); // leftmost banana
	arc(100, 280, 400, 400, radians(-25), radians(100), CHORD); // middle banana
	arc(120, 315, 400, 400, radians(-35), radians(90), CHORD); // rightmost banana
    noFill();
	arc(-9, 270, 600, 590, radians(-14), radians(50)); // detail on rightmost banana

	noStroke();
	fill(134, 92, 36, mouseX-40);
	ellipse(273, 286, 10, 8);
	ellipse(270, 326, 20, 33);
	ellipse(240, 420, 43, 45);
	fill(134, 92, 36, mouseX-100);
	ellipse(290, 360, 36, 45);
	ellipse(240, 375, 40, 40);
	fill(134, 92, 36, mouseX-200);
	ellipse(198, 460, 30, 20);
	ellipse(285, 400, 8, 12);
	arc(185, 368, 100, 100, radians(-50), radians(105), CHORD); // spots on rightmost banana appear at different times

	fill(134, 92, 36, mouseX-100);
	ellipse(140, 425, 28, 22);
    ellipse(190, 345, 14, 14)
	fill(134, 92, 36, mouseX-300);
	ellipse(150, 400, 30, 36) // spots on middle banana

	fill(134, 92, 36, mouseX-200);
	ellipse(80, 430, 14, 13);
	arc(80, 370, 80, 80, radians(-20), radians(110), CHORD); // spots on leftmost banana

    push();
    fill(254, 218, 65, mouseY-80);
    textSize(constrain(mouseY/3, 30, 70));
    textAlign(CENTER, CENTER);
    text("yummy", 330, 50);











}

Leave a Reply