AI Binary Clock - LED Time Display Read time in binary! Six rows of glowing green LED circles repre

function setup() {
  createCanvas(windowWidth, windowHeight);
  textFont('monospace');
}

function draw() {
  // Dark, slightly bluish background for contrast
  background(5, 10, 20);

  const h = hour();
  const m = minute();
  const s = second();

  // Split into decimal digits
  const digits = [
    floor(h / 10), h % 10,
    floor(m / 10), m % 10,
    floor(s / 10), s % 10
  ];

  const rows = digits.length;

  // Layout parameters
  const topMargin = height * 0.12;
  const bottomMargin = height * 0.30; // space for decimal time text
  const availableHeight = height - topMargin - bottomMargin;
  const rowSpacing = (rows > 1) ? availableHeight / (rows - 1) : 0;

  const maxBits = 4;                // maximum bits in any row
  const colSpacing = width * 0.08;  // horizontal distance between LEDs
  const radius = min(colSpacing * 0.3, rowSpacing * 0.25);

  // Draw each row (each decimal digit)
  for (let row = 0; row < rows; row++) {
    const y = topMargin + row * rowSpacing;
    const digit = digits[row];
    const bits = BIT_COUNTS[row];

    // Convert digit to binary string, padded to the right bit count
    // toString(2): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toString
    const binStr = digit.toString(2).padStart(bits, '0');

    // Center this row horizontally based on how many LEDs (bits) it has
    const rowWidth = (bits - 1) * colSpacing;
    const rowStartX = width / 2 - rowWidth / 2;

    for (let i = 0; i < bits; i++) {
      const x = rowStartX + i * colSpacing;
      const bitOn = binStr[i] === '1';

      // Draw glow first (bigger, semi-transparent circle)
      if (bitOn) {
        noStroke();
        fill(80, 255, 120, 70); // soft green glow
        circle(x, y, radius * 4);
      }

      // Core LED circle
      noStroke();
      if (bitOn) {
        fill(120, 255, 170); // bright green for "1"
      } else {
        fill(25, 45, 35);    // dark greenish gray for "0"
      }
      circle(x, y, radius * 2);

      // Small highlight for lit LEDs
      if (bitOn) {
        fill(255, 255, 255, 100);
        circle(x - radius * 0.4, y - radius * 0.4, radius * 0.7);
      }
    }
  }

  // Decimal time display under the binary LEDs
  const hStr = nf(h, 2); // nf(): https://p5js.org/reference/#/p5/nf
  const mStr = nf(m, 2);
  const sStr = nf(s, 2);

  fill(190);
  textAlign(CENTER, CENTER);
  textSize(min(width, height) * 0.06);
  text(`${hStr}:${mStr}:${sStr}`, width / 2, height - bottomMargin / 2);
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}