# Min Jun Kim- Project 6 Abstract Clock

``````/*
Min Jun Kim
minjunki@andrew.cmu.edu
15104-B
Project 6
*/

//this program displays an abstract clock

var x = 0;

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

function draw() {
background(0);
var hours = hour();	//denotes hours of day
var mins = minute(); //denotes minute of day
var secs = second(); //denotes seconds of day

//sets up such that it's not military time but standard
if (hours > 12) {
hours = hours - 12;
}
else if (hours == 0) {
hours = 12;
}

//draws counter-clockwise rotating rectangles in background
for (i = 0; i < 481; i+= 48) {
for (v = 0; v < 480; v += 48) {
push();
fill(30);
rectMode(CENTER);
translate(i,v);
rotate(2*PI*secs/60);
rect(0,0,30,30);
pop();
}

}

//makes a cover so the clock is not disturbed
fill(0);
rect(width/7,30,width/1.4, height-65);

//hour ring
fill(200);
//draws big arc in the back
arc(width/2,height/2,width/1.3,height/1.3,
-1/2*PI,2*PI*hours/12-1/2*PI);
fill(0);
//second arc gives gap between other types of arcs
arc(width/2,height/2,width/1.3-100,height/1.3-100,
-1/2*PI,2*PI*hours/12-1/2*PI);

//minutes ring
fill(100);
//middle arc gives the minutes
arc(width/2,height/2,width/2,height/2,
-1/2*PI,2*PI*mins/60-1/2*PI)
fill(0);
//second arc gives gap between other types of arcs
arc(width/2,height/2,width/3,height/3,
-1/2*PI,2*PI*mins/60-1/2*PI);

//seconds ring
fill(50);
//draws small arc in middle
arc(width/2,height/2,width/3-10,height/3-10,
-1/2*PI,2*PI*secs/60-1/2*PI);
fill(0);
//second arc allows the arc to get a more distinct shape
arc(width/2,height/2,width/5,height/5,
-1/2*PI,2*PI*secs/60-1/2*PI);

fill(0);
//covers the track
ellipse(width/2,height/2,70,70);
}
``````

This project made me dig deep into the concept of time and how time came to be represented over time. In the past we had sun-dials and no moving parts. Over time we developed physical mechanical clocks, and nowadays we use digital numbers mostly. I found it interesting in this project we are going from a more digitized type of time-showing into a more archaic and less optimal way of displaying time. These below are the ideas that I generated when I was brainstorming.

I had a lot more ideas but I found were impractical and very difficult to code. Initially I wanted to emulate the light clock from physics with a bouncing ball, but I realized it would be impractical to display how much time has passed. I ended up choosing the designs for an arc-based clock, with different sizes throughout. Calibrating the clock to match the time was rather difficult at first, but once I figured it out the rest was easy. I added some decorations in the background to make the project more exciting. All in all, I think this project was fun because there was so much possibilities.