- 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,