​

let startTime;

let TP = 20;

let BT = TP + 240;

let spin = 0.0;

function setup() {

  createCanvas(200, 300, WEBGL);

    startTime = millis() ;//- (70*1000);

}

​

function draw() {

      //get difference in time from start in seconds

translate(-100,-150);

    let sec = round((millis() - startTime ) / 1000);

​

  //usually grey, but we flash white 3 times after...

     if(sec < 60 - 1) {

       background(128);

        stroke(255);

     } else {

       if(sec < 64 && sec %2 == 1 ){

         background(255);

          stroke(128);

       } else {

       background(128);

        stroke(255);

       }

     }  

       for(let i = 0; i < 60; i++){

     //for hourglass "bend in"

      let sideoffset = 3 * constrain((i/2) - 15,0,60);

      if(i > sec){ //draw at top -- grain not down yet

          let baseline = TP+((i/2) *4);         

           if(i % 2 == 0){

          line(50 + sideoffset,baseline,98,baseline); 

          line(50 + sideoffset,baseline+1,98,baseline+1); 

        } else {

          line(150  - sideoffset,baseline,102,baseline); 

          line(150  - sideoffset,baseline+1,102,baseline+1);

        }

      } else { //draw at bottom

          let baseline = BT-((i/2) *4);         

                if(i % 2 == 1){

​

          line(50 + sideoffset,baseline,98,baseline); 

          line(50 + sideoffset,baseline+1,98,baseline+1); 

        } else {

          line(150  - sideoffset,baseline,102,baseline); 

          line(150  - sideoffset,baseline+1,102,baseline+1);

        }

      }

    }

      //do wireframe button box

    noFill();

  push();

    translate(180,280);    

    rotateX(spin);

      rotateY(spin);

        rotateZ(spin);

    box(10);

  pop();

    //spin box if time is up, just for fun...

     if(sec >= 60 - 1) {spin += .01;}

}

​

​

​

​

function mouseReleased(){

 startTime = millis();

}

​

​

function keyPressed(){

 startTime = millis();

}