2D Composite Transformations

In practical 2D graphics work, objects are rarely transformed using a single operation. A shape might need to be rotated about its own center, scaled about a fixed point, or reflected about a line that doesn't pass through the origin none of which can be done with a single basic transformation matrix alone.

Composite transformation is the technique of combining two or more basic 2D transformations (translation, rotation, scaling, reflection) into one unified transformation.

What is a Composite Transformation?

A composite transformation is built by applying a sequence of basic transformations to an object, one after another. Since every basic 2D transformation can be written as a 3×3 matrix in homogeneous coordinates, a sequence of transformations can be combined into a single resultant matrix by multiplying the individual matrices together. 

This combined matrix can then be applied to every point of the object in one step.

If T1, T2, T3, ... are individual transformation matrices applied in that order, the composite matrix M is:

M = Tn · ... · T3 · T2 · T1

And the transformed point is:

P' = M · P

Why Composite Transformations are Needed in 2D

1. Efficiency: Rather than transforming every vertex of an object through several matrices one at a time, the matrices are multiplied together once, and the resulting single matrix is applied to all points far more efficient for objects with many vertices.
2. Necessity for pivot-based operations: Some of the most common 2D operations rotating a shape about its own center, scaling about a custom point, reflecting about a line not through the origin are only possible by combining translation with rotation, scaling, or reflection. None of the basic matrices alone (defined about the origin) can do this.
3. Building real object placement: Positioning a 2D sprite or UI element on screen typically requires resizing it, orienting it, and placing it all three operations combined.

Order of Transformations Matters

Matrix multiplication is not commutative in general:

T1 · T2 ≠ T2 · T1

This means swapping the order of two different transformation types generally changes the final result.

Reading Order

For P' = T3 · T2 · T1 · P, the transformations are applied right to left: T1 acts on P first, then T2, then T3.

Why It Matters Quick Illustration?

Take a point (2, 0). Rotate by 90° then translate by (3, 0): rotating gives (0, 2), then translating gives (3, 2) the object spins in place, then moves.

Now translate by (3, 0) first, then rotate by 90°: translating gives (5, 0), then rotating gives (0, 5) — the object swings around the origin first, landing somewhere completely different.

This is exactly why pivot-based 2D operations require the "translate–transform–translate back" pattern.

4. Standard 2D Composite Transformation Scenarios

1. Rotation about an Arbitrary Pivot Point

To rotate an object by θ about a pivot F(p_x, p_y) instead of the origin:

M = T(px, py) · R(θ) · T(-px, -py)

Steps: translate pivot to origin → rotate about origin → translate back.

Expanded form:

x' = px + (x-px)cosθ - (y-py)sinθ
y' = py + (x-px)sinθ + (y-py)cosθ

2. Scaling about an Arbitrary Fixed Point

To scale by (s_x, s_y) about a fixed point F(p_x, p_y):

M = T(px, py) · S(sx, sy) · T(-px, -py)

Expanded form:

x' = sx(x-px) + px
y' = sy(y-py) + py

3. Reflection about an Arbitrary Line

For a line y = mx + c not passing through the origin, with θ = tan⁻¹(m):

M = T(0, c) · R(θ) · Rx-axis · R(-θ) · T(0, -c)

4. General 2D Object Placement (Scale → Rotate → Translate)

The most common composite in 2D graphics applications places an object using all three basic operations:

M = T · R · S

Order of application (right to left): Scale first (resize about local origin) → Rotate (orient) → Translate (place at final position). Applying translation earlier would cause the subsequent scale/rotate to act about the wrong reference point.

Properties of 2D Composite Transformations

1. Associativity: Matrix multiplication is associative:

   (T3 · T2) · T1 = T3 · (T2 · T1)

   This lets the combined matrix be precomputed once and reused for many points.

2. Non-commutativity (general case): Different transformation types generally cannot be swapped in order without changing the result.
3. Special-case commutativity:
   • Two translations always commute.
   • Two rotations about the same pivot always commute.
   • Two scalings about the same fixed point always commute.
   • Uniform scaling commutes with rotation about the same center.

4. Inverse of a composite: The inverse of a composite is the product of individual inverses in reverse order:

   (T3 · T2 · T1)^-1 = T1^-1 · T2^-1 · T3^-1

5. Determinant of a composite:

   det(M) = det(T3) · det(T2) · det(T1)

   Useful for checking whether a composite includes a reflection (negative determinant) or changes area (magnitude ≠ 1).

Solved Numerical Problems

Problem 1

A point P(2, 3) is first scaled by factors (2, 2) about the origin, then translated by (4, 1). Find the final position using M = T · S.

Solution:

Scale: x1 = 2×2 = 4,  y1 = 3×2 = 6
Translate: x' = 4+4 = 8,  y' = 6+1 = 7

Final point P' = (8, 7)

Problem 2

Rotate the point P(5, 5) by 90° about the pivot F(3, 3), using M = T(3, 3) · R(90°) · T(-3, -3).

Solution:

Step 1 (translate to origin): (5-3, 5-3) = (2, 2)
Step 2 (rotate 90°): x2 = 2(0)-2(1) = -2,  y2 = 2(1)+2(0) = 2 → (-2, 2)
Step 3 (translate back): (-2+3, 2+3) = (1, 5)

Final point P' = (1, 5)

Problem 3

A point P(1, 2) is transformed using M = R(90°) · T(3, 0) translated by (3, 0) first, then rotated by 90°. Compare this with applying the operations in the reverse order.

Solution:

Translate then Rotate:

Translate: (1+3, 2+0) = (4, 2)
Rotate 90°: x'=4(0)-2(1)=-2, y'=4(1)+2(0)=4 → (-2, 4)

Rotate then Translate:

Rotate 90°: x1=1(0)-2(1)=-2, y1=1(1)+2(0)=1 → (-2, 1)
Translate: (-2+3, 1+0) = (1, 1)

Result: (-2, 4) vs (1, 1) confirming order changes the outcome.

Problem 4

Find the inverse of M = T(5, 2) · R(90°), and use it to recover the original point if the transformed point is P'(4, 7).

Solution:

M^-1 = R(-90°) · T(-5, -2)

Translate by (-5,-2): (4-5, 7-2) = (-1, 5)
Rotate by -90° (cos=0, sin=-1): x'=-1(0)-5(-1)=5, y'=-1(-1)+5(0)=1

Recovered point P = (5, 1)

Verification: Apply M to (5, 1): rotate → (-1, 5); translate → (4, 7) Matches.

Problem 5

A square with vertices A(0, 0), B(2, 0), C(2, 2), D(0, 2) is transformed using M = T(1, 1) · R(45°) · S(2, 2). Find the new position of B(2, 0). (cos45° = sin45° = 0.7071)

Solution:

Scale: (2×2, 0×2) = (4, 0)
Rotate 45°: x2=4(0.7071)-0(0.7071)=2.8284, y2=4(0.7071)+0(0.7071)=2.8284
Translate (1,1): (3.8284, 3.8284)

Final point B' = (3.8284, 3.8284)

Problem 6 (Practice try it yourself)

A point P(4, 4) is transformed using M = T(2,2) · S(0.5,0.5) · T(-2,-2) scaling by factor 0.5 about the fixed point (2,2). Compute the result step by step, and verify it using x'  = s_x(x - p_x) + p_x, y' = s_y(y - p_y) + p_y.

 Conclusion

2D composite transformations are the practical bridge between the basic operations and real graphics applications: every pivot-based rotation, custom-center scaling, or general object placement on screen relies on combining matrices in the correct order. 

The "translate–transform–translate back" pattern, together with the rule that order matters except in special commutative cases, are the two ideas to internalize before moving on to the added complexity of 3D composite transformations.