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);
}