(bell ringing)
- What you are about to watch is a coding challenge.
In a moment I'm going to say
hello welcome to a coding challenge.
I apologize that this is happening twice,
but I just wanted to show you what it is
at the beginning because I also made some refinements
thanks to things that people in the chat suggested
after I finished the coding challenge.
So what I am attempting to make here
is what's called a seven-segment display.
This is based off a Tom Scott video
that I'll reference in a second.
And you can see here here is the final result
and the things that I've added
after the coding challenge finished were
a little bit of nicer colors and rounded rectangles.
So it's a little bit nicer.
So I hope you make something fun with this
and enjoy this coding challenge where I do this
in kind of a way that's going to make you want to complain
about my coding abilities, but that's fine.
Complain away.
I'm here for it in the comments, at me, all that stuff.
Enjoy.
(train whistle blowing)
All right, hello, welcome to a coding challenge.
Okay, I'm very excited about this one.
This is a second try, by the way.
The first try has been about, got really,
things went haywire.
They will go haywire again,
but I'm going to give myself about 30 minutes here,
I'm a little late, for somewhere I have to be,
to try to create a seven-segment display.
Now I got this idea from watching this Tom Scott video
about seven-segment displays.
And Tom Scott talks a little bit about
how they work and looks at what kind of letters
and numbers they can display and uses a regular expression
to try to find the longest word you can write
with seven-segments displays.
So I mean this video, I just want to make a visualization
of the seven-segment display,
which is in JavaScript in the browser in Canvas,
which is admittedly kind of a ridiculous thing to do,
but I feel like if I can make one then you the viewer
can take what I've done and make a bigger display.
Then you could display different words.
You could implement Tom Scott's code with the data files
and actually visualize so many possibilities.
All right, so, let's talk about the seven segments.
The seven segments of the seven-segment display
are like this.
One, two, there's seven of 'em,
three, four, five, six, seven.
Now of course they're like a nicer design
with the sort of looks like this,
they're kind of tilted.
So I'm going to make a very crude version of it,
probably just with rectangles.
And I'm not even going to use an array.
You could do this in an object oriented way
to keep track of each one of these as an individual object.
Then you can have an array of object
and each one of these...
There's a lot, I'm going to just do it
in the crudest way possible.
So first let me try to draw this pattern.
And one thing that's going to be important as I do this,
it's a good thing I'm on the second try
'cause I really botched this the first time,
is if I go down here this order is super important.
A, B, C, D, E, F, G, and decimal place.
And okay, so, I want to draw them in this order.
So let me go back to my code.
Let me write a function called sevenSegment.
And then I'm going to say,
at the beginning I'm going to use push and pop
to kind of, the idea is this function,
I could make an object,
I kind of would like to make an object.
Ah, whatever.
This function is going to draw all of the segments
relative to some point.
So I could probably, might make sense
to draw Instagram relative to hear.
It might make sense to draw it relative...
Let's try drawing it relative to here right now.
So the first rectangle will be, and I'm going to,
this is going to be very hard coded, admittedly.
Let's say it's going to be a rectangle
and it's going to be at, let's go 10 pixels in,
10 pixels down, 100 pixels wide, 10 pixels high,
and let's say fill zero.
Quit messaging me.
(laughing)
Fill zero.
Oh I've got to call the function.
Oh I've really lost my sense of how to code.
Call the function.
There it is.
Let's make it a little fatter,
and let's put it 20 pixels in and 20 pixels down.
And let's actually put it 40 pixels in
because the next one I want to do, B,
I'm going to put at,
it should start at like 140 pixels,
40 pixels down.
Then it should be 20 pixels wide and 100,
and I could have rotated it,
but basically I want to do that.
Then I'm going to do the one on the left.
No, no, no what's next?
Then further down again.
So everything's the same.
Each length is 100 plus there's a buffer of like 20.
So I need to make this 160 I think, there we go.
And then what's next?
D, and I should put some comments here right?
This is A.
This is B.
This is C.
And of course I could create an algorithm where to loop,
I could use translate, rotate, so many possibilities.
I'm not doing it that way, I'm doing it my way.
I don't care.
There's seven, I can do all seven.
A D is at the bottom.
D is actually really A
but just a lot further down like 220,
let's just guess, there we go, 260.
Woops, no, no, no, no.
That's right.
Now what's after D?
A, B, C, D, E.
(clearing throat)
E.
E is actually like C.
E is very similar to C but with the x values of A,
right, which is 40 and the y value...
That's why is it, huh?
What did I do here?
Oh maybe this one is wrong, hold on.
Hold on everybody.
Yeah, that's right.
This one is a little bit off.
It's got to go.
Oh, ah, actually, these have to be a little bit smaller.
I forgot about the buffer.
So this is actually a little bit shorter like this.
There we go.
That's kind of right.
And then the first one also should be that.
This is the most fun I've had coding in a long time.
Isn't it nice just to like hard code reckless?
It's like the first, this is like the first week
of learning to program in p5.
It's just like hard coding shapes.
I love it.
F, which one's F?
F is up higher.
It's like B but over.
So let's start with B.
Start with B, but move it to here.
There we go.
And then, this is F, and then G is the middle.
This is exciting.
G is like A.
It's like A but it's halfway down.
So like 140.
Look at that, my seven-segment display, muwah.
(bell ringing)
Part one of this, nah, I'm just going to keep going.
Okay, so here we good, excellent, okay.
Now what I want to do is I'm going to say stroke zero
and I'm going to say no fill.
Okay, oooh, uuhh, iii.
I don't like how that looks.
I need a little more...
Can I get like a, what if I just do like all of these
like a little bit less?
Like 78, 18, oooh, I'm starting to like this, 18.
Oh come on, just bear with me.
You don't mind me doing this.
Just go make yourself a cup of tea,
I'll be done in a second.
There's sometimes just like hard coding stuff,
it's just like the loveliest, nicest thing to do.
The chat is full of rage.
The chat needs to relax.
Take a deep breath.
Fine, this is soothing.
Look at that, okay, oh I like it.
It's weird but I like it.
Okay, so this is like nonsense what I've done.
You are going to make your own, be much nicer version of this,
with little triangles and all sorts of stuff like that.
I've really botched it here.
But what I'm going to do now is
I need to figure out a way to turn each one of these
on or off.
I don't know where this pink marker came from
but I love you pink marker.
So how am I going to do that?
So the idea of a seven-segment display
is that each one of these is...
And there's, by the way, a decimal point here,
which is there are eight, is assigned a bit
in an eight-bit number.
So you can think of an array of zeros and ones
that has eight in it.
Zero, zero, two, three, four, five, that's a nine.
Right, where I would go zero, zero, one,
zero, zero, one, zero, and then the decimal place.
And I think sometimes the decimal place
is maybe the first or the last bit.
I'm not entirely sure.
I was trying to look up the documentation for this.
So something that I could do, though,
is instead of having an array,
what if I had any generic number,
256, so I can use something called bit shifting
or bit masking so I can do a bit-wise operation.
Oh this is, oh I'm so happy to a bit-wise operation.
Very rarely in programming anymore,
especially JavaScript, actually shift the bits, right?
That's usually a thing you're doing
in a much lower level place.
So let's say I have this actually as a binary number.
And what I want to do is I want to figure out
which one of these.
If this particular digit, let's say, is on or off.
Well, if I do what's called
an and operation with one, right?
An and, but I have the wrong number of things here.
But you know, whatever.
If I do an and operation with one,
all of these will always end up zero
and then if a one is here,
if a one is here I will get a one.
If a zero is here, zero and a one is a zero.
So if I can shift the bits over and then and with one
I just have to not shift to check this one,
shift by one, shift by two, shift by three, shift by four,
shift by five and blah blah blah et cetera.
So and in order to do this in JavaScript,
this is shift the bits to the right,
shift the bits to the left,
and then this is and.
I can also do an or if I wanted to do an or operation.
So in other words,
if I say for, now here's the thing.
I've kind of gone, I went around in circles with this one.
I was trying this earlier.
I want, I need to do something to test.
So in other words, if I look down here,
this is, you can see this is,
if the encoding is abdcdefg,
I don't know which one I'm doing,
g, right, then that's seven,
one, two, three, four, five, six, seven,
then on on on on on on off.
So to get a zero presumably I pass this in.
And what I'm going to do and thank you to (mumbles)
for making this suggestion.
I'm going to pass in a value,
and what I'm going to do first is just shift it by one.
'Cause I got to get rid of the thing for the decimal place.
So I'm actually just going to shift it
by one before I come in here.
And I didn't actually do the decimal place.
I'll let you do the decimal place maybe in your version.
So now what I'm going to do is I'm going to say
fill val shifted by six or seven or one, I don't know,
I'm lost.
I need to shift these all...
I think the first, if it's abcdefg at
I'm going to shift by six, yes,
and then ampersand it bit-wise with one, right?
This is what I'm talking about.
And then I also probably, now this is no good.
I want to do a color mode.
I also need to do color mode RGB one.
So in other words what I want is to get a zero,
a zero means black and a one means white.
So this now if I shift,
shift by five,
shift by four,
shift by three.
I totally did this wrong.
I've done it wrong again but let's just get this out of here.
Shift by two,
shift by one,
and shift by zero.
Aw, so close, that doesn't look right.
What do I do?
Maybe I need to shift the other way here.
(laughing)
Hold on.
Let's do this.
There we go.
(laughing)
Okay, that's a zero.
Except for the fact that I kind of want it highlighted to be,
I kind of want it to be inverted,
so I actually should say let me write a function
getColor and the value and the amount of shift,
and what I'm going to do is I'm going to return.
So I'm going to say the red value,
people I think want me to,
in the chat they're saying they want me to make it red.
The red value is the value with the amount of shifting,
and ampersand one and let's forget
about this color mode thing,
and let's actually say,
let's do this
multiply this by 255.
And say g, b, actually, this is silly,
these can just be zero.
I'm only doing the red value.
And then I'm going to say fill,
getColor
getColor and shift by six
with that value.
Oh return color r, g, b, and here we go.
All right, this is very exciting.
I'm just going to sit here and copy paste this
calmly,
smoothly,
little by little.
Four.
By the way, if you're wondering why I'm not
using a loop here it's only because
I want to drive you crazy.
And I've lost my semicolons.
A four, three, six, five, four, three, two, one, zero.
All right, so what's going on now?
255 times it's value shift, oh boy,
this has to be in parentheses.
There we go.
Oh, but it's backwards.
So 255 minus r, minus r.
No no no that was right.
Actually that was right.
And then it shouldn't be zero
it should be actually, I should have really let the alpha
be this.
And then if the alpha is zero...
There we go.
Hooray I made a zero.
Okay.
So now look at this,
let's say,
let nums equal...
So now, if I go here and I say
this is zero.
Oops, no, go away.
Zero...
(laughing)
Lots of copy and pasting.
I can speed this up somebody, one,
two...
(loud fast music)
Okay, now, set nums index index.
Let index equal zero.
And then I'm going to say frameRate one
index++.
Zero, one, two, three, four, five,
six, seven, eight, nine, and error.
Okay, so now we can say index++ index equals index plus one
modulis nums.length
and I'm going to make the frameRate five
and I'm going to zoom in on this
and here we go.
Oh, that's way too fast for me.
I can't handle it.
Let's put on some music.
(light, silly music)
And thank you very much, there's our seven-segment display,
counting through the hexadecimal values
from zero to...
So now, here's the thing.
I've got an exercise for you.
Could you make a clock out of this?
Could you make this object oriented?
Refine the code, make a design actually look like
a nice seven-segment display?
Think about color, think a rainbow seven-segment display.
So many possibilities.
And also go back to this video and if I scan here
towards the end,
this is the longest word apparently
that you can display on a seven-segment display.
So follow Tom's codes and know,
but there's no reason why instead of using like readFileSync
you can just use load strings in p5,
get that same database, and you can add this code in
and do something fun with it.
Share it with me, share it with Tom.
I don't know, Tom Scott, this is not endorsed by,
I just did this on my won.
But I think it could give you some fun possibilities
of things you can make doing the p5 Web Editor.
Share it on the codingtrain.com website.
Seven-segment display somewhere,
share it with me on Twitter (mumbles).
All those kind of other places, Mastodon, whatever,
choochoo.space, and I'll see you
in a future coding challenge.
(train horn blaring)
(upbeat music)
(bell ringing)