let r = 0;

let nightTime = false;

​

function setup() {

  createCanvas(600, 600);

  angleMode(DEGREES);

  ellipseMode(CENTER);

}

​

function draw() {

  background(0);

  let currentHour = hour(); // current hour in 24

  let m = minute();

  let s = second();

  //to make sure the text below shows, put other functions first so the text is layered on the very top

  backgroundChange(nightTime, currentHour);

  drawSquare(currentHour);

  drawEllipse(s); // spinning ellipse

  drawBigCircle(m); // outer ring

​

  // print hour /min

    push();

    noStroke();

    fill(255,0,0);

    twelveHour =hour()%12;

    textFont('Helvetica')

    textSize(10);

    let textHour;

    let textMinute;

    if(twelveHour == 0) {

      textHour = '12';

    } else if (twelveHour < 10) {

      textHour = '0' + twelveHour

    } else {

      textHour = '' + twelveHour;

    }

    if (m < 10) {

      textMinute ='0'+m

    }

      else {

        textMinute = m  

      }

    text(`${textHour}:${textMinute}`,550,560);

    pop();

  // print PM AM

    push();

    noStroke();

    fill(255,0,0);

    textFont('Helvetica')

    textSize(10);

      if (currentHour>=12){

      text(`PM`,580,560);

        } else {

        text(`AM`,580,560);

        }

    pop();

  // end print PM AM 

​

}

//booleon section

function backgroundChange(nightTime, currentHour){

    if (currentHour>=18){

      nightTime = true;

    } else {

        nightTime= false;

    }

    if (nightTime == true){

      background(0);

    } else {

      background(0,51,102);

    }

​

  }

​

function drawSquare(currentHour){

  // for every time it runs, it will add 1 to the equation 

  for (squareNum =0; squareNum <12; squareNum++){

     noFill();

     strokeWeight(2);

    // determine which square it is through squarenum, by separating it into before 6 & after, the color changes 

    if (squareNum < currentHour % 12 && squareNum <=6){

       stroke(255,178,43); // orange

    } else if (squareNum <currentHour%12 && squareNum>6){

      stroke(255,51,51); //red

    }

      else {

       stroke(255,255,0); //yellow

    };

   square(295-5*squareNum, 295-5*squareNum, 10+squareNum*10);

    /* square(300,300,10);    

    square(300-5,300-5,20)

    square(300-10,300-10,30) 

    we learn here that it should go down by interval of 5 for coordinates and increase by 10 for the square size

    But after trial and error, to make the square center, changed the anchor point to 295

    */

  }

​

};

function drawEllipse (s){

​

  for (ellipseNum =0; ellipseNum < 60; ellipseNum++){

/* ellipse num starts at 0, if the minute is more than 0, then it will print ellipse at that time 

i.e if ellipse num start at 0, minute at 6, it will print every time the code runs which is every second

*/

    if (ellipseNum<s){

    push();

    stroke (255,255,255,127); // last number is opacity

    translate(300,300);

    // x3 because x6 will make the ellipse overlap, x3 makes sure that the ellipse meet at 180 degrees 

    rotate(3*ellipseNum);

    ellipse (0,0,400,20);

    pop();

    };

  };

};

​

function drawBigCircle(m){

  strokeWeight (10);

  stroke(255,153,153);

  circle(300,300,400);

  // minute * 6 because there's 360 degrees, +270 because that's the starting point 

  strokeWeight(5);

  stroke(255,51,51);

  arc(300,300,400,400,270,m*6+270);

};

​

​