createCanvas(400, 400);

  angleMode(DEGREES); 

​

}

function draw() {

  background(0);

  strokeWeight(3);

​

  translate(200,200);

  rotate(-90);

  //From the video I could understand that mapping is similar to creating a new function. Thought how the functions values work were not fully clear. I understood enough to copy some of the values to match and changed the arcs to match the ars that I drew but I am not 100% comfortable with this function as of yet. Some explaining in an office hour may help.

  //Seconds arc

  stroke(155)

  fill(0);

  let sc = map(second(), 0, 60, 0, 360)

  arc(0, 0, 250, 250, 0, second()*6);

  //minutes arc  

  stroke(155);

  fill(0);

  let mn = map(minute(), 0, 60, 0, 360)

  arc(0, 0, 150, 150, 0, minute()*6);

​

  //hour arc

  stroke(155);

  fill(0);

  let hr = map(hour() % 12, 0, 12, 0, 360)

  arc(0, 0, 50, 50, 0, hour()*30);

  //I did not full understand what push and pop do

  fill(155)

  circle(0,0,5)

  //Second Hand

  stroke(255,0,100)

  push();

  rotate(sc);

  strokeWeight(3);

  line(5,0,130,0);

  pop()

  //Minute hand

  push();

  rotate(mn);

  strokeWeight(3);

  line(5,0,90,0);

  pop()

  //Hour hand

  push();

  rotate(hr);

  strokeWeight(3);

  line(5,0,45,0);

  pop()

  //Text

  rotate(90);

  translate(-200,-200);

  strokeWeight(.5);

  fill(255,0,100);

  textSize(22);

  textAlign(CENTER);

  text("12", width/2, 50);

  text("3", 350,height/2);

  text('6', width/2, 350);

  text('9', 50,height/2);

  textSize(10);

  text('1', 275, 80)

  text('2', 325, 125)

  text('4', 325, 275)

  text('5', 275, 320)

  text('7', 125,320)

  text('8', 75,275)

  text('10',75,125)

  text('11',125, 80)

​

​

}

​