Abstract Clock – Oil Tanks

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.

Oil Tanks
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)
 


}

Leave a Reply