translate(175, 200);
scale(2);
translate(175, 200);
scale(2);
rotate(45);
translate(175, 200);
scale(2);
rotate(45);
skew(15,15);
Whats actually going on here?
The Matrix
The transform is a matrix
Defines the mapping of one set of coordinates to another
Matrix multiplication
Mapping from [x, y] to [x', y']
a*x + b*y + tx = x'
c*x + d*y + ty = y'
0*x + 0*y + 1 = 1
Why does 2D points have 3 values?
We are using homogenous coordinates
Why 3x3 matrices?
We need 3 columns to enable translation
Why is the 3rd row 0 0 1?
To avoid messing with the perspective component
Coordinate systems
Transformation context
Transform origin
scale(2);
Changing the origin
scale(2);
Representation of transforms
From shorthand to matrix representation
Translate
translate(x,y)
Scale
scale(sx, sy)
Rotate
rotate(a)
Rotate
rotate(deg)
Skew
skew(a, b)
Composing transforms
Matrix multiplication
Matrix multiplication is associative
B ⋅ (A ⋅ x⃗) = (B ⋅ A) ⋅ x⃗
Matrix multiplication is not commutative
Order matters
B ⋅ A ⋅ x⃗ ≠ A ⋅ B ⋅ x⃗
Scale then translate
scale(2) translate(15, 15)
Translate then scale
translate(15, 15) scale(2)
Summary
Transforms are represented as matrices
... that map from one coordinate to another
... and compose through multiplication
3D Transforms
The math is the same, "just" one more dimension