degree:drag the colored points
〰️ Bézier Curves — What's going on?
A Bézier curve is a smooth curve defined by "control points."
The endpoints (P0, P3) are where the curve starts and ends.
The middle points (P1, P2) are like magnets that pull the curve toward them
without the curve actually touching them.
The math uses something called "lerp" (linear interpolation):
lerp(A, B, t) = A + t * (B - A)
When t=0 you're at A. When t=1 you're at B. In between, you're... in between.
The de Casteljau algorithm (what you see animated) works like this:
1. Draw lines between all control points
2. Find the midpoint on each line at time t
3. Connect THOSE midpoints and find THEIR midpoint at t
4. Keep going until one point remains — that's the curve point at t
As t goes from 0 → 1, that final point traces the entire curve.
Drag the colored dots to reshape the curve in real time.
Real-world uses: font design, SVG paths, CSS animations, game movement paths.