Placeholder Image

字幕表 動画を再生する

  • (train whistle)

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

  • So remember, I am each digit represents a one,

  • a two, a four, two to the (i)th power,

  • I actually even said that somewhere,

  • sometime earlier I said two to the (i)th power,

  • maybe only in my head.

  • So what I'm actually doing is taking that bit

  • and multiplying it.

  • Now of course it's a string so I have to convert it,