let min;

let sec;

​

function setup() {

  createCanvas(600, 600);

}

​

function draw() {

  background(50);

  translate(width / 2, height / 2);

​

  hr = hour();

  min = minute();

  sec = second();

​

  strokeWeight(1);

  stroke(255);

  fill(255);

  textAlign(CENTER, CENTER);

  textSize(32);

  text(hr + ":" + min + ":" + sec, 0, 0);

​

  drawClock();

}

​

function drawClock() {

  strokeWeight(50);

  stroke(255);

  noFill();

​

  angleMode(DEGREES);

  rotate(270);

  angleMode(RADIANS);

  stroke(200, 150, 50, 60);

  ellipse(0, 0, 400, 400);

  let endSec = map(sec, 0, 59, 0, TWO_PI);

  stroke(200, 150, 50);

  arc(0, 0, 400, 400, 0, endSec);

​

  stroke(150, 50, 200, 60);

  ellipse(0, 0, 300, 300);

  let endMin = map(min, 0, 59, 0, TWO_PI);

  stroke(150, 50, 200);

  arc(0, 0, 300, 300, 0, endMin);

​

  stroke(50, 200, 150, 60);

  ellipse(0, 0, 200, 200);

  let endHr = map(hr, 0, 24, 0, TWO_PI);

  stroke(50, 200, 150);

  arc(0, 0, 200, 200, 0, endHr);

}