Construction geometry · one parameter · three points

Quadratic
Bézier curvesdrawn by hand, twice

Drag the three points below. The pale blue marks are construction geometry — the scaffolding a draughtsman would once have drawn in non‑photo blue so the camera wouldn't see it. The graphite line is what survives: a single parabola, and the only thing you actually get to keep.

Curve
B(t) = (1−t)²·P₀ + 2t(1−t)·P₁ + t²·P₂
Numeric
Sheet
degree 2 · 3 control points · t ∈ [0, 1]

Parameter

Weights at this t

(1−t)² → P₀0.336
2t(1−t) → P₁0.487
t² → P₂0.176
total1.000
P₀P₁P₂
B(t)
speed |B′(t)|
Sheet 01of 07

Start with a line, not a curve

Every Bézier curve is built out of one operation repeated: sliding a point along a straight segment. Given two points \(A\) and \(B\), and a number \(t\) between 0 and 1, the blend

$$\operatorname{lerp}(A,B,t) \;=\; (1-t)\,A \;+\; t\,B$$

walks from \(A\) at \(t=0\) to \(B\) at \(t=1\). At \(t=\tfrac14\) you are a quarter of the way along. Nothing here is curved yet.

Notice the shape of it: two weights, \((1-t)\) and \(t\), that are never negative and always sum to 1. That is the whole engine. Everything below is this same expression, applied to itself.

Why weights that sum to 1 matter. A weighted average with non‑negative weights summing to 1 is a convex combination. The result can never escape the segment. Keep that property while you build, and the curve inherits it.
Sheet 02of 07

De Casteljau's construction

Now take three points. You cannot lerp three things at once, so do it in two rounds. For a fixed \(t\), slide along each edge of the control polygon:

$$\textcolor{#25789E}{Q_0(t)} = \operatorname{lerp}(P_0,P_1,t) \qquad \textcolor{#25789E}{Q_1(t)} = \operatorname{lerp}(P_1,P_2,t)$$

That leaves you with two points. Lerp those:

$$\textcolor{#B4462A}{B(t)} = \operatorname{lerp}\big(\textcolor{#25789E}{Q_0(t)},\,\textcolor{#25789E}{Q_1(t)},\,t\big)$$

Turn on Show the construction lines and sweep \(t\). The blue segment is \(Q_0Q_1\); the red dot rides along it. Sweep once and the red dot traces the entire curve. That is the definition — the curve is just the set of all points this recipe produces as \(t\) runs from 0 to 1.

Two things are worth noticing on the sheet before we do any algebra. At \(t=0\) both \(Q\)'s collapse onto \(P_0\), so the curve starts exactly at \(P_0\). And the blue segment \(Q_0Q_1\) always looks tangent to the curve. It is; we'll prove that on sheet 05.

Two names, two car companies. Paul de Casteljau worked out this construction at Citroën around 1959 and it stayed a trade secret. Pierre Bézier published the equivalent polynomials at Renault a few years later, so the curves carry his name and the algorithm carries de Casteljau's.
Sheet 03of 07

Collapse it into one equation

The construction is a definition, not a formula. To get the formula, substitute and expand. This is the answer to your question — here is exactly where the quadratic comes from.

$$B(t) = (1-t)\,\textcolor{#25789E}{Q_0} + t\,\textcolor{#25789E}{Q_1}$$
the outer lerp
$$= (1-t)\big[(1-t)P_0 + tP_1\big] + t\big[(1-t)P_1 + tP_2\big]$$
substitute the two inner lerps
$$= (1-t)^2 P_0 + t(1-t)P_1 + t(1-t)P_1 + t^2 P_2$$
distribute
$$= (1-t)^2 P_0 \;+\; \textcolor{#25789E}{2t(1-t)}\,P_1 \;+\; t^2 P_2$$
collect the two identical middle terms — this is where the 2 comes from

Each coefficient is a polynomial of degree 2 in \(t\), so \(B(t)\) is a degree‑2 (quadratic) polynomial. Two of them, in fact: one for \(x\), one for \(y\), sharing the same parameter.

$$x(t) = (1-t)^2 x_0 + 2t(1-t)x_1 + t^2 x_2$$ $$y(t) = (1-t)^2 y_0 + 2t(1-t)y_1 + t^2 y_2$$

That "one parameter, two coordinates" framing is the important mental shift. This is a parametric curve. It is not the graph of a function \(y=f(x)\) — it can loop back over itself in \(x\), which no graph can do. Drag \(P_2\) to the left of \(P_0\) and watch.

The 2 in the middle term is not decoration. It counts the two distinct routes through the construction that pass through \(P_1\): once via \(Q_0\), once via \(Q_1\). Degree 3 gives coefficients 1, 3, 3, 1 for the same reason.

Sheet 04of 07

The three weights

Read the equation as a recipe for mixing three points. At each \(t\) you get three numbers:

$$b_0(t)=(1-t)^2 \qquad \textcolor{#25789E}{b_1(t)=2t(1-t)} \qquad b_2(t)=t^2$$

These are the Bernstein basis polynomials of degree 2. Here they are plotted against \(t\), with a marker at wherever your slider currently sits:

at t = 0.42  ·  b₀ = 0.336, b₁ = 0.487, b₂ = 0.176

Two facts do all the work. First, they are never negative on \([0,1]\). Second, they always sum to 1 — which is not a coincidence but the binomial theorem read backwards:

$$(1-t)^2 + 2t(1-t) + t^2 = \big[(1-t)+t\big]^2 = 1^2 = 1$$

So \(B(t)\) is always a convex combination of \(P_0, P_1, P_2\), which is why it can never leave the shaded triangle.

Why the curve misses P₁

Students always ask this. Look at the blue curve on the plot: \(b_1(t) = 2t(1-t)\) peaks at \(t=\tfrac12\), and its peak value is only \(\tfrac12\). At the moment \(P_1\) has the most say, it still only holds half the vote:

$$B(\tfrac12) = \tfrac14 P_0 + \tfrac12 P_1 + \tfrac14 P_2$$

\(P_1\) is a direction to lean, not a place to visit. Meanwhile \(b_0(0)=1\) and \(b_2(1)=1\), so the endpoints are hit exactly. On the sheet, \(P_0\) and \(P_2\) are drawn in graphite because they end up on the finished curve; \(P_1\) is drawn in blue because it never does.

Sheet 05of 07

Differentiate it

You know calculus, so this is where the curve stops being mysterious. Differentiate the polynomial term by term with respect to \(t\):

$$B'(t) = -2(1-t)P_0 + (2-4t)P_1 + 2t\,P_2$$ $$\;\;= 2\big[(1-t)(P_1 - P_0) + t\,(P_2 - P_1)\big]$$

The second line is the same thing regrouped, and it says something clean: the velocity is itself a lerp — a linear Bézier — between the two edge vectors of the control polygon. Immediately:

$$B'(0) = 2(P_1-P_0) \qquad B'(1) = 2(P_2-P_1)$$

The curve leaves \(P_0\) pointing straight at \(P_1\), and arrives at \(P_2\) coming straight from \(P_1\). That is the entire reason these things are usable in a drawing program: the control polygon is the tangent information, visible and draggable.

And compare that bracketed expression with \(Q_1 - Q_0\) from sheet 02. They are identical, so

$$B'(t) = 2\big(\textcolor{#25789E}{Q_1(t)} - \textcolor{#25789E}{Q_0(t)}\big)$$

which proves what the picture suggested: the blue construction segment points along the tangent at every \(t\), not just at the ends. Turn on the velocity vector and watch it stay parallel to the blue segment as you sweep.

Differentiate once more

$$B''(t) = 2\big(P_0 - 2P_1 + P_2\big)$$

No \(t\) on the right. The acceleration is a constant vector — which is the definition of parabolic motion. Every quadratic Bézier curve is literally an arc of a parabola, the same one you get from

$$\mathbf{r}(t) = \mathbf{r}_0 + \mathbf{v}_0 t + \tfrac12 \mathbf{a}\,t^2$$

with \(\mathbf{r}_0 = P_0\), \(\mathbf{v}_0 = 2(P_1-P_0)\), and \(\mathbf{a} = 2(P_0-2P_1+P_2)\). Throwing a ball and dragging a control point are the same equation. The "gravity" here points from \(P_1\) toward the midpoint of \(P_0P_2\), which is exactly the direction the curve sags.

It also tells you when the curve degenerates: \(B''=0\) precisely when \(P_1 = \tfrac{P_0+P_2}{2}\). Put \(P_1\) at the midpoint and there is no acceleration, so you get a straight line traversed at constant speed. Try the Straight preset.

Equal steps in t are not equal steps in distance

Speed is \(|B'(t)|\), and it varies. Turn on the sample marks: the dots are evenly spaced in \(t\) but visibly bunch up where the curve is slow and spread out where it is fast. Arc length would be \(\int_0^1 |B'(t)|\,dt\), and for a quadratic that integral does have a closed form — an unpleasant one involving a logarithm — which is why most software just subdivides and adds up chords.

Sheet 06of 07

What the construction buys you

Every one of these follows from the two facts on sheet 04 — weights non‑negative, weights sum to one — plus the derivative on sheet 05. None of them need to be designed in; they come free.

  • Endpoint interpolation. \(B(0)=P_0\), \(B(1)=P_2\), exactly. Chain curves end to end and they meet.
  • Tangent control. The end tangents point along \(P_1-P_0\) and \(P_2-P_1\). To join two curves smoothly, make the shared endpoint and its two neighbours collinear.
  • Convex hull. The curve stays inside triangle \(P_0P_1P_2\). Renderers use this to reject curves that fall outside the clip region without evaluating a single point.
  • Affine invariance. To rotate, scale, or shear the curve, transform the three points and re‑evaluate. You never touch the curve itself. This works because affine maps commute with convex combinations.
  • Variation diminishing. A straight line cannot cross the curve more times than it crosses the control polygon. The curve is always at least as smooth as its scaffolding — it never adds wiggles you didn't ask for.
  • Cheap, stable evaluation. De Casteljau is three lerps: numerically well behaved, and it hands you the split point for free if you want to cut the curve in two at \(t\).
One thing they cannot do. No polynomial Bézier of any degree traces an exact circular arc — a circle is not a polynomial curve. Getting true conics requires rational Béziers, where you divide by a weighted sum. Font and vector formats simply approximate; four cubics get you a circle to within about one part in 3000.
Sheet 07of 07

Add a fourth point

Nothing about the construction cared that there were three points. With four, you run three lerps, then two, then one — and the same expansion gives you the cubic. Same slider, one more point to drag:

Cubic: three rounds of interpolation instead of two. Driven by the same t as the sheet above.
$$B(t) = (1-t)^3P_0 + 3t(1-t)^2P_1 + 3t^2(1-t)P_2 + t^3P_3$$

In general, for \(n+1\) control points:

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

The coefficients are a row of Pascal's triangle, for the same counting reason the 2 appeared on sheet 03. And the whole sum is just \(\big[(1-t)+t\big]^n\) expanded, with the terms labelled by points instead of collected — which is why the weights still sum to 1 at every degree.

Two is the practical minimum for a real curve, and it is what TrueType fonts store. PostScript, CFF, SVG, and every drawing program you have used store cubics — degree 3 is the lowest that allows an inflection point, so a single segment can curve one way and then the other. Beyond about degree 4 nobody bothers: high‑degree Béziers are numerically fussy and every control point affects the whole curve, so the standard move is to chain many low‑degree pieces instead. Chain enough cubics with matching tangents and you have a spline.

Where to go next. Degree elevation (writing a quadratic as a cubic), subdivision at \(t\) for adaptive flattening, and the jump to B‑splines and NURBS, where control points get local influence instead of global.