Project – 06 – ssontag – Binary Clock

I got the idea for this project from my friend who has a binary clock next to his bed, earlier this year he explained to me how to read the clock using binary, but i had no idea how it actually worked. By using my knowledge of how to read the clock i was able to reverse engineer the code to create my own!

Here is my logic behind the Clock!

sketch

function setup() {
    createCanvas(200, 100);
    background(200);
}

function draw() {
//these variables take each digits place of the hour, min, and sec and translate them into
//binary, these variables will give an output of 1 or zero 
    var hr1 = floor(hour() / 10);
    var hr2 = hour() % 10;
    var min1 = floor(minute() / 10);
    var min2 = minute() % 10;
    var sec1 = floor(second() / 10);
    var sec2 = second() % 10;

//this creates an array of these points so i can use a for loops to iterate over each variable
    var timeArray = [hr1, hr2, min1, min2, sec1, sec2]
    var nTimeArray = timeArray.length;

//this for loop will iterate over each variable to give the binary values of each circle in
//each column, then using if statements to set the fill to green only if the binary value is 1
    for(var i = 0; i < nTimeArray; i++) {
        var x = timeArray[i];

        var a = floor(x / 8);
        var b = floor((x - 8 * a) / 4);
        var c = floor((x - 8 * a - 4 * b) / 2);
        var d = x % 2;

        
        

        if(a == 1) {
            fill(0, 255, 0);

        } else {
            fill(250);
        }

        ellipse(25 + 30 * i, 20, 10, 10);

        if(b == 1) {
            fill(0, 255, 0);

        } else {
            fill(250);
        }
        ellipse(25 + 30 * i, 40, 10, 10);

        if(c == 1) {
            fill(0, 255, 0);

        } else {
            fill(250);
        }
        ellipse(25 + 30 * i, 60, 10, 10);

        if(d == 1) {
            fill(0, 255, 0);

        } else {
            fill(250);
        }
        ellipse(25 + 30 * i, 80, 10, 10);

    }

}