Rjpark – Project 06 – Abstract Clock

rjpark_abstractclock

var H; // current hours
var M; // current minutes
var S; // current seconds
var hr; // hour rgb
var hg;
var hb;
var mr; // minute rgb
var mg;
var mb;
var sr; // second rgb
var sg;
var sb;
var bc; // background color
var lc; // line color

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

function draw() {
	H = hour();
	M = minute();
	S = second();

	var mapH = map(H, 24, 0, height, 0);
	var mapM = map(M, 59, 0, height, 0);
	var mapS = map(S, 59, 0, height, 0);

	// switching colors depending on day or night
	// day = midnight (0:00) to noon (12:00)
	// night = noon (12:00) to midnight (24:00)
	if (H < 12) { // day
		hr = 170;
		hg = 40;
		hb = 250;
		mr = 45;
		mg = 250;
		mb = 45;
		sr = 30;
		sg = 185;
		sb = 250;
		bc = 220;
		lc = 0;
	}
	if (H >= 12) { // night
		hr = 50;
		hg = 5;
		hb = 75;
		mr = 10;
		mg = 60;
		mb = 10;
		sr = 30;
		sg = 35;
		sb = 90;
		bc = 30;
		lc = 255;
	}

	// day or night colored rectangles
    fill(hr, hg, hb);
    noStroke();
    rect(0, 0, width / 3, height);
    fill(mr, mg, mb);
    noStroke();
    rect(width / 3, 0, width / 3, height);
    fill(sr, sg, sb);
	noStroke();
	rect(2 * width / 3, 0, width / 3, height);

	// moving of rectangle for hours
	fill(bc);
	noStroke();
	rect(0, 0, width / 3, mapH);

	// moving of rectangle for minutes
	fill(bc);
	noStroke();
	rect(width / 3, 0, width / 3, mapM);

	// moving of rectangle for seconds
	fill(bc);
	noStroke();
	rect(2 * width / 3, 0, width / 3, mapS);

	// markings for hours, minutes, seconds
	for (var hi = 0; hi < 24; hi ++) {
		stroke(lc);
		strokeWeight(1);
		line(0, (height / 24) * hi, width / 12, (height / 24) * hi);
		if (hi == 3 || hi == 6 || hi == 9 || hi == 12 || hi == 15 || hi == 18 || hi == 21) {
			line(0, (height / 24) * hi, width / 6, (height / 24) * hi);
			line(width / 3, (height / 11.9) * hi, 6 * width / 12, (height / 11.9) * hi);
		}
	}
	for (var mi = 0; mi < mapM; mi ++) {
		stroke(lc);
		strokeWeight(1);
		line(width / 3, (height / 11.9) * mi, 5 * width / 12, (height / 11.9) * mi);
	}
	for (var si = 0; si < mapM; si ++) {
		stroke(lc);
		strokeWeight(1);
		line(2 * width / 3, (height / 5.9) * si, 3 * width / 4, (height / 5.9) * si);
	}
}

I drew my inspiration from candle clocks which was used a long time ago to tell time. You can tell how much time as passed by seeing how much of the candle has melted. Similarly, I created an abstract clock that mimics the candle clock, only mine has tick markings on the side so you can better tell what time it is.

(in regards to longer tick markings) It goes from 12am to 6am to 12pm to 6pm to 12 am again for the hours. It goes from 0 to 15 to 30 to 45 minutes. The seconds go by 10s. Also, when the time hits 12pm, the colors switch from bright (day) to dark (night) colors.