// Inspired by a coding challange by Daniël Shiffman, The Coding Train

// see: https://www.youtube.com/watch?v=E4RyStef-gY

​

let amplitude;

​

function setup() {

   createCanvas(400,900); 

   noStroke();

   amplitude = 0.5;

   textAlign(CENTER);

   textSize(75);

}

​

function draw() {

  background(245);

  scale(0.5);

  let h = hour();

  let m = minute();

  let s = second();

    tempDate = new Date();

  let ms = tempDate.getMilliseconds();

  let hr_rotation = amplitude * sin((PI/60)*(m+s/60.0));

  let min_rotation = amplitude * sin((PI/60)*(s+ms/1000.0));

  let sec_rotation = amplitude * sin((PI/1000)*ms);

  // draw hours

  push();

    translate(width,height-height/1.5);

    fill(255,105,150);

    rect(-175,-220,350,10,5);

    fill(150);

    translate(-135,-210);

    if (h % 2 == 0) {

      rotate(hr_rotation);

    }

    rect(-1,0,2,400);

    ellipse(0, 400, 90, 90);

    if (h % 2 == 0) {

      rotate(-hr_rotation);

    }

    translate(90,0);

    rect(-1,0,2,400);

    ellipse(0, 400, 90, 90);

    fill(255);

    text(int(h/10), 0,424);

    fill(150);

    translate(90,0);

    rect(-1,0,2,400);

    ellipse(0, 400, 90, 90);

    fill(255);

    text(h%10, 0,424);

    fill(150);

    translate(90,0);

    if (h % 2 == 1) {

      rotate(-hr_rotation);

    }

    rect(-1,0,2,400);

    ellipse(0, 400, 90, 90);

    if (h % 2 == 1) {

      rotate(hr_rotation);

    }

  pop();

  // draw minutes

  push();

    translate(width,height);

    fill(105,255,150);

    rect(-175,-220,350,10,5);

    fill(150);

    translate(-135,-210);

    if (m % 2 == 0) {

      rotate(min_rotation);

    }

    rect(-1,0,2,400);

    ellipse(0, 400, 90, 90);

    if (m % 2 == 0) {

      rotate(-min_rotation);

    }

    translate(90,0);

    rect(-1,0,2,400);

    ellipse(0, 400, 90, 90);

    fill(255);

    text(int(m/10), 0,424);

    fill(150);

    translate(90,0);

    rect(-1,0,2,400);

    ellipse(0, 400, 90, 90);

    fill(255);

    text(m%10, 0,424);

    fill(150);

    translate(90,0);

    if (m % 2 == 1) {

      rotate(-min_rotation);

    }

    rect(-1,0,2,400);

    ellipse(0, 400, 90, 90);

    if (m % 2 == 1) {

      rotate(min_rotation);

    }

  pop();

  // draw seconds

  push();

    translate(width,height+height/1.5);

    fill(150,105,255);

    rect(-175,-220,350,10,5);

    fill(150);

    translate(-135,-210);

    if (s % 2 == 0) {

      rotate(sec_rotation);

    }

    rect(-1,0,2,400);

    ellipse(0, 400, 90, 90);

    if (s % 2 == 0) {

      rotate(-sec_rotation);

    }

    translate(90,0);

    rect(-1,0,2,400);

    ellipse(0, 400, 90, 90);

    fill(255);

    text(int(s/10), 0,424);

    fill(150);

    translate(90,0);

    rect(-1,0,2,400);

    ellipse(0, 400, 90, 90);

    fill(255);

    text(s%10, 0,424);

    fill(150);

    translate(90,0);

    if (s % 2 == 1) {

      rotate(-sec_rotation);

    }

    rect(-1,0,2,400);

    ellipse(0, 400, 90, 90);

    if (s % 2 == 1) {

      rotate(sec_rotation);

    }

  pop();

}