2025-02-28-Map-Demo

let secondBar, minuteBar, hourBar, dayBar, monthBar, yearBar;

​

function setup() {

  createCanvas(600, 600);

}

​

function draw() {

  background(220);

  noStroke();

  //*** SECONDS ***//

  let s = second(); // Getting the current seconds and storing in variable "s"

  secondBar = map(s, 0, 59, 0, width); // mapping the value of "s" onto 

                                      // the width of the canvas

  fill(0, 255, 255);

  rect(0, 0, secondBar, 100);

  //*** MINUTES ***//

  let m = minute();

  minuteBar = map(m, 0, 59, 0, width);

  fill(255, 255, 0);

  rect(0, 100, minuteBar, 100);

  //*** HOURS ***//

  let h = hour();

  // To do 12-hour time, we need to change the value (only if 13 or greater)

  // Solution 1: if statement

  if (h > 12) {

    h = h - 12;

  }

  // Solution 2: modulo operator (%)

  let twelveHourFormat = h % 12;

  if (twelveHourFormat == 0) {

    twelveHourFormat = 12;

  }

  console.log(twelveHourFormat);

  hourBar = map(h, 0, 11, 0, width);

  fill(255, 0, 255);

  rect(0, 200, hourBar, 100);

  stroke(0);

  fill(0);

  textSize(24);

  text(h + ":" + m + ":" + s, width/2, height/2);

  text(`${h}:${m}:${s}`, width/2, height/2 + 50);

}