hannajan-Project06-Abstract Clock

sketch

//Hanna Jang 
//Section B 
//hannajan@andrew.cmu.edu 
//Project 6: Abstract Clocks 

var thehead=80; 
var offset=50; 
var offset2=30; 
var offset3=130; 


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

function draw() {
	background(197, 216, 184); 
	noStroke(); 
	
	//race paths 
	for (var j=1; j<4; j++) {
	fill(233, 176, 77); 
	rect(0, j*100, width, height/6); 
		}
	
	//race signs 
	fill(255); 
	rect(width/17, height/10, width/6, width/10); 
	rect(width*14/18, height/10, width/6, width/10); 
	
	//race sign letters
	strokeWeight(2); 
	fill(0); 
	text("START", width/11, height/6); 
	text("FINISH", width*9/11, height/6); 
	
	//character names 
	fill(0); 
	text("Second the Rabbit", width/4+8, offset3); 
	text("Minute Man", width/4+8, offset3*2-offset2); 
	text("Hour the Panda", width/4+8, offset3*3-offset); 
	
	//Fetch the current Time 
	var H=hour(); 
	var M=minute(); 
	var S=second(); 
	
	//track clock paths for racers 
	if (H<13) {
	var mappedH=map(H, 0, 11, 0, width-thehead/2); 
} else {
	var mappedH=map(H-12, 0, 11, 0, width-thehead/2);
}
	var mappedM=map(M, 0, 59, 0, width-thehead/2); 
	var mappedS=map(S, 0, 59, 0, width-thehead/2); 
	
	//Second the Rabbit 
	//head 
	fill(255); 
	ellipse(mappedS, width/3, thehead, thehead); 
	//ears 
	ellipse(mappedS-offset2, width/3-offset, thehead/4, thehead*4/5); 
	ellipse(mappedS+offset2, width/3-offset, thehead/4, thehead*4/5); 
	//eyes 
	fill(0); 
	ellipse(mappedS-thehead/5, width/3-thehead/10, thehead/10, thehead/10); 
	ellipse(mappedS+thehead/5, width/3-thehead/10, thehead/10, thehead/10); 
	
	//Minute the Man 
	//head 
	fill(255, 222, 168); 
	ellipse(mappedM, width/2+offset2, thehead, thehead); 
	//hair 
	fill(123, 79, 8);
	arc (mappedM, width/2+offset2, offset2*3, offset2*3, PI, TWO_PI ); 
	//eyes 
	fill(0); 
	ellipse(mappedM-thehead/5, height/3+offset3-20, thehead/10, thehead/10); 
	ellipse(mappedM+thehead/5, height/3+offset3-20, thehead/10, thehead/10); 
	
	//Hour the Panda 
	//ears 
	fill(0); 
	ellipse(mappedH-offset2, width/2+offset*2, thehead/3, thehead/3); 
	ellipse(mappedH+offset2, width/2+offset*2, thehead/3, thehead/3); 
	//head 
	fill(255); 
	ellipse(mappedH, width/2+offset3, thehead, thehead); 
	//eyes 
	fill(0); 
	ellipse(mappedH-thehead/4, width/2+offset*2+30, thehead/3, thehead/3); 
	ellipse(mappedH+thehead/4, width/2+offset*2+30, thehead/3, thehead/3); 
	fill(255); 
	ellipse(mappedH-thehead/4, width/2+offset*2+30, thehead/10, thehead/10); 
	ellipse(mappedH+thehead/4, width/2+offset*2+30, thehead/10, thehead/10); 
	
	
	//text showing clock time on top. 	
	//If the Hours value is higher than 12, then 12 is subtracted. 
	fill(255); 
	if (H<13) {
	text(H, width/4, 20); 
} else {
	text(H-12, width/4, 20); 
	}
	text(":", width/4+15, 20); 
	text(M, width/3-9, 20); 
	text(":", width/3+8, 20); 
	text(S, width/3+15, 20); 
}

	

I thought of how the seconds clock moves faster than the minute and the hours is the slowest. I then thought of different symbols to represent this difference in speed. I came up with Second the Rabbit, Minute Man, and Hour the Panda. I am quite pleased with the outcome and the race my symbols are running.