- Hello and welcome to what will undoubtedly be

the longest video you've ever watched about binary numbers.

So why am I making this challenge here?

So I made a coding challenge number 117 called

the Seven Segment Display and what I was doing

was creating a visual, a JavaScript, HTML, canvas version

of the Seven Segment Display and to do that,

I had some weird code in there.

Val >> shift & 1

and that code, that code right up there

made no sense to anybody and I tried to explain it

but I got a lot of comments saying I didn't get

what this was so this is bit shipping and bit masking.

So before I can even get into that, I thought let's take

a deep breath and let's just enjoy and go back,

backwards in a time days of yore

when we didn't have anything but binary numbers

and we had to program everything in binary,

I don't know, this never happened for me

but I can imagine there was a time when this really happened

so this is a coding challenge where I will explain

what binary numbers are and then I will create a sketch,

p5.js sketch in JavaScript that converts

a binary number to a decimal number.

Okay so maybe you're even asking right now

what is a binary number, what is a decimal number?

So before I can even answer that,

we have to talk about this idea of base.

Base is

a term that refers to the number of possibilities

in a counting system, in a number system.

So base 2 or binary, there are only two possibilities,

a zero or a one.

Base 10,

ten, dec, deca,

or decimal has 10 possibilities, zero through nine.

There are other well-known numbering systems

that get used often, probably the one you see

in computing the most is base 16 or hexadecimal

and this actually has 16 possible digits,

zero through nine and also A through F

so when you see something like this in CSS

like FF

00

FF,

this is hexadecimal in coding.

This FF in decimal

is 255,

this 00 in decimal is zero,

this FF is 255 so this is the color,

this is a representation of the color red of 255,

zero of green and blue 255 so anyway,

so this kind of encoding of information exists

and by the way in my seven segment display,

there were hexadecimal representations

of what should be displayed on the seven segment display.

Okay so hexadecimal is interesting,

I'm not going to do hexadecimal conversion in this video

but you know, it's important to realize,

these are maybe something that you see,

I think base 8 is used for some file systems

but you can make up anything.

If you have base 4, you just have four possibilities,

maybe zero, one, two or three.

And when I say possibilities, this defines how you count.

And by the way, historically there are all sorts

of alternative ways of counting.

I believe, I was looking, Aztecs used maybe units of zero

then 20, then 40, then 800, then 8000

and instead of digits, they were actually drawings

of what, so anyway, so you can look that up,

somebody will make a nice explainer YouTube video

of counting systems but if we have base 2,

this means there are only two possibilities.

Let's use base 10 decimal 'cause we understand that.

10 fingers, 10 toes, that's why base 10 is the convention.

Zero, one, two, three, four, five, six, seven, eight, nine,

10, 11, 12, right 'cause once we get to nine,

we've run out of possibilities in a single digit

so we switch to zero and then the next digit over,

the tens unit becomes a one.

This is what kids learn in elementary school

in counting in groups of 10, hundreds units, et cetera.

All right but if I were doing this in binary,

I would say zero, then I would say one

and then I have run out of digits,

I have no more digits left, so I have to say one zero

and then one one and then, uh oh, one zero, zero,

then one zero one,

one one one, I'm totally,

this is the worst drawing ever,

and then one zero zero zero, did I get that right?

No, I totally did not.

One zero zero, one zero one, one one zero,

then one one one and then one zero zero zero.

Oh this is hard.

Okay let me match up some things for you.

So something that's really interesting here

is one matches up with one.

One zero matches up with two, one zero zero matches up

with four, five, six, seven, one zero zero zero

matches up with eight.

Notice that when there is only the leading digit one

and everything else is a zero, there's a pattern here.

One,

two,

four,

eight, maybe now you could imagine

what one zero zero zero zero is going to be.

How about

16?

Oops, sorry, 16, I should put that over here.

One, two, four, eight, 16.

These numbers are doubling so in fact,

each one of these digits in binary represents

not the tens, the twos.

So with a one, this is actually one,

this is actually two to the zero power.

Two, this is two to the one power.

This is two squared, two to the third power,

we're doubling so this is by the way

the algorithm that I need to write in my code

to convert from binary representation

to decimal representation.

Are you ready to do that?

I'm ready.

So one thing I want to show you first

is you can can actually, you don't need

to write your own algorithm to do this conversion,

this is built in to the way that computers work

and actually JavaScript has several helper functions

that'll do this for you. I think if I say for example,

=0b, if I have a variable that's =0b, I can put any encoding

so what if I put one one one one one one one one,

now actually the value of, that's actually 255.

So this is, I can actually hard code

a number in binary by saying 0b.

I can also use this parseInt function

so if I say parseInt and give it a string like 255,

just converts it, the string, to a number.

But I could do things like say parseInt

one one zero and then give it a radix or,

that's another word for base, and say what is the value,

the integer value, the decimal integer value

of one one zero in base 2, right, it's six.

If it were base 10, obviously it's 110.

So this will actually be done for you just through

that parseInt function but let's go and actually write

our own algorithm for this, yes, there is a bell ringing.

(bell ringing) And let's go to the web editor.

So let's just assume for the sake of argument

that the binary numbers that I want to work with

are going to be strings.

So I am going to make a number and I'm going to make it

a binary number and there's a thing about

when you have 8 bits, that's kind of important here,

right, each one of these is referred to as a bit,

each spot in a binary number is a bit.

When you have eight of them, that's a byte.

And so this has to do with how things are stored

in the computer's memory, right, everything ultimately

in the depths of your computer is stored in binary format

and the amount of space it takes up is the number of bytes

or kilobytes or gigabytes, et cetera, terabytes.

But I'm going to waste a lot of space and encode

my binary number as a string so let's just say,

let's just try something really simple

like one zero zero and we know that should be four, right?

Zero one one zero, no that's not four.

Yeah it is four, (chuckles) I lost my mind

for a second there, right?

This is zero, this is one, this is two, this is three,

this is four but we should, yeah, if we do this right,

we'll get four.

Okay now I want to write a function, I'm going to call it

bin, binaryToDecimal, it'll take in any arbitrary value

which is a string and we could make this much more generic.

By the way, as a challenge to you, what if you made

a function like this which is just number convertor,

it takes a number and two base, a base and a second base.

So here's the number in a given base,

give it back to me in another base.

It'll be generic, that's a challenge for you to do

now or later or whenever you want.

Okay, so the thing that I need to do is I need

to loop through

the...

Sorry, i = 0, i < val.length so if it's a string,

I'm going to loop through the string one character at a time.

So for each character, the way to convert it

is to add up all of the twos so for example,

one zero one is five because it is one zero zero

plus zero zero one is one zero one and this is four

and this is one so one zero one is five.

So if I just start here and take the first digit

multiplied by two and take the second digit

multiplied by, sorry multiplied by one,

the second digit multiplied by two,

the third digit multiplied by four,

add all those things together and by the way,

it's not just one two four, it's two to the zero,

two to the one, two to the two, two to the three.

So it's the exponent that's counting up.

So I'm going to say sum += pow,

now I need to get this value.

So I need to get the zero or the one so I'm going to say

the bit =

val.charAt(i).

Now here's the thing, hmm, hmm.

This is an interesting question here.

What is i when it starts at zero?

i is actually a string representation,

this is the zero index so even though I want

to do the conversion by starting over here,

I'm actually over here so I actually want to get

to the end of the, I want to start from the end

of the array, or not the array, the end of the string

and a quick way that I can do that is by saying

val.,

val.length-i-1,

right, if there are three digits,

I have

two one zero, not zero one two, two one zero.

So three minus i minus one.

So sum = pow(2, bit)

and I need to make this a number,

I'll just use parseInt 'cause it's a string

and then let's just say console.log(sum)

and I think we're done sort of (chuckles).

Console.log(sum), let's see,

let's do binary,

binaryToDecimal(val) and actually so this should return

a num, sorry,

and oh, there we go, four.

Let's test some other ones out.

Let's add another one.

Six.

Let's try one zero zero, this is a byte, right,

if all the ones are on in a byte, right,

everything is on, eight bits is a byte

and everything is a one, what do we get?

Okay I need one more.

Wait, what's going on?

Something is wrong.

No, this isn't right, I've made a mistake.

This code is not correct at all (chuckles).