Adapted from Jumping hand study: https://editor.p5js.org/jfeddersen/sketches/5BcY5sCfw

*/

​

/* Constants */

const HOURS = 12;

const MINUTES = 60;

const BACKGROUND_COLOR = "#FFFFFF"

​

const HOUR_MARKS = {

  weight: 4,

  color: "#C9D2FC"

}

​

const MINUTE_MARKS = {

  weight: 10,

  color: "#EEA5C0"

}

​

const HOUR_HAND = {

  length: 200,

  weight: 4,

  color: "#FFEB3B"

}

​

const MINUTE_HAND = {

  length: 250,

  weight: 5,

  color: "#F37047"

}

​

const SECOND_HAND = {

  length: 150,

  weight: 3,

  color: "#4CAF50"

}

​

let canvasWidth = 600, canvasHeight = 600;

​

let hour, minute, second;          

let divHours, divMinutes;

let hourAngle, minuteAngle, secondAngle; 

​

//Javascript date object

let now = new Date(); 

​

​

function setup() {

  // create canvas

  createCanvas(canvasWidth, canvasHeight);

  // Define time divisions

  divHours = TWO_PI/HOURS;

  divMinutes = TWO_PI/MINUTES;

  frameRate(MINUTES);

  background(BACKGROUND_COLOR);

}

​

function draw() {

  setTime();

  drawClock();

}

​

​

function setTime() {

  now = new Date();

  hour = now.getHours();

  minute = now.getMinutes();

  second = now.getSeconds();

}

​

function setHandAngles() {

  hourAngle = divHours * hour;

  minuteAngle = divMinutes * minute;

  secondAngle = divMinutes * second;    

}

​

function drawClock() {

  drawFace();

  drawHands();

}

​

function drawFace() {

  push();

  translate(width/2, height/2);

  noStroke();

  background(BACKGROUND_COLOR);

  drawMinuteMarks();

  drawHourMarks();

  pop();

}

​

function drawHands() {

  setHandAngles();

  //global transform - move to center and orient rotation(0) to 12 o'clock

  push();

  translate(width/2, height/2);

  rotate(PI);  

​

  drawHourHands();

  drawMinuteHands();

  drawSecondHands();

  pop();

}

​

​

function drawHourMarks() {

  for (let i=0; i<HOURS; i++) {

    strokeWeight(HOUR_MARKS.weight);

    stroke(HOUR_MARKS.color);

    line(0, canvasWidth, 0, canvasWidth*0.45);

    rotate(divHours);

  }

}

​

function drawMinuteMarks() {

  for (let i=0; i<MINUTES; i++) {

    strokeWeight(MINUTE_MARKS.weight);

    stroke(MINUTE_MARKS.color);

    line(0, canvasWidth*0.2, 0, canvasWidth*0.3);

    rotate(divMinutes);

  }

}

​

function drawHourHands() {

  push();

  rotate(hourAngle);

  stroke(HOUR_HAND.color);

  strokeWeight(HOUR_HAND.weight);

  line(0, 0, 0, HOUR_HAND.length);

  pop();

}

​

function drawMinuteHands() {

  push();

  rotate(minuteAngle);

  strokeWeight(MINUTE_HAND.weight);

  stroke(MINUTE_HAND.color);

  line(0, 0, 0, MINUTE_HAND.length);

  pop();

}

​

function drawSecondHands() {

  push();

  rotate(secondAngle);

  strokeWeight(SECOND_HAND.weight);

  stroke(SECOND_HAND.color);

  line(0, 0, 0, SECOND_HAND.length);

  pop();

}

​