var sec;

var mins;

var startTime = 0;

var currentTime = 0;

var timer;

var font;

var inputMin = 10;

var hm = 0;

var hs = 0;

var lhm = 0;

var lhs = 0;

let c;

let c2;

let bc;

​

// 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(120);

  c = color('#f78259');

  c2 = color('#aeefec');

  bc = color('#f8eeee');

}

​

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(bc);

  timerIt();

​

  //visualise it

  drawCounter();

}

​

function drawCounter() {

​

​

  noStroke();

  //seconds

  hs = floor(map(sec, 0, 60, 0, 350));

  lhs = lerp(lhs, hs, 0.025);

  fill(c);

  ellipse(width / 2, height / 2, lhs, lhs);

  // fill(0);

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

​

  //minutes

  hm = floor(map(mins, 0, inputMin, 2, 100));

  lhm = lerp(lhm, hm, 0.08);

  fill(c2);

  ellipse(width / 2, height / 2, lhm, lhm);

  // fill(0);

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

​

}