📄 Save or print this lesson:

← Module 8 HomeLesson 4 of 4Practice Problems →

Lesson 4: Computer Graphics -- Rotations, Scaling, and Projections

Estimated time: 45-55 minutes

Learning Objectives

Write transformation matrices for rotation, scaling, reflection, and shearing
Use homogeneous coordinates to represent translations as matrix multiplication
Compose multiple transformations by multiplying matrices
Understand how 3D scenes are projected onto 2D screens

2D Transformation Matrices

Basic 2D Transformations: Each is a 2x2 matrix that acts on points (x, y).

Rotation by angle theta (counterclockwise)

R(theta) = [cos(theta) -sin(theta); sin(theta) cos(theta)]

R(90) = [0 -1; 1 0]. Sends (1, 0) to (0, 1) and (0, 1) to (-1, 0).

Scaling by factors sx and sy

S = [sx 0; 0 sy]

Uniform scaling (sx = sy = k): S = kI. Non-uniform: stretches differently in each direction.

Reflection and Shearing

Reflection over x-axis: [1 0; 0 -1]. Over y-axis: [-1 0; 0 1]. Over y = x: [0 1; 1 0].

Horizontal shear by factor k: [1 k; 0 1]. Vertical shear by factor k: [1 0; k 1].

Homogeneous Coordinates

Translation (x, y) → (x + tx, y + ty) is NOT a linear transformation in 2D. The trick: add an extra coordinate.

Homogeneous Coordinates: Represent the 2D point (x, y) as the 3D vector (x, y, 1). Now translation becomes matrix multiplication:

[1 0 tx; 0 1 ty; 0 0 1] * [x; y; 1] = [x+tx; y+ty; 1]

Worked Example 1: Translation

Translate (3, 2) by (5, -1):

[1 0 5; 0 1 -1; 0 0 1] * [3; 2; 1] = [8; 1; 1]. Result: (8, 1). Correct!

All 2D transforms in homogeneous coordinates:

Rotation: [cos -sin 0; sin cos 0; 0 0 1]. Scaling: [sx 0 0; 0 sy 0; 0 0 1]. Translation: [1 0 tx; 0 1 ty; 0 0 1].

Composing Transformations

To apply multiple transformations, multiply their matrices. The order matters!

Composition Rule: Apply T1 first, then T2: the combined matrix is M = T2 * T1 (rightmost applied first).

Worked Example 2: Rotate then Translate

Rotate 90 degrees, then translate by (3, 0). In homogeneous coordinates:

R = [0 -1 0; 1 0 0; 0 0 1]. T = [1 0 3; 0 1 0; 0 0 1].

M = T * R = [0 -1 3; 1 0 0; 0 0 1].

Apply to (1, 0): M * (1, 0, 1)^T = (0+0+3, 1+0+0, 1)^T = (3, 1, 1). Result: (3, 1).

Check: rotate (1,0) 90 degrees gives (0,1). Translate by (3,0) gives (3, 1). Correct!

Worked Example 3: Scale then Rotate vs. Rotate then Scale

Scale by 2, then rotate 45 degrees vs. rotate 45 degrees, then scale by 2.

For uniform scaling (same factor in both directions), the order does not matter: 2R = R * 2I.

For non-uniform scaling, order matters! Scaling [2 0; 0 1] then rotating gives a different result than rotating then scaling.

3D Transformations

In 3D, use 4x4 matrices with homogeneous coordinates (x, y, z, 1).

3D Rotation Matrices (about coordinate axes):

Rx(theta) = [1 0 0; 0 cos -sin; 0 sin cos] (rotation about x-axis)

Ry(theta) = [cos 0 sin; 0 1 0; -sin 0 cos] (rotation about y-axis)

Rz(theta) = [cos -sin 0; sin cos 0; 0 0 1] (rotation about z-axis)

Worked Example 4: 3D Translation

Translate (1, 2, 3) by (10, 0, -5) in homogeneous coordinates:

[1 0 0 10; 0 1 0 0; 0 0 1 -5; 0 0 0 1] * [1; 2; 3; 1] = [11; 2; -2; 1]. Result: (11, 2, -2).

Perspective Projection

To display a 3D scene on a 2D screen, we project 3D points onto a viewing plane.

Simple Perspective: For a camera at the origin looking along the z-axis, a point (x, y, z) projects to (x/z, y/z) on the z = 1 plane (assuming z > 0).

In homogeneous coordinates: [1 0 0 0; 0 1 0 0; 0 0 1 0; 0 0 1 0] * (x, y, z, 1)^T = (x, y, z, z)^T. Dividing by z gives (x/z, y/z, 1).

Worked Example 5

Project (6, 4, 2) with simple perspective: (6/2, 4/2) = (3, 2).

Project (6, 4, 4): (6/4, 4/4) = (1.5, 1). Farther objects appear smaller -- this creates the depth illusion.

Check Your Understanding

1. Write the 2x2 rotation matrix for 180 degrees.

Answer: R(180) = [cos(180) -sin(180); sin(180) cos(180)] = [-1 0; 0 -1] = -I. Every point is sent to its opposite.

2. Why are homogeneous coordinates necessary for translation?

Answer: Translation is NOT a linear transformation in R^2 (it does not map 0 to 0). Homogeneous coordinates embed R^2 into R^3 where translation becomes a linear (matrix) operation.

3. In composing transformations T1 then T2, which matrix goes on the left?

Answer: T2 goes on the left: M = T2 * T1. The rightmost matrix is applied first. This is because (T2 * T1) * v = T2(T1(v)).

Key Takeaways

2D transformations: rotation, scaling, reflection, shearing -- all are 2x2 matrices
Homogeneous coordinates: represent (x,y) as (x,y,1) to include translation in matrix multiplication
Composition: M = T_last * ... * T_2 * T_1 (rightmost applied first)
3D: 4x4 homogeneous matrices for rotation, scaling, translation
Perspective projection: (x, y, z) maps to (x/z, y/z) -- farther objects appear smaller
Every transformation in computer graphics is a matrix multiplication

Practice

Test your skills with 10 problems.

Practice Problems

Module Home

Module 8 Home