const mw = 275;

const hw = 250;

​

function setup() {

  createCanvas(400, 400);

}

​

function draw() {

  background(0);

  translate(width / 2, height / 2);

  rotate(-PI / 2);

  noFill();

​

  const h = hour();

  const m = minute();

  const s = second();

​

  strokeWeight(6);

  stroke(200, 100, 100);

  const sAngle = map(s, 0, 60, 0, TWO_PI);

  drawCenterArc(sw, sAngle);

  drawText(s, cos(sAngle - PI / 2) * sw / 2, sin(sAngle - PI / 2) * sw / 2);

  drawLine(sw * 0.4, sAngle);

  const mAngle = map(m, 0, 60, 0, TWO_PI);

  const msAngle = map(s, 0, 60, 0, TWO_PI / 60);

  stroke(200, 200, 100);

  drawCenterArcFrom(mw, mAngle, mAngle + (msAngle || 0.00001));

  stroke(100, 200, 100);

  drawCenterArc(mw, mAngle);

  drawText(m, cos(mAngle - PI / 2) * mw / 2, sin(mAngle - PI / 2) * mw / 2);

  drawLine(sw * 0.3, mAngle + msAngle);

​

  const hAngle = map(h % 12, 0, 12, 0, TWO_PI);

  const hmAngle = map(m, 0, 60, 0, TWO_PI / 12);

  stroke(100, 200, 200);

  drawCenterArcFrom(hw, hAngle, hAngle + (hmAngle || 0.00001));

  stroke(100, 100, 200);

  drawCenterArc(hw, hAngle);

  drawText(h % 12, cos(hAngle - PI / 2) * hw / 2, sin(hAngle - PI / 2) * hw / 2);

  drawLine(sw * 0.2, hAngle + hmAngle);

​

​

  stroke(200, 200, 200);

  point(0, 0);

}

​

function drawCenterArc(d, angle) {

  drawCenterArcFrom(d, 0, angle);

}

​

function drawCenterArcFrom(d, sAngle, eAngle) {

  arc(0, 0, d, d, sAngle, eAngle);

}

​

function drawText(t, x, y) {

  push();

  rotate(PI / 2);

  push();

  stroke(0);

  strokeWeight(4);

  text(t, x, y);

  pop();

  strokeWeight(1);

  text(t, x, y);

  pop();

}

​

function drawLine(l, angle) {

  push();

  rotate(angle);

  line(0, 0, l, 0);

  pop();

}