![[OLD – FALL 2016] 15-104 • COMPUTING for CREATIVE PRACTICE](../../../../wp-content/uploads/2020/08/stop-banner.png)
Abstract Clock
jameskatungyi-project06-abstractclock
//James Katungyi
//Section A 0900
//jkatungy@andrew.cmu.edu
//Assignment-Project-06
function setup(){
createCanvas(300,300);
}
function draw(){
background(227,218,186);
stroke(208,169,97);
strokeWeight(1);
HourBar();//hour bar function
MinuteLine();//minute line function
SecondBall();//second ball function
}
function HourBar(){
var BarH = height/24;
var H = hour(); //link to computer clock hour
var M = minute();//link to computer clock minutes
var HBarX = map(M,0,59,0,width);//link x position to minute
var HBarY = map(H,0,23,0,height);//link Y position to hour
stroke(208,169,97);
if ((HBarY > height*6/24) & (HBarY < height*18/24)){//fill color bar with light color from 6am to 6pm
fill(245);
} else {
fill(180);//otherwise make hour bar dark
}
rect(0,HBarY,HBarX,BarH);//hour bar
for (var y = 0; y < HBarY; y += 12.5){
if ((y > height*6/24) & (y < height*18/24)){//fill bars with light shade from 6am to 6pm
fill(245);
} else {
fill(180);
}
rect(0,y,width-1,BarH);
}
}
function MinuteLine(){
var M = minute();//computer clock minute
var S = second(); //computer clock seconds
var LineY = map(S,0,59,0,height);//link x position to seconds
var LineX = map(M,0,59,0,width);//link x position to minutes
stroke(208,169,97);
strokeWeight(1);
line(LineX,0,LineX,LineY);//minute line
for (var x = 0; x < LineX; x += 5){
line(x, 0, x, height);
}
}
function SecondBall(){
var diam = 20;
var S = second();//computer clock seconds
var M = minute();
var BallX = map(S, 0, 59, 0, width); //link seconds to x position of the ball
var BallY = map(M, 0, 59, 0, height); //link ball position of y to minutes
stroke(208,169,97);
strokeWeight(1);
if ((BallY > height*7/24) & (BallY < height*19/24)){//fill ball with dark shade from 6am to 6pm
fill(180);
} else {
fill(245);
}
ellipseMode(CENTER);
ellipse(BallX,BallY,diam,diam); //draw ball
}
As the hours and minutes build up, the canvas fills with boxes and lines. Each day is a fresh start on a clean slate. Each hour starts out less clattered than towards its close.
The seconds are marked by a ball which was supposed to bounce off the sides evoking the ‘tick-tock’ associated with clocks. However, the reverse direction did not work out. In a way, the single direction is better because each second is fresh, not recycled.
The hours relate to the minutes in that one can tell the hour and minute by just looking at the hour indicator. The same with the minutes and seconds. And ofcourse one can tell the night hours from the day hours – a feature that is perhaps only useful in casinos where one never sees the sky.
