let dia;

let sl, ml, hl;

let bow;

​

function setup() {

  var canvas = createCanvas(322, 450);

  canvas.parent("canvas-card");

  strokeCap(SQUARE);

​

  cx = width / 2;

  cy = height / 2;

  dia = width;

  if (width > height) dia = height;

  sl = dia * 0.8;

  ml = dia * 0.5;

  hl = dia * 0.2;

​

  textSize(dia * 0.12);

  textAlign(CENTER, CENTER);

}

​

function draw() {

  let sec = second();

  let min = minute() + (second() % 60) / 60;

  let hou = hour() + (minute() % 60) / 60;

  let ss = map(sec, 0, 60, 0, TAU) - PI / 2;

  let mm = map(min, 0, 60, 0, TAU) - PI / 2;

  let hh = map(hou, 0, 24, 0, TAU * 2) - PI / 2;

  let aa = PI * 0.15;

​

  background(255);

  fill(255);

  noFill();

  strokeWeight(dia * 0.002);

  stroke(0);

  arc(cx, cy, sl, sl, ss + aa * 0.45, ss - aa * 0.45);

  dispChar(floor(sec), cx + sl * 0.5 * cos(ss), cy + sl * 0.5 * sin(ss), ss);

  arc(cx, cy, ml, ml, mm + aa * 0.66, mm - aa * 0.66);

  dispChar(floor(min), cx + ml * 0.5 * cos(mm), cy + ml * 0.5 * sin(mm), mm);

  arc(cx, cy, hl, hl, hh + aa, hh - aa);

  dispChar(int(hou % 12), cx + hl * 0.5 * cos(hh), cy + hl * 0.5 * sin(hh), hh);

  point(cx, cy);

  //les cercles dans les angles

  fill(0);

  circle(30, 30, 20);

  circle(322-30, 30, 20);

  circle(30, 450-30, 20);

  circle(322-30, 450-30, 20);

}

​

function dispChar(letter, x, y, a) {

  push();

  translate(x, y);

  rotate(a + PI / 2);

  fill(0);

  noStroke();

  text(letter, 0, 0);

  pop();

}

​