sihand – Project Week 06 – Contour Clock

sihand – contour clock

//Sihan Dong
//sihand@andrew.cmu.edu
//Section B
//Week 06 project: abstract clock - erosion

var s;
var m;
var h;
var angMinute;
var angSecond;
var arrayS = [];
var arrayM = [];
var arrayH = [];
var gradientH = [];
var colorH1 = [];
var colorH2 = [];
var interval = 40;

function setup() {
    createCanvas(600, 600);
}

function draw() {
	background(0, 0, 50);
	drawHour();
	drawSecond();
	drawMinute();
    drawTime();
}

function drawHour() {
	h = hour();
	noStroke();

	for (ih = 0; ih < 13; ih++) {
	//dimension of the centripetal circles
		arrayH[ih] = width - ih*interval;
	//set up the value of the gradient used to generate green and blue
		gradientH[ih] = 255 - 20*ih;
		
	//the certipedal circles represent the hours, where the 
		//land contour
		if (ih+1 > h%12 || ih+1 < 13) {
			//gradientH.pop();
			colorH1[ih] = color(0, gradientH[ih-h%12], 0);
			fill(colorH1[ih]);	
		}
		//ocean contour
		if (ih < h%12) {
			colorH2[ih] = color(0, 0, gradientH[h%12-ih-1]);
			fill(colorH2[ih]);
		}
		
		ellipse(width/2, height/2, arrayH[ih], arrayH[ih]);
	}
}

function drawMinute() {
	m = minute();
	noStroke();
	//fill()
	
    	
	
    for (var im = 0; im < m; im++) {
    	push();
    	
    	translate(width/2, height/2);
    	angMinute = map(m, 0, 60, 0, TWO_PI);
    	angMinute = im*angMinute/m;
    	rotate(angMinute-PI/2);
    	
    	fill(0, 0, 255);
    	rect(0, -3/2, (width - (h%12)*interval)/2, 3);
  		ellipse((width - (h%12)*interval)/2, 0, 10, 7);
    	pop();
	}
}

function drawSecond() {
	s = second();
	noStroke();
	angSecond = map(m, 0, 60, 0, TWO_PI);

	for (is = 0; is < 60; is++) {
		push();
		arrayS[is] = map(is, 0, 60, 65/2+2, width/2);
		
		if (is < s) {
			translate(width/2, height/2);
    		rotate(angSecond-PI/2);
			//fill(255);
			fill(0, 0, map(is, 0, 60, 255, 0));
			ellipse(arrayS[is], 0, 4, 4);
		}
		pop();
	}	
}

function drawTime() {
//the circular background for the text
	noStroke();
	fill(0);
	ellipseMode(CENTER);
    ellipse(width/2, height/2, 65, 65);

//text that shows the real time
	fill(255);
    textAlign(CENTER);
    text(h + " : " + m + " : " + s, width/2, height/2+5);
}

This project was inspired by colored contour maps (shown below). Seconds are represented by a line of dots: “precipitation”; minutes are represented by a serious of “streams”; and hours are represented by the change in the contour. The idea is that every hour passed, the sea level, represented by the blue area, rises to a certain level. In other words, the island, which represented by the green area, relatively sinks by the same level. The changes are illustrated in the updated image via changes in the shades of green and blue, which abides by the common appearance of a contour map.