The idea for this project began as portraying time by building – I was going to use a system in which blocks fall into place to cover the entire screen at the end of the day. Realizing I didn’t know how to do this, I pivoted to something involving filling, so I made 24 tanks and had them increase in “Oil’ per minute and have the “drops” moving every second, so that they would all be filled at the end of the day. Then I wanted to add a psychological component. We experience the speed of time very relatively – the years in the beginning of your life are experienced as “slower” because you are comparing them to a smaller amount of previously lived years than say, an 80 year old. And so I applied this concept – the operation increases every second for each minute, and it also increases for every hour of the day. However, the tanks still fill up according to minutes – a reminder that everyone, no matter age, has the same 24 hours each day. This also serves for another metaphor – we put more work and effort into life (more drops, faster drops), as we are older, but it doesn’t change the amount of time we have. And lastly, I wanted to add an environmental undertone by using oil, a precious resource that is running out.
var w = [0,12,24,36,48,60,72,84,96,108,120,132,144,156,168,180,192,204,216,228,240,252,264,276]; //the containers filled with oil
var boxX = 1 //oil pipe fill rate start
var dropY = 1 //drip rate start
var ball = [9.5,21.5,33.5,45.5,57.5,69.5,81.5,93.5,105.5,117.5,129.5,141.5,153.5,165.5,177.5,189.5,201.5,213.5,225.5,237.5,249.5,261.5,273.5] //reference balls
var d = []; //amount of drops
function setup() {
createCanvas(286, 60); //light blue
}
function draw() {
frameRate(second()+1); //factory speeds up
background(68-hour()*2,185-hour()*2,243-hour()*3); //light blue, darkening with hours
fill(189,189,189); //light brown
rect(0,4,500,3) //oil pipe
for (x=0;x<285;x+=12){
fill(169,136,80) //light brown
rect(x,30,9,30) //oil tanks
}
for (var i=0; i < w.length; i++) {
fill(0) //black
if (hour()>i){
rect(w[i],30,8,30) //draw full oil tank
}
if (hour()==i){
var oilLevel = height-minute()/2 //oil filling
rect(w[i],oilLevel,8,oilLevel); //draw oil tank filling
}
}
var faucetPos = hour()*11.875+6 //aligning faucet to be above corresponding tank
if(boxX>faucetPos){ //restart oil and drip when oil hits faucet
boxX=0 //start of canvas
dropY=5 //faucet spout level
}
boxX=boxX+faucetPos/60; //travel rate
rect(0,5,boxX,1) //oil travelling in pipe
fill(0); //black
ellipseMode(CORNER);
dropY = dropY+hour()/5; //drop rate
for (var i=0; i < 24; i++) {
circle(faucetPos,dropY-d[i],1.3); //drop tip
triangle(faucetPos+.25,dropY-d[i],faucetPos+.6,dropY-d[i]-1,faucetPos+1.05,dropY-d[i]);
if(hour()>i){
d.push(4*i*2); //add a drop
}
}
fill(255,0,0); //red
rect(0,.5,second()*5,2) //reference bar at top
fill(150,150,150); //medium gray
rectMode(CENTER);
rect(faucetPos,5,10,5); //faucet bottom
rect(faucetPos,0,5,5); //faucet top
rectMode(CORNER);
for (var i=0; i < ball.length; i++) {
fill(0+second()*4.25,0,0)
circle(ball[i],height/2+second()/2,2)
}
stroke(0)
}