## Subtitles section Play video

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