createCanvas(400, 400);

  frameRate(30);

  angleMode(RADIANS)

}

​

function draw() {

  background(40);

  push();

  translate(width/2, height/2);

  fill(200);

  stroke(200);

  strokeWeight(3);

  drawClock();

  drawTicks();

  pop();

}

​

function drawClock() {

  // Angular time conversions

  let time = { h: map(hour(), 0, 23, PI/2, 5*PI/2), 

               m: map(minute(), 0, 59, PI/2, 5*PI/2), 

               s: map(second(), 0, 59, PI/2, 5*PI/2) };

  console.log(time.h, time.m, time.s)

  h = polarToRect(115, time.h);

  m = polarToRect(90,  time.m);

  s = polarToRect(120, time.s);

  //origin to hour

  line(0, 0, h.x, h.y);

  //second to origin

  line(s.x, s.y, 0, 0);

  //minute to origin

  line(m.x, m.y, 0, 0);

  push();

  strokeWeight(2);

  //Hour to minute

  line(h.x, h.y, m.x, m.y);

  //minute to second

  line(m.x, m.y, s.x, s.y);

  pop();

  noFill();

  circle(0, 0, 275);

}

​

function drawTicks() {

  let rStart = 115;

  let rEnd = 130;

  for(let ang = 0; ang < 2*PI; ang += 2*PI/12) {

    let s = polarToRect(rStart, ang); //start

    let e = polarToRect(rEnd, ang); //end

    line(s.x, s.y, e.x, e.y)  

  }

}

​

function polarToRect(r, ang) {

  let x = r*cos(ang);

  let y = r*sin(ang);

  return {x, y};

}