Project 06 – Abstract clock

//Angela Yang
//Section C

function setup() {
  createCanvas(450, 440);
  angleMode(DEGREES);
}

function draw() {
  //Default side bar
  background(0);
  push();
  translate(225, 285);
  rotate(-90);

  //Clock face
  fill("white");
  ellipse(0, -12, 5, 5);
  ellipse(0, 12, 5, 5);
  stroke("white");
  strokeWeight(3);
  line(-18, -5, -18, 3);

  let hours = hour();
  let minutes = minute();
  let seconds = second();

  stroke(255, 100, 150);
  noFill();
  strokeWeight(5);
  let end = map(seconds, 0, 60, 0, 360);
  arc(0, 0, 100, 100, 0, end);

  stroke("#0BDA51");
  let end2 = map(minutes, 0, 60, 0, 360);
  arc(0, 0, 80, 80, 0, end2);

  stroke("yellow");
  let end3 = map(hours, 0, 24, 0, 360);
  arc(0, 0, 60, 60, 0, end3);
  pop();

  fill(255);
  noStroke();
  text(hours + ":" + minutes + ":" + seconds, 390, 20);

  // stroke()
  push();
  translate(112.5, 112.5);
  noFill();
  stroke(255);
  ellipse(0, 0, 70);
  noStroke();

  rotate(-90);
  
  //Hour clock on the left corner 
  for (let i = 0; i < 12; i++) {
    if (i == hours % 12) {
      fill("yellow");
      ellipse(50, 0, 15);
    } else {
      fill(255);
      ellipse(50, 0, 10);
    }
    rotate(360 / 12);
  }
  pop();

  push();
    translate(225 + 112.5, 112.5);
    rotate(-90);
    noFill();
    stroke(255);
    ellipse(0, 0, 110);
    noStroke();
    rotate(-90);
  
  //Minute clock on the right corner 
  for (let i = 0; i < 60; i++) {
    if (i == minutes % 60) {
      fill("#0BDA51"); //Draws the indicator circle 
      ellipse(70, 0, 8);
    } else {
      fill(255);
      ellipse(70, 0, 4);
    }
    rotate(360 / 60);
  }
  pop();
  
  //Second clock in the middle 
  push();
   translate(225, 112.5 + 170);
   noFill();
   stroke(255);
   ellipse(0, 0, 160);
   noStroke();
   rotate(-90);

  for (let i = 0; i < 60; i++) {
    if (i == seconds % 60) {
      fill(255, 100, 150);
      ellipse(100, 0, 10);
    } else {
      fill(255);
      ellipse(100, 0, 6);
    }
    rotate(360 / 60);
  }
  pop();

}