Please wait. Presentation is loading…

Transformations and Matrices

  • Points and vectors
  • Matrix multiplication
  • Linear vs. affine
  • 2D Transformations
  • 3D Transformations








This presentation requires Firefox.
Slides developed by Benedict Brown, Adam Mally, and Stefanie Alfonso

Points and Vectors

Points represent positions: Vectors represent directions:
\(p = (x, y)\)
\(\vec v = (x, y)\)
Typically write both as column vectors:
\[x = \begin{pmatrix}x \\ y \end{pmatrix}\] \[\vec v = \begin{pmatrix}x \\ y \end{pmatrix}\]

Vector Arithmetic

Vector addition: Point Subtraction:
\(\vec v_1 = (x_1, y_1)\) \(\vec v_2 = (x_2, y_2)\) \(\vec v = \vec v_1 + \vec v_2\)
\(p_1\) \(p_2\) \(\vec v = p_2 - p_1\)
\[\vec v = \begin{pmatrix}x_1 + x_2 \\ y_1 + y_2 \end{pmatrix}\] \[\vec v = \begin{pmatrix}x_2 - x_1 \\ y_2 - y_1 \end{pmatrix}\]

Matrix Notation

Assume point \(p = {\tiny \begin{pmatrix}x \\ y\\ z\end{pmatrix}}\).
  • Transpose: \(p^t = (x\ y\ z)\)
  • Norm (length): \(\left | p \right | = \sqrt{x^2 + y^2 + z^2}\)
  • Determinant: \[\tiny \left | \begin{matrix} a & b \\ c & d \end{matrix} \right | = ad - bc,\ \left | \begin{matrix} a_{11} & a_{12} & a_{13} \\ a_{21} & a_{22} & a_{23} \\ a_{31} & a_{32} & a_{33} \end{matrix} \right | = a_{11} a_{22} a_{33} + a_{12} a_{23} a_{31} + a_{13} a_{21} a_{32} - a_{13} a_{22} a_{31} - a_{12} a_{21} a_{33} - a_{11} a_{23} a_{32} \]
  • Matrix multiplication: \[\tiny \begin{pmatrix} a_{11} & a_{12} & a_{13} \\ a_{21} & a_{22} & a_{23}\end{pmatrix} \begin{pmatrix} b_{11} & b_{12} \\ b_{21} & b_{22} \\ b_{31} & b_{32}\end{pmatrix} = \begin{pmatrix} a_{11} b_{11} + a_{12} b_{21} + a_{13} b_{31} & a_{11} b_{12} + a_{12} b_{22} + a_{13} b_{23} \\ a_{21} b_{11} + a_{22} b_{21} + a_{23} b_{31} & a_{21} b_{12} + a_{22} b_{22} + a_{23} b_{23} \end{pmatrix} \]

Dot Product

\(\theta\) \(\vec v_1\) \(\vec v_2\)
A dot product can be thought of as the length of the projection of one vector onto the other vector.
\[ \color{blue}{\vec v_1 \cdot \vec v_2} = \left |\vec v_1 \right | \left |\vec v_2\right | \cos \theta = \vec v_1^t \, \vec v_2 = (x_1\ y_1) \begin{pmatrix}x_2 \\ y_2\end{pmatrix} = \color{blue}{x_1 x_2 + y_1 y_2} \]

Cross Product

\(\theta\) \(\vec v_1\) \(\vec v_2\) \(\left |\vec v_1 \times \vec v_2\right |\)
\( \left | \vec v_1 \times \vec v_2 \right | = \left |\vec v_1 \right | \left |\vec v_2 \right | \sin \theta \)

\(\vec v_1 \times \vec v_2\)  is orthogonal (perpendicular) to both \(\vec v_1\) and \(\vec v_2\,\); length is area of parallelogram.

Cross product is only defined for 3Dimensional vectors!
\[ \color{black}{\vec v_1 \times \vec v_2} = \color{black}{\begin{pmatrix} \color{green}{y_1} \color{blue}{z_2} - \color{green}{y_2} \color{blue}{z_1} \\ \color{blue}{z_1} \color{red}{x_2} - \color{blue}{z_2} \color{red}{x_1} \\ \color{red}{x_1} \color{green}{y_2} - \color{red}{x_2} \color{green}{y_1} \end{pmatrix}} \]

2D Scale

 Scale by \((s_x, s_y)\): \[ \begin{pmatrix} \color{blue}{s_x} & 0 \\ 0 & \color{blue}{s_y} \end{pmatrix} \begin{pmatrix} x \\ y \end{pmatrix} \]
\[ \underbrace{ \begin{pmatrix} \color{blue}{\class{sxval}{1}} & 0 \\ 0 & \color{blue}{\class{syval}{1}} \end{pmatrix}}_{\color{blue}{\large S}} \begin{pmatrix} x \\ y \end{pmatrix} \]

2D Scale

 Scale by \((s_x, s_y)\): \[ \begin{pmatrix} \color{blue}{s_x} & 0 \\ 0 & \color{blue}{s_y} \end{pmatrix} \begin{pmatrix} x \\ y \end{pmatrix} \]
\[ \underbrace{ \begin{pmatrix} \color{blue}{\class{sxval2}{1}} & 0 \\ 0 & \color{blue}{\class{syval2}{1}} \end{pmatrix}}_{\color{blue}{\large S}} \begin{pmatrix} x \\ y \end{pmatrix} \]

2D Rotations

 Rotation by \(\theta\) counter-clockwise: \[ \begin{pmatrix} \color{blue}{\cos \theta} & -\sin \theta \\ \color{blue}{\sin \theta} & \cos \theta \end{pmatrix} \begin{pmatrix} x \\ y \end{pmatrix} \]
\[ \underbrace{ \begin{pmatrix} \color{blue}{\cos \class{rotangle}{30}°} & -\sin \class{rotangle}{30} °\\ \color{blue}{\sin \class{rotangle}{30}°} & \cos \class{rotangle}{30} ° \end{pmatrix}}_{\color{blue}{\large R}} \begin{pmatrix} x \\ y \end{pmatrix} = \begin{pmatrix} \color{blue}{\class{cosangle}{0.87}} & \class{nsinangle}{-0.5}\\ \color{blue}{\class{sinangle}{0.5}} & \class{cosangle}{0.87} \end{pmatrix} \begin{pmatrix} x \\ y \end{pmatrix} \]

2D Translation

\(t_x\) \(t_y\)
Translate by \((t_x, t_y)\): \[ \begin{pmatrix} ? & ? \\ ? & ? \\ \end{pmatrix} \begin{pmatrix} 0 \\ 0 \end{pmatrix} = \begin{pmatrix} \color{blue}{t_x}\\ \color{blue}{t_y} \end{pmatrix} \]



Translation is not linear because the origin changes.

Homogeneous Coordinates

Add an extra coordinate to every point: \[ \begin{pmatrix} x \\ y \\ w \end{pmatrix} \rightarrow \begin{pmatrix} x / w\\ y / w \end{pmatrix},\hspace{5ex} \begin{pmatrix} x\\ y \end{pmatrix} \rightarrow \begin{pmatrix} x\\ y\\ 1 \end{pmatrix} \]

\[ \begin{pmatrix} 1 & 0 & \color{blue}{t_x}\\ 0 & 1 & \color{blue}{t_y}\\ 0 & 0 & 1 \end{pmatrix} \begin{pmatrix} x\\ y\\ 1 \end{pmatrix} = \begin{pmatrix} x + \color{blue}{t_x}\\ y + \color{blue}{t_y}\\ 1 \end{pmatrix} \]

2D Translation (Take 2)

 Translate by \((t_x, t_y)\): \[ \begin{pmatrix} 1 & 0 & \color{blue}{t_x} \\ 0 & 1 & \color{blue}{t_y} \\ 0 & 0 & 1 \end{pmatrix} \begin{pmatrix} x \\ y \\ 1 \end{pmatrix} \]
\[ \underbrace{ \begin{pmatrix} 1 & 0 & \color{blue}{\class{txval}{0}} \\ 0 & 1 & \color{blue}{\class{tyval}{0}} \\ 0 & 0 & 1 \end{pmatrix}}_{\color{blue}{\large T}} \begin{pmatrix} x \\ y \\ 1 \end{pmatrix} \]

Translating Directions

What happens if we multiply a translation matrix with a vector with a W coordinate of 0? \[\begin{pmatrix} 1 & 0 & T_{x}\\ 0 & 1 & T_{y}\\ 0 & 0 & 1 \end{pmatrix} \begin{pmatrix} x\\ y\\ 0 \end{pmatrix} = \begin{pmatrix} ?\\ ?\\ ? \end{pmatrix}\]

Translating Directions

What happens if we multiply a translation matrix with a vector with a W coordinate of 0? \[\begin{pmatrix} 1 & 0 & T_{x}\\ 0 & 1 & T_{y}\\ 0 & 0 & 1 \end{pmatrix} \begin{pmatrix} x\\ y\\ 0 \end{pmatrix} = \begin{pmatrix} 1*x + 0*y + T_{x}*0\\ 0*x + 1*y + T_{y}*0\\ 0*x + 0*y + 1*0 \end{pmatrix} = \begin{pmatrix} x\\ y\\ 0 \end{pmatrix}\] The vector remains unchanged!
  • Useful when you're dealing with vertices of geometry AND surface normals.
  • Points in space use W = 1, while directional vectors use W = 0.

Full 2D Transform

R
Ty
Sy
Tx
Sx
\[ \underbrace{ \begin{pmatrix} 1 & 0 & \color{blue}{\class{ftxval}{0}} \\ 0 & 1 & \color{blue}{\class{ftyval}{0}} \\ 0 & 0 & 1 \end{pmatrix}}_{\color{blue}{\large T}} \underbrace{ \begin{pmatrix} \color{blue}{\cos \class{fangle}{0}°} & -\color{blue}{\sin \class{fangle}{0}°} & 0 \\ \color{blue}{\sin \class{fangle}{0}°} & \color{blue}{\cos \class{fangle}{0}°} & 0 \\ 0 & 0 & 1 \end{pmatrix}}_{\color{blue}{\large R}} \underbrace{ \begin{pmatrix} \color{blue}{\class{fsxval}{1}} & 0 & 0\\ 0 & \color{blue}{\class{fsyval}{1}} & 0 \\ 0 & 0 & 1 \end{pmatrix}}_{\color{blue}{\large S}} \begin{pmatrix} x \\ y \\ 1 \end{pmatrix} = \begin{pmatrix} \class{xf11}{0.43} & \class{xf12}{-0.25} & \class{xf13}{0.15} \\ \class{xf21}{0.75} & \class{xf22}{1.3} & \class{xf23}{0.7} \\ 0 & 0 & 1 \end{pmatrix} \begin{pmatrix} x \\ y \\ 1 \end{pmatrix} \]

Poll: Transformation Sequence

 What is the result of transforming this square by this sequence of matrices? \[\small \begin{pmatrix} 1 & 0 & 0\\ 0 & 1 & -2\\ 0 & 0 & 1 \end{pmatrix} \begin{pmatrix} 0 & -1 & 0\\ 1 & 0 & 0\\ 0 & 0 & 1 \end{pmatrix} \begin{pmatrix} 1 & 0 & 1\\ 0 & 1 & 0\\ 0 & 0 & 1 \end{pmatrix} \]
1 2 3 4

Poll: Another Transformation Sequence

 What is the result of transforming this square by this sequence of matrices? \[\small \begin{pmatrix} 0 & 1 & 0\\ -1 & 0 & 0\\ 0 & 0 & 1 \end{pmatrix} \begin{pmatrix} 2 & 0 & 0\\ 0 & 2 & 0\\ 0 & 0 & 1 \end{pmatrix} \begin{pmatrix} 1 & 0 & 1\\ 0 & 1 & 1\\ 0 & 0 & 1 \end{pmatrix} \]
1 2 3 4

Rotation Around a Point

R
Ty
Tx
\[ \underbrace{ \begin{pmatrix} 1 & 0 & \color{blue}{\class{prtxval}{0}} \\ 0 & 1 & \color{blue}{\class{prtyval}{0}} \\ 0 & 0 & 1 \end{pmatrix}}_{\color{blue}{\large T}} \underbrace{ \begin{pmatrix} \color{blue}{\cos \class{prangle}{0}°} & -\color{blue}{\sin \class{prangle}{0}°} & 0 \\ \color{blue}{\sin \class{prangle}{0}°} & \color{blue}{\cos \class{prangle}{0}°} & 0 \\ 0 & 0 & 1 \end{pmatrix}}_{\color{blue}{\large R}} \underbrace{ \begin{pmatrix} 1 & 0 & \color{blue}{\class{prntxval}{0}} \\ 0 & 1 & \color{blue}{\class{prntyval}{0}} \\ 0 & 0 & 1 \end{pmatrix}}_{\color{blue}{\large -T}} \begin{pmatrix} x \\ y \\ 1 \end{pmatrix} = \begin{pmatrix} \class{prxf11}{0.43} & \class{prxf12}{-0.25} & \class{prxf13}{0.15} \\ \class{prxf21}{0.75} & \class{prxf22}{1.3} & \class{prxf23}{0.7} \\ 0 & 0 & 1 \end{pmatrix} \begin{pmatrix} x \\ y \\ 1 \end{pmatrix} \]

Going from 2D to 3D

  • Three-Vector → Four-Vector
  • 3x3 Matrix → 4x4 Matrix

3D Homogeneous Coordinates

Add an extra coordinate to every point: \[ \begin{pmatrix} x \\ y \\ z \\ w \end{pmatrix} \rightarrow \begin{pmatrix} x / w\\ y / w \\ z/w \end{pmatrix},\hspace{5ex} \begin{pmatrix} x\\ y \\ z \end{pmatrix} \rightarrow \begin{pmatrix} x\\ y\\ z \\ 1 \end{pmatrix} \]

3D Scale
Sx
Sy
Sz
 Scale by \((s_x, s_y, s_z)\): \[ \begin{pmatrix} \color{blue}{s_x} & 0 & 0 \\ 0 & \color{blue}{s_y} & 0 \\ 0 & 0 & \color{blue}{s_z} \end{pmatrix} \begin{pmatrix} x \\ y \\ z \end{pmatrix} \]
\[ \underbrace{ \begin{pmatrix} \color{blue}{\class{s3xval}{1}} & 0 & 0 & 0 \\ 0 & \color{blue}{\class{s3yval}{1}} & 0 & 0 \\ 0 & 0 & \color{blue}{\class{s3zval}{1}} & 0 \\ 0 & 0 & 0 & 1 \\ \end{pmatrix}}_{\color{blue}{\large S}} \begin{pmatrix} x \\ y \\ z \\ 1 \end{pmatrix} \]

3D Rotations

Rotate by \((\alpha, \beta, \gamma)\):
\[ R_x = \begin{pmatrix} 1 & 0 & 0 & 0\\ 0 & cos(\color{blue}{\alpha}) & -sin(\color{blue}{\alpha}) & 0 \\ 0 & sin(\color{blue}{\alpha}) & cos(\color{blue}{\alpha}) & 0\\ 0 & 0 & 0 & 1 \end{pmatrix} R_y = \begin{pmatrix} cos(\color{blue}{\beta}) & 0 & sin(\color{blue}{\beta}) & 0 \\ 0 & 1 & 0 & 0\\ -sin(\color{blue}{\beta}) & 0 & cos(\color{blue}{\beta}) & 0\\ 0 & 0 & 0 & 1 \end{pmatrix} R_z = \begin{pmatrix} cos(\color{blue}{\gamma}) & -sin(\color{blue}{\gamma}) & 0 & 0 \\ sin(\color{blue}{\gamma}) & cos(\color{blue}{\gamma}) & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \\ \end{pmatrix} \] \[ R = R_x*R_y*R_z \]
Rodrigues' Rotation Formula:
\[ R(\theta, \omega) = \begin{pmatrix} cos\theta + {\omega}_x^2(1 - cos\theta) & -\omega_z sin\theta + \omega_x\omega_y(1 - cos\theta) & \omega_y sin\theta + \omega_x\omega_z(1 - cos\theta) & 0\\ \omega_z sin\theta + \omega_x\omega_y(1 - cos\theta) & cos\theta + {\omega}_y^2(1 - cos\theta) & -\omega_x sin\theta + \omega_y\omega_z(1 - cos\theta) & 0 \\ -\omega_y sin\theta + \omega_x\omega_z(1 - cos\theta) & \omega_x sin\theta + \omega_y\omega_z(1 - cos\theta) & cos\theta + {\omega}_z^2(1 - cos\theta) & 0\\ 0 & 0 & 0 & 1 \end{pmatrix}\]
  • \(\theta\) is the angle of rotation
  • \(\omega\) is the axis of rotation (normalized), e.g. \(\tiny \begin{pmatrix} \sqrt{2}/2\\ \sqrt{2}/2\\ 0 \end{pmatrix}\)

3D Rotations

Rotate by \((\alpha, \beta, \gamma)\)
Rx
Ry
Rz
\[ \underbrace{ \begin{pmatrix} 1 & 0 & 0 & 0\\ 0 & cos(\color{blue}{\class{alpha}{0.0}}) & -sin(\color{blue}{\class{alpha}{0.0}}) & 0 \\ 0 & sin(\color{blue}{\class{alpha}{0.0}}) & cos(\color{blue}{\class{alpha}{0.0}}) & 0\\ 0 & 0 & 0 & 1 \end{pmatrix}}_{\color{blue}{\large R_x}} \underbrace{ \begin{pmatrix} cos(\color{blue}{\class{beta}{0.0}}) & 0 & sin(\color{blue}{\class{beta}{0.0}}) & 0 \\ 0 & 1 & 0 & 0\\ -sin(\color{blue}{\class{beta}{0.0}}) & 0 & cos(\color{blue}{\class{beta}{0.0}}) & 0\\ 0 & 0 & 0 & 1 \end{pmatrix}}_{\color{blue}{\large R_y}} \underbrace{ \begin{pmatrix} cos(\color{blue}{\class{gamma}{0.0}}) & -sin(\color{blue}{\class{gamma}{0.0}}) & 0 & 0 \\ sin(\color{blue}{\class{gamma}{0.0}}) & cos(\color{blue}{\class{gamma}{0.0}}) & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \\ \end{pmatrix}}_{\color{blue}{\large R_z}} \begin{pmatrix} x\\ y\\ z\\ 1 \end{pmatrix} \]

3D Translations
Tx
Ty
Tz
 Translate by \((t_x, t_y, t_z)\): \[ \begin{pmatrix} 1 & 0 & 0 & \color{blue}{t_x}\\ 0 & 1 & 0 & \color{blue}{t_y}\\ 0 & 0 & 1 & \color{blue}{t_z}\\ 0 & 0 & 0 & 1 \end{pmatrix} \begin{pmatrix} x\\ y\\ z\\ 1 \end{pmatrix} \]
\[ \underbrace{ \begin{pmatrix} 1 & 0 & 0 & \color{blue}{\class{t3xval}{1}} \\ 0 & 1 & 0 & \color{blue}{\class{t3yval}{1}} \\ 0 & 0 & 1 & \color{blue}{\class{t3zval}{1}} \\ 0 & 0 & 0 & 1 \end{pmatrix}}_{\color{blue}{\large T}} \begin{pmatrix} x \\ y \\ z \\ 1 \end{pmatrix} \]

Full 3D Transform
Tx
Ty
Tz
Rx
Ry
Rz
Sx
Sy
Sz
\[ \underbrace{ \begin{pmatrix} 1 & 0 & 0 & \color{blue}{\class{ft3xval}{0}} \\ 0 & 1 & 0 & \color{blue}{\class{ft3yval}{0}} \\ 0 & 0 & 1 & \color{blue}{\class{ft3zval}{0}} \\ 0 & 0 & 0 & 1 \end{pmatrix}}_{\color{blue}{\large T}} \underbrace{ \begin{pmatrix} 1 & 0 & 0 & 0\\ 0 & cos(\color{blue}{\class{falpha}{0.0}}) & -sin(\color{blue}{\class{falpha}{0.0}}) & 0 \\ 0 & sin(\color{blue}{\class{falpha}{0.0}}) & cos(\color{blue}{\class{falpha}{0.0}}) & 0\\ 0 & 0 & 0 & 1 \end{pmatrix} \begin{pmatrix} cos(\color{blue}{\class{fbeta}{0.0}}) & 0 & sin(\color{blue}{\class{fbeta}{0.0}}) & 0 \\ 0 & 1 & 0 & 0\\ -sin(\color{blue}{\class{fbeta}{0.0}}) & 0 & cos(\color{blue}{\class{fbeta}{0.0}}) & 0\\ 0 & 0 & 0 & 1 \end{pmatrix} \begin{pmatrix} cos(\color{blue}{\class{fgamma}{0.0}}) & -sin(\color{blue}{\class{fgamma}{0.0}}) & 0 & 0 \\ -sin(\color{blue}{\class{fgamma}{0.0}}) & cos(\color{blue}{\class{fgamma}{0.0}}) & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \\ \end{pmatrix}}_{\color{blue}{\large R}} \underbrace{ \begin{pmatrix} \color{blue}{\class{fs3xval}{1}} & 0 & 0 & 0 \\ 0 & \color{blue}{\class{fs3yval}{1}} & 0 & 0 \\ 0 & 0 & \color{blue}{\class{fs3zval}{1}} & 0 \\ 0 & 0 & 0 & 1 \\ \end{pmatrix}}_{\color{blue}{\large S}} \begin{pmatrix} x \\ y \\ z \\ 1 \end{pmatrix} \]

Order of Transformations

  • Recall Matrix Multiplication:
    • \[ M_1 * M_2 * M_3 = M_1*(M_2 * M_3) \]
  • Order of matrices matters!
    • \[ T * R * S \neq S * R * T \]
  • Visualize your transformations applying from right to left.
  • Remember that all transformations are relative to the world origin and axes.

Order of Transformations

  • What happens if you translate before scaling and rotating?
    		•
    Tx
    Ty
    Tz
    Rx
    Ry
    Rz
    Sx
    Sy
    Sz
    \[ \underbrace{ \begin{pmatrix} cos(\color{blue}{\class{fgamma2}{0.0}}) & -sin(\color{blue}{\class{fgamma2}{0.0}}) & 0 & 0 \\ -sin(\color{blue}{\class{fgamma2}{0.0}}) & cos(\color{blue}{\class{fgamma2}{0.0}}) & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \\ \end{pmatrix} \begin{pmatrix} cos(\color{blue}{\class{fbeta2}{0.0}}) & 0 & sin(\color{blue}{\class{fbeta2}{0.0}}) & 0 \\ 0 & 1 & 0 & 0\\ -sin(\color{blue}{\class{fbeta2}{0.0}}) & 0 & cos(\color{blue}{\class{fbeta2}{0.0}}) & 0\\ 0 & 0 & 0 & 1 \end{pmatrix} \begin{pmatrix} 1 & 0 & 0 & 0\\ 0 & cos(\color{blue}{\class{falpha2}{0.0}}) & -sin(\color{blue}{\class{falpha2}{0.0}}) & 0 \\ 0 & sin(\color{blue}{\class{falpha2}{0.0}}) & cos(\color{blue}{\class{falpha2}{0.0}}) & 0\\ 0 & 0 & 0 & 1 \end{pmatrix} }_{\color{blue}{\large R}} \underbrace{ \begin{pmatrix} \color{blue}{\class{fs3xval2}{1}} & 0 & 0 & 0 \\ 0 & \color{blue}{\class{fs3yval2}{1}} & 0 & 0 \\ 0 & 0 & \color{blue}{\class{fs3zval2}{1}} & 0 \\ 0 & 0 & 0 & 1 \\ \end{pmatrix}}_{\color{blue}{\large S}} \underbrace{ \begin{pmatrix} 1 & 0 & 0 & \color{blue}{\class{ft3xval2}{0}} \\ 0 & 1 & 0 & \color{blue}{\class{ft3yval2}{0}} \\ 0 & 0 & 1 & \color{blue}{\class{ft3zval2}{0}} \\ 0 & 0 & 0 & 1 \end{pmatrix}}_{\color{blue}{\large T}} \begin{pmatrix} x \\ y \\ z \\ 1 \end{pmatrix} \]
    ← →