Coding Challenge #117: Seven-Segment Display

References:

Videos:

Related Coding Challenges:

Timestamps:
0:00 Welcome!
1:53 Let's talk about the seven segments
2:49 Let's start coding!
8:02 Explaining the idea of bit shifting and bitwise AND operation
10:36 Implementing the hexadecimal encodings for the display
12:44 Making a function to get the correct color value for a segment
15:21 Displaying all the numbers one by one
16:45 Seven-Segment Display!
17:44 Thank you for watching!

Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound

#bitwiseoperations #bitwiseand #javascript #p5js

[zach_attakk]

Did one of my favourite people just reference another of my favourite people? My life is complete.

[MineBill_]

Enjoy people, you don't know the horror he went through on the live stream :p

[sujals]

You are awesome, you inspired me to become a programmer

[infernocaptures]

Nice! You and Tom are my favourite computer people on YouTube. Also I appreciate the use of the word 'bodge'.

[ChristianSchmid]

Hey Dan, you are the real Bit shiftman ! ;–)

[HerPhi]

I just thought over and over again 'what is wrong with him' 🤣🤣👍 Made my day!
Keep up this fun content! It suits you.

[grainfrizz]

Dan, do the Big O notation and visualize :)

[offtheball]

My favourite use of bitwise operations in JS was basically implementing a truth table. I had four conditions that could come together in about twelve different ways to affect five different pieces of state, so I just tested them, packed the results in an integer, and used a switch.

[caribbeanman]

Coding challenge suggestion: Code to spell out a number in full - almost any number, and with the proper placement of commas and "and" - given its numeric digits (e.g. 1254 --> "one thousand, two hundred and fifty four"). I imagine the problem would have to be broken down with the use of several helper functions and the use of recursion. Should be a lot of fun.

[ericboyer]

Thanks Daniel
using processing, some kind of clock, yes I should have made a class for the segment, it is so not optimize, but anyway



int[] nums={0x7E, 0x30, 0x6D, 0x79, 0x33, 0x5B, 0x5F, 0x70, 0x7F, 0x7B};
int index=0;
void setup(){
size(1200, 700);
frameRate(1);
}

void draw(){
background(0);

//future time
String strD="10";
String strD1=strD.substring(strD.length()-2).substring(0, 1);
String strD2=strD.substring(strD.length()-2).substring(1, 2);
String strM="08";
String strM1=strM.substring(strM.length()-2).substring(0, 1);
String strM2=strM.substring(strM.length()-2).substring(1, 2);
String strY="2019";
String strY1=strY.substring(0, 1);
String strY2=strY.substring(1, 2);
String strY3=strY.substring(2, 3);
String strY4=strY.substring(3, 4);
String strh="07";
String strh1=strh.substring(strh.length()-2).substring(0, 1);
String strh2=strh.substring(strh.length()-2).substring(1, 2);
String strm="00";
String strm1=strm.substring(strm.length()-2).substring(0, 1);
String strm2=strm.substring(strm.length()-2).substring(1, 2);
String strs="00";
String strs1=strs.substring(strs.length()-2).substring(0, 1);
String strs2=strs.substring(strs.length()-2).substring(1, 2);

sevenSegment(nums[parseInt(strD1)], 0, 0);
sevenSegment(nums[parseInt(strD2)], 1, 0);
sevenSegment(nums[parseInt(strM1)], 2, 0);
sevenSegment(nums[parseInt(strM2)], 3, 0);
sevenSegment(nums[parseInt(strY1)], 5, 0);
sevenSegment(nums[parseInt(strY2)], 6, 0);
sevenSegment(nums[parseInt(strY3)], 7, 0);
sevenSegment(nums[parseInt(strY4)], 8, 0);
sevenSegment(nums[parseInt(strh1)], 10, 0);
sevenSegment(nums[parseInt(strh2)], 11, 0);
sevenSegment(nums[parseInt(strm1)], 12, 0);
sevenSegment(nums[parseInt(strm2)], 13, 0);
sevenSegment(nums[parseInt(strs1)], 14, 0);
sevenSegment(nums[parseInt(strs2)], 15, 0);

//current time
strD="0"+day();
strD1=strD.substring(strD.length()-2).substring(0, 1);
strD2=strD.substring(strD.length()-2).substring(1, 2);
strM="0"+month();
strM1=strM.substring(strM.length()-2).substring(0, 1);
strM2=strM.substring(strM.length()-2).substring(1, 2);
strY=""+year();
strY1=strY.substring(0, 1);
strY2=strY.substring(1, 2);
strY3=strY.substring(2, 3);
strY4=strY.substring(3, 4);
strh="0"+hour();
strh1=strh.substring(strh.length()-2).substring(0, 1);
strh2=strh.substring(strh.length()-2).substring(1, 2);
strm="0"+minute();
strm1=strm.substring(strm.length()-2).substring(0, 1);
strm2=strm.substring(strm.length()-2).substring(1, 2);
strs="0"+second();
strs1=strs.substring(strs.length()-2).substring(0, 1);
strs2=strs.substring(strs.length()-2).substring(1, 2);

sevenSegment(nums[parseInt(strD1)], 0, 1);
sevenSegment(nums[parseInt(strD2)], 1, 1);
sevenSegment(nums[parseInt(strM1)], 2, 1);
sevenSegment(nums[parseInt(strM2)], 3, 1);
sevenSegment(nums[parseInt(strY1)], 5, 1);
sevenSegment(nums[parseInt(strY2)], 6, 1);
sevenSegment(nums[parseInt(strY3)], 7, 1);
sevenSegment(nums[parseInt(strY4)], 8, 1);
sevenSegment(nums[parseInt(strh1)], 10, 1);
sevenSegment(nums[parseInt(strh2)], 11, 1);
sevenSegment(nums[parseInt(strm1)], 12, 1);
sevenSegment(nums[parseInt(strm2)], 13, 1);
sevenSegment(nums[parseInt(strs1)], 14, 1);
sevenSegment(nums[parseInt(strs2)], 15, 1);

//past time
strD="09";
strD1=strD.substring(strD.length()-2).substring(0, 1);
strD2=strD.substring(strD.length()-2).substring(1, 2);
strM="08";
strM1=strM.substring(strM.length()-2).substring(0, 1);
strM2=strM.substring(strM.length()-2).substring(1, 2);
strY="2019";
strY1=strY.substring(0, 1);
strY2=strY.substring(1, 2);
strY3=strY.substring(2, 3);
strY4=strY.substring(3, 4);
strh="07";
strh1=strh.substring(strh.length()-2).substring(0, 1);
strh2=strh.substring(strh.length()-2).substring(1, 2);
strm="01";
strm1=strm.substring(strm.length()-2).substring(0, 1);
strm2=strm.substring(strm.length()-2).substring(1, 2);
strs="00";
strs1=strs.substring(strs.length()-2).substring(0, 1);
strs2=strs.substring(strs.length()-2).substring(1, 2);

sevenSegment(nums[parseInt(strD1)], 0, 2);
sevenSegment(nums[parseInt(strD2)], 1, 2);
sevenSegment(nums[parseInt(strM1)], 2, 2);
sevenSegment(nums[parseInt(strM2)], 3, 2);
sevenSegment(nums[parseInt(strY1)], 5, 2);
sevenSegment(nums[parseInt(strY2)], 6, 2);
sevenSegment(nums[parseInt(strY3)], 7, 2);
sevenSegment(nums[parseInt(strY4)], 8, 2);
sevenSegment(nums[parseInt(strh1)], 10, 2);
sevenSegment(nums[parseInt(strh2)], 11, 2);
sevenSegment(nums[parseInt(strm1)], 12, 2);
sevenSegment(nums[parseInt(strm2)], 13, 2);
sevenSegment(nums[parseInt(strs1)], 14, 2);
sevenSegment(nums[parseInt(strs2)], 15, 2);


}

color getColor(int val, int shift, int offset){
color c=color(0, 0, 0);
int a=255*((val >> shift) & 1);
if (offset==0){
c=color(255, 0, 0, a);
}
if (offset==1){
c=color(0, 255, 0, a);
}
if (offset==2){
c=color(255, 255, 0, a);
}
return c;
}

void sevenSegment(int val, int x, int y){
push();
stroke(25);
noFill();
//A
fill(getColor(val, 6, y));
rect(30+70*x, 59+200*y, 36, 9);
//B
fill(getColor(val, 5, y));
rect(70+70*x, 70+200*y, 9, 49);
//C
fill(getColor(val, 4, y));
rect(70+70*x, 130+200*y, 9, 49);
//D
fill(getColor(val, 3, y));
rect(30+70*x, 180+200*y, 36, 9);
//E
fill(getColor(val, 2, y));
rect(20+70*x, 130+200*y, 9, 49);
//F
fill(getColor(val, 1, y));
rect(20+70*x, 70+200*y, 9, 49);
//G
fill(getColor(val, 0, y));
rect(30+70*x, 120+200*y, 36, 9);
pop();
}

void push(){

}

void pop(){

}

[kennyscott]

I am happy to let the hard coding slide because bitwise. That was an epic win. So happy to see it being used in js.

[sarthakdhanawade]

Sir you are the best coder and a teacher in the world.

[kevnar]

I did this on my own one day for a retro scoreboard in a game I was making. I wish I would have known about the bit shifting stuff. Would have saved all kinds of time. I just sent in the digit required, and used a bunch of if-thens to light up each segment if it applies to a given number. So segment A lights up for 2, 3, 5, 6, 7, 8, and 9. B is on for 1, 2, 3, 4, 7, 8, and 9, and so on.

I hard-coded the values as well, but I passed an x, y and size values and adjusted the draw positions relative to those, so I could put the digits anywhere on screen and any size.

[harshareddy]

thanks to coding train I was struck at my bit shift color, thanks your video helped me at color frame

[charanvengatesh]

Coding Train, Numberphile, Tom Scott, and Jabrilis altogether ->>>> Voltron of Knowledge

[skmgeek]

The Tom Scott video is literally the top video in my recommended bar on the right of the video XD

[nahfamimgood]

thinking of this out of context is great. "G is like a but its half way down!"

[hickehelbro]

"the chat needs to relax" lol

[asdasddas]

This is why 8 is my favorite number. It took up all the spaces on the seven segment display on my old microwave LOL

[paulpandi]

It's awesome. You giving crystal clear explanation. 👌👌👌👌👌👌