let posClock;

​

function setup() {

    createCanvas(800, 550);

    angleMode(DEGREES);

    posClock = createVector(width/2, height/2);

​

}

​

function draw() {

    background(0);

    translate(posClock.x, posClock.y);

    rotate(270);

​

    // Variables - Get and save the current value of the 3 basic components of the time:

    let hrs = hour();

    let mins = minute();

    let secs = second();

​

    // Draw the BASE of the clock:

    stroke(0);

    strokeWeight(8);

    fill(255);

    ellipse(0, 0, 300, 300);

    ellipse(0, 0, 260, 260);

​

    // Transforms the value of the 3 basic components of the time (hours, minutes and seconds) with the map function into its equivalent number value in degrees:

    let secsAngle = map(secs, 0, 60, 0, 360);

    let minsAngle = map(mins, 0, 60, 0, 360);

    let hrsAngle = map(hrs % 12, 0, 12, 0, 360);

    // The clock HOUR marks:

    // Mark of the 12 hours:

    push();

    rotate(-90);

    strokeCap(SQUARE);

    strokeWeight(10);

    line(0, 107, 0, 127);

    pop();

​

    // Mark of the 1 hour:

    push();

    rotate(-60);

    strokeCap(SQUARE);

    strokeWeight(10);

    line(0, 107, 0, 127);

    pop();

​

    // Mark of the 2 hours:

    push();

    rotate(-30);

    strokeCap(SQUARE);

    strokeWeight(10);

    line(0, 107, 0, 127);

    pop();

​

    // Mark of the 3 hours:

    push();

    strokeCap(SQUARE);

    strokeWeight(10);

    line(0, 107, 0, 127);

    pop();

​

    // Mark of the 4 hours:

    push();

    rotate(30);

    strokeCap(SQUARE);

    strokeWeight(10);

    line(0, 107, 0, 127);

    pop();

​

    // Mark of the 5 hours:

    push();

    rotate(60);

    strokeCap(SQUARE);

    strokeWeight(10);

    line(0, 107, 0, 127);

    pop();

​

    // Mark of the 6 hours:

    push();

    rotate(90);

    strokeCap(SQUARE);

    strokeWeight(10);

    line(0, 107, 0, 127);

    pop();

​

    // Mark of the 7 hours:

    push();

    rotate(120);

    strokeCap(SQUARE);

    strokeWeight(10);

    line(0, 107, 0, 127);

    pop();

​

    // Mark of the 8 hours:

    push();

    rotate(150);

    strokeCap(SQUARE);

    strokeWeight(10);

    line(0, 107, 0, 127);

    pop();

​

    // Mark of the 9 hours:

    push();

    rotate(180);

    strokeCap(SQUARE);

    strokeWeight(10);

    line(0, 107, 0, 127);

    pop();

​

    // Mark of the 10 hours:

    push();

    rotate(210);

    strokeCap(SQUARE);

    strokeWeight(10);

    line(0, 107, 0, 127);

    pop();

​

    // Mark of the 11 hours:

    push();

    rotate(240);

    strokeCap(SQUARE);

    strokeWeight(10);

    line(0, 107, 0, 127);

    pop();

​

​

    // The NEEDLES of the clock (each for seconds, minutes and hours):

​

    strokeCap(ROUND);

    // Needle for the hours:

    push();

    rotate(hrsAngle);

    stroke(0);

    line(0, 0, 68, 0);

    pop();

​

    // Needle for the minutes:

    push();

    rotate(minsAngle);

    stroke(0);

    line(0, 0, 90, 0);

    pop();

​

    //Needle for the seconds:

    push();

    rotate(secsAngle);

    strokeWeight(4.5);

    stroke(0);

    line(-30, 0, 100, 0, 1, 1);

    pop();

​

    // Point in the center of the clock, as a support for the needles:

    stroke(255, 0, 0);

    point(0, 0);

}