createCanvas(windowWidth, windowHeight);

  angleMode(DEGREES);

}

​

function draw() {

  background(0);

  push();

  translate(width / 2, height / 2);

  scale(2);

  rotate(-90);

​

  let hr = hour();

  let mn = minute();

  let sc = second();

​

  strokeWeight(8);

  stroke(255, 100, 150);

  noFill();

  let secondAngle = map(sc, 0, 60, 0, 360);

  // arc(0, 0, 260, 260, 0, secondAngle);

​

  stroke(150, 100, 255);

  let minuteAngle = map(mn, 0, 60, 0, 360);

  minuteAngle += map(sc, 0, 60, 0, 6);

  // arc(0, 0, 280, 280, 0, minuteAngle);

​

  stroke(150, 255, 100);

  let hourAngle = map(hr % 12, 0, 12, 0, 360);

  hourAngle += map(mn, 0, 60, 0, 30);

  // arc(0, 0, 300, 300, 0, hourAngle);

​

  push();

  rotate(secondAngle);

  stroke(255, 100, 150);

  strokeWeight(2);

  line(0, 0, 125, 0);

  pop();

​

  push();

  rotate(minuteAngle);

  stroke(150, 100, 255);

  strokeWeight(8);

  line(0, 0, 100, 0);

  pop();

​

  push();

  rotate(hourAngle);

  stroke(150, 255, 100);

  line(0, 0, 75, 0);

  pop();

​

  stroke(255);

  point(0, 0);

  strokeWeight(4);

  ellipse(0, 0, 300, 300);

  pop();

​

  fill(255);

  noStroke();

  textAlign(CENTER);

  textSize(40);

  text(numFormat(hr, true) + ":" + numFormat(mn, false) + ":" + numFormat(sc, false), width / 2, height / 2 + 350);

}

​

function numFormat(num, h) {

  let formatted = "";

  if (h == true) {

    formatted = str(num % 12);

  } else {

    if (num < 10) {

      formatted = "0" + str(num);

    } else {

      formatted = str(num);

    }

  }

  return formatted;

}