let initialTime;

const interval = 1000; // one second

​

class Timer {

  constructor(x, y, w, h, color) {

    this.x = x;

    this.y = y;

    this.w = w;

    this.h = h;

    this.velocity = random(0, 1000);

    this.drawTimer();

    this.color = color;

  }

​

  drawTimer() {

    push();

    if (this.color == 'green') {

      fill(288, 47, 35);

    } else {

      fill(135, 179, 45);

    }

    beginShape();

    vertex(this.x, this.y);

    vertex(this.x + this.w, this.y);

    vertex(this.x + this.w, this.y + this.h);

    vertex(this.x, this.y + this.h);

    endShape(CLOSE);

    pop();

  }

​

  updateTime(time) {

    this.drawTimer();

​

​

    fill(255);

    textSize(this.w / 2);

    text(

      `${time}`,

      this.x + (this.w / 2) - 5,

      this.y + (this.h / 2) + 5

    );

​

    const _this = this;

    setTimeout(

      function() {

        if (time == 0) {

          time = 9;

        } else {

          time -= 1;

        }

        _this.updateTime(time);

      },

      this.velocity

    );

  }

}

​

​

function setup() {

  createCanvas(600, 600);

  background(0);

  noStroke();

  Array(15).fill().map((_) => {

    timers.push(new Timer(

      random(width),

      random(height),

      random(20, 40),

      random(20, 40),

      'red'

    ));

  });

  Array(15).fill().map((_) => {

    timers.push(new Timer(

      random(width),

      random(height),

      random(20, 40),

      random(20, 40),

      'green'

    ));

  });

​

  frameRate(600);

  for (let timer of timers) {

    timer.updateTime(9);

  }

}

​

function draw() {

​

}