Grokking Bézier Curves

The recursive (De Casteljau) definition of Bézier curves can be used to build an intuition for how the curve is computed from its control points. It is easier for me to wrap my head around than the explicit definition of the curve as a linear combination of points weighted by Bernstein polynomials. For proof that the definitions are equivalent, see this analysis of the de Casteljau algorithm.

There are plenty of materials on Bézier curves online, e.g. see this YouTube video and this awesome online book/Javascript library on the subject. To help me internalize the concept, I put together a few interactive visualizations of my own.

The following shows how the point \(B_{\mathbf{P}_0\mathbf{P}_1\ldots\mathbf{P}_{n}}(t)\) on a degree \(n\) curve is computed by recursion on \(n\): we compute the result as the point \(B_{\mathbf{P}^1_0\mathbf{P}^1_1\ldots\mathbf{P}^1_{n}}(t)\) on a degree \(n-1\) curve where \(\mathbf{P}^1_i = (1-t)\mathbf{P}_i+t\mathbf{P}_{i+1}\). The base case is when we have a degree 0 curve \(B_{\mathbf{P}^n_0}\) with one control point; then \(\mathbf{P}^n_0 = B_{\mathbf{P}_0\mathbf{P}_1\ldots\mathbf{P}_{n}}(t)\)

Click the “Iterations” slider and use the Left and Right arrow keys to see how successive control points are computed by linear interpolation, ultimately computing the point \(P\) on the curve. Slide \(t\) between 0 and 1 to see how the curve is traced out.




Curve

Next is a visualization of Bézier subdivision. The “child” curve \(B'(t')\) is itself a Bézier curve of the same degree as the parent \(B(t)\) and is a subset: as \(t'\) varies from \([0, 1]\), it traces out the parent curve \(B(x)\) for \(x\in [0, t]\). That is, \(B'(t') = B(t'\cdot t)\). As it turns out, the control points for this child curve are computed in each recursive step of the De Casteljau algorithm: they are \(\{P^i_0\}_{i=0}^n\). See here for a proof of correctness.

Parent



Curve
Child


Curve


Comments