Bezier Curve Whiteboard

How To Use It

Create a curve to place a new Bezier path on the board. Use Select Curve to choose a path and drag its control points. Add Point lets you click anywhere on the board to insert another control point into the selected curve, while Delete Point removes one point at a time from the selected path.

Close Loop turns an open path into a closed one by matching the last point back to the first. Animate shows the construction process, so you can watch the intermediate interpolation lines generate the final curve.

The Math Behind The Curve

A Bezier curve is built from control points and repeated linear interpolation. For control points \(P_0\) through \(P_n\), the curve is a weighted blend of those points over a parameter \(t\) from 0 to 1.

\[ B(t) = \sum_{i=0}^{n} \binom{n}{i}(1 - t)^{n-i} t^i P_i \]

This editor draws the curve using de Casteljau's construction: at a chosen t, it interpolates between neighboring control points, then interpolates between those new points again, and repeats until only one point remains. That final point lies on the curve.

Estimating Curve Length

The true arc length of a Bezier curve comes from the magnitude of its derivative:

\[ \text{Length} = \int_{0}^{1} \lVert B'(t) \rVert \, dt \]

For most Bezier curves, that integral does not simplify nicely, so interactive tools usually estimate the length numerically. A common approximation is to sample many nearby points along the curve and add the distances between them. The guide length shown in the toolbox is the control polygon length, which is the sum of the straight segments between control points, not the exact arc length of the curve itself.