It was alot of fun making this peice. It was really hard to figure out where to start, but when I decided to split the hour, minute, and second into different parts, I was able to better figure out what to do.
sketch
var lengt = 10;
var hr;
var min;
var sec;
function setup() {
createCanvas(480, 480, WEBGL);
hr = hour();
min = minute();
sec = second();
text("p5.js vers 0.9.0 test.", 10, 15);
ellipse(240,240,480);
}
// drawing a plant that grows and dies at 24 hours but then grows from the stump again
function draw() {
background(220);
sec = second();
min = minute();
sec = second();
thePlant(hr);
theSky(min,hr);
theLeaves(sec);
}
function theLeaves(second){ //the leaves or flower changes based on the second
fill("purple");
cone(10+second,65,16,3);
}
function thePlant (hr){ //each hour adds length to the plant
fill("brown");
translate(0,100);
cylinder(60, 100, 16, 16);
//the actual plant
translate(0,-70);
fill("green");
cylinder(20, lengt*hr, 16, 16);
}
function theSky (min,hr){ //changes based on the 12 hr system
if (hr <= 12){
fill(0,0,0.3472*(min + (60*hr)));
}else{
fill(0,0,255 - 0.3472*(min + (60*hr)));
}
rect(-480,-480,960,960);
}