jamieh-Project06-Abstract-Clock

sketch

/*
Jamie Ho
jamieh@andrew.cmu.edu
10:30
Project 6
*/

var d1 = 24;	//hour
var d2 = 60;	//minutes/seconds
var slope1;		//slope of the diagonal line from hour triangle
var slope2;		//slope of the diagonal line from minute triangle

function setup() {
   createCanvas(200, 400);
}

function draw() {
	//this if statement inverts the black-white colours depending on AM or PM
	if(hour()>11){		//PM
		background(0);
	} else {			//AM
	background(255);
	}
//HOUR	
	slope1 = (height/2-height/8)/d1;
	for(var i = 0; i < d1; i++){
		//12am, 3am, 6am, 9am, 12pm, 3pm, 6pm, 9pm
		//longer and thicker line 
		if(i%3 == 0){
			if(hour()>11){
				stroke(200);
			} else {
			stroke(0);
		}
			strokeWeight(1);
			line(0, height/8+i*slope1,
			 	 width/2+d1-i, height/8+i*slope1);
		} else {
		//thin lines for all other times
			stroke(100);
			strokeWeight(0.5);
			line(0, height/8+i*slope1,
			 	 width/2-d1+i, height/8+i*slope1);
		}
		//blue triangle fill for HOUR
		noStroke();
		fill(26, 136, 255, 200);
		if(i == hour()){
			triangle(width/2+d1-i, height/8+i*slope1,
				 width/2-d1+i, height/8+i*slope1,
				 width/2, height/2);
		}
	}
//MINUTE
	slope2 = (height*(7/8)-height/2)/d2;
	for(var j = 0; j <= d2; j++){
		//10 min, 20 min, 30 min, 40 min, 50 min, 60 min
		if(j%10 == 0){			
			if(hour()>11){		//PM
				stroke(200);
			} else {			//AM
				stroke(0);
			}
			strokeWeight(1);
			line(width/2-j, height/2+j*slope2,
			 	 width, height/2+j*slope2);
		} 
		//blue quad fill for MINUTE
		noStroke();
		fill(0, 99, 204, 200);
		if(j == minute()){
			quad(width/2-d2, height*(7/8),
				 width/2+d2, height*(7/8),
				 width/2+d2-j, height*(7/8)-j*slope2,
				 width/2-d2+j, height*(7/8)-j*slope2);
		}
//SECOND
		stroke(179, 204, 255);
		strokeWeight(2);
		if(j == second()){
		line(width/2, height/2, width/2, height/2+j*slope2)
		}
	}
//TWO TRIANGLES
	if(hour()>11){		//PM
		stroke(255);
	} else {			//AM
		stroke(0);
	}
	strokeWeight(2);
	noFill();
	//hour triangle
	triangle(width/2-d1,height/8,
			 width/2+d1, height/8,
			 width/2, height/2);
	//minutes triangle
	triangle(width/2, height/2,
			 width/2-d2, height*(7/8),
			 width/2+d2, height*(7/8));
}

For this project, I wanted to do something similar to the hourglass, but make it more geometric with just triangles and lines. The lines and background colours invert when AM switches to PM and vice versa.