James Katungyi – Project 06 – 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.