Count_Squares_Clock.js

const MULT = 3, SIDE = 10 * MULT, WW = SIDE * 17, HH = SIDE * 5;
let digits = [];

function setup() {
  createCanvas(WW, HH);
  frameRate(10);
  digits[0] = new Digit(SIDE*-2, 1);
  digits[1] = new Digit(SIDE*3, 3);
  digits[2] = new Digit(SIDE*7, 2);
  digits[3] = new Digit(SIDE*12.5);
}

function draw() {
  background(50,50,50);
  fill(100);
  let d = new Date(), time = d.toString();
  time = time.replace(/.+(\d\d):(\d\d):.*/g, "$1$2");
  let ds = time.split("");

  for (var i in ds) {
    digits[i].set(ds[i]);
    digits[i].show();
  }

}

function Digit(placement, rows = 3) {
  this.placement = placement;
  this.value = 0;
  this.rows = rows;
  this.color = color(250, 240, 240);
  this.resetLights = function() {
    this.lights = [
      false, false, false,
      false, false, false,
      false, false, false
    ];
    if (this.rows == 1) {
      this.lights.splice(3, 6);
    } else if (this.rows == 2) {
      this.lights.splice(6, 3);
    }
  }
  this.resetLights();

  this.set = function(v) {
    if (v == this.value) return;
    this.value = v;
    this.resetLights();
    let ps = Array.from(this.lights.keys()), n = v;
    while (n > 0) {
      let p = random(ps);
      let i = ps.indexOf(p);
      ps.splice(i, 1);
      this.lights[p] = true;
      n--;
    }
  }

  this.show = function() {
    push();
    stroke(150);
    translate(this.placement, 10);
    let y1 = 0, y2 = SIDE + SIDE/2, y3 = 3*SIDE;
    let x1 = 0, x2 = SIDE + SIDE/2, x3 = 3*SIDE;

    fill(this.lights[0]?this.color:50); rect(x3, y1, SIDE, SIDE);
    fill(this.lights[1]?this.color:50); rect(x3, y2, SIDE, SIDE);
    fill(this.lights[2]?this.color:50); rect(x3, y3, SIDE, SIDE);
    if (rows > 1) {
      fill(this.lights[3]?this.color:50); rect(x2, y1, SIDE, SIDE);
      fill(this.lights[4]?this.color:50); rect(x2, y2, SIDE, SIDE);
      fill(this.lights[5]?this.color:50); rect(x2, y3, SIDE, SIDE);
    }
    if (rows > 2) {
      fill(this.lights[6]?this.color:50); rect(x1, y1, SIDE, SIDE);
      fill(this.lights[7]?this.color:50); rect(x1, y2, SIDE, SIDE);
      fill(this.lights[8]?this.color:50); rect(x1, y3, SIDE, SIDE);
    }
    pop();
  }
}