var sec;

var mins;

var startTime = 0;

var currentTime = 0;

var timer;

var font;

var inputMin = 6;

let c;

let c2;

let bc;

var hm = 0;

var hs = 0;

var lhm = 0;

var lhs = 0;

​

function setup() {

  createCanvas(400, 400);

​

  startTime = millis(); //check startTime

​

  //can pull inputMin  from a GUI if needed 

  timeLeft = inputMin * 60;

​

  textAlign(CENTER, CENTER);

  textSize(120);

  c = color('#400082');

  c2 = color('#fe346e');

  bc = color('#f1e7b6');

  // initial location and size

​

  background(bc);

​

}

​

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

  // fill(0);

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

}

​

//reset

if (currentTime == timeLeft) {

  currentTime = 0; //restart

​

​

}

​

function draw() {

  background(bc);

  noStroke();

  timerIt();

​

  //visualise it

  drawCounter();

​

​

}

​

function drawCounter() {

  //seconds

​

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

  lhs = lerp(lhs, hs, 0.025);

  fill(c);

  arc(width/2, 100, 150, 150, radians(0), radians(lhs));

  // fill(0);

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

​

  //minutes

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

  lhm = lerp(lhm, hm, 0.08);

  fill(c2);

  arc(width/2, height-100, 150, 150, 0, radians(lhm));

  // fill(0);

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

​

}

​

​

​

​

function colMins() {

  if (sec % 60 == 0) { //every minute

    print('min');

    c = color(random(255), random(255), random(255));

  }

}