This new post is not about a game project but it is related to game development, i dedicated this post to one of the major math concepts use in game programming and computer graphics in general, Matrix Transformations.

The first demo implements a 2D matrix transformations from the ground up on the Html5 Canvas, it is a top-down tile map where you can move the hero “red square”, there are some control sliders below to apply transformations:

Here is the direct link to the demo if you want to see the code: https://games.jahepi.net/2dtransformations/index.html

The second demo implements a 3D rotation using matrix transformations, it rotates the Z axis (XY plane), Y axis (XZ plane) and X axis (YZ plane) of a 3D square.

For reference, this is how 3D rotation on X, Y and Z axis work, we have in total 3 planes, we are going to start with the **XY** plane first, where we rotate the Z axis, this is is a clockwise rotation in a left handed system, here is a graphic representation of how the XY plane looks like and we are going to plug the values in the matrix:

**XY PLANE**

The basis vectors X and Y were rotated certain degrees, as you can see the hypotenuse length is 1 so the sides of the right triangle corresponds to the ratio of the trigonometric functions cosine and sine.

We plug the values in our matrix (Z axis rotation):

[ x y z]

[cos(0), cos(0), 0][x]

[-sin(0), sin(0), 0][y]

[ 0, 0, 1][z]

Now we are going to do the same with the two planes left.

**YZ PLANE**

We plug the values in our matrix (X axis rotation):

[ x y z]

[1, 0, 0][x]

[0, cos(0), sin(0)][y]

[0, -sin(0), cos(0)][z]

**XZ PLANE**

We plug the values in our matrix (Y axis rotation):

[ x y z]

[cos(0), 0 -sin(0)][x]

[0, 1, 0)][y]

[sin(0), 0, cos(0)][z]

Here is the demo when we apply this transformations to the vertices that form the cube:

Here is the direct link to the demo if you want to see the code: https://games.jahepi.net/3drotation/index.html

If you want to learn more about this topic i recommend the reading of 3D Math Primer For Graphics And Game Development, while this book does not focus on just matrix transformations, it is really a great resource of knowledge if you want to learn the math behind 2D and 3D programming.

Leave a Comment