let dia;

let sl, ml, hl;

let bow

​

function setup() {

    createCanvas(windowWidth, windowHeight);

    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);

    //textFont('Baumans');

}

​

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);

}

​

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

    push();

    translate(x, y);

    rotate(a + PI/2);

    fill(0);

    noStroke();

    text(letter, 0, 0);

    pop();

}