How unit 2 is examined
This unit covers the basic 2-D transformations, their matrix and homogeneous form, composition, the window-to-viewport mapping and line and polygon clipping; no topic was asked in the supplied papers, so each is taught briefly with its formula and one worked case.
Translation, Rotation, Scaling, Shearing, Reflection
<span style="display:inline-block;padding:.16em .6em;border:1.5px solid currentColor;border-radius:999px;font-size:.68em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.75">Not asked since 2022</span>
Definition. A 2-D transformation changes the position, size, orientation or shape of an object by applying a rule to every point $(x,y)$ of it, giving a new point $(x',y')$.
Key points.
- Translation moves every point by the same distance $(t_x,t_y)$: $x'=x+t_x,\ y'=y+t_y$; it is a rigid motion, so size and shape do not change.
- Rotation about the origin by angle $\theta$ (anticlockwise positive): $x'=x\cos\theta-y\sin\theta,\ y'=x\sin\theta+y\cos\theta$; it preserves size and shape.
- Scaling by $(s_x,s_y)$ about the origin: $x'=x\,s_x,\ y'=y\,s_y$; a factor above 1 enlarges, below 1 shrinks, and $s_x=s_y$ is uniform scaling.
- Shear slants the object: x-shear is $x'=x+sh_x\,y,\ y'=y$ and y-shear is $x'=x,\ y'=y+sh_y\,x$.
- Reflection gives a mirror image: about the x-axis $(x,-y)$, about the y-axis $(-x,y)$, about the origin $(-x,-y)$, and about the line $y=x$ it is $(y,x)$.
Example. Rotate triangle $A(2,1),B(4,1),C(4,3)$ by $90^\circ$ about the origin: $x'=-y,\ y'=x$, so $A'(-1,2),\ B'(-1,4),\ C'(-3,4)$.
<mark>A 2-D transformation maps every point of an object by translation, rotation, scaling, shearing or reflection.</mark>
Inverse Transformation
<span style="display:inline-block;padding:.16em .6em;border:1.5px solid currentColor;border-radius:999px;font-size:.68em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.75">Not asked since 2022</span>
Definition. The inverse transformation undoes a transformation and returns the object to its original position, so $M\cdot M^{-1}=I$.
Key points.
- The inverse of translation by $(t_x,t_y)$ is translation by $(-t_x,-t_y)$.
- The inverse of rotation by $\theta$ is rotation by $-\theta$; because $\cos(-\theta)=\cos\theta$ and $\sin(-\theta)=-\sin\theta$, it equals the transpose of the rotation matrix.
- The inverse of scaling by $(s_x,s_y)$ is scaling by $(1/s_x,1/s_y)$, valid only when neither factor is zero.
- A reflection is its own inverse, and the inverse of a composite $M_1M_2$ is $M_2^{-1}M_1^{-1}$, in reverse order.
Example. The inverse of $T(3,-2)$ is $T(-3,2)$, and the inverse of $R(30^\circ)$ is $R(-30^\circ)$.
==The inverse of a transformation matrix $M$ is the matrix $M^{-1}$ such that $M M^{-1}=I$.==
Homogeneous coordinate system
<span style="display:inline-block;padding:.16em .6em;border:1.5px solid currentColor;border-radius:999px;font-size:.68em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.75">Not asked since 2022</span>
Definition. A point $(x,y)$ is represented as $(x,y,1)$, or generally $(x_h,y_h,w)$ with $x=x_h/w$ and $y=y_h/w$, so that every transformation becomes a 3x3 matrix multiplication.
Key points.
- Rotation and scaling are multiplications in ordinary coordinates but translation is an addition, so translation cannot be a 2x2 matrix; the extra coordinate turns it into a multiplication.
- Translation matrix: $\begin{bmatrix}1&0&t_x\\0&1&t_y\\0&0&1\end{bmatrix}$ acting on the column vector $(x,y,1)^T$.
- One uniform matrix form lets any sequence of transformations be combined into a single matrix and applied in one multiplication.
- The Cartesian point is recovered by dividing by $w$; the usual choice is $w=1$.
- The same idea extends to 3-D with 4x4 matrices.
Example. Translating $(2,3)$ by $(4,5)$: $\begin{bmatrix}1&0&4\\0&1&5\\0&0&1\end{bmatrix}\begin{bmatrix}2\\3\\1\end{bmatrix}=\begin{bmatrix}6\\8\\1\end{bmatrix}$, the point $(6,8)$.
<mark>Homogeneous coordinates add a third coordinate $w$ so that translation, rotation and scaling are all matrix products.</mark>
Matrices Transformation
<span style="display:inline-block;padding:.16em .6em;border:1.5px solid currentColor;border-radius:999px;font-size:.68em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.75">Not asked since 2022</span>
Definition. Each transformation is written as a 3x3 matrix $M$ in homogeneous form, and the new point is found by the product $P'=M\cdot P$.
| Transformation | Matrix (homogeneous) |
|---|---|
| Translation | $\begin{bmatrix}1&0&t_x\\0&1&t_y\\0&0&1\end{bmatrix}$ |
| Rotation | $\begin{bmatrix}\cos\theta&-\sin\theta&0\\ \sin\theta&\cos\theta&0\\0&0&1\end{bmatrix}$ |
| Scaling | $\begin{bmatrix}s_x&0&0\\0&s_y&0\\0&0&1\end{bmatrix}$ |
| x-shear | $\begin{bmatrix}1&sh_x&0\\0&1&0\\0&0&1\end{bmatrix}$ |
| Reflection about x-axis | $\begin{bmatrix}1&0&0\\0&-1&0\\0&0&1\end{bmatrix}$ |
| Reflection about y-axis | $\begin{bmatrix}-1&0&0\\0&1&0\\0&0&1\end{bmatrix}$ |
Key points.
- Reflection is a scaling with a negative factor: $s_y=-1$ for the x-axis and $s_x=-1$ for the y-axis.
- The matrix of a whole object is applied to each vertex, and the new vertices are joined in the same order.
- Matrix multiplication is not commutative, so $M_1M_2\ne M_2M_1$ in general and the order must be stated.
- The determinant of a rotation matrix is 1, so area is preserved; for scaling it is $s_xs_y$.
==Every basic 2-D transformation is a 3x3 matrix applied to the homogeneous point as $P'=M\cdot P$.==
Composite Transformation
<span style="display:inline-block;padding:.16em .6em;border:1.5px solid currentColor;border-radius:999px;font-size:.68em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.75">Not asked since 2022</span>
Definition. A composite transformation is a sequence of basic transformations combined into one matrix by multiplying their matrices, also called matrix concatenation.
Key points.
- With column vectors the matrices are multiplied right to left, so the first transformation applied is the rightmost matrix: $M=M_n\cdots M_2M_1$.
- Rotation about a fixed point $(x_p,y_p)$ is $T(x_p,y_p)\cdot R(\theta)\cdot T(-x_p,-y_p)$: translate the pivot to the origin, rotate, translate back.
- Scaling about a fixed point uses the same pattern, $T(x_p,y_p)\cdot S(s_x,s_y)\cdot T(-x_p,-y_p)$, so the fixed point stays where it is.
- Two successive translations add, $T(a,b)T(c,d)=T(a+c,b+d)$; two successive scalings multiply, and two successive rotations add their angles.
- Reflection about an arbitrary line is rotate the line onto an axis, reflect, and rotate back.
Steps.
Step 1: Translate the pivot (xp, yp) to the origin.
Step 2: Apply the rotation or scaling about the origin.
Step 3: Translate back by (xp, yp).
Step 4: Multiply the three matrices (last step on the left) and apply to each vertex.
Example. Rotate $A(2,1),B(4,1),C(4,3)$ by $90^\circ$ about $(1,1)$. Shift by $(-1,-1)$ to get $(1,0),(3,0),(3,2)$, rotate with $x'=-y,\ y'=x$ to get $(0,1),(0,3),(-2,3)$, shift back by $(1,1)$: $A'(1,2),\ B'(1,4),\ C'(-1,4)$.
<mark>A composite transformation is the product of the individual matrices, applied in the correct order.</mark>
Windowing & Clipping: World Coordinate System, Screen Coordinate System, Viewing Transformation
<span style="display:inline-block;padding:.16em .6em;border:1.5px solid currentColor;border-radius:999px;font-size:.68em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.75">Not asked since 2022</span>
Definition. The window is the area of the world coordinate scene chosen for display, the viewport is the area of the screen coordinate system where it is shown, and the viewing transformation maps the window onto the viewport.
Key points.
- The world coordinate system (WCS) describes objects in real, device-independent units; the screen coordinate system (SCS) is in device pixels with the origin at a screen corner.
- Scale factors are $s_x=\dfrac{xv_{max}-xv_{min}}{xw_{max}-xw_{min}}$ and $s_y=\dfrac{yv_{max}-yv_{min}}{yw_{max}-yw_{min}}$.
- The mapping is $xv=xv_{min}+(xw-xw_{min})\,s_x$ and $yv=yv_{min}+(yw-yw_{min})\,s_y$, which keeps the relative position of the point in the window.
- Steps: translate the window corner to the origin, scale to the viewport size, and translate to the viewport position.
- If $s_x\ne s_y$ the picture is stretched, so equal aspect ratios avoid distortion; clipping then removes what lies outside the window.
Example. Window $(20,20)$ to $(80,60)$, viewport $(0,0)$ to $(100,50)$: $s_x=100/60=1.667$, $s_y=50/40=1.25$. The point $(50,40)$ maps to $xv=(50-20)(1.667)=50$ and $yv=(40-20)(1.25)=25$, so $(50,25)$.
<mark>The viewing transformation maps a window in world coordinates onto a viewport in screen coordinates by translate, scale and translate.</mark>
Line Clipping & Polygon Clipping Algorithms
<span style="display:inline-block;padding:.16em .6em;border:1.5px solid currentColor;border-radius:999px;font-size:.68em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.75">Not asked since 2022</span>
Definition. Clipping removes the part of a line or polygon lying outside the clip window and keeps only the visible part.
<figure class="ds-fig" style="margin:1.4rem 0;overflow-x:auto"><svg xmlns="http://www.w3.org/2000/svg" id="dsfig-u2-01" viewBox="0 0 338 252" width="338" height="252" role="img" aria-label="Cohen-Sutherland regions: TL 1001, T 1000, TR 1010, L 0001, C 0000 (window), R 0010, BL 0101, B 0100, BR 0110"><style>#dsfig-u2-01 .e{stroke:#454C5A;stroke-width:1.4;fill:none}#dsfig-u2-01 .e.hi{stroke:#2340B8;stroke-width:2.6}#dsfig-u2-01 .n{fill:#FFFFFF;stroke:#16181D;stroke-width:1.4}#dsfig-u2-01 .n.hi{fill:#E3E9FC;stroke:#2340B8;stroke-width:2.2}#dsfig-u2-01 .n.rb-b{fill:#16181D;stroke:#16181D}#dsfig-u2-01 .n.rb-r{fill:#BD3227;stroke:#BD3227}#dsfig-u2-01 text{font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;font-size:13px}#dsfig-u2-01 .t{fill:#16181D;font-weight:500}#dsfig-u2-01 .t.inv{fill:#FFFFFF;font-weight:700}#dsfig-u2-01 .kd{stroke:#16181D;stroke-width:1.2}#dsfig-u2-01 .dot{fill:#16181D}#dsfig-u2-01 .ann{fill:#2340B8;font-size:11px;font-weight:700}#dsfig-u2-01 .lbl{fill:#6F7787;font-family:system-ui,-apple-system,sans-serif;font-size:12px;font-weight:700}#dsfig-u2-01 .ptr{fill:#2340B8;font-size:12px;font-weight:700}#dsfig-u2-01 .ah{fill:#454C5A}#dsfig-u2-01 .ah.hi{fill:#2340B8}#dsfig-u2-01 .wl rect{fill:#FFFFFF;stroke:#DCE0E7}#dsfig-u2-01 .wl .t{font-size:12px;font-weight:700}#dsfig-u2-01 .wl.hi rect{fill:#2340B8;stroke:#2340B8}#dsfig-u2-01 .wl.hi .t{fill:#FFFFFF}html.dark #dsfig-u2-01 .e{stroke:#B1B7C3}html.dark #dsfig-u2-01 .e.hi{stroke:#8FA3FF}html.dark #dsfig-u2-01 .n{fill:#161920;stroke:#E6E8ED}html.dark #dsfig-u2-01 .n.hi{fill:#1E2748;stroke:#8FA3FF}html.dark #dsfig-u2-01 .n.rb-b{fill:#E6E8ED;stroke:#E6E8ED}html.dark #dsfig-u2-01 .n.rb-r{fill:#FF7E71;stroke:#FF7E71}html.dark #dsfig-u2-01 .t{fill:#E6E8ED}html.dark #dsfig-u2-01 .t.inv{fill:#0F1115}html.dark #dsfig-u2-01 .kd{stroke:#E6E8ED}html.dark #dsfig-u2-01 .dot{fill:#E6E8ED}html.dark #dsfig-u2-01 .ann{fill:#8FA3FF}html.dark #dsfig-u2-01 .lbl{fill:#858D9C}html.dark #dsfig-u2-01 .ptr{fill:#8FA3FF}html.dark #dsfig-u2-01 .ah{fill:#B1B7C3}html.dark #dsfig-u2-01 .ah.hi{fill:#8FA3FF}html.dark #dsfig-u2-01 .wl rect{fill:#161920;stroke:#2A2E37}html.dark #dsfig-u2-01 .wl.hi rect{fill:#8FA3FF;stroke:#8FA3FF}html.dark #dsfig-u2-01 .wl.hi .t{fill:#0F1115}</style><defs><marker id="ah1" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse"><path class="ah" d="M0,1 L9,5 L0,9 z"/></marker><marker id="ahh1" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse"><path class="ah hi" d="M0,1 L9,5 L0,9 z"/></marker></defs><path class="e" d="M59,40 L150,40"/><path class="e" d="M188,40 L279,40"/><path class="e" d="M59,126 L150,126"/><path class="e" d="M188,126 L279,126"/><path class="e" d="M59,212 L150,212"/><path class="e" d="M188,212 L279,212"/><path class="e" d="M40,59 L40,107"/><path class="e" d="M40,145 L40,193"/><path class="e" d="M169,59 L169,107"/><path class="e" d="M169,145 L169,193"/><path class="e" d="M298,59 L298,107"/><path class="e" d="M298,145 L298,193"/><circle class="n" cx="40" cy="40" r="18"/><text class="t" x="40" y="40" dy=".35em" text-anchor="middle">TL</text><circle class="n" cx="169" cy="40" r="18"/><text class="t" x="169" y="40" dy=".35em" text-anchor="middle">T</text><circle class="n" cx="298" cy="40" r="18"/><text class="t" x="298" y="40" dy=".35em" text-anchor="middle">TR</text><circle class="n" cx="40" cy="126" r="18"/><text class="t" x="40" y="126" dy=".35em" text-anchor="middle">L</text><circle class="n" cx="169" cy="126" r="18"/><text class="t" x="169" y="126" dy=".35em" text-anchor="middle">C</text><circle class="n" cx="298" cy="126" r="18"/><text class="t" x="298" y="126" dy=".35em" text-anchor="middle">R</text><circle class="n" cx="40" cy="212" r="18"/><text class="t" x="40" y="212" dy=".35em" text-anchor="middle">BL</text><circle class="n" cx="169" cy="212" r="18"/><text class="t" x="169" y="212" dy=".35em" text-anchor="middle">B</text><circle class="n" cx="298" cy="212" r="18"/><text class="t" x="298" y="212" dy=".35em" text-anchor="middle">BR</text></svg><figcaption style="font-size:.82em;opacity:.72;margin-top:.45rem">Cohen-Sutherland regions: TL 1001, T 1000, TR 1010, L 0001, C 0000 (window), R 0010, BL 0101, B 0100, BR 0110</figcaption></figure>
Key points.
- In Cohen-Sutherland each endpoint gets a 4-bit region code in the order above, below, right, left, with a bit set to 1 when the point lies on that side of the window.
- If both codes are 0000 the line is completely inside and is accepted (trivial accept).
- If the bitwise AND of the two codes is not 0000 the line lies wholly on one outer side and is rejected (trivial reject).
- Otherwise, choose an outside endpoint, find the intersection with a window edge, replace the endpoint, recompute its code and repeat; the slope form is $y=y_1+m(x-x_1)$ with $m=\dfrac{y_2-y_1}{x_2-x_1}$.
- Sutherland-Hodgman clips a polygon against one window edge at a time, feeding the output vertex list of one edge to the next.
- For each polygon edge four cases arise: out to in outputs the intersection and the end vertex, in to in outputs the end vertex, in to out outputs the intersection, and out to out outputs nothing.
Steps.
Step 1: Compute the region codes of both endpoints.
Step 2: If both are 0000, accept; if code1 AND code2 is not 0000, reject.
Step 3: Else pick an endpoint that is outside and clip it against a window edge.
Step 4: Replace the endpoint by the intersection point and go to Step 1.
Pitfall. Sutherland-Hodgman on a concave polygon can produce extra connecting edges along the window boundary, so it is exact only for convex polygons.
<mark>Cohen-Sutherland accepts a line if both codes are 0000 and rejects it if their AND is non-zero; otherwise it clips at a window edge and repeats.</mark>
Last-minute revision
- Translation: $x'=x+t_x,\ y'=y+t_y$; scaling: $x'=xs_x,\ y'=ys_y$.
- Rotation: $x'=x\cos\theta-y\sin\theta,\ y'=x\sin\theta+y\cos\theta$.
- Homogeneous point is $(x,y,1)$ and every transformation is a 3x3 matrix, $P'=MP$.
- Inverse: translate by $-t$, rotate by $-\theta$, scale by $1/s$; reflection is self-inverse.
- Fixed-point rotation is $T(x_p,y_p)\,R(\theta)\,T(-x_p,-y_p)$.
- Matrix order matters, since multiplication is not commutative.
- Window-to-viewport: $xv=xv_{min}+(xw-xw_{min})s_x$.
- Cohen-Sutherland code bits are above, below, right, left; accept if both 0000, reject if AND is non-zero.
- Sutherland-Hodgman clips a polygon edge by edge with four cases.
- $R(90^\circ)$ maps $(x,y)$ to $(-y,x)$.
Memory hooks
- TRS: translate to origin, rotate, translate back (read right to left).
- Cohen-Sutherland code bits: Top, Bottom, Right, Left (TBRL).
- Homogeneous means one extra coordinate, so translation joins the matrix club.
- Sutherland-Hodgman: in-in, in-out, out-in, out-out.
- Inverse means opposite sign for moves and angles, reciprocal for scales.
Coverage checklist
- Translation, Rotation, Scaling, Shearing, Reflection: definitions, formulas, rotation example (no past questions).
- Inverse Transformation: inverse of each basic matrix (no past questions).
- Homogeneous coordinate system: 3x3 form and translation example (no past questions).
- Matrices Transformation: table of matrices (no past questions).
- Composite Transformation: order, fixed-point rotation and worked example (no past questions).
- Windowing & Clipping: World Coordinate System, Screen Coordinate System, Viewing Transformation: window-viewport formula and example (no past questions).
- Line Clipping & Polygon Clipping Algorithms: Cohen-Sutherland and Sutherland-Hodgman (no past questions).