Placeholder Image

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.