(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)