//decrement a second example referenced/forked from PaulGSA 

//https://editor.p5js.org/PaulGSA/sketches/gZ9GNmqcf?fbclid=IwAR2m3OyFCXKRUdIe8v0gnSiGWqsnDDlOJAl-V0PpjpuA9ZoVsJ3WRW57-4s

*/

var h, m, s;

var c, c2, bc;

var rows = 8;

var cols = 8;

var colStep, rowStep;

var gridSize = 50;

var dotSize = 40;

var sec = 61;

var timer;

​

function setup() {

  createCanvas(cols * gridSize, rows * gridSize);

  colStep = width / cols;

  rowStep = height / rows;

  textAlign(CENTER, CENTER);

  textSize(120);

  colorMode(HSB, 255);

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

  bc = color('#ecfbfc');

  background(bc);

  resetTimer();

}

​

function draw() {

  background(bc);

  translate(gridSize / 2, gridSize / 2);

  checkTimer();

  gridSec();

}

​

function resetTimer() {

  timer = millis() + 1000;//current timer + every second

}

​

function checkTimer() {

  if (millis() >= timer) {//every sec 

    resetTimer();

    sec--;

    if (sec == 1) {

      sec = 61;

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

    }

  }

}

​

function gridSec() {

  ellipseMode(CENTER);

  var fillCounter = 0;

  for (var j = 0; j < height; j += rowStep) {

    for (var i = 0; i < width; i += colStep) {

      fillCounter++;

      if (fillCounter < sec) {

        noStroke();

        fill(c);

      } else {

        stroke(c);

        noFill();

      }

      circle(i, j, dotSize, dotSize);

    }

  }

}

​

​

​

// var timeLeft = 300;

// var sec;

// var mins;

// var startTime = 0;

// var currentTime = 0;

// var timer;

// var font;

// var inputMin = 6;

// let c;

// let c2;

// let bc;

// var Xs = 0;

// var Ys = 0;

// var step = 30;

// var csize = 20;

// var lasteq = 0;

​

​

// function setup() {

//   createCanvas(500, 500);

​

//   startTime = millis(); //check startTime

​

//   //can pull inputMin  from a GUI if needed 

//   timeLeft = inputMin * 60;

​

//   textAlign(CENTER, CENTER);

//   textSize(120);

//   c = color('#f78259');

//   c2 = color('#aeefec');

//   bc = color('#f8eeee');

//   // initial location and size

​

//   background(bc);

​

//   gridSec();

//   colMins();

// }

​

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

//   timerIt();

​

//   //visualise it

//   drawCounter();

// }

​

// function drawCounter() {

​

//   ellipseMode(CENTER);

//   //move a filled circle proportionate space to a

//   //second. The whole grid should unfill in 1 minute/60 seconds. 

//   var eq = floor(sec % (width / step));

//   //var eq = floor(sec % width);

//   print(eq);

//   if (eq != lasteq) {

//     Xs = eq * step;

//     fill(bc);

//     stroke(c);

//     circle(Xs + step, Ys + step, 20, 20);

​

​

//     if (eq <= 0) {

//       Xs = 480;

//       print('move');

//       Ys += step;

//     }

//   }

//   lasteq = eq;

​

​

​

// }

​

// function gridSec() {

//   ellipseMode(CENTER);

//   for (var i = 0; i < width; i += step) {

//     for (var j = 0; j < height; j += step) {

//       noStroke();

//       fill(c);

//       circle(i + step, j + step, 20, 20);

//     }

//   }

// }

​

​

// function colMins() {

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

//     print('min');

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

//   }

// }