An example of common rotation matrix used in game development

An example of common rotation matrix used in game development

We’re building a Tetris clone. Imagine the game arena as 10 by 20 grids. An L-shaped tetromino is located in a certain position in the arena. To designate a position in the grids, we use integers 0 to 9 for the horizontal axis (x) & 0 to 19 for the vertical (y). Each coordinate can be occupied with a block & every tetromino has 4 blocks. The position of the L tetromino’s blocks are (4,15), (4,14), (4,13), and (5,13). This is illustrated with the image below.

Tetris Arena Illustration

In Tetris, besides moving the tetromino left, right, or down (translational movement) we can also rotate the tetromino. We can use a common rotation matrix to rotate the tetromino.

First, we have to pick the center of the rotation. The center “point” will be one of the blocks. Let’s choose the (4,14) block as the center point, the core; we painted the core as a red block in the illustration. Then we name the (4,15), (4,13), (5,13) as A, B, C respectively. Let’s call them the member blocks.

To rotate the members with the core as a point of reference, we need to calculate the relative position of the members to the core. The relative positions are A (0,1), B (0,-1), C (1,-1). We got this by subtracting each member’s coordinate from the core coordinate.

If we rotate the members 90 degrees clockwise, the relative positions will be A (1,0), B (-1,0), C (-1,-1). The core position in the grids stays at (4,14) , while A will be at (5,14), B (3,14), C (3,13).

Tetromino rotated, compared to first pic

Quick recap: to achieve the effect of 90-degree clockwise rotation, we need to transform the members’ relative positions like this
(0,1) → (1,0);
B (0,-1) → (-1,0);
C (1,-1) → (-1,-1).

Is there any “formula” to summarize this transformation? Yes, the rotation matrix. Read more about rotation matrices on Wikipedia. This formula here will be the basis of our calculation.

Math formula:
x' = x * cos theta - y * sin theta
Math formula:
y' = y * sin theta + y * cos theta

Don’t worry if you don’t like math. The rotation we want to do is simple and common because a lot of people need to rotate something 90° clockwise. So, there’s a common matrix for that. This comes from the common rotation section in the Wikipedia article.

We use the 270° counter-clockwise, which is equal to 90° clockwise. The matrix contains simple numbers 0, 1, -1 because 270° is a common trigonometric value.

With that simple matrix and matrix multiplication, we can calculate each relative position of the members like this.

Math formula:
x = (0*x) + (1*y) = y
Math formula:
y' = (-1*x) + (0*y) = -x

So, the code will be:

int newX = oldY;
int newY = -oldX;

We simply swap the relative position components but multiply the new Y component with -1.

Here is a copy-paste from the desired transformation earlier.
A (0,1) → (1,0)
B (0,-1) → (-1,0)
C (1,-1) → (-1,-1)

Thank you mathematics for making it so trivial in the end.

Leave a Reply

Your email address will not be published.