P5.js Binary Clock

Revisiting an old hardware project that I made years ago but this time with P5.js. Years ago I programmed a PIC microcontroler to count seconds on some LED’s that were attached to each of the output pins. Here with P5.js I’ve added minutes and seconds as well to fully visualize the clock.

ERROR: failed to load html object!

Apparently the canvas is a bit large for my wordpress theme. The file can be viewed in a plain html page here

The Javascript of this fun little project.

 
function draw_clock(obj) {
    
	let hours = obj.hours;
	let minutes = obj.minutes;
	let seconds = obj.seconds;
	let alarm = obj.seconds_until_alarm;
	var millis = obj.millis;
	var binary_seconds = ToBinary(seconds); 
	var binary_minutes = ToBinary(minutes); 
	var binary_hours = ToBinary(hours);

	//loads backgound image.
	image(bg,0,0); 
	//Runs check on alarm seconds
	alarm_check();	
	//Draw Clock Rows
	draw_led_min();
	draw_led_hour();
	draw_led_sec();

function draw_led_sec() {
  for(let i=0; i<=5; i++) {
    var led_state = binary_seconds.charAt(i);
    let pos_x = 180+(i*95);
    if (led_state == "1") {
      draw_red_led(pos_x, 300);
    }
    else {
      draw_off_led(pos_x, 300);
    }	
  }
}

function draw_led_min() {
  for(let i=0; i<=5; i++) {
    var led_state = binary_minutes.charAt(i);
    let pos_x = 180+(i*95);
    if (led_state == "1"){
      draw_blue_led(pos_x, 200);	
    }
    else{
      draw_off_led(pos_x, 200);
    }
  }
}

function draw_led_hour() {
  for(let i=0; i<=5; i++) { var led_state = binary_hours.charAt(i); let pos_x = 180+(i*95); if (led_state == "1"){ draw_green_led(pos_x, 100); } else{ draw_off_led(pos_x, 100); } } } function alarm_check() { if (alarm > 0) {
	//maps and draws timing bars.
	noStroke();
	fill(255, 255, 255, 140);
	let rect_length = map(alarm, 0, 20, 0, 565);
	rect(179, 55, rect_length, 20);
	//var neg = -Math.abs(rect_length);
	let rect_negLength = map(alarm, 0, 20, 0, -565);
	rect(739, 410, rect_negLength, 20);
	}
	//random flashing alarm to juxtapose the controled binary.
	if (alarm == 0) {
	fill(255, 0, 0, random(175));
	rect(91, 13, 754, 468);
        }
}


}

//Image path variables.
var red_led, green_led, blue_led, off_led, bg;

//Loading images from their paths
function preload(){
	bg = loadImage('bg.png');
	red_led = loadImage('red_led.png');
	blue_led = loadImage('blue_led.png');
	green_led = loadImage('green_led.png');
	off_led = loadImage('off_led.png');
}

//converts time params to a binary string.
function ToBinary(timeUnit){
	var n = timeUnit.toString(2);//the param '2' converts to a binary string 
	//gets substream length and puts the proper num of '0's on the binary number.
	n = "000000".substr(n.length) + n;
	return n;
}

//Draws the LEDs image and position. the 4 should be combined to one function.
function draw_red_led(x, y){
	image(red_led, x, y);
}

function draw_blue_led(x, y){
	image(blue_led, x, y);
}

function draw_off_led(x, y){
	image(off_led, x, y);
}

function draw_green_led(x, y){
	image(green_led, x, y);
}

John Hilbert Written by: