Prev: W2, Next: W4
Links: Zoom, TopHat (993679, or Form), Calculator:
Slide:

# Composition of Transformations

📗 Let \(T\) be a translation, \(R\) an rotation, and \(S\) a scaling. 
Step 1 Step 2 Step 3 = Equivalent to
\(T\left(x_{1}, y_{1}\right)\) \(T\left(x_{2}, y_{2}\right)\) \(T\left(x_{3}, y_{3}\right)\) = \(T\left(x_{1} + x_{2} + x_{3}, y_{1} + y_{2} + y_{3}\right)\)
\(R\left(r_{1}\right)\) \(R\left(r_{2}\right)\) \(R\left(r_{3}\right)\) = \(R\left(r_{1} + r_{2} + r_{3}\right)\)
\(S\left(a_{1}, b_{1}\right)\) \(S\left(a_{2}, b_{2}\right)\) \(S\left(a_{3}, b_{3}\right)\) = \(S\left(a_{1} \cdot a_{2} \cdot a_{3}, b_{1} \cdot b_{2} \cdot b_{3}\right)\)
\(R\left(r\right)\) \(T\left(x, y\right)\) - = \(T\left(?, ?\right)\) then \(R\left(r\right)\)
\(S\left(a, b\right)\) \(T\left(x, y\right)\) - = \(T\left(a \cdot x, b \cdot y\right)\) then \(S\left(a, b\right)\)
\(R\left(r\right)\) \(S\left(s, s\right)\) - = \(S\left(s, s\right)\) then \(R\left(r\right)\)
\(T\left(x, y\right)\) \(R\left(r\right)\) \(T\left(-x, -y\right)\) = Rotation around \(\left(x, y\right)\)
\(T\left(x, y\right)\) \(S\left(r\right)\) \(T\left(-x, -y\right)\) = Scaling around \(\left(x, y\right)\)

Math Notes \(\left(R\left(r\right) \circ T\left(x, y\right)\right) \begin{bmatrix} 0 \\ 0 \end{bmatrix}\) = \(R\left(r\right) \begin{bmatrix} x \\ y \end{bmatrix}\)
= \(\begin{bmatrix} \cos\left(r\right) & -\sin\left(r\right) \\ \sin\left(r\right) & \cos\left(r\right) \end{bmatrix} \begin{bmatrix} x \\ y \end{bmatrix}\)
= \(\begin{bmatrix} x \cos\left(r\right) - y \sin\left(r\right) \\ x \sin\left(r\right) + y \cos\left(r\right) \end{bmatrix}\)



# Articulated Chain

📗 Each rectangle is a parent of the next rectangle.
📗 A rectangle can have multiple children.
Demo arm_six

# Hierarchical Modeling

📗 Things made of pieces, pieces made of smaller pieces.
➩ Each piece should be drawn relative to its parent, not the origin of the HTML Canvas.
➩ Each piece should be transformed relative to its parent, not the origin of the HTML Canvas.
➩ For pieces with multiple children, the transformations should be saved using context.save() before making each child and restored using context.restore().
📗 This uses the fact that context is a stack, and context.save() behaves like "push" and context.restore() behaves like "pop".

# Tree of Parts [TopHat]

📗 Make the robotic arm into a complete tree with depth 2 (root is at depth 0).
📗 The original robotic arm can be viewed as a tree with depth 6.
Demo arm_six
Demo tree_six

# Figure Animation [TopHat]

📗 Draw tree representation of the figure.
Demo figure



# Where is the Tree

📗 Immediate mode (HTML Canvas):
➩ Object representation (tree) is implicit in code.
➩ Drawing commands turn into pixels, need to keep track of objects in code.
📗 Retained mode (SVG, Three.js): 
➩ Object representation (tree) is explicit.
➩ API creates objects, need to build structures using groups.
➩ Sometimes known as scene-graph APIs.

# Quick Introduction to SVG

📗 SVG stands for "Scalable Vector Graphics".
📗 Every graphics object (lines, rectangles, ellipses) is a DOM Element (HTML Element):
➩ Each element has HTML attributes: "id", "class", "styles", ...
➩ Each element has graphics attributes: "shapes", "transformations", ...
📗 Styles including color (stroke and fill) and line width (stroke-width) are part of each object, not part of the context.
📗 Path strings and transformation strings have their own language.
📗 Groups are objects too with tag g and it used to represent hierarchy.
📗 Each object has a transformation and it is relative to its parent.
📗 Practice in the Workbook.

# Tree of Parts for SVG

📗 Use the rectangles as the edges of a complete tree with depth 2 (root is at depth 0).
📗 How to change the transformations of the rectangles so the edges are connecting and responding to the sliders correctly?
Demo arm_svg



# Comparison between HTML Canvas and SVG

- Canvas SVG
Style based on context when drawing the object stored in each object
Transformation based context when drawing the object stored in each object
Animation just redraw the objects change attributes of objects
Interaction with canvas with objects
Scalability only draw objects that are needed all objects are kept around
Redraw clearRect and redraw every frame web browser does it automatically


# Transformation as Function

📗 Transformations are functions that apply to points: \(x' = f\left(x\right)\).
📗 Composition of functions are combination of function, the last function is applied first: \(\left(h \circ g \circ f\right)\left(x\right) = h\left(g\left(f\left(x\right)\right)\right)\).
📗 For the same reason, transformations on context can be read backwards when applied on the objects.

# Linear Transformations

📗 A transformation (function) is linear (Wikipedia) if:
➩ It is additive: \(f\left(x + y\right) = f\left(x\right) + f\left(y\right)\) and
➩ It is homogeneous of degree 1: \(f\left(c \cdot x\right) = c \cdot f\left(x\right)\).
📗 All linear transformations can be represented by multiplication by matrices: \(f\left(x\right) = M x\) for some matrix \(M\).
📗 Rotation and scaling are linear transformations.
📗 Translation is not linear in 2D coordinate system (translate \(0 \cdot x = 0\) needs to be \(0\), which is not true).
📗 Composition of linear transformations is equivalent to matrix multiplication.



# Rotation

📗 Rotating a point \(\left(x, y\right)\) with angle \(r\) counterclockwise is equivalent to multiplying the points by \(\begin{bmatrix} \cos\left(r\right) & -\sin\left(r\right) \\ \sin\left(r\right) & \cos\left(r\right) \end{bmatrix}\).
➩ 0 degree rotation matrix is the identity matrix \(\begin{bmatrix} 1 & 0 \\ 0 & 1 \end{bmatrix}\) (not the zero-matrix).
➩ 90 degree rotation matrix is \(\begin{bmatrix} 0 & -1 \\ 1 & 0 \end{bmatrix}\).
➩ 180 degree rotation matrix is \(\begin{bmatrix} -1 & 0 \\ 0 & -1 \end{bmatrix}\).
➩ -90 degree (270 degree) rotation matrix is \(\begin{bmatrix} 0 & 1 \\ -1 & 0 \end{bmatrix}\).
📗 Suppose the matrix for a rotation of angle \(r\) is \(M\), then:
➩ The rotation of angle \(2 r\) is \(M^{2}\) (not 2 times the matrix).
➩ The rotation of angle \(\dfrac{r}{2}\) is \(\sqrt{M}\) (not half the matrix).
➩ The rotation of angle \(-r\) is \(M^{-1} = M^\top\) (not negative of the matrix in general).
➩ Interpolation between two rotations is difficult to compute from the two rotation matrices (easier to compute from the interpolation of the angles).

# Rotation Matrix

📗 A rotation is a transformation that:
➩ Preserves distances.
➩ Preserves angles.
➩ Preserves handedness.
📗 A rotation matrix (Wikipedia) is a matrix \(M = \begin{bmatrix} a & b \\ c & d \end{bmatrix}\) that:
➩ Each row and column is a unit vector (\(a^{2} + b^{2} = c^{2} + d^{2} = 1\) and \(a^{2} + c^{2} = b^{2} + d^{2} = 1\)).
➩ The rows and columns are orthogonal (\(a \cdot c + b \cdot d = 0\) and \(a \cdot b + c \cdot d = 0\)).
➩ The determinant is positive (\(a \cdot d - b \cdot c > 0\)).



# Scaling

📗 Scaling a point \(\begin{bmatrix} x \\ y \end{bmatrix}\) with scale \(\left(s_{x}, s_{y}\right)\) is equivalent to multiplying the points by \(\begin{bmatrix} s_{x} & 0 \\ 0 & s_{y} \end{bmatrix}\).

# Shearing

📗 Shearing (shear transformation) is another linear transformation: Wikipedia.
📗 X-shearing (horizontal shearing) can be achieved through multiplication by \(\begin{bmatrix} 1 & s_{x} \\ 0 & 1 \end{bmatrix}\), and Y-shearing (vertical shearing) can be achieved through multiplication by \(\begin{bmatrix} 1 & 0 \\ s_{y} & 1 \end{bmatrix}\). HTML Canvas does not have a function for the shear transform.
Demo matrix

# Translation is Affine

📗 Affine transformation (Wikipedia) is a transformation that is either linear or a translation.
📗 All affine transformations can be represented by \(f\left(x\right) = M x + v\) for some matrix \(M\) and vector \(v\).
➩ Lines (and thus polygons) are preserved.
➩ Ratios are preserved (mid-point is still mid-point).
📗 Composition of affine transformations is another affine transformation.
📗 Affine transformation in 2D is linear in 3D.
📗 Introduce homogeneous coordinates in 3D to represent affine transformation in 2D.

# Affine in 2D as Linear in 3D [TopHat]

📗 Translation in 2D can be viewed as shearing in 3D on the \(z = 1\) plane.
📗 Rotation and scaling in 2D can still be rotation and scaling in 3D.
Demo homogeneous



# Homogeneous Coordinate System

📗 A 2D point \(\begin{bmatrix} x \\ y \end{bmatrix}\) can be represented by 3D point with \(z = 1\), \(\begin{bmatrix} x \\ y \\ 1 \end{bmatrix}\).
📗 Arbitrary 3D linear transformations can be applied to \(\begin{bmatrix} x \\ y \\ 1 \end{bmatrix}\), and the result can be projected back onto \(z = 1\) plane (\(\begin{bmatrix} x' \\ y' \\ z' \end{bmatrix}\) can be projected back as \(\begin{bmatrix} \dfrac{x'}{z'} \\ \dfrac{y'}{z'} \\ 1 \end{bmatrix}\)).
📗 HTML Canvas does not allow arbitrary 3D linear transformations for its 2D context.

# HTML Canvas Matrix

📗 Canvas has a general transformation function context.transform(a, b, c, d, e, f): Doc.
📗 This is the affine transformation represented by multiplication by the matrix \(\begin{bmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{bmatrix}\) (since the last row is not needed for affine transformations in 2D).
📗 The matrix has three columns:
➩ \(\begin{bmatrix} a \\ b \end{bmatrix}\) is where the x-axis (or the vector \(\begin{bmatrix} 1 \\ 0 \end{bmatrix}\)) is transformed to.
➩ \(\begin{bmatrix} c \\ d \end{bmatrix}\) is where the y-axis (or the vector \(\begin{bmatrix} 0 \\ 1 \end{bmatrix}\)) is transformed to.
➩ \(\begin{bmatrix} e \\ f \end{bmatrix}\) is where the origin (or the point \(\begin{bmatrix} 0 \\ 0 \end{bmatrix}\)) is transformed to.
Demo matrix



# Writing Transformation Matrices [TopHat]

📗 What transformation matrix should be applied to make a context.fillRect(0, 0, 1, 1) into the parallelogram in the diagram?
📗 Think about transforming the points \(\begin{bmatrix} 0 \\ 0 \end{bmatrix}\), \(\begin{bmatrix} 1 \\ 0 \end{bmatrix}\) and \(\begin{bmatrix} 0 \\ 1 \end{bmatrix}\).
Demo transform_matrix

# Lecture Summary

📗 Composition of transformations.
📗 Hierarchical modeling.
📗 Introduction to SVG.
📗 Immediate vs retained mode APIs.
📗 Transformation functions.
📗 Transformation matrices.
📗 Rotation.
📗 Homogeneous coordinates.
📗 Affine in 2D and linear in 3D.


📗 Notes and code adapted from the course taught by Professor Michael Gleicher.
📗 Please use Ctrl+F5 or Shift+F5 or Shift+Command+R or Incognito mode or Private Browsing to refresh the cached JavaScript: Code.
📗 You can expand all the examples and demos: , or print the notes: .
📗 If there is an issue with TopHat during the lectures, please submit your answers on paper (include your Wisc ID and answers) or this Google Form at the end of the lecture.

Prev: W2, Next: W4





Last Updated: March 03, 2025 at 12:52 AM