Skip to main content
← All posts

Part 7: 2D Geometric Transformations: Translation, Scaling, Rotation & Matrices

Super AdminNov 5, 20262 min readArticle
Part 7: 2D Geometric Transformations: Translation, Scaling, Rotation & Matrices

Linear Algebra of Visual Manipulation

Geometric transformations are the engine of computer graphics, enabling scenes to animate, scale, rotate, and interact dynamically. While linear operations (scaling and rotation) can be represented by $2 \times 2$ matrices, translation is an affine operation that requires vector addition. To unify all affine transformations into a single mathematical formalism that can be chained via matrix multiplication, computer graphics adopts projective homogeneous coordinates. In this article, we formulate 2D transformation matrices, solve arbitrary pivot-point rotations, and demonstrate composite matrix composition.

1. Basic Affine Transformations in 2D Space

Translation

Translates a point by vector $(t_x, t_y)$:

x' = x + t_x
y' = y + t_y

Scaling

Multiplies dimensions by factors $(s_x, s_y)$:

x' = x \cdot s_x
y' = y \cdot s_y

Rotation

Rotates counter-clockwise by angle $\theta$:

x' = x\cos\theta - y\sin\theta
y' = x\sin\theta + y\cos\theta

2. Homogeneous Coordinates & $3 \times 3$ Transformation Matrices

In standard Cartesian 2D coordinates, translation cannot be expressed as a matrix multiplication with a $2 \times 2$ matrix because $x' = x + t_x$ is non-linear. By augmenting the coordinate vector with a third scale factor $w=1$, a 2D Cartesian point $(x, y)$ becomes the homogeneous vector $[x, y, 1]^T$.

In this 3-dimensional projective space, all affine transformations are unified into uniform $3 \times 3$ matrix multiplications:

Translation $T(t_x, t_y)$

text
123
[ 1   0   tx ]
[ 0   1   ty ]
[ 0   0   1  ]

Scaling $S(s_x, s_y)$

text
123
[ sx  0   0  ]
[ 0   sy  0  ]
[ 0   0   1  ]

Rotation $R( heta)$

text
123
[ cosθ -sinθ 0 ]
[ sinθ  cosθ 0 ]
[  0     0   1 ]

3. Composite Transformations: Pivot Point Rotation

A fundamental property of matrix composition is that matrix multiplication is associative but strictly non-commutative:

M_1 \cdot M_2 \ne M_2 \cdot M_1

To rotate an object around an arbitrary pivot point $(x_r, y_r)$ rather than the coordinate origin, we execute a composite 3-step matrix sequence:

  1. Translate the pivot point $(x_r, y_r)$ to the origin: $T(-x_r, -y_r)$.
  2. Rotate by angle $\theta$ around the origin: $R(\theta)$.
  3. Translate the origin back to the pivot point: $T(x_r, y_r)$.
M_{composite} = T(x_r, y_r) \cdot R(\theta) \cdot T(-x_r, -y_r)

Multiplying these three matrices produces a single consolidated $3 \times 3$ transformation matrix. Any polygon containing $10,000$ vertices can now be transformed by multiplying each vertex by $M_{composite}$ once, eliminating redundant intermediate calculations.

Share:
Share on X
Share on LinkedIn
Share on Facebook
Share on Reddit
Share on WhatsApp
Share on Telegram
Copy link

Related reading