ApliantThe Bernstein polynomials
One curve per control point. Its height at t is the weight of that point. Hover a curve or a point to see its influence; drag the chart to move t.
B(t) is a center of mass
Put a weight on each point. The heavier a point, the thicker its string and the more it pulls. The balance point is B(t). Drag the points here too.
The formula
For the current degree, written out. Hover a term:
Pascal's triangle gives the numbers in front
Things that are always true
- Partition of unity: the weights add up to 1 for every t, because they are the terms of (t + (1 − t))n = 1.
- Never negative for t between 0 and 1, so B(t) is an average and stays inside the convex hull of the points.
- Ends: at t = 0 only P₀ counts; at t = 1 only Pₙ. The curve starts and ends on them.
- Each point peaks at t = i/n, but it pulls the whole curve: there is no local control.
- Symmetry: the curve for Pi is the mirror image of the one for Pn−i.
Timing curve
Across: time. Up: how far the animation has gone. A cubic Bézier from (0, 0) to (1, 1). The handles may go above 1 or below 0: the motion overshoots.
Watch it move
The CSS
farthest point reached (1 = the end)
top speed (1 = constant speed)
How the browser reads the curve
The curve is a pair of cubics: x(s) is the time and y(s) is the progress, both for s from 0 to 1. Each frame, the browser knows the time and needs the progress. So it first solves x(s) = time for s (with Newton's method), and then computes y(s). That is why the handles cannot leave the 0–1 range sideways: then x could go back in time, and one moment would have two positions.
A straight diagonal is constant speed (linear). A curve that starts flat starts slowly (ease-in); one that ends flat arrives gently (ease-out). The slope of the curve is the speed: the green line next to the moving ball.
A circle from cubic Béziers
No polynomial curve is an exact circle. So every drawing program fakes it with cubic pieces, usually 4 quarter circles. Each quarter has its handles at a distance k × radius from its ends. Which k is best? The error is drawn magnified so you can see it.
Circle and Bézier
Gray: the true circle. Yellow: the Bézier pieces with their handles. The pink band is the distance between them, magnified.
Distance from the circle, along one piece
Above zero: the curve is outside the circle. Below: inside. The best k for the middle makes it touch zero there; the best k overall spreads the error evenly up and down.
Exact circles: the rational Bézier
Give the middle point a weight w and divide by the sum of the weights. With 3 points this makes every conic: w < 1 an ellipse, w = 1 a parabola, w > 1 a hyperbola. When the two outer points are at the same distance from the middle one, w = cos(θ/2) gives an exact arc of a circle. This is the idea behind NURBS.
Drag the three points
Why no polynomial makes a circle
Suppose x(t) and y(t) are polynomials and x² + y² = 1 for every t. Take the highest power of t in x² + y². Its coefficient is a² + b² (or just a²), where a and b are the leading coefficients. That is never zero, so x² + y² grows with t and cannot stay equal to 1. Only constant polynomials pass the test: a single point.
Dividing by a polynomial fixes it. For example x = (1 − t²)/(1 + t²), y = 2t/(1 + t²) is exactly on the unit circle. That is a rational quadratic Bézier.
Fonts, SVG and PDF have no weights, so they use the cubic trick. CAD programs use NURBS (non-uniform rational B-splines): B-splines with weights. They draw circles, cylinders and car bodies with the same math.
It starts with a straight line
This is linear interpolation, or "lerp". At t = 0 you are at P₀, at t = 1 at P₁, and at t = 0.3 you have gone 30% of the way. A degree-1 Bézier curve is just this: a segment.
Lerp the lerps: De Casteljau
With three points, lerp P₀→P₁ and P₁→P₂ with the same t. You get two new points. Lerp between them, again with t, and you get one point on the curve. With more points, repeat: each level has one point less, until one is left. This is De Casteljau's algorithm, the colored lines in the Bézier tab.
The last segment drawn is always tangent to the curve, and the two halves of the construction are the control points of the two halves of the curve. That is how "split at t" works.
The same thing as one formula
Expand the repeated lerps and you get a sum: each point times a Bernstein polynomial. The numbers in front come from Pascal's triangle. Sergei Bernstein used these polynomials in 1912 to prove that any continuous function can be approximated by polynomials, long before anyone drew a curve with them.
Why not one big curve?
A curve of degree 10 is hard to steer: every point pulls the whole curve, and the curve stays far from the middle points. So in practice we glue many small cubic curves. That is a spline, named after the thin strips of wood that shipbuilders bent around weights to draw smooth hulls.
Some splines interpolate (they pass through your points: Catmull-Rom, natural). Others approximate (they are pulled toward the points: B-splines, which are smoother). Most have local control: moving one point changes only a few pieces. The natural spline does not.
How smooth is a joint?
C0: the pieces touch. G1: they leave in the same direction. C1: also at the same speed. C2: the curvature does not jump either. Car designers care about this: on a shiny car body you see a C1 joint as a kink in the reflections. Their surfaces must be at least G2, curvature without jumps.
Two engineers, two car companies
Paul de Casteljau found the algorithm at Citroën in 1959. Citroën kept it secret. Pierre Bézier developed the same curves at Renault in the 1960s for UNISURF, a system that drew car bodies, and he published them. So the curves carry Bézier's name and the algorithm carries de Casteljau's.
Today they are everywhere: in fonts (PostScript 1984, TrueType 1991), in SVG and PDF, in CSS animations, in every drawing program's pen tool.
How a drawing becomes curves
The Fit tab uses Philip Schneider's algorithm (1990). It guesses a parameter t for each of your points from the distance along the stroke. The end points and end directions of the cubic are fixed, so only the two handle lengths are unknown: least squares finds the best ones. Then Newton's method moves each t to the closest point of the curve and the fit is repeated.
If a point is still too far, the stroke is cut at the worst point and each half is fitted again. Sharp corners are found first and always become joints. This is how drawing programs turn a mouse stroke into a few smooth pieces.
Challenges
- Make a cubic curve with a loop. Then make one with a sharp point (a cusp). Where must the handles be?
- Elevate a cubic to degree 6. Did the curve change? Why is the new control polygon closer to the curve?
- Turn on the convex hull and try to push the curve outside it.
- In the Splines tab, move one point of the natural spline. How many pieces change? And with the B-spline?
- Draw a figure 8 and fit it with an allowed error of 1%. How many numbers does the Bézier fit need? How many would Fourier need for the same error?
- Which needs fewer numbers for the star: Bézier or Fourier? And for the heart? Why?
- Convert the TrueType "S" to cubic and back. How many points did you gain?
- Design an easing that goes back a little before it starts, like a cartoon character taking a run-up.
- Find the k that keeps a quarter circle within 0.02% of the radius.
About
Science in Motion is created and maintained by Eduardo Correia, sponsored by Apliant.
Shortcuts
Bézier: space play t · ←→ move t · C construction · K hull · M comb · E elevate · X split · A add a point · Del remove it · R random
Splines: 1–4 kind · L loop · B pieces · M comb · O others · R random
Fit: ↑↓ allowed error · Del clear · P points · G handles. Letters: ←→ letter · F font · V convert · U undo. Easing: space play. H hides the menu.