And I can summarize this coding challenge very quickly in one sentence!

This is a spinning cube.

It is a three dimensional cube that you are seeing on your two dimensional screen.

I am able to create this three dimensional cube because I am using the P3D renderer,

processing, Java based, creative coding, development, platform thing.

I can make 3D stuff using the P3D rendering engine and then functions like box, and rotate

X, and rotate Z, and that is how I get this!

But how does this really work?

How does the processing even make this happen?!

I am going to do the most basic, simple thing.

I am going, I said one sentence and I'm like 12 sentences, I'm like 200 hundred sentences

in if I'm being perfectly honest.

I am going to change this from P3D to P2D.

I'm going to eliminate all of the 3D rendering capabilities.

I'm not going to allow myself to use any of them, and yet I'm going to recreate exactly

the same digitalization.

I'm going to do matrix rotations, projections, those sorts of things.

So this is not going to be comprehensive, like how to build a 3D engine with ray casting,

ray tracing, and lighting, and shadow, and sorts of complicated stuff.

I'm going to just do the basics, just to create this 3D illusion in 2D really because, because

if I can use the P3D, if I can create the 3D illusion and render it into 2D space, what

if I create a 4D shape and then render it into P3D space, right?

If I can project a 3D object into 2D space, there's no reason why I couldn't project a

4D object into 3D space.

and then I dunno, I dunno, my computer's going to melt, and I'm never going to make any videos

again.

But let's just stick with this!

Okay so let's begin coding.

So I am going to take out, I'm going to hit save, and I'm going to take out all of this

3D stuff.

I'm going to leave translate, stroke, strokeWeight, noFill.

I'm not going to be able to use these anymore.

I'm not going to be able to use these anymore.

I'm going to leave all this, and I'm in P2D.

Actually, I'm going to take out P2D The default renderer is also a 2D engine, so I don't need

to actually say P2D.

Now, I should also mention that I, in this particular video, I'm making use of a few

functions I've previously written.

I actually might have a video.

I definitely did it on a livestream, so either way in the video description I'm going to

link to where you can watch me code all these functions.

But what these functions are for are for certain matrix operations that I'm going to do.

Don't worry, I will talk about what they are when I use them.

So the first thing that I want to do is let me just get some points on the screen.

Hmm, how am I going to do this?

Let me make a, so I'm going to make pretty heavy use of the PVector object, and I'm going

to say, I'm going to make an array of PVectors that just has four points in it.

And I'm going to say points index zero is a PVector at, and I'm just going to build

a little square.

So I'm going to say the first one is like at -50, -50, and then second, third, fourth,

is at 50, -50, then 50, 50, then -50, 50.

These should be the four points of a square.

So, what I want to do here now is just say for every vector in points, just draw a point

at v.x, v.y.

So now, oh but these are.

The whole point of me doing is I can't do this, right?

Okay, so these are actually going to be 3D.

The point of this is they're going to be in 3D.

Bear with me for a second.

All will come to pass.

Those are going to be 3D points, but right now I haven't done anything 3D yet.

Let's make the strokeWeight quite a bit bigger so I can see them.

There we go.

So those are my four points.

So, first, what I need to do, and actually hmm.

I'm not going to worry about this part right now.

Okay, so, what do I need to do make a 3D engine?

Okay, here's the thing.

I'm going to search for some props.

Okay, I found some props.

I'm actually going to turn this light off too.

I'm going to try to do a demonstration in the dark.

This is a 3D object.

It is the book A Million Random Digits with 100000 Normal Deviates.

The way that a 3D object is rendered on a 2D dimension screen is through something called

a projection.

That projection you could think of is basically like a shadow.

So if I have this book here, and I shine this cellphone flashlight, you can see that there's

a projection onto the wall.

It looks like a square.

If I rotate this it rotates.

If I rotate around the Y axis, well actually I'll have to do this.

If I rotated around the Y axis, you can see it starts to become thinner.

I can rotate around the X axis, it does this.

So, you know, so this is the idea.

I need to create this same exact I need to create that same exact idea but in code.

And the way that that's done is with something called a projection matrix.

So, the point, the 3D point, is actually something like this.

It's a matrix that has X, Y, and Z in it.

This is actually three rows by one column.

This is something that I've gone over in other matrix math videos.

Here's kind of a summary of it.

A projection matrix, if I'm projecting into 2D, right?

If I'm projecting this 3D point into a new 2D point, what I need is a projection matrix.

Now here's a really simple projection matrix.

This projection matrix has a one in the X spot, a one in the Y spot.

X, Y, Z, X, Y, Z, and it has both zeros in this sort of Z column here of this projection

matrix.

What this is actually always going to do is give a two dimensional matrix, not two dimensional,

sorry, a two column matrix with just the X and Y.

This projection matrix just eliminates the Z.

And actually, this will get us pretty far.

In fact, this exact matrix is what's used for like orthographic projection.

There's all different, stereographic, and all different kinds of projection matrices.

This one is going to work just fine for us.

So, let's put this in our code.

Okay, so the first thing that I need to do is I need to create that projection matrix,

and this is actually an easy thing.

Now of course if I were doing this in more sort of robust way I'd probably have like

a matrix math library.

I just have a few matrix math functions that are in this tab that I wrote in a previous

video.

So, I'm going to say make a projection matrix, and I'm going to just make it as a two dimensional

array.

So one, zero, zero, comma, zero, one, zero.

So this is my representation of a two row by three column matrix.

Two row by three column matrix, that is this right here represented as a two dimensional

array.

Now, what I'm going to do here is I'm going to say for every point, for every 3D point

here, I'm going to move this over a little bit.

So what I want to do is, okay, so what I want to do here for every single 3D point, right?

And this was sort of pointless that I did before.

what I want to do is I want to create a PVector.

I'm going to call it the projected2d vector, and what I'm going to do is I'm going to say

matrix multiply the projection times v. So this is what I want to do to project a 3D

point into 2D I need a projection matrix which I just made, and then I need to matrix multiply

the projection matrix and the vector.

Now, how the math for that work involves this times this, plus this times this, plus this

times this, goes here, and this times this, plus times this, plus this times this.

I'll refer you to matrixmultiplication.xyz.

That website has a nice visualization, and I've made other videos about how matrix multiplication

works, which I've also linked to.

I'm just going to assume that matrix multiplication works.

And you could see how this makes sense.

This one leaves us only with the X.

This one leave us only with the Y.

So now I'm going to then say point projected2d.x, projected2d.Y.

I probably could come up with a better name than that.

And now if I run this, same exact thing, right?

Because in this case it's as if the point light and the place that I'm projecting onto,

and the thing, they're all kind of in exactly the same spot.

So there's no skewing, there's no skewing of the sort of prospective.

So, if I were to move that light around, and change the projection matrix, different things

could happen.

But I'm not going to worry about that right now.

What I want to do now is see if I can apply some rotation.

Okay, so how do I apply rotation?

Well, I know that I could, I could just say like rotate by angle, right?

If I say rotate by angle, processing is going to do that transformation for me.

But what if I want to rotate X, rotate around the X axis?

I can't do that.

I'm getting some sort of error somewhere or nothing.

I mean it should say not available with this renderer.

Oh yeah, rotateX can only be used with a renderer that supports P3D.

I need to write my own rotateX function!

And guess what I need for that!

Rotation matrix!

I think the ding is better after.

Guess what I need for that!

Rotation matrix!

Oh yeah, that was great.

That was exactly what I meant to do.

Okay, so now I am going to create a rotation matrix.

Now how does that work?

Luckily for me, I already have this Wikipedia page opened up.

Look at this.

A rotation matrix is a matrix that is used to perform a rotate in Euclidean space, and

this kind of makes sense, right?

Look at this rotation matrix.

Have you ever done one of things where you do polar to Cartesian coordinate transformation,

and you take the angle, and you keep increasing the angle, and then you convert that to X

and Y points, and you have this like spiraling thing?

I've made videos where I do that.

Basically, to rotate in two dimensions, this is all I need.

So just for fun, let's first just do this.

I'm going to say float, I'm going to make another, I'm going to call this rotation,

and I'm going to make another matrix, and I'm going to do exactly this.

It's going to be two by two, and it's going to be cosine theta negative sine theta.

And I'm calling it angle, cosine angle, negative sine angle.

And then it's going to be, what was it?

Sine angle, cosine angle, is that right?

So this is, I didn't get this right.

There's, this needs a bracket.

I dunno what I'm doing here.

And this needs a bracket, right?

It's a two dimensional matrix.

There we go, nope?

Semicolon, there we go!

So this is my rotation matrix, this is my rotation matrix.

So what now, what if I were to say, no, I'm going to take out this rotateX.

Not using the native rotate function, and I'm going to say PVector rotated equals matmul,

rotation times projected2d.

And now I'm going to draw the point at rotated.

So I am projecting, V is a 3D vector.

I'm projecting it into 2D, and then I'm rotating it, just a 2D rotation.

And if we run this, okay, what's wrong?

Columns of A must match rows of B. Oh, oh boy, I made a problem.

Okay, something horrible happened.

I got this out, I got columns of A must match rows of B. I made a mistake in my matrix multiplication

thing.

Here's the thing, I'm trying to be all clever to show you in 2D first.

The truth of the matter is, PVectors, they're 3D.

Even if I'm drawing just the X and Y, there's always that Z component.

So I actually need include this extra column with zeros in it to do this demonstration.

So now you can see that's me doing 2D rotation.

And actually, I'm actually do 3D rotation, right?

Because really what this should be is this.

This is, what I would call, XY rotation.

I am rotating around the Z axis by, you know, using the X and Y axes, right?

Look at this.

Now I'm going to say, but if I kept scrolling down this Wikipedia page, we would see this.

We would find this right here.

This is the one that I'm doing.

Rotation Z, right?

Oh, I need a one there, of course, not a zero there, very important.

I don't want to lose the Z point.

I want to rotate the X and Y axes around the Z axis, but I don't want to lose the Z point,

so I need a one there.

In the 2D case, oh okay, so I need this here.