//Time Passed

 let h;

 let m;

 let s;

  //Time Remaining

 let _h;

 let _m;

 let _s;

​

 //Milliseconds within a second

 let ms = 60;

 let _ms = 0;

​

​

 let countdown  = false;

​

function setup() {

  createCanvas(600, 600);

}

​

function draw() {

  background(220);

  textSize(40);

  textFont('Trebuchet MS');

  noStroke();

  //Set lower half to black(night) and upper half to white(day)

  push();

  //day

  fill(255);

  rect(0, 0, width, height/2);

  //night

  fill(0);

  rect(0, 300, width, height/2);

  pop();

​

  //At midnight trigger the countdown effect

  //s == 0 && _s == 60 && m == 0 && _m == 60 && h == 0 && _h == 24

  if (countdown){

    blendMode(DIFFERENCE);

  }

  //Color blends for day

  let day_blend_1 = color(random(0, 65),random(201, 221),random(252, 255));

  let day_blend_2 = color(random(65, 178),random(221, 251),random(255, 255));

  let day_blend_3 = color(random(178, 201),random(251, 246),random(255, 255));

  let day_blend_4 = color(random(201, 248),random(246, 255),random(255, 221));

  let day_blend_5 = color(random(248, 253),random(255, 255),random(221, 226));

  //Color blends for night

  let night_blend_1 = color(random(133, 107),random(89, 73),random(136, 132));

  let night_blend_2 = color(random(107, 72),random(73, 52),random(132, 117));

  let night_blend_3 = color(random(72, 43),random(52, 47),random(117, 119));

  let night_blend_4 = color(random(43, 20),random(47, 24),random(119, 82));

  let night_blend_5 = color(random(20, 7),random(24, 11),random(82, 52));

  //Time passed

  h = hour();

  m = minute();

  s = second();

  //Time remamining

  _h = 24 - hour();

  _m = 60 - minute();

  _s = 60 -second();

  //Milliseconds

  let ms_num = floor(random(0, 999));

  //Progress Bar time remainging

  let h_progress = -300-(-h*5);

  let m_progress = -300-(-m*5);

  let s_progress = -300-(-s*5);

  //Progress Bar time past

  let _h_progress = 300+(-h*5);

  let _m_progress = 300+(-m*5);

  let _s_progress = 300+(-s*5);

  //Progress bar opposite time past

  let s_progress_ = (-300-(+s*5))+300;

  let m_progress_ = (-300-(+m*5))+300;

  let h_progress_ = (-300-(+h*5))+300;

  //Pprogress bars for milliseconds equate to the ms delcared above

  let ms_progress = ms*5;

  let ms_progress_ = _ms*5;

  //Progress hours top left

  push();

  fill(day_blend_1);

  rect(0, 300, 85.71, h_progress);

  pop();

  //Progress minutes top left

  push();

  fill(day_blend_2);

  rect(85.71, 300, 85.71, m_progress);

  pop();

  //Progress seconds top left

  push();

  fill(day_blend_4);

  rect(171.42, 300, 85.71, s_progress);

  pop();

  //Progress millis top left

  push();

  fill(day_blend_5);

  rect(257.13, 300, 42.85, -ms_progress);

  pop();

  //Progress millis bottom right

  push();

  fill(night_blend_5);

  rect(299.98, 300, 42.85, ms_progress);

  pop();

  //Progress seconds bottom right

  push();

  fill(night_blend_4);

  rect(342.84, 300, 85.71, _s_progress);

  pop();

  //Progress minutes bottom right

  push();

  fill(night_blend_2);

  rect(428.55, 300, 85.71, _m_progress);

  pop();

  //Progress hours bottom right

  push();

  fill(night_blend_1);

  rect(514.26, 300, 85.71, _h_progress);

  pop();

  //Progress hours bottom left

  push();

  fill(night_blend_1);

  rect(0, 300, 85.71, -h_progress_);

  pop();

  //Progress minutes bottom left

  push();

  fill(night_blend_2);

  rect(85.71, 300, 85.71, -m_progress_);

  pop();

  //Progress seconds bottom left

  push();

  fill(night_blend_4);

  rect(171.42, 300, 85.71, -s_progress_);

  pop();

  //Progress ms bottom left

  push();

  fill(night_blend_5);

  rect(257.13, 300, 42.85, ms_progress_);

  pop();

  //Progress millis top right

  push();

  fill(day_blend_5);

  rect(299.98, 300, 42.85, -ms_progress_);

  pop();

  //Progress seconds top right

  push();

  fill(day_blend_4);

  rect(342.84, 300, 85.71, s_progress_);

  pop();

  //Progress minutes top right

  push();

  fill(day_blend_2);

  rect(428.55, 300, 85.71, m_progress_);

  pop();

  //Progress hours top right

  push();

  fill(day_blend_1);

  rect(514.26, 300, 85.71, h_progress_);

  pop();

  //Main clock

  push();

  fill(255);

  blendMode(DIFFERENCE);

  text( h , 21.42, 315);

  text( m , 107.13, 315);

  text( s , 192.84, 315);

  text( ms_num , 270.55, 315);

  text( _s , 365.26, 315);

  text( _m , 449.97, 315);

  text( _h , 545.68, 315);

  pop();

  //Loop through ms and when they reach max start over

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

    //text( ms , 57.11, 500);

    if(ms < 0 ){

     ms = 60;

    }

  }

  for (let e = 0; e < 600; e++) {

    //text( _ms , 57.11, 550);

    if(_ms > 60 ){

     _ms = 0;

    }

  }

  //Incrememnt ms every frame

  ms = ms-1.8;

  _ms = _ms+1.8;

  //Suns and Moons

  push();

  blendMode(DIFFERENCE);

  //Seconds sun

  ellipse(s*10, 150, 20, 20);

  //Minutes Sun

  ellipse(m*10, 150, 40, 40);

  //Hours Sun

  ellipse(h*25, 150, 60, 60);

  //Seconds Moon

  ellipse(_s*10, 450, 20, 20);

  //Minutes moon

  ellipse(_m*10, 450, 40, 40);

  //HOurs moon

  ellipse(_h*25, 450, 60, 60);

  pop();

  //At midnight when the tmie is reset the countdown effect is triggered

  if ( s == 0 && _s == 60 && m == 0 && _m == 60 && h == 0 && _h == 24 ) {

    countdown  = true;

  }

​

}

​

​

//Test countdown

function mousePressed() {

  if (!countdown) {

    blendMode(DIFFERENCE);

    countdown = true;

  } else {

    blendMode(BLEND);

    countdown = false;

  }

}

​