Move, scale and rotate with matrices

A 2D transformation is a rule that moves every point of a shape: slide it, resize it or turn it. Games and design tools use them every frame.

In this lesson you write each move as a matrix, a small grid of numbers, and apply it to the corners of a triangle.

A shape is a list of corner points. To translate it, add the same amount to every x and every y. To scale it, multiply every x and y by a factor. To rotate it, turn each point about the origin.

Move the corners and the lines between them follow, so we only ever move the corners.

Scaling and rotating multiply a point, but a translation adds to it, and a plain 2 by 2 matrix cannot add. The trick is homogeneous coordinates: write the point (x, y) as three numbers, x, y and 1.

Now the third column of a 3 by 3 matrix multiplies that 1, so it acts as an addition. Every move, even a slide, becomes one matrix.

docker exec jupyter python3 -c "import numpy as np; m = np.array([[0, -1, 0], [1, 0, 0], [0, 0, 1]]); print((m @ np.array([4, 0, 1])).tolist())"

The Run prints [0, 4, 1]. The point (4, 0) is written as [4, 0, 1], and the @ symbol multiplies the matrix by it.

The first two numbers are the new point, (0, 4). The last number stays 1. This matrix turns the point 90 degrees about the origin, as the table shows.

To do two moves, multiply their matrices into one. The matrix next to the point acts first, so for a times b times point, b happens first.

Order changes the result. Scaling by 2 and then moving by (2, 3) differs from moving first and then scaling. The scale also stretches the move.

docker exec jupyter python3 -c "import numpy as np; t = np.array([[1, 0, 2], [0, 1, 3], [0, 0, 1]]); s = np.array([[2, 0, 0], [0, 2, 0], [0, 0, 1]]); p = np.array([1, 1, 1]); print((t @ s @ p).tolist(), (s @ t @ p).tolist())"

triangle = [[0, 0], [4, 0], [0, 3]]

# Move 2 across and 3 down: the last column holds the move.
matrix = [
    [1, 0, 2],
    [0, 1, 3],
    [0, 0, 1],
]

for point in triangle:
    x = point[0]
    y = point[1]
    new_x = matrix[0][0] * x + matrix[0][1] * y + matrix[0][2]
    new_y = matrix[1][0] * x + matrix[1][1] * y + matrix[1][2]
    print(point, "->", [new_x, new_y])
# Change the matrix to [[2, 0, 0], [0, 2, 0], [0, 0, 1]] and press Run.

A 90 degree turn has a cosine of 0 and a sine of 1, which is why its matrix is all whole numbers. For other angles the matrix uses the cosine and the sine of the angle, and Python measures angles in radians.

A radian is another unit for an angle. A half turn is 180 degrees, or about 3.14159 radians. math.radians converts for you.

docker exec jupyter python3 -c "import math; a = math.radians(90); print(round(math.cos(a), 6), round(math.sin(a), 6))"

docker exec jupyter python3 -c "from PIL import Image, ImageDraw; p = Image.new('L', (60, 40), 0); d = ImageDraw.Draw(p); d.polygon([(2, 2), (22, 2), (2, 17)], fill=120); d.polygon([(30, 10), (50, 10), (30, 25)], fill=255); p.save('move.png'); print(p.size, p.getpixel((5, 5)), p.getpixel((33, 12)), p.getpixel((50, 30)))"

The Run prints (60, 40) 120 255 0 and saves move.png. Open it from the file list.

You see a black picture with two triangles of the same shape. The left one is dark grey, near the top left corner. The right one is white and lower, as if the first had been slid right and down.