Skip to content
Tech News
← Back to articles

Curvature Beziers

read original more articles
Why This Matters

The article explains the mathematical foundation of Bezier curves, highlighting their construction using control points and the importance of cubic Beziers in creating smooth, scalable curves in digital graphics. Understanding these principles is crucial for developers and designers working on vector graphics, animations, and user interface design, as it enables precise control over curve shaping and rendering.

Key Takeaways

Tip: All the diagrams in this post are fully interactive.

Given a series of control points, we connect them with lines. We then run along those lines simultaneously, to produce new points, which can be connected again. This process is repeated until we are left with a single point, which lies on the curve.

This construction makes beziers far more regular than they might first appear.

The linear interpolations (aka lerps) can be summarized into a single compact formula, e.g. for 4 control points $ \left(A, B, C, D\right) $:

$$ \gamma \left( t \right) = A \cdot \left(1 - t\right)^3 + B \cdot 3 \left(1 - t\right)^2 t + C \cdot 3 \left(1 - t\right) t^2 + D \cdot t^3 $$

The rule is simple: descending powers of $\left(1 - t\right)$, ascending powers of $t$, with coefficients taken from the n'th row of Pascal's triangle:

$$ \begin{array}{ccccccccccccc} &&&&&& 1 \\ &&&&& 1 && 1 \\ &&&& 1 && 2 && 1 \\ &&& 1 && 3 && 3 && 1 \\ && 1 && 4 && 6 && 4 && 1 \\ &1 && 5 && 10 && 10 && 5 && 1 \\ ... &&&&&& ... &&&&&& ... \\ \end{array} $$

For curves in 2D and 3D, the formula is applied to the individual X, Y or Z coordinates.

While beziers can be constructed for any number of control points, the common practice is to only use cubic beziers with 4 control points. This is because the curve is only guaranteed to cross through the first and last control point, which makes higher degree beziers more difficult to shape.

Larger curves are instead constructed by joining together multiple cubic bezier segments, with the tangents lined up to create a segmented curve that appears smooth: