5b. Clock

Description

Use second(), minute(), hour(), and map() to make a sketch.

Here is an example I made!

Code

  let sX = 0;
  let mX = 0;
  let hX = 0;

  let r = 6;

  function setup() {
      createCanvas(600, 50);
  }

  function draw() {
      background(50, 75, 62);

      strokeWeight(0.5);
      stroke(200);
      line(0 + r * 2, 0 + r * 2, sX, 0 + r * 2);

      line(0 + r * 2, height / 2, mX, height / 2);
      line(0 + r * 2, height - r * 2, hX, height - r * 2);

      noStroke();

      sX = map(second(), 0, 59, 0 + r * 2, width - r * 2);
      mX = map(minute(), 0, 59, 0 + r * 2, width - r * 2);

      hX = map(hour(), 0, 23, 0 + r * 2, width - r * 2);

      for (let i = 0; i <= 59; i++) {
          let x = map(i, 0, 59, 0 + r * 2, width - r * 2);
          fill(200);
          circle(x, 0 + r * 2, 3);
      }

      for (let i = 0; i <= 59; i++) {
          let x = map(i, 0, 59, 0 + r * 2, width - r * 2);
          fill(200);
          circle(x, height / 2, 3);
      }

      for (let i = 0; i <= 23; i++) {
          let x = map(i, 0, 23, 0 + r * 2, width - r * 2);
          fill(200);
          circle(x, height - r * 2, 3);
      }

      fill(200, 180, 90);
      circle(sX, 0 + r * 2, r * 2);

      fill(120, 120, 80);
      circle(mX, height / 2, r * 2);

      fill(64, 136, 126);
      circle(hX, height - r * 2, r * 2);
  }