# Katherine Hua – Project-06 – Abstract Clock

``````/* Katherine Hua
Section A
khua@andrew.cmu.edu
Project-06-Abstract-Clock */

var prevSec;
var millisRolloverTime;

function setup() {
createCanvas(480, 480);
}

function draw() {
background(0); //setting background to black

var h = hour();
var m = minute();
var s = second();
var ms = millis();

if (prevSec != s) {
millisRolloverTime = millis();
}
prevSec = s;
var mils = floor(millis() - millisRolloverTime);

//creating lines marking the center of the circle
stroke(75);
strokeWeight(1);
line(240, 120, 240, 360);
line(120, 240, 360, 240);

//text
fill(255);
textAlign(CENTER); //centering text
text(nf(h, 2, 0) + ' : ' + nf(m, 2, 0) + ' : ' + nf(s, 2, 0), 240, 400); //using nf function to make numbers have two digits at all times

//creating the grey outlines of circles based on their width
for (var x = 0; x < 15; x++) {
noFill();
stroke(50);
strokeWeight(1);
ellipse(240, 240, x * 16, 240)
}

//creating the grey outline of circles based on their height
for (var y = 0; y < 15; y++) {
noFill();
stroke(50);
strokeWeight(1);
ellipse(240, 240, 240, y * 16);
}

//milliseconds - orange circle: height of circle changes with millisecond; hits full circle every second
var msHeight = map(mils, 0, 1000, -240, 240);
push();
stroke(238, 99, 43, 255);
strokeWeight(2);
noFill();
ellipse(240, 240, 240, msHeight);
pop();

//seconds - yellow circle: width of circle changes with second; hits full circle every minute
var sFrac = s + (mils / 1000.0);
var sWidth = map(sFrac, 0, 60, -240, 240);
push();
stroke(243, 205, 70, 255);
strokeWeight(2);
noFill();
ellipse(240, 240, sWidth, 240);
pop();

//minutes - pink circle: width of circle changes with minute; hits full circle every hour
var mFrac = m + (s / 60.0);
var mWidth = map(mFrac, 0, 60, -240, 240);
push();
stroke(224, 83, 152, 255);
strokeWeight(4);
noFill();
ellipse(240, 240, mWidth, 240);
pop();

//hours - purple circle: height of circle changes with every hour; hits full circle every 24 hours
var hFrac = h + (m / 60.0);
var hHeight = map(hFrac, 0, 24, -240, 240);
push();
stroke(112, 45, 156, 255);
strokeWeight(5);
noFill();
ellipse(240, 240, 240, hHeight);
pop();

}
``````

I wanted to create a clock that gives a more spacey-vibe to reflect time’s relationship with the movement of solar systems. I did this by creating the circular grid which can appear like longitude and latitude lines. Each moving element corresponds to its respective time (hour, minute, second, or millisecond). I was inspired by Min Lee’s design with how he used a circle of changing width so my design is based off of what I learned from him. I had a difficult time at first getting the movement of the circle right; it was not moving smoothly or would not complete a full turn. This project helped me familiarize myself more with how time can be utilized in coding.