Aaron Lee – Project – 06 – Abstract Clock

 sketch

/*
Aaron Lee
//Section C
//sangwon2@andrew.cmu.edu
Project-06-Abstract Clock
*/




function setup() {
   createCanvas(400, 400);
   angleMode(DEGREES); 
}

function draw(){

  var H = hour();
  var M = minute();
  var S = second();

   for (H = 0; H < 23; H++) {
    noStroke();
    let z = map(H, 0, 23, 255, 0);// mapping background day and night
    let m = map(H, 0, 23, 0, 240); //mapping moon and sun
    background(0, z, 255); //druing the day it is light blue, during night it is dark blue
    fill (252, m, 3); //during the day it is red(sun) during night it is yellow (moon)
    ellipse(width / 2, height / 2, 200, 200);

    stroke(255);//satellite that represents seconds
    noFill();
    let sec1 = map (S, 0, 60, 360, 0);
    arc (200, 200, 300, 300, sec1, 0);
    stroke(0, z, 255)
    let sec2 = map (S-1, 0, 60, 360, 0);
    arc (200, 200, 300, 300, sec2, 0);

    stroke(255);//satellite that represents minutes 
    noFill();
    let min1 = map (M, 0, 60, 0, 360);
    arc (200, 200, 250, 250, 0, min1);
    stroke(0, z, 255);
    let min2 = map (M-1, 0, 60, 0, 360);
    arc (200, 200, 250, 250, 0, min2);

    stroke(255);//satellite that represents hours
    noFill();
    let hr1 = map (H, 0, 24, 0, 360);
    arc (200, 200, 350, 350, 0, hr1);
    stroke(0, z, 255);
    let hr2 = map (H-1, 0, 24, 0, 360);
    arc (200, 200, 350, 350, 0, hr2);
  }
    
}

Color of the background and the sphere changes in order to indicate time. The movement of the satellites that orbit around each represent hr, min and sec.