📗 Boids: bird-like objects (see Workbook 4): Wikipedia.
➭ Keep a constant speed.
➭ Change direction (turn) slowly.
➭ Represented by a position and a velocity (unit vector) or orientation (angle).
📗 2D Example: Workbook 4 example solution: Link.
📗 3D Example: Link.
📗 Position is updated by \(p' = p + v\).
📗 Velocity is updated by \(v' = A v\), where \(A\) is a rotation matrix, and the rotation angle can be computed by \(arctan\left(\dfrac{v'_{y}}{v'_{x}}\right)\) or atan2(v'y, v'x).
📗 Velocity can also be updated by \(v' = \left\|v\right\| \begin{bmatrix} \cos\left(\theta + \Delta \theta\right) \\ \sin\left(\theta + \Delta \theta\right) \end{bmatrix}\), where \(\left\|v\right\|\) is the constant speed, and \(\theta + \Delta \theta\) is the updated the rotation angle.
📗 Decide how to turn by looking at neighbors and world.
📗 Each boid figures their neighbors and decides independently.
📗 Interesting behaviors emerge from simple rules (flock, chase, avoid, ...).
📗 Curves can be viewed as a set of points drawn with a pen.
📗 Most points have 2 neighbors (next, previous) except for endpoints and crossings.
📗 Curves can be represented by:
➭ Parametric: \(y = f\left(x\right)\) or \(\begin{bmatrix} x \\ y \end{bmatrix} = f\left(t\right)\).
➭ Implicit: \(f\left(x, y\right) = 0\).
➭ Procedural or subdivision.
📗 All curves have a parametric (function of time) representation.
📗 \(\begin{bmatrix} x \\ y \end{bmatrix} = f\left(t\right)\) in 2D and \(\begin{bmatrix} x \\ y \\ z \end{bmatrix} = f\left(t\right)\) in 3D, for \(t\) in some 1D interval.
📗 \(f\) is called a vector function (or vector-valued function), and it is usually represented by one function per dimension: Wikipedia.
📗 Reparameterized \(f\left(t\right) = \begin{bmatrix} t \\ 0 \end{bmatrix}\) so that it moves slower as \(t\) increases.
📗 \(f\left(t\right) = \begin{bmatrix} 1 - t \\ 0 \end{bmatrix}\) and \(f\left(t\right) = \begin{bmatrix} t^{2} \\ 0 \end{bmatrix}\) are different parameterizations of the same line segment. Demo parameterization
📗 A curve is the image of a 1D interval: it is a set of points.
📗 A parameterization is the mapping from a 1D interval to a space: it is the function.
📗 A convention is that the 1D interval is the unit interval or \(\left[0, 1\right]\), and this is called a unit parameterization, written as \(f\left(u\right), u \in \left[0, 1\right]\).
📗 Parameterize a line segment between \(\begin{bmatrix} 0.25 \\ 0.75 \end{bmatrix}\) and \(\begin{bmatrix} 0.75 \\ 0.25 \end{bmatrix}\).
📗 Some ways to parameterize a line segment include \(a_{0} + a_{1} u\), \(\left(1 - u\right) p_{0} + u p_{1}\), and \(c + \left(2 u - 1\right) d\). Demo parameterization
📗 Reparameterized \(f\left(u\right) = \begin{bmatrix} \cos\left(u\right) \\ \sin\left(u\right) \end{bmatrix}\) so that it traces only half of the circle. Demo parameterization_circle
📗 Quadratic polynomial segment can be written as \(f\left(u\right) = a_{0} + a_{1} u + a_{2} u^{2}\).
📗 Cubic polynomial segment (most common in computer graphics) can be written as \(f\left(u\right) = a_{0} + a_{1} u + a_{2} u^{2} + a_{3} u^{3}\).
📗 These polynomials interpolate \(a_{0}\) (when \(u = 0\)) and \(\displaystyle\sum_{i=0}^{n} a_{i}\) (when \(u = 1\)).
📗 It is difficult to control the shapes of the curves using the coefficients.
📗 It is inconvenient to specify curves this way.
📗 Parameterize a cubic segment between \(\begin{bmatrix} 0.25 \\ 0.75 \end{bmatrix}\) and \(\begin{bmatrix} 0.75 \\ 0.25 \end{bmatrix}\).
📗 Try to come up with different ones. Demo parameterization_curve
📗 A line segment \(a_{0} + a_{1} u\) can be written as \(\left(1 - u\right) p_{0} + u p_{1}\).
📗 A quadratic polynomial segment \(a_{0} + a_{1} u + a_{2} u^{2}\) can be written as \(\left(1 - u^{2}\right) p_{0} + \left(u - u^{2}\right) p'_{0} + u^{2} p_{1}\), where \(p_{0}\) and \(p_{1}\) are the two endpoints and \(p'_{0}\) is the derivative at \(p_{0}\).
📗 A cubic polynomial segment \(a_{0} + a_{1} u + a_{2} u^{2} + a_{3} u^{3}\) can be written as:
\(\left(1 - 3 u^{2} + 2 u^{3}\right) p_{0} + \left(u - 2 u^{2} + u^{3}\right) p'_{0} + \left(3 u^{2} - 2 u^{3}\right) p_{1} + \left(-u^{2} + u^{3}\right) p'_{1}\).
📗 In general, for polynomials, the coefficients or functions of \(u\) in front of the control points are called basis functions: \(f\left(u\right) = b_{0}\left(u\right) p_{0} + b_{1}\left(u\right) p_{1} + b_{2}\left(u\right) p_{2} + ...\).
➭ Basis functions are scalar functions and only depend on \(u\).
➭ There is a separate function for each control points (or control vector when derivatives are used). Math Notes
Let \(f\left(u\right) = a_{0} + a_{1} u + a_{2} u^{2}\), then
\(p_{0} = f\left(0\right) = a_{0}\), and
\(p_{1} = f\left(1\right) = a_{0} + a_{1} + a_{2}\), and
\(p'_{0} = f'\left(0\right) = a_{1} + 2 a_{2} \cdot 0 = a_{1}\),
solve for \(a_{0}, a_{1}, a_{2}\),
\(a_{0} = p_{0}\), and
\(a_{1} = p'_{0}\), and
\(a_{2} = p_{1} - p_{0} - p'_{0}\),
write this back into \(f\left(u\right)\),
\(f\left(u\right) = p_{0} + p'_{0} u + \left(p_{1} - p_{0} - p'_{0}\right) u^{2}\), or
\(f\left(u\right) = \left(1 - u^{2}\right) p_{0} + \left(u - u^{2}\right) p'_{0} + u^{2} p_{1}\) More Math Notes
Please double-check the algebra! An earlier version of the notes was incorrect!
Let \(f\left(u\right) = a_{0} + a_{1} u + a_{2} u^{2} + a_{3} u^{3}\), then
\(p_{0} = f\left(0\right) = a_{0}\), and
\(p_{1} = f\left(1\right) = a_{0} + a_{1} + a_{2} + a_{3}\), and
\(p'_{0} = f'\left(0\right) = a_{1}\), and
\(p'_{1} = f'\left(1\right) = a_{1} + 2 a_{2} + 3 a_{3}\),
solve for \(a_{0}, a_{1}, a_{2}, a_{3}\),
\(a_{0} = p_{0}\), and
\(a_{1} = p'_{0}\), and
\(a_{2} = - 3 p_{0} - 2 p'_{0} + 3 p_{1} - p'_{1}\), and
\(a_{3} = 2 p_{0} + p'_{0} - 2 p_{1} - p'_{1}\),
write this back into \(f\left(u\right)\), (this is call Hermite Equations)
\(f\left(u\right) = p_{0} + p'_{0} u + \left(- 3 p_{0} - 2 p'_{0} + 3 p_{1} - p'_{1}\right) u^{2} + \left(2 p_{0} + p'_{0} - 2 p_{1} + p'_{1}\right) u^{3}\), or
\(f\left(u\right) = \left(1 - 3 u^{2} + 2 u^{3}\right) p_{0} + \left(u - 2 u^{2} + u^{3}\right) p'_{0} + \left(3 u^{2} - 2 u^{3}\right) p_{1} + \left(-u^{2} + u^{3}\right) p'_{1}\).
📗 Change the derivative function so that the rectangle is facing the direction it is moving.
📗 If the derivative is [dx, dy], then the rotation angle should be Math.atan2(dy, dx). Demo angle_parametric
📗 Implicit form representation of curves are useful for checking whether a point is on (or insider) a curve, but not convenient for drawing curves too.
📗 A unit circle can be written in the form \(f\left(x, y\right) = 0\) as \(x^{2} + y^{2} - 1 = 0\).
📗 One parametric representation of the same circle is \(\begin{bmatrix} x \\ y \end{bmatrix} = \begin{bmatrix} \cos\left(2 \pi u\right) \\ \sin\left(2 \pi u\right) \end{bmatrix} , u \in \left[0, 1\right])\).
📗 The region inside a unit circle (disc) can be written as \(x^{2} + y^{2} - 1 < 0\).
📗 One parameteric representation of the same region is \(\begin{bmatrix} x \\ y \end{bmatrix} = \begin{bmatrix} r \cos\left(2 \pi u\right) \\ r \sin\left(2 \pi u\right) \end{bmatrix} , u \in \left[0, 1\right], r \in \left[0, 1\right]\).
📗 Start with a set of points.
📗 Have a rule that adds new points (possibly moving other).
📗 Repeat the rule to add more points.
📗 Repeat infinitely many times to get the curve: design rules so it converges to some limit curve.
📗 Example 1:
➭ Rule: insert a new point half way between.
➭ Limit curve: line segments.
📗 Example 2:
➭ Rule: regular polygons
➭ Limit curve: circle. Demo division
📗 Compute the \(u = 0.25\) point for the Bezier curve with control points \(\begin{bmatrix} 0 \\ 0 \end{bmatrix} , \begin{bmatrix} 0 \\ 1 \end{bmatrix} , \begin{bmatrix} 1 \\ 1 \end{bmatrix}\).
➭ Compute the \(u = 0.5\) twice
➭ Compute the \(u = 0.25\) interpolation once. Demo construction
📗 Note on curve splitting: if (A, B, C) are the original points, then (A, AB, ABC) and (ABC, BC, C) are the control points of first half and second half of the curve.
📗 Similarly, if (A, B, C, D) are the original points, then (A, AB, ABC, ABCD) and (ABCD, BCD, CD, D) are the first half and second half of the curve.
📗 "Bezeir" has an accent on e (French name): Wikipedia.
📗 Start with arbitrary number of points (called control points).
📗 The number of control points minus 1 is called the degree of the Bezier curve.
➭ A degree 2 or quadratic Bezier curve has 3 control points.
➭ A degree 3 or cubic Bezier curve has 4 control points (most commonly used).
➭ HMTL Canvas does not have functions to draw Bezier curves with degree larger than 3.
📗 Degree n Bezier curve (n + 1 control points) has the following properties:
➭ Interpolate the end points (connects the first and last point).
➭ Stay inside the convex hull (polygon).
➭ Not "wiggle" too much (crossing any line less than n times).
➭ Symmetry (forward and backwards).
➭ Locality (only depends on control points).
➭ Control tangents (first and last two points, tangent is n times the vector connecting these points).
📗 Given the polynomial segment specified in Hermite form with \(p_{0} = \begin{bmatrix} 0 \\ 0 \end{bmatrix}\), \(p'_{0} = \begin{bmatrix} 1 \\ 0 \end{bmatrix}\), and \(p_{1} = \begin{bmatrix} 1 \\ 1 \end{bmatrix}\), try find the control points of the Bezier curve. Demo curve_tangent
📗 Given the polynomial segment specified in Hermite form with \(p_{0} = \begin{bmatrix} 0 \\ 0 \end{bmatrix}\), \(p'_{0} = \begin{bmatrix} 1 \\ 0 \end{bmatrix}\), \(p_{1} = \begin{bmatrix} 1 \\ 1 \end{bmatrix}\) and \(p'_{1} = \begin{bmatrix} 1 \\ 0 \end{bmatrix}\), try find the control points of the Bezier curve. Demo curve_tangent
📗 context.moveTo(x1, y1); context.quadraticCurveTo(x2, y2, x3, y3); produces a degree 2 Bezier curve with three control points: Doc
➭ It interpolates \(\begin{bmatrix} x_{1} \\ y_{1} \end{bmatrix} , \begin{bmatrix} x_{3} \\ y_{3} \end{bmatrix}\).
➭ Its tangent (velocity) at the first control point is \(2 \cdot \left(\begin{bmatrix} x_{2} \\ y_{2} \end{bmatrix} - \begin{bmatrix} x_{1} \\ y_{1} \end{bmatrix} \right)\).
➭ Its tangent (velocity) at the last control point is \(2 \cdot \left(\begin{bmatrix} x_{2} \\ y_{2} \end{bmatrix} - \begin{bmatrix} x_{3} \\ y_{3} \end{bmatrix} \right)\).
📗 context.moveTo(x1, y1); context.bezierCurveTo(x2, y2, x3, y3, x4, y4); produces a degree 3 Bezier curve with four control points: Doc
➭ Note: there is no cubicCurveTo(...) method.
➭ It interpolates \(\begin{bmatrix} x_{1} \\ y_{1} \end{bmatrix} , \begin{bmatrix} x_{4} \\ y_{4} \end{bmatrix}\).
➭ Its tangent (velocity) at the first control point is \(3 \cdot \left(\begin{bmatrix} x_{2} \\ y_{2} \end{bmatrix} - \begin{bmatrix} x_{1} \\ y_{1} \end{bmatrix} \right)\).
➭ Its tangent (velocity) at the last control point is \(3 \cdot \left(\begin{bmatrix} x_{3} \\ y_{3} \end{bmatrix} - \begin{bmatrix} x_{4} \\ y_{4} \end{bmatrix} \right)\).
📗 Complete the rounded square with a Bezier curve.
📗 How to make it more round? It is possible to make a circle using four Bezier curves? (No.) Demo bezier_quadratic Demo bezier_cubic
📗 Definitions of curves
📗 Parameterization of curves
📗 Polynomial basis
📗 DeCastlejau construction
📗 Bezier curves
📗 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.