I started with the idea of a water dripping, at first wanting to just have a series of pitchers pouring into each other. However, this seemed rather uninteresting, and also the mechanics of the water pouring seemed to complicated. I thought it would be better to display each time unit differently, so I went with a plant growing in front of a changing sky.
var currentsec = second();
var dropdistance = 200;
var totalminutes = hour()*60 + minute();
var sunlight;
var waterlevel = 0;
function setup() {
createCanvas(300, 300);
angleMode(DEGREES);
}
function draw(){
totalminutes = hour()*60 + minute();
sunlight = round(abs(totalminutes/3 - 240)); //ensures that sunlight value is greatest when totalminutes is half of the midnight value
background(120 - sunlight/2, 240 - sunlight, 240 - sunlight) //background changes gradually each minute; is darkest in the evening and early morning, lightest during the day
if(currentsec != second()){ //if start of a new second, create droplet at top of canvas
dropdistance = 0;
}
else {
dropdistance += 5; //allow droplet to fall
}
currentsec = second();
waterlevel = second();
noStroke()
fill(0, 255, 255);
ellipse(100, dropdistance, 6, 6); //draw droplet
rect(0, 300 - (waterlevel/2), 300, waterlevel/2); //draw water at the bottom
stroke('green');
strokeWeight(7);
var plantheight = 270 - minute()*4;
line(120, 300 - (waterlevel/2), 120, plantheight); //draw plant stalk
noStroke();
fill('green'); //draw plant leaves
triangle(120, plantheight, 120 - 15, plantheight - 20, 120 - 40, plantheight - 10);
triangle(120, plantheight, 120 + 15, plantheight - 20, 120 + 40, plantheight - 10);
}