Kimberlyn Cho- Project 06- Abstract Clock

ycho2-06

/* Kimberlyn Cho
Section C
ycho2@andrew.cmu.edu
Project-06 */

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

function draw() {
	noStroke();
	var h = hour();
	var m = minute();
	var s = second();

	var hr = h % 12
	var sec = map(s, 0, 59, 0, width);

	background(hr + hr * 20);

	//cloud
	fill(230);
	ellipse(sec, 45, 70, 55);
	ellipse(sec + 35, 50, 70, 55);
	ellipse(sec + 65, 45, 60, 45);
	ellipse(sec + 25, 25, 50, 35);
	ellipse(sec + 52, 25, 50, 35);	

	//buildings
	fill(0);
	rect(0, 100, 60, 300);
	rect(65, 150, 45, 250);
	rect(110, 75, 75, 325);
	rect(185, 110, 50, 300);
	rect(235, 200, 35, 100);
	rect(275, 50, 80, 250);
	rect(355, 125, 40, 175);
	rect(400, 80, 80, 220);

	//window1
	var a = 115
	for (var y = 0; y < 8; y++) {
		var wa = a + y * 25
		fill(255);
		rect(15, wa, 10, 10);
		rect(35, wa, 10, 10);
	};

	//window2
	var bx = 122
	var by = 85
	var count = 0
	for (var y = 0; y < 8; y++) {
		for (var x = 0; x < 3; x++) {
			var wbx = bx + x * 20
			var wby = by + y * 28

			if (count == m & count < 24) {
			fill(255, 255, 0);
			rect(wbx, wby, 10, 10);

		    } else {
		    	fill(100);
		    	rect(wbx, wby, 10, 10);
		    }
		    count += 1
		};
	};

	//window3
	var c = 120
	for (var y = 0; y < 12; y++) {
		var wc = c + y * 15
		fill(230);
		rect(192, wc, 30, 5);
	};

	//window4
	var d = 65
	for (var y = 0; y < 7; y++) {
		var wd = d + y * 35
		fill(255);
		rect(290, wd, 10, 20);
		rect(310, wd, 10, 20);
		rect(330, wd, 10, 20);
	};

	//window5
	var ex = 412
	var ey = 90
	for (var y = 0; y < 9; y++) {
		for (var x = 0; x < 4; x++) {
			var wex = ex + x * 15
			var wey = ey + y * 24

			if (count == m & count > 23) {
			fill(255, 255, 0);
			rect(wex, wey, 10, 10);

		    } else {
		    	fill(100);
		    	rect(wex, wey, 10, 10);
		    }
		    count += 1
		};
	};	
};

I was inspired by the night view of my home, NYC. The lights in some of the buildings light up according to the minutes to represent how the city is never really dead. The clouds move by the second and the background color changes a different shade of gray based on the hour. I went through different iterations in the input parameters for the time through my sketches.

Leave a Reply