let lastSec;

let cState;

let lastCState;

let particles = [];

let blinked = false;

​

function setup() {

  createCanvas(400, 400);

​

  fill(255);

  textAlign(CENTER);

  textFont('Inconsolata');

  textSize(32);

}

​

/*

Physics system would need...:

- Need array of columns with values for heights

- Scanning to check if any column is too high

- Particle motion for falling particles

- Array for falling particles 

- Behavior for hitting the side of a column vs top of column. 

*/

​

function addZero(i) {

  if (i < 10) {

    i = "0" + i;

  }

  return i;

}

​

function addSpace(i) {

  if (i < 10) {

    i = " " + i;

  }

  return i;

}

​

function draw() {

  background(0);

  noStroke();

  //Convert hours and minutes into seconds, then all / (seconds in a day 86400)

  var percentOfDay = ((hour()*3600) + minute()*60 + second())/86400;

  //print(percentOfDay);

  triangle((width/2)-(400*percentOfDay), 400, (width/2)-2, 400-(percentOfDay*270), (width/2)+(400*percentOfDay), 400); 

  var d = new Date();

  var hr = addSpace(hour());

  var min = addZero(minute());

  var blinker = "";

  //Get milliseconds since last second

  var secChange = d.getMilliseconds();

  //Show the colon for half of each second

  if (secChange < 500){

    blinker = " ";

    cState = true;

  } else {

    blinker = ":";

    cState = false;

  };

  if (cState != lastCState){

    if (cState == true) {

      //Trigger particles

      let t = new Particle(43);

      particles.push(t);

      let b = new Particle(53);

      particles.push(b);

    } else {

      print("Not now");

    }

  }

  lastCState = cState;

  for (let i = 0; i < particles.length; i++) {

    if (particles[i].cull()){

      particles.splice(i,1);

    } else {

      particles[i].update();

      particles[i].show();

    }

  }

  text(hr + blinker + min,(width/2),60);

  lastSec = second();

}

​

class Particle {

  constructor(y) {

    this.x = 200;

    this.y = y;

    this.vx = random(-1,1);

    this.vy = random(-5,1);

  }

  update() {

    this.x += this.vx;

    this.y += this.vy;

    this.vy++;

  }

  show() {

    circle(this.x, this.y, 4);

  }

  cull() {

    if (this.x > 400 || this.x < 0 || this.y > 400 || this.y < 0){

        return true;

    }

  }

};