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!
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);
}
}