Placeholder Image

Subtitles section Play video

  • (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)

(bell ringing)

Subtitles and vocabulary

Click the word to look it up Click the word to find further inforamtion about it