Math-textbook coordinate system used as default
Origin sits at the left-bottom corner, X goes → and Y goes ↑
Default rotation is counter-clockwise
Rotates a point ↶ (counter-clockwise) when θ > 0, ↷ (clockwise) when θ < 0
Degrees despite most library functions expecting radians: π rad = 180°
Two ways to denote a 2D point $(x, y)$ as a matrix
Row matrix $\begin{pmatrix} x & y \end{pmatrix}$ ← we use this
Column matrix $\begin{pmatrix} x \\ y \end{pmatrix}$
Using column-vector convention? Transpose all equations shown
Flip matrices and reverse multiplication order as $(AB)^{T} = B^T A^T$ e.g. $\begin{pmatrix}x & y\end{pmatrix}\begin{pmatrix}a & b \\c & d\end{pmatrix} = \begin{pmatrix}a & c \\b & d\end{pmatrix} \begin{pmatrix}x \\ y\end{pmatrix}$
Clarifications
Transformations act on points already existing
Creation of shapes (and plotting of points) is beyond purview
Transforming a shape really means transforming its points individually
Though transformation types (scale, rotate, shear, …) imply operation on a shape, a transform can only operate on a single point
A system/space within which values (points) lives has
to be relative; no such thing as “absolute system”
an agreed-upon origin w.r.t another system
$n$ lengths agreed-upon as 1 unit in every direction (axes) considered w.r.t another system
Part I
Transforming Points
Changes made to a value within a system
$X: P \rightarrow P'$
Scale
1D scaling is so ingrained we do it without forethought
Triangle' $\{ P'_{1}, P'_{2}, P'_{3} \}$ is triangle's reflection.
$S_{1, -1}$ mirrors an object while preserving shape and size.
Rotation
Doesn't make much sense in 1D, but well defined in 2D
Trigonometry says if some point $P(x, y)$ is rotated through an angle $θ$, the rotated point
$\boxed{P'(x', y') = PR_{θ} = (x \cos θ - y \sin θ, x \sin θ + y \cos θ)}$
No conversion (identity) when $θ = 0$
∵ cos 0 = 1, sin 0 = 0 → $PR_{0} = (1x - 0y, 0x + 1y) = (x, y) = P' = P$
These functions are periodic ⇒ $θ = θ \bmod 360$ (angle wraps around)
Negative angles can be made positive by adding 360
θ = −90, θ = 360 − 90 = 270 — works since the resulting orientation is the same; doesn't work when animating as the direction of rotation will differ
The resulting value is some scaled combination of x & y
Linear since equation deals only with first powers of x & y
Linear transforms preserve collinearity
Points on a line before the transform continue to be so after it too — straight lines will remain straight
What about changes to P with no relation to x or y?
Translation
Translation in 1D is nothing but addition
1 ticket = ₹50 ⇒ 3 tickets = 3 × 50 = ₹150, but what about the flowers you got for your sweetheart on the way?₹150 + ₹50 = ₹200. This has no correlation to the 3 friends going to the theatre.
Adding an offset $t$, to the value $x$, does the conversion $\boxed{ x' = x + t }$
Same works in 2D; use another constant to tackle the extra dimension: $T_{x, y} = (t_{x}, t_{y})$
For some $P(x, y)$ and $T_{x, y}$, the translated point
$\boxed{P'(x', y') = PT_{x, y} = (x + t_{x}, y + t_{y})}$
The added constant lacks any correlation to $x$ or $y$, unlike linear transforms
$P'_3$ = … seriously, should we be doing this? Isn't there a better way!
Yes, there is. Matrix to the rescue.
Transformation Matrices
Arthur Cayley demonstrated that matrices succinctly represent the algebraic form of transforms
$\begin{pmatrix}x' & y'\end{pmatrix} = \begin{pmatrix}x & y\end{pmatrix} \begin{pmatrix}a & c\\b & d\end{pmatrix}$ This only covers linear transforms. What about translation?
$\begin{pmatrix}x' & y' & 1\end{pmatrix} = \begin{pmatrix}x & y & 1\end{pmatrix} \begin{pmatrix}a & c & 0\\b & d & 0\\e & f & 1\end{pmatrix}$
Keep multiplying matrices while maintaining a concise form for any complex transform — "One matrix to transform 'em all!"
2D transforms need 3D matrices?! But why?
2D has 3 DoF: X & Y axes (linear) and origin (translation)
System $S_1$ is transformed into system $S_n$ by transforming $S_1$ into $S_2$, then $S_2$ into $S_3$, and so on until $S_n$ is reached
After transforming to a system, all further matrices are calculated with respect to that system
$L_{a \rightarrow b}$ is calcuated w.r.t system $A$, after concatenating it, $L_{b \rightarrow c}$ is calculated with respect to system $B$
Pot-ay-to — Pot-ah-to
Two ways to look at a complex transform
Transforming points & systems
A series of (concatenated) transforms may be seen
left to right — points transformed in one (global) system
Every transform is calculated with respect to this one system
right to left — systems transformed
Every transform is calculated with respect to the most recent local system in effect
Point transforms are concatenated by post-multiplying $X = $ $X_1$$X_2$$X_3$
System transforms are concatenated by pre-multiplying $L_{a \rightarrow b} = $ $X_3$$X_2$ $X_1$
Since the order of multiplication is reversed result would be different (anti-commutativity)
Reason for same result in previous exercise: we transform in reverse order. Reverse order & pre-multiply ≡ original order & post-multiply (¬¬x = x)
Transform A into B
Part III
Mapping between systems
Converting a value in one system to another
$M_{a \rightarrow b}: P_a \rightarrow P_b$
Mapping
The most important feature of a transform
The benefit of having multiple systems is reaped when using matrices for mapping
Once a map is applied to a canvas/context, all values are implicitly converted from source to target space
Work entirely in a comfortable system after setting the right mapping
Multiple systems and mapping between them is common
Different countries, different currency and measurement systems
Most words of a language (system) has translations (mappings) to words of other languages
Every window on screen has its own viewport transform mapping to the screen canvas
Each group has a mapping to its parent group: SVG, PDF, …
Active because old value becomes a new value — one system, two different values Passive since same value is just converted to a new unit — one value, two different systems
Intermediate maps $M_{a \rightarrow b}$ and $M_{b \rightarrow c}$ are found by transforming frame B to A and frame C to B respectively
Finding all intermediate maps is essentially transforming frame C to A
To find the mapping from system A to C, finding the matrix which transforms system C to A will do.
Mixing Active and Passive Transforms
A single matrix performing both active and passive transforms maybe needed
Concatenation order: active (point transforms) first, passive (maps) next
$C = $ $X_1 X_2 …$$M_1 M_2 …$
Active part works in local space without any maps
Passive part then maps that to target space
Order is important again
If reversed the Active part would get interpreted in the target space
Hierarchical Transforms
Mapping with many systems in between is common
Boy is inside a room
Room is inside a house
House is inside … Alright, alright, I get it!
Now map points w.r.t to the boy to points w.r.t the city space
Different entites exist at different levels: root, parent and leaf
Knowing an entity's position in parent/root space requires mapping
All maps from entity to parent/root are concatenated
When visiting an entity, its map is concatenated with parent's
This happens recursively till the root node
Stack data structure is usually used to preserve parent's map
Each entity PUSHes before concatenation and POPs when done. Without this the parent's map would get altered by current node's transforms rendering it unusable for its siblings