p5.js Seven Digit Segment Clock

p5.js is an amazing JavaScript library that streamlines creating graphical applications in your browser. Learn more at https://p5js.org/ They also have an extremely useful online editor https://editor.p5js.org/ which I used for this example and the link to it will be below.

Resource	URL
Github source code for the display	https://github.com/jonathanmeaney/Seven_Segment_Display_Clock
p5js editor version of display	https://editor.p5js.org/FugQueue/sketches/q8A2REall
Inspired by the amazing Coding Train challenge	https://thecodingtrain.com/CodingChallenges/117-seven-segment.html

Resource links

	let digitHour0, digitHour1, digitMinute0, digitMinute1, digitSecond0, digitSecond1;
	let colon1, colon2;

	function setup() {
	createCanvas(395, 110);
	}

	function draw() {
	background(51);

	const time = new Date();

	// Each segment of the clock should be 2 digits long.
	let hours = time.getHours();
	let hour0 = Number(hours.toString()[0]);
	let hour1 = Number(hours.toString()[1]);
	// For 1 – 9 hour0 will be the hour and hour1 will be undefined.
	// So in this scenario check if hour1 is NaN and if so set hour0 to 0 and
	// set hour1 to be what hour0 was.
	if(isNaN(hour1)){
	const temp = hour0;
	hour0 = 0;
	hour1 = temp;
	}
	let minutes = time.getMinutes();
	let minute0 = Number(minutes.toString()[0]);
	let minute1 = Number(minutes.toString()[1]);
	// For 1 – 9 minute0 will be the minute and minute1 will be undefined.
	// So in this scenario check if minute1 is NaN and if so set minute0 to 0 and
	// set minute1 to be what minute0 was.
	if(isNaN(minute1)){
	const temp = minute0;
	minute0 = 0;
	minute1 = temp;
	}
	let seconds = time.getSeconds();
	let second0 = Number(seconds.toString()[0]);
	let second1 = Number(seconds.toString()[1]);
	// For 1 – 9 second0 will be the second and second1 will be undefined.
	// So in this scenario check if second1 is NaN and if so set second0 to 0 and
	// set second1 to be what second0 was.
	if(isNaN(second1)){
	const temp = second0;
	second0 = 0;
	second1 = temp;
	}

	// Create digits for hours
	digitHour0 = new Digit(hour0, new Position(5,5));
	digitHour1 = new Digit(hour1, new Position(60,5));
	colon1 = new Colon(new Position(115, 5));
	// Create digits for minutes
	digitMinute0 = new Digit(minute0, new Position(145,5));
	digitMinute1 = new Digit(minute1, new Position(200,5));
	colon2 = new Colon(new Position(255, 5));
	// Create digits for seconds
	digitSecond0 = new Digit(second0, new Position(285,5));
	digitSecond1 = new Digit(second1, new Position(340,5));

	// Show Hours
	digitHour0.show();
	digitHour1.show();
	colon1.show();
	// Show Minutes
	digitMinute0.show();
	digitMinute1.show();
	colon2.show();
	// Show Seconds
	digitSecond0.show();
	digitSecond1.show();
	}

	class Digit{
	// seven segments
	constructor(number, position, options){
	options = options \|\| {};
	this.number = number;
	this.position = position;
	this.width = options.width \|\| 50;
	this.height = options.height \|\| 100;
	this.segmentHeight = options.segmentHeight \|\| 10;

	const horizontalSegmentWidth = floor(this.width – (2 * this.segmentHeight));
	const verticalSegmentHeight = floor((this.height – (3 * this.segmentHeight)) / 2);

	// The segments are placed in a particular layout with each segment being called a different letter.
	// The segment layout and names is below:
	// AAAAAAAA
	// AAAAAAAA
	// FFFF BBBB
	// FFFF BBBB
	// FFFF BBBB
	// FFFF BBBB
	// FFFF BBBB
	// GGGGGGGG
	// GGGGGGGG
	// EEEE CCCC
	// EEEE CCCC
	// EEEE CCCC
	// EEEE CCCC
	// EEEE CCCC
	// DDDDDDDD
	// DDDDDDDD


	// Some common positions used to place segments
	const centerSideX = this.position.x + this.segmentHeight;
	const rightSideX = (this.position.x + this.width) – this.segmentHeight;
	const upperSideY = this.position.y + this.segmentHeight;
	const lowerSideY = this.position.y + (2 * this.segmentHeight);

	// Detemine the position for each segment and create a new segment for each side
	const aPosition = new Position(centerSideX, this.position.y);
	// bitwise shift the hexadecimal number to determine if the specific segment should be illiminated
	const aIlluminate = (this.num >> 6) & 1;
	this.aSegment = new Segment(aPosition, horizontalSegmentWidth, this.segmentHeight, aIlluminate);

	const bPosition = new Position(rightSideX, upperSideY);
	const bIlluminate = (this.num >> 5) & 1;
	this.bSegment = new Segment(bPosition, this.segmentHeight, verticalSegmentHeight, bIlluminate);

	const cPosition = new Position(rightSideX, lowerSideY + verticalSegmentHeight);
	const cIlluminate = (this.num >> 4) & 1;
	this.cSegment = new Segment(cPosition, this.segmentHeight, verticalSegmentHeight, cIlluminate);

	const dPosition = new Position(centerSideX, lowerSideY + (2 * verticalSegmentHeight));
	const dIlluminate = (this.num >> 3) & 1;
	this.dSegment = new Segment(dPosition, horizontalSegmentWidth, this.segmentHeight, dIlluminate);

	const ePosition = new Position(this.position.x, lowerSideY + verticalSegmentHeight);
	const eIlluminate = (this.num >> 2) & 1;
	this.eSegment = new Segment(ePosition, this.segmentHeight, verticalSegmentHeight, eIlluminate);

	const fPosition = new Position(this.position.x, upperSideY);
	const fIlluminate = (this.num >> 1) & 1;
	this.fSegment = new Segment(fPosition, this.segmentHeight, verticalSegmentHeight, fIlluminate);

	const gPosition = new Position(centerSideX, upperSideY + verticalSegmentHeight);
	const gIlluminate = (this.num >> 0) & 1;
	this.gSegment = new Segment(gPosition, horizontalSegmentWidth, this.segmentHeight, gIlluminate);
	}

	show(){
	// Call show on each of the named segments.
	this.aSegment.show();
	this.bSegment.show();
	this.cSegment.show();
	this.dSegment.show();
	this.eSegment.show();
	this.fSegment.show();
	this.gSegment.show();
	}

	// Get the hexadimal encoding associated with the supplied number
	get num(){
	return this.nums[this.number];
	}

	// Array of hexadecimal encodings for displaying digits 0 – 9 (gotten from https://en.wikipedia.org/wiki/Seven-segment_display)
	get nums(){
	return [0x7e, 0x30, 0x6d, 0x79, 0x33, 0x5b, 0x5f, 0x70, 0x7f, 0x7b];
	}
	}

	// Basic class to store x, y coordinates of a position
	class Position{
	constructor(x, y){
	this.x = x;
	this.y = y;
	}
	}

	// Class that represents a display segment.
	class Segment{
	constructor(position, width, height, illuminate = false){
	this.position = position;
	this.width = width;
	this.height = height;
	this.illuminate = illuminate;
	}

	show(){
	fill(255, 0, 0, this.illuminate ? 255 : 40);
	rect(this.position.x, this.position.y, this.width, this.height);
	}
	}

	// Class to define a colon between the digit sets
	class Colon{
	constructor(position, options){
	options = options \|\| {};
	this.position = position;
	this.width = options.width \|\| 25;
	this.height = options.height \|\| 100;
	this.circleWidth = options.circleWidth \|\| 15;
	this.illuminate = true;

	// get the center point of the colon boundary
	const colonCenter = new Position(this.position.x + floor(this.width/2), this.position.y + floor(this.height/2));
	// space each circle evenly above and below the center point
	this.topCirclePosition = new Position(colonCenter.x, colonCenter.y – 2*floor(this.circleWidth / 2));
	this.bottomCirclePosition = new Position(colonCenter.x, colonCenter.y + 2*floor(this.circleWidth / 2));
	}

	show(){
	fill(255, 0, 0, this.illuminate ? 255 : 40);
	circle(this.topCirclePosition.x, this.topCirclePosition.y, this.circleWidth);
	circle(this.bottomCirclePosition.x, this.bottomCirclePosition.y, this.circleWidth);
	}
	}

view raw sketch.js hosted with ❤ by GitHub

Share this:

Like this:

Related

Leave a Reply Cancel reply