var sec;

var mins;

var startTime = 0;

var currentTime = 0;

var timer;

var font;

var inputMin = 25;

var hm = 0;

var hs = 0;

var lhm = 0;

var lhs = 0;

​

function preload() {

  //font= loadFont('SourceCodePro-Regular.ttf');

  font = loadFont('Roboto-Medium.ttf');

​

}

​

function setup() {

  createCanvas(400, 400);

​

  startTime = millis(); //check startTime

​

  //can pull inputMin  from a GUI if needed 

  timeLeft = inputMin * 60;

  textFont(font);

  textAlign(CENTER, CENTER);

  textSize(72);

​

​

}

​

function convertSec(s) { //seconds converter parse number through it.

  mins = floor(s / 60);

  sec = s % 60; //remainder of division of 60. 

  return nf(mins, 2) + ':' + nf(sec, 2);

​

}

​

​

function timerIt() {

  currentTime = floor((millis() - startTime) / 1000);

​

  timer = convertSec(timeLeft - currentTime);

  //print(timer);

  // text(timer, width / 2, height / 2);

}

​

//reset

if (currentTime == timeLeft) {

  currentTime = 0; //restart

​

​

}

​

function draw() {

  background(255);

  timerIt();

​

  //visualise it

  drawCounter();

}

​

function drawCounter() {

​

​

  noStroke();

  var offset = (width / 3) / 2;

​

​

  hm = floor(map(mins, 0, inputMin, height, 0));

  lhm = lerp(lhm, hm, 0.08);

  fill(255, 255, 130, 100);

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

  fill(0);

  text(nf(mins, 2), width / 4, height / 2);

​

  hs = map(sec, 0, 60, height, 0);

  lhs = lerp(lhs, hs, 0.08);

  fill(190, 130, 255, 100);

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

  fill(0);

  text(nf(sec, 2), width - (width / 4), height / 2);

​

}