- Hello and welcome to part two

of the Rubik's Cube coding challenge.

In this version of the coding challenge,

I just want to take my existing Rubik's Cube simulation

and be able to make some turns, I want to shift

the faces of one side of the cubies,

like the yellow faces, to turn maybe clockwise

and be on the other side and everything follows suit.

So I'm going to do that with matrix transformations.

Here's the thing, I have to be honest with you,

this is my second attempt at doing this.

I did a previous livestream where I went down

a different road and I was keeping track of arrays

and different arrays and trying to shift things

and have custom hard coded things for every possible way

the Rubik's Cube could turn and it was a total disaster.

In the end I actually got it to work, you can see it

spinning around and working here right now.

I had some really useful suggestions,

most notably from Michael Raphael Panganiban,

who suggested that I use matrix transformations.

And I'm going to try this again, I'm going to try to really think

about refactoring that gobbledygook code I wrote before

and try to set myself up for success in the future.

I also want to highlight this website, I Am the Cube,

made by Stewart Smith and other collaborators from Google.

This was made for the Google Doodle about the Rubik's Cube

a bunch of years ago, and it's really phenomenal.

The code is available.

I really should just not bother doing what I'm doing

and just play with this, but I have a mission.

And my mission is to make this Rubik's Cube turn and move.

And so I'm going to do that.

This is what I left off with in Part One.

And one of the things that I did in Part One

that was a little bit weird is I really

was thinking in terms of cube notation.

And if you're a cuber, you look at the cube

in a certain direction, you're thinking about what's up,

what's down, what's left, what's right,

what's clockwise, what's counter-clockwise.

And that really led me in some strange directions.

I think it's useful maybe to double back

and add that in once I have the cube working.

But the thing that I'm actually working with

here in this code, x-axis, y-zxis, z-axis.

And it's going to be much simpler for me I think

to keep track of things and think in those terms.

And the rotation might not be clockwise

or counter-clockwise, it might be

in the positive direction or in the negative direction.

The first thing that I want to do to really figure this out

and to have a more effective way is actually keep track

of the cube's location not in a vector, but in a matrix.

Dun dun dun.

So I have done a lot of videos about matrices

and matrix math and some of that's going to come up here.

The ones that you might want to check out if that's

a totally new concept to you is the video where I made

my own 3D renderer using matrix transformations.

And I made a little like bunch of functions to do

to store matrices and to multiply them.

I also used matrices in a bunch

of videos I made about neural networks.

The matrices pop up there in the math

of machine learning with neural networks.

But here, what I want to do is I want to have

a transformation matrix for each one of the cubies

to keep track of where it is in the world.

And so, the way that I'm going to do that is I'm going to

change the cubie to receive a matrix and for its position

to be that matrix rather than a PVector.

Luckily for me, Processing already

has built into it matrix classes.

So I don't have to write my own matrix 3D object,

I don't have to write a matrix 2D object,

I've got one in the Processing.

So, it's going to be a PMatrix3D object.

The other thing I want to do now, so this is how I made

the cubes before, I made each cubie with an x, y, and z.

But now I want to do this.

I want to make each cubie

with a matrix,

and then what I want to do is translate that matrix.

So in other words, each cube, it's a way each cube

is going to keep track of its own 3D world,

and it has the full matrix of what is the translation,

what is the rotation, what is the scale.

And so if I translate that matrix to its x, y, z location,

then I'm initializing the cubie with that particular matrix.

Some other things, while this nested loop is useful,

it's going to be much simpler for me in the end I think

if I actually keep all of the cubies in just a single array.

The multidimensional array is interesting, but let me,

so let me change that to, I'm just going to make it, no,

I'm not going to make this i, I'm going to make this like index,

oh actually, let me make this, I'll make this index.

And I'm gnona say cube index equals new cubie

with the matrix, index plus plus, so that I'm counting.

And then, this will now be a single array

that has dimensions times dimensions times dimensions.

Three times three times three, or 27.

Of course, there really isn't a cubie in the center, but eh,

you can't see it anyway, so we can imagine it's there.

Now the other thing that's really important here,

and I'm going to, I think this will be helpful.

I'm going to change this to x, y, and z.

X, y, and z.

I'm going to change this to x, y, and z.

I'm not going to worry about this figuring out

the actual position of the cube with its length.

I just want its position in a three-dimensional world.

And what are those positions?

So if I just think about one face of the cube, for example,

maybe this is a face of the cube where z equals one.

If we're looking at the cube with green facing us,

facing you, this could be the z-axis, this is z equals one.

So we've got the x-axis along the horizontal

and the y-axis along the vertical.

So what I could think about this is really the location

x, y, zero, zero, so it's zero, zero, one.

So all of these have a z location of one.

But this one is negative one, negative one.

Sorry, zero, negative one, one, negative one.

The y is negative one, the x is negative one, zero, one.

So this is negative one, zero, and this is one, zero.

This is negative one, one.

This is zero, one, and this is one, one.

So these are all the locations, and these

can actually be the x, y, z values that I apply

to translate each individual cubelet's matrix.

So if I come back to the code,

what I'm doing here is I'm saying,

have the x goes from negative one all the way to one.

Same thing for the y.

Same thing for z.

Create a matrix for each one.

Create the cubie, I'm not going to

worry about this leg thing right now.

And then say index plus plus.

The cubie

then is just a thing with its matrix.

And this should say PMatrix3D.

I've got to specifically use, I'm going to be using a 2D matrix

in a little bit, you'll see this is crazy.

But right now I'm going to use the (mumbles).

Alright, so, I still have this length variable here.

The other thing I want to do is, while it was really useful

that I had this whole way of doing these quads

and coloring them, I'm going to get rid of that right now.

Because I think that what I want to do

is think of each of these cubies as a box.

And then it's also going to have faces.

And I think I'll draw the faces

as a separate object with a quad.

So right now to keep things very simple,

I'm going to show you something kind of nuts.

I am going to take out all of this.

I'm going to get rid of this translate.

I am actually going to call this

function called apply matrix.

So what am I doing here, I'm taking the matrix,

and I probably shouldn't call it pos as in position.

Let's actually call it matrix.

Let's call it matrix, each cubie has a matrix

which really contains all the information about where,

its position and rotation in the world of the cube itself.

And this is actually the same

as just calling translate at this point.

But because I'm storing it in a matrix instead of calling

translate directly, it's going to give me some more

possibilities later as I need to keep track of all these

cubies separately or in smaller groups and that kind of thing.

So if I do this, and then if I just say box,

and I'm going to say box one, it's going to be a small box,

pop matrix, then, and here, the nice thing

about this also is I can change this to cube dot length

and get rid of this nested loop.

I can say cube index I dot show,

and hope that we see the Rubik's Cube.

Ah, where is it?

Oh look, I think it's there.

I think that's the Rubik's Cube.

Oh, look, I visualized the black hole on the day of the,

this is the second image of a black hole, no, okay.

So the reason why it's so tiny is because scale.

So let me say scale 100,

and let's see what happens now.

Where's that Rubik's Cube?

So let's think about, ah, stroke weight eight.

Now that's lunacy here.

so let's make the stroke zero, let's make

the stroke weight small because I'm scaling up.

And let's also make sure we say

fill to (mumbles) that's there already.

Oh, that's a really big one, but there it is.

So I don't want to scale that much.

Let's scale it by 50 and let's just say stroke weight .1.

And there we go.

So now, I have exactly the same thing.

I have exactly what I had before,

but I just have a matrix for each one of the cubies.

Now I need to figure out, how am I going to debug this?

Right now if I move them all around,

I could move them around, they're all white,

they're all going to appear in the same location.

So what I'm going to do is I am going to make a variable.

I'll just call it Highlight false.

And I'm going to say,

if highlight fill zero.

And then let me say,

let me say cube index zero highlight.

So there we go, we can see, ah, that one.

See look, this one is now highlighted.

I can address any individual cubie.

It's not really highlighted 'cause it's black,

it sort of looks like it's removed.

Maybe I should make it like red or something

just so it's a bit more obvious.

'Cause everything right now is just white, okay.

But let me actually highlight the one that's in the front.

(bell dings)

Alright, the answer by the way,

in case you were wondering, was two.

I'm counting with z first, so it's going zero, one, two.

So perfect.

Boy, that was a lot of time I spent trying to figure out

that it was two, you're lucky you didn't have to watch that.

Okay.

So now I can see that I'm highlighting a given cubie.

The next thing I want to do is take one of these faces,

each one has its own 3D matrix

with an x, y, and z, and rotate It.

I want to apply a 2D rotation to this particular face.

So any face, whether it's the front,

the back, the top, the bottom, if we look at it,