Analog Clock

//names a variable

let canvasSize = 400;

​

​

//function for arms of clock

function analogClock() {

  noFill();

  //big circle's color

  stroke('pink')

  //draws circle around clock

  circle(0, 0, 350);

  //second arm code

  //color of second hand

  stroke('pink');

  let secondArm = map(sec, 0, 60, 0, 360);

  push();

​

  rotate(secondArm);

  //draws second arm, declared stroke weight so thinner than other arms

  strokeWeight(3);

  line(0, 0, canvasSize/3, 0);

  pop();

  //minute arm code 

  strokeWeight(8);

  stroke('magenta');

  let minuteArm = map(mn, 0, 60, 0, 360);

  push();

  rotate(minuteArm);

  //draws hour arm

  line(0, 0, canvasSize/4, 0);

  pop();

  //hour arm code

  strokeWeight(8);

  stroke('purple');

  let hourArm = map(hr % 12, 0, 12, 0, 360);

  push();

  rotate(hourArm);

  //draws hour arm

  line(0, 0, canvasSize/5, 0);

  pop();

  push();

  stroke(200);

  point(0, 0);

  pop();

}

​

function setup() {

  createCanvas(400, 400);

  angleMode(DEGREES);

}

​

​

function draw() {

  background(50);

  hr = hour();

  mn = minute();

  sec = second();

  //text font for all numbers

  textFont("Felix Titling");

  textSize(30)

  noStroke();

  fill('black');

  text(hour()%12, 5, 30);

  text(":", 33, 26);

  text(minute(), 40, 30);

  text(":", 75, 26);

  text(second(),83, 30);

​

​

//text size for numbers around the clock  

textSize(45);

//text for numbers

//number 12

​

text('12', 190, 75);

//number 1

text('1', 275, 105);

//number 2

text('2', 315, 150);

//number 3

text('3', 335, 225);

//number 4

text('4', 310, 295);

//number 5

text('5', 255, 340);

//number 6

text('6', 190, 360);

//number 7

text('7', 125, 345);

//number 8

text('8', 75, 295);

//number 9

text('9', 40, 225);

//number 10

text('10', 55, 150);

//number 11

text('11', 115, 100);

  translate(canvasSize/2, canvasSize/2);

  rotate(-90);

​

//draws clock

  analogClock();

}

​