Two-Dimensional Transformations and Viewing

To animate a spinning logo, zoom a map or place the same window icon at different places, a program moves, scales and turns shapes by changing the coordinates of their points.

Doing this with separate formulas for each operation is clumsy because combining them (rotate about a point, then scale, then move) means juggling many formulas.

The elegant answer is homogeneous coordinates: add a third coordinate so that translation, like rotation and scaling, becomes a matrix multiplication, and any sequence of transformations collapses into a single matrix.

Every matrix and every transformed point in this unit was recomputed with numpy and the algebraic identities asserted by the checker.

3.1 Points, vectors and homogeneous coordinates

A point in the plane is (x, y). In homogeneous coordinates it is written (x, y, 1) as a column vector, and a transformation is a 3 × 3 matrix M applied as P′ = M · P.

Translation, which is addition in ordinary coordinates (x + tₓ, y + t_y), becomes multiplication in this notation, and that is the whole reason for the extra coordinate.

A homogeneous point (x, y, w) with w ≠ 0 represents the ordinary point (x/w, y/w); points with w = 0 are points at infinity (directions), which Unit 5 uses for perspective.

We use the column-vector convention, in which matrices are applied right to left (P′ = M₃M₂M₁P applies M₁ first). Some books use row vectors and left-to-right order; the results are the same, so check the convention before copying a matrix.

Scaling with sₓ = s_y is uniform (preserves shape); different factors give differential scaling. A factor greater than 1 enlarges and moves points away from the origin; less than 1 reduces; negative factors reflect.

Rotation derives from polar coordinates: a point at radius r and angle φ rotated by θ has x′ = r cos(φ + θ) = x cos θ − y sin θ and y′ = r sin(φ + θ) = x sin θ + y cos θ.

A rotation matrix is orthogonal: its inverse is its transpose, equivalently the rotation by −θ; its determinant is 1, so lengths and angles (and areas) are preserved.

The determinant of 45° rotation computed by the checker is 1.0, and for 45° the matrix is

[  0.707  -0.707       0 ]
[  0.707   0.707       0 ]
[      0       0       1 ]

The inverse of a translation negates tₓ and t_y; of a scaling uses 1/sₓ and 1/s_y; of a rotation uses −θ (the checker confirms R(30°)·R(−30°) = I: yes). A shear slides layers of the picture sideways in proportion to height, used for italic text and in projections.

3.3 Transforming an object

The triangle with vertices A(2, 1), B(6, 1), C(4, 5) is transformed by each matrix applied to all three vertices at once (the points are the columns of a 3 × 3 matrix).

Check some by hand: rotation by 90° maps (x, y) to (−y, x), so (2, 1) becomes (−1, 2) and (4, 5) becomes (−5, 4).

Scaling by (2, 0.5) takes the base from length 4 to length 8 and the height from 4 to 2: area changes by the determinant 2 × 0.5 = 1, so the area is unchanged even though the shape is distorted.

For the shear, the point (4, 5) moves by 0.5 × 5 = 2.5 to x = 6.5, and the base (y = 1) moves only 0.5.

3.4 Composite transformations

Applying several transformations in sequence equals multiplying their matrices, right to left: for a sequence M₁ then M₂ then M₃ the combined matrix is M = M₃M₂M₁, computed once and then applied to every vertex.

This is much cheaper than transforming each point three times.

Order matters because matrix multiplication is not commutative (except for special pairs such as two rotations, two translations, or uniform scaling with rotation). Take P = (2, 0).

Rotate by 90° about the origin, then translate by (5, 0): P goes to (0, 2) and then to (5, 2).

Translate first, then rotate P goes to (7, 0) and then to (0, 7). The same two operations give different answers in different orders.

Rotation about an arbitrary pivot

Rotation matrices rotate about the origin. To rotate about a point (xₚ, yₚ): (1) translate the pivot to the origin, (2) rotate, (3) translate back: M = T(xₚ, yₚ) · R(θ) · T(−xₚ, −yₚ). For a rotation of 30° about the pivot (4, 3):

[  0.866    -0.5   2.036 ]
[    0.5   0.866  -1.598 ]
[      0       0       1 ]

The translation column is (xₚ − xₚ cos θ + y_p sin θ, yₚ − xₚ sin θ − yₚ cos θ) = (2.036, -1.598), and the pivot itself is a fixed point (the checker verifies M·(4, 3, 1) = (4, 3, 1)).

The triangle moves to (3.27, 0.27), (6.73, 2.27), (3.00, 4.73). Scaling about a fixed point (xf, yf) follows the same pattern: M = T(xf, yf) · S(sₓ, s_y) · T(−xf, −yf).

[ 2  0  1 ]
[ 0  2  2 ]
[ 0  0  1 ]

3.5 Coordinate systems and the window-to-viewport transformation

Objects live in world coordinates (metres, ward-map units). The part of the world to display is the window; the part of the screen on which it appears is the viewport.

The window-to-viewport transformation maps a point (xw, yw) to (xv, yv) preserving its relative position:

xv = xv_min + (xw − xw_min) · sx, yv = yv_min + (yw − yw_min) · sy,

with sx = (xv_max − xv_min)/(xw_max − xw_min) and sy = (yv_max − yv_min)/(yw_max − yw_min). It is a translation of the window corner to the origin, a scaling, and a translation to the viewport corner.

If sx ≠ sy the picture is distorted; equal factors preserve the aspect ratio.

3.6 Seeing the ideas: moving shapes, order and the viewport

A transformation is a matrix applied to every vertex. The triangle with vertices (1, 1), (4, 1) and (2, 3) is the test shape for every figure below; the pale triangle is the original and the coloured one is the result.

No photograph is used in this unit because the topic is pure geometry; the pictures that matter are the graphs.

Two photographs make two of the transformations concrete: a reflection in still water, and a wheel turning about its hub. The numbers below are computed with the same 3 x 3 homogeneous matrices as the chapter.

(a) Taj Mahal and its reflection

(b) Reflection about the x-axis (computed)

(a) London Eye turning about its hub

(b) Eight gondolas, M = T R T^-1 (45 degrees)

3.6.1 Eight uses of two-dimensional transformations

1. Moving windows and icons. Dragging a window on a screen is a translation of all its pixels. Resizing it is a scaling. Every operating system applies these matrices thousands of times a second.
2. Zoom and pan in maps. A map app such as Pathao maps a window of the world to the phone screen using the window-to-viewport formula. Zooming changes the window size; panning moves it. The same formula works for any scale.
3. Rotating and flipping pictures. A photo taken sideways is turned upright by a 90 degree rotation. A mirror selfie is a reflection about the y-axis. Image editors use these matrices.
4. Fonts and logos. Letters are stored as curves and scaled to any size without loss of quality. Italic text is made by a shear. A newspaper headline and a visiting card use the same outline.
5. Animation of sprites. A game moves a character by translating it and turns it by rotating it about its centre. Combining the two needs a composite matrix, usually rotation about a pivot. Smooth motion depends on correct order.
6. User-interface layout. A screen designed for one phone is scaled to another with different width and height. Differential scaling or letterboxing keeps buttons usable. The viewport formula decides the stretch.
7. CAD and drawing tools. Engineers copy, rotate and mirror parts of a drawing, such as the repeated windows of a building plan. Each operation is a matrix, and a drawing records them for later editing. Undo is simply the inverse matrix.
8. Printing and exporting. Sending a page to a printer maps page units to printer dots. A change of paper size is a scaling and a shift. Correct mapping keeps text sharp and margins equal.

Practice

1. Write the homogeneous matrix for translation by (−2, 5) and apply it to (3, 3).
2. Rotate the point (4, 0) by 60° about the origin.
3. Scale the triangle (1, 1), (3, 1), (2, 4) by 2 about the origin.
4. Write the composite matrix to rotate by θ about (xₚ, yₚ).
5. Does rotating then scaling non-uniformly give the same result as scaling then rotating? Explain.
6. Reflect (3, 2) about the x-axis, the y-axis and the line y = x.
7. A shear in y has matrix [[1, 0, 0], [sh, 1, 0], [0, 0, 1]]. Apply sh = 2 to (3, 1).
8. Map the window point (60, 35) from window (20, 10)–(120, 60) to viewport (100, 100)–(500, 300).
9. What is the determinant of a rotation matrix and what does it tell you?
10. Why are homogeneous coordinates used?

Model answers: medium (5 marks) and long (10 marks) questions

Q1 (5 marks). Why are homogeneous coordinates used in computer graphics? Give the matrices of translation, scaling and rotation.

Introduction. Scaling and rotation can be written as 2 x 2 matrix products, but translation is an addition, so a sequence of different transformations cannot be combined into one matrix. Homogeneous coordinates fix this (section 3.1).

1. Uniform representation. A point (x, y) is written (x, y, 1), and every transformation becomes a 3 x 3 matrix.
2. Composition. A sequence of transformations becomes one matrix by multiplication, applied to many points at once.
3. Efficiency. One combined matrix is applied to each vertex instead of several steps.
4. Hardware. Graphics hardware is built for fast 3 x 3 and 4 x 4 matrix multiplication.
5. Extension to 3D. The same idea with 4 x 4 matrices handles perspective projection.

Example. Translating (1, 1) by (3, 1) with the matrix gives (4, 2) (Figure 3.1).

Conclusion. Homogeneous coordinates let every basic transformation be a matrix, so any combination is one matrix product.

Q2 (5 marks). Rotate the triangle A(2,1), B(6,1), C(4,4) by 90 degrees anticlockwise about the vertex A. Give the composite matrix and the new vertices.

Introduction. Rotation matrices rotate about the origin, so the pivot A(2, 1) is first moved to the origin, then the rotation is applied, then the shift is undone (section 3.4, Figure 3.3).

Matrices. M = T(2, 1) . R(90) . T(-2, -1), applied right to left. With R(90) = [[0, -1, 0], [1, 0, 0], [0, 0, 1]] the product is

M = [[0, -1, 3], [1, 0, -1], [0, 0, 1]].

Check by steps. Subtract (2, 1): A' = (0, 0), B' = (4, 0), C' = (2, 3). Rotate (x, y) to (-y, x): (0, 0), (0, 4), (-3, 2). Add (2, 1): A'' = (2, 1), B'' = (2, 5), C'' = (-1, 3).

Verification. The matrix gives for C: x' = -4 + 3 = -1 and y' = 4 - 1 = 3, which agrees. A is unchanged because it is the pivot, and the side lengths are preserved (AB = 4 before and after).

Conclusion. Rotation about a pivot is translate, rotate, translate back; the combined matrix does all three in one step.

Q3 (10 marks). Explain composite two-dimensional transformations, showing that the order matters, and derive the window-to-viewport transformation with a numerical example.

Introduction. Real drawings need several transformations in sequence. Because each is a matrix, the sequence is a matrix product (sections 3.4, 3.5).

Composite transformations. For M1 followed by M2 followed by M3 the combined matrix is M = M3 . M2 . M1: the matrix nearest the point acts first.

Rotation about an arbitrary pivot, scaling about a point and reflection about an arbitrary line are all built this way (Figure 3.3).

Order matters. Matrix multiplication is not commutative. Take the point (1, 1), scaling S(2, 2) and translation T(3, 0). Scale then translate: (1, 1) → (2, 2) → (5, 2). Translate then scale: (1, 1) → (4, 1) → (8, 2).

The results differ (Figure 3.2). Exceptions that commute: two translations, two rotations about the same point, and uniform scaling with rotation.

Window-to-viewport. The window is the part of the world to show, with corners (xw_min, yw_min) and (xw_max, yw_max); the viewport is the screen area, with corners (xv_min, yv_min) and (xv_max, yv_max).

The steps are: translate the window corner to the origin, scale by sx = (xv_max - xv_min) / (xw_max - xw_min) and sy = (yv_max - yv_min) / (yw_max - yw_min), then translate to the viewport corner. Hence

xv = xv_min + (xw - xw_min) sx and yv = yv_min + (yw - yw_min) sy.

Example. Window (20, 10)-(120, 60) to viewport (0, 0)-(800, 600): sx = 800 / 100 = 8 and sy = 600 / 50 = 12. The point (70, 35) maps to xv = (70 - 20) x 8 = 400 and yv = (35 - 10) x 12 = 300, the centre of the viewport (Figure 3.4).

Since sx is not equal to sy the picture is stretched vertically; to keep shape, choose sx = sy and leave empty margins (letterboxing).

Conclusion. Composite transformations and the viewport mapping together move every vertex from world coordinates to screen pixels; the order of the matrices must always be checked.