📗 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".
📗 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
📗 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.
📗 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.
📗 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 [Updated]
📗 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.
📗 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.
📗 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).
📗 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 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 (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
📗 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.
📗 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
📗 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.
📗 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
📗 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
📗 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 print the notes: .
📗 Anonymous feedback can be submitted to: Form.