Posted on April 26, 2018
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:
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.
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]
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.