(train whistling) - Hello and welcome to coding
challenge bit shifting. So, this is the second part, sort of, of this coding challenge
series about binary numbers that all came from me implementing this in the seven segment display
video coding challenge and then everybody asking,
"What was that that you did? "This shifting and masking
makes no sense to me." So, what I did in the previous video, if you actually managed
to watch that video, was I created this little interactive binary to decimal converter system. So, this is a single byte with eight bits. Every bit being on, I don't know, maybe it should be white if it's on, black if it's off, the color, whatever, but black in this case means it's on, and so you can see here, if I toggle all of it off, I have a zero, this is one, this is two, this is three, this is four, so I can just toggle these bits on and off and get the decimal
representation of that number. Okay, so what do I want to do now? What I want to do now is
add bit shifting to this. Well, what is bit shifting and why would you ever want to do it? Well, I know what it is,
why would you want to do it? Well, I needed to do it with
my seven segment challenge, so maybe that's the reason
why you'd want to do it. But let's, okay, let's say
for the sake of argument that we have the number 01011010. So, first of all, I need to
convert this into decimal, just to, I mean, I don't
need to to do bit shifting, but just to sort of think about it. So, let's think about that. This is one, so this is
two, plus eight, plus 16, plus 64, so that's 80 plus 10 gives 90. So, this number is 90. Where's my eraser? Okay, so that's 90. Sorry, ah! So, what is bit shifting? So, bit shifting, when
you take any number, like the number 90, you
can ask for the computer to think about it in binary,
which it's already doing! That's actually what it's doing,
and shift the bits around. So, I could say, shift to the right, or I could say shift to the left, and I could say shift by a certain amount. So let's say I just say
shift to the right by one, so this is bit shifting,
and what that actually does is it shifts all the bits over. So, this is a zero, this is a zero, this shifts to here, that's a one, that's a zero, one, one,
that's a zero, this is a one. Now, interestingly enough, I could tell you that this is the number 45. I hope it's the number 45, why? This is what's really interesting. Shifting the bits over by one is actually the same operation as dividing by two. Think about the powers of two
and how binary numbers work. Shifting to the other way, to the left, is multiplying by two. Look at this, let's be sure about this. This is one, two, four, eight, 16, 32. So, 40 plus five, 45. (ding) I was right! So, this is what bit
shifting basically does. So, in theory, does, when
you say 90 divided by two, does it shift the bits? I don't know, maybe, but this is actually, I've heard, I think this is right, this is a faster way to divide by two. Of course, you can only
do it with integers, and how fully your point numbers are represented as bits is
a whole other discussion, but now, what we can do
is let's add this feature to our code, and by the way, we can shift by more than one at a time. I can shift by four bits,
et cetera, but, alright. And you might be thinking to yourself, I don't get it, why is this one a zero, like, wouldn't there be some
bit over here to shift in? Well, when you apply bit shifting, you can imagine that the number 90, if you represent it in two bytes, all of these would be zeroes,
so you can always assume the thing to the right is a zero, and whatever is here is shifted over and basically gets removed, so by the way, if you tried to shift it again and divide this, we would
get, what would we get? We would get the number 22. We wouldn't get 22 1/2, because we get the integer value of dividing that by two, which takes off the decimal value, okay. Let's add that, so let's go over here and let's add a button. Let's add a shift b button, and let's say, and I'm just using shiftButton
equals createButton and I'll put this in
the button, so now it's, oh, it's so tiny, that's fine, so this is going to be my button, whenever I click it, I'm going to shift the bits to the right. How am I going to do this, hmm? Function, so let's say,
shiftButton shiftBits, so I'm going to write a
function called shiftBits. Cue all of the jokes about
me being Daniel Shift-man man, Shiffman, okay,
what function, with a c, and now, is not a function, shiftBits, shiftButton, oh, shiftButton.mousePressed, this is the p5 dom library that I'm able to attach a function as an event to when I click the mouse on this button. So, now, what I'm going to do is, okay. Well, here's the, the funny thing is, I was doing this to show
you about bit shifting. Oh, I just have to take
that, oh, interesting. Oh, look at this! Think about the, ah-- (ding) This is really interesting so, there's a couple ways I
could approach this problem. If you watched the previous video, all of these are like a bit object, and I can, I've kind of kept information about like, its x and y, its diameter, and its state, and I'm rendering it, but what I'm actually going to do here is I can take the decimal version, right, so, this is a little bit of code here I'm going to put into a function, which is just going to be
a function like getDecimal, so whatever the state
is, I'm going to get-- Oh, no, that's, sorry getBinaryString, this is going to return the binary string of whatever the
visualization is reporting, so, I'm going to say, getBinaryString, so now I'm back to what
I had before, right, but now, in this shiftBits,
I can do exactly this again, so, I want to get the binary string, then I want to get the
number, the value equals get, equals binaryToDecimal, of that number, then, I want to say val
equals val, shift by one, so I want to shift the bits over by one, but now I'm going to have to
convert that back to binary. I don't actually have a
decimal to binary function. What I want to say now is,
num equals decimalToBinary, right, of a value, so
this is what I want to do. I want to be able to, now,
any time I click this, get the conversion back to decimal. Oh, I have to write a new function! So this was binaryToDecimal,
now I need to write a function, I knew I would have to do this, I left this as an exercise,
but I'm going to need it now. DecimalToBinary, now again, I could get JavaScript to do this for
me natively with toString. So, for example, if I just
open up the console here, and I were to say let num equals 90, I could say num toString
two, (laughs) I'm done. Maybe I'll just do this, it would be really nice to just do this,
but I'm going to do it myself. So, what I'm going to do is I need to get, now I get a value in, I'm
using these variable names in terrible ways, I need to do a refactoring of this with
better variable names, and what I'm going to
do is I, and you know I always do this as eight bits, so this is a bit of a constraint, I don't have to be some
super generic here. I'm going to say int
i equals, no, not int, let i equal zero, i is less
than eight, i plus plus, and now, what do I want to
do, I need to divide it by, so here's the thing, how
do you get this to work? I'm pretty sure this is how you do it. Let's say I'm going to take the value 90 and try to turn that into binary, so my theory here is that I'm going to divide by 128, divide
by 64, divide by 32, divide by 16, divide by
eight, divide by four, and you can see what I'm doing here. I am taking the same thing
I did, powers of two, but I'm going to use
the division operator. What do I get when I
say 90 divided by 128? I get a zero. 90 divided by 64, I get a
one remainder something, 90 divided by 32, oh, here's the thing, ah, so, what's the remainder? Oh, okay, so this is where I need to, the remainder here is,
sorry, 64, 74, 84, 26! So, this bit is going to be a one, and now I take that, I
don't do 90 divided by 32. Ah, what am I thinking, here? This is not what I meant to
do, ah, something fell over. Let's get rid of this 90 here, so this is zero remainder
90, basically, right? Zero remainder 90, so that
remainder comes over here. Now, it's one remainder 26,
that 26 comes over here. 26 divided by 32 is zero, remainder 26, 26 divided by 16 is one,
remainder 10, right, 10 divided by eight is one remainder two, so you can see where I'm going, here. So, I should be able to do this now. Come back over here to the code. It's weird how much fun this is for me. So, what do I need to do now, okay, so, I'm starting with the number, and I'm going to say the binary bits is a, I'm going to use a string,
and I'm going to go from two to the seventh, i equals
zero, i is greater than, equal, i starts at seven,
i goes down to zero, i minus minus, and I'm going
to need this remainder value. So, the first thing that I want to do is called a divisor, equals
power of two to the i, then what I want to do is, I
need to do integer division. So, I want to say number,
I want to say the answer, or the value, the bitValue, equals number divided by divisor,
number divided by divisor, here's the thing, I'm going to use floor. So, JavaScript natively
is going to do everything as floating point, if I were like the Java programming language,
it would just give me, without the remainder,
so then, I'm going to say the remainder equals the, equals the-- I forgot something! I have a whole video,
actually, Golan Levin came and did a guest tutorial
about a particular operation called modulus, represented, I think the operation is called modulo, and maybe the symbol is modulus, I can never remember
this, someone's going to, there's going to be a lot of comments telling me the correct way to do this, I can just see 'em already, but this gives you the remainder
of the division operation. So, what I can do here,
and this, by the way, this should be remainder, and remainder should be num, and then the remainder is the remainder modulus
divisor, right, and now, oh, and this, and the bit value is bits plus equal bitValue,
oh, is this possibly right? And then, return bits, where did I-- Wait, let's just see if
this function even works. So, one thing I could do, actually, I'm just going to go,
the p5 web editor console isn't interactive, but I can go here to the canvas frame and I can say, right, what was the name of that function? decimalToBinary, and if I have
a decimal number like 90-- (gasping) I think that's right, it works! Okay, 255, yeah, okay,
great, so that works. So now, when I'm shifting,
right, what was I doing? I was shifting, then
I get decimalToBinary, and then, what do I need to do? Update, this is really, in draw, right, there's a draw function somewhere, this is like, update the
states, what, oh no, oh, no. Where do I do that? Oh, I did that here, so I
need to update all the states. So, oh, look, I have a setState
function, how convenient. So I also now, once I do
that, I need to go through and set the state to num charAt i, and, and this probably has to be a number, oh, but I mean, I have that in setState. Oh, it's Boolean, right, I forgot I had this whole crazy
thing to take the string, which is zero, one, turn it into a number, turn it into a Boolean, perfect. So, it does that already,
so now I can shift, oh, boy. Divide by two, divide
by two, look at this! Oh, my goodness, so I can now bit shift, oh, this is, let's go back to 90, right? This is 90, whoops, 90! Okay, ready, here we go, this is going to be an exciting moment, no,
no, ah, don't click there! No, get back to 90, there we go. (drum roll) (fanfare) So, we now have interactive bit shifting. Now, you, the viewer of this, you probably want to add shifting the other way. That wouldn't be too hard to add, I just add another button,
shift the other way, maybe I want to actually
have, like, a slider, shift by a certain number of bits, maybe I don't want to
limit myself to eight. I want to have two bytes displayed, but there's all sorts of possibilities now in terms of how I could do bit shifting. Oh, I got to do bit masking, this is going to be another video, here. Okay, ah, but there's a
couple things I want to-- I know, everybody's going crazy that I have black as on, let's fix this. Let's make it more clear so I don't leave everybody in such
a traumatized state. So, I'm going to make the background 51, and then I'm going to, in fill, where I'm drawing it, I am going to, and let's use a ternary operator. I'm comfortable with it, now. So I'm going to say fill, this.state, if this.state is on, the fill
is 255, or if it's off, zero. There we go. So, this is, they're
all off, now they're on. It looks weird to me. Oh, background 51 is like
the same as the actual, anyway, and I can shift
now, ah, it's great. Yeah, that looks better,
right, I'm shifting down. Oh, okay, I forgot about you, the viewer. Alright, so, I don't know, thrill me with your weird variations on this. I look forward to it, I do need to do something about bit masking, which I would do an and or an or, and Simon has been telling me, breaking news in the
chat over and over again, I can also do xor, so you can also do xor as a bit wise operation. So, thanks for watching this challenge, and I look forward to
seeing what you make. Share with me, stuff in the comments, all your corrections and complaints and happy thoughts or whatever, and I'll see you again in
another video, goodbye! (energetic music)
