- 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?