Skip to content

Month: April 2018

Matrix Transformations

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

xy

 

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

yz

 

 

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

xz

 

 

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 square:

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