§RRead

A transformation maps points to points.

Every geometric operation — move, spin, stretch — is a function that takes a point and returns a new point. The remarkable trick: if we use 3x3 matrices (homogeneous coordinates), then translation, rotation, and scale all become matrix multiplications. That means we can compose any sequence of operations into a single matrix.

Order matters. Rotate-then-translate is not the same as translate-then-rotate. The triangle ends up in a different place. This is the first real gotcha of computer graphics — and the source of more bugs than any single syntax error.

§TTry

Stack operations and watch the triangle move.

Below is a triangle at the origin. Use the palette on the right to stack operations. The faint triangle is the original; the bright one is the result. The composed 3x3 matrix updates live.

Try: stack Rotate(30deg) then Translate(1, 0). Now clear, and do Translate(1, 0) then Rotate(30deg). Compare the two outcomes.

fig. 3-1

Stack (0)

No operations yet.

Add Operation

Composed Matrix

[1.00, 0.00, 0.00]
[0.00, 1.00, 0.00]
[0.00, 0.00, 1.00]

fig. 3-1 — transform-stack-2d — composable operations with before/after

§PPredict

Which order moves the triangle further from the origin?

If you apply Rotate(90deg) first, then Translate(2, 0), vs Translate(2, 0) then Rotate(90deg) — which final position is further from (0, 0)?

Reveal answer

They end up at the same distance from the origin (2 units), but in different positions. Rotate-then-translate moves the triangle to (0, 2). Translate-then-rotate moves it to (2, 0) rotated 90 degrees = (0, 2) — wait, that is the same! The surprise: for this specific case they match. Try different angles to see them diverge.

§VVerify

Verify by building both stacks.

Clear the stack and try both orderings. With Rotate(30deg) + Translate(1, 0) vs Translate(1, 0) + Rotate(30deg), the final positions differ noticeably.

fig. 3-2

Stack (0)

No operations yet.

Add Operation

Composed Matrix

[1.00, 0.00, 0.00]
[0.00, 1.00, 0.00]
[0.00, 0.00, 1.00]

fig. 3-2 — transform-stack-2d — verify ordering effects

§MModify

Hit the target.

Challenge: Get the triangle from its starting position to the target (the dashed gold outline) using exactly three operations from the palette. Multiple solutions exist.

fig. 3-3

Stack (0)

No operations yet.

Add Operation

Composed Matrix

[1.00, 0.00, 0.00]
[0.00, 1.00, 0.00]
[0.00, 0.00, 1.00]

fig. 3-3 — transform-stack-2d — puzzle: reach the target in 3 ops

Checkpoint

Move the triangle to match the gold target. Any valid operation stack counts.

fig. 3-4

Stack (0)

No operations yet.

Add Operation

Composed Matrix

[1.00, 0.00, 0.00]
[0.00, 1.00, 0.00]
[0.00, 0.00, 1.00]

fig. 3-4 — checkpoint — match the target position