Katherine Hua – Project-06 – Abstract Clock

sketch

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