Min Jun Kim- Project 6 Abstract Clock

sketch

/*
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.