Theory
Moving shapes around
Drawing a shape is one thing; moving, resizing, and rotating it is another, and it is what makes graphics dynamic. These operations are geometric transformations, and three are fundamental: translation (shift), scaling (resize), and rotation (spin).
Each transforms a point (x, y) into a new point (x', y') by a simple rule. This lesson gives the rule and a worked example for each, then introduces homogeneous coordinates, a clever trick that lets all three be written as one uniform matrix operation. Your matrix maths from earlier is exactly what this builds on.
Theory
Translation and scaling
Translation shifts a point by adding offsets tx and ty:
x' = x + tx, y' = y + ty
Example: translating (2, 3) by (5, -1) gives (2+5, 3-1) = (7, 2). The shape moves without changing size or orientation.
Scaling (about the origin) resizes by multiplying by scale factors sx and sy:
x' = x times sx, y' = y times sy
Example: scaling (2, 3) by (2, 2) gives (2 times 2, 3 times 2) = (4, 6), twice as far from the origin. Scale factors above 1 enlarge, below 1 shrink. Translation adds; scaling multiplies.
Theory
Rotation about the origin
Rotation about the origin by an angle t spins the point around (0, 0) using sine and cosine:
x' = x times cos(t) minus y times sin(t)
y' = x times sin(t) plus y times cos(t)
Example: rotate (2, 3) by 90 degrees. At 90 degrees, cos(t) = 0 and sin(t) = 1, so:
x' = 2 times 0 minus 3 times 1 = -3
y' = 2 times 1 plus 3 times 0 = 2
So (2, 3) rotates to (-3, 2). The point has swung a quarter turn anticlockwise around the origin. Rotation preserves size and shape; it only changes orientation.
At a glance
| Transformation | Rule | Effect |
|---|---|---|
| Translation | x' = x + tx, y' = y + ty | Shifts the shape (adds offsets) |
| Scaling | x' = x times sx, y' = y times sy | Resizes about the origin (multiplies) |
| Rotation | x' = x cos t - y sin t, y' = x sin t + y cos t | Spins about the origin (uses sin, cos) |
Formula
Homogeneous coordinates unify them
There is an awkwardness: scaling and rotation are multiplications (matrix multiplies), but translation is an addition, so they do not combine uniformly. Homogeneous coordinates fix this: represent a point (x, y) as (x, y, 1) and use 3 by 3 matrices. Now even translation becomes a matrix multiply:
Translation: rows [1 0 tx] [0 1 ty] [0 0 1]
Scaling: rows [sx 0 0] [0 sy 0] [0 0 1]
Rotation: rows [cos t, -sin t, 0] [sin t, cos t, 0] [0 0 1]
With all three as matrices, you can combine transformations by multiplying their matrices into one, the key to efficient graphics.
Quiz
Rotating the point (2, 3) by 90 degrees about the origin (cos 90 = 0, sin 90 = 1) gives which new point?
- (2, 3), unchanged
- (-3, 2), because x' = 2(0) - 3(1) = -3 and y' = 2(1) + 3(0) = 2
- (3, 2), swapping the coordinates
- (5, 5), adding them
Show the answer
(-3, 2), because x' = 2(0) - 3(1) = -3 and y' = 2(1) + 3(0) = 2
Apply the rotation formulas with cos 90 = 0 and sin 90 = 1: x' = x cos t - y sin t = 2(0) - 3(1) = -3, and y' = x sin t + y cos t = 2(1) + 3(0) = 2, giving (-3, 2). Option A is wrong: a 90-degree rotation definitely changes the point. Option C, (3, 2), just swaps coordinates, which is a reflection about y=x, not a rotation (rotation also introduces a sign change here). Option D adds the coordinates, unrelated to rotation. Substitute cos and sin at 90 degrees into the formulas carefully, and (2,3) rotates to (-3,2).
Think first
Why are homogeneous coordinates worth the extra dimension?
Adding a '1' and using 3x3 matrices seems like extra work. Why is it a big win? Then tap.
Show the answer
Because it makes ALL transformations, including translation, into matrix MULTIPLICATIONS, which means you can COMBINE any sequence of transformations into a single matrix, a huge efficiency and simplicity gain. Without homogeneous coordinates, scaling and rotation are matrix multiplies but translation is an ADDITION, so a transformation is a mix of 'multiply then add', and combining several (scale, then rotate, then move) means juggling different kinds of operations in order, awkward and error-prone. Homogeneous coordinates put every transformation on the same footing: by writing a point as (x, y, 1) and using 3x3 matrices, even translation becomes a pure matrix multiply. Now the magic: because they are all matrices, you can MULTIPLY the matrices for a whole sequence of transformations together FIRST, producing ONE combined 3x3 matrix that captures the entire sequence. Then you apply that single matrix to every point of the shape, one multiply per point, instead of applying each transformation separately. For a shape with thousands of points, or a scene redrawn many times a second, this is enormously faster: you precompute one matrix and reuse it. It also makes the maths clean and uniform, transforming a point is always 'multiply by a matrix', and reasoning about combined transformations becomes matrix algebra. This is why virtually all real graphics systems (2D and 3D) use homogeneous coordinates internally; the extra coordinate pays for itself many times over. Uniform matrices let you combine transformations by multiplication, which is the whole point.
Summary
Key takeaways
- Geometric transformations move, resize, and rotate shapes by turning (x, y) into (x', y').
- Translation shifts by adding: x' = x + tx, y' = y + ty; (2,3) by (5,-1) gives (7,2).
- Scaling resizes about the origin by multiplying: x' = xsx, y' = ysy; (2,3) by (2,2) gives (4,6).
- Rotation about the origin uses sin and cos: x' = x cos t - y sin t, y' = x sin t + y cos t; (2,3) by 90 degrees gives (-3,2).
- Homogeneous coordinates write (x,y) as (x,y,1) and use 3x3 matrices, so even translation becomes a matrix multiply.
- With all transformations as matrices, you can combine a sequence by multiplying the matrices into one.
- Memory hook: translate adds, scale multiplies, rotate uses sin/cos; homogeneous coordinates make them all matrices.