Subtitles section Play video Print subtitles (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, the string value.