Cubic Bézier playground

A cubic Bézier curve has four control points P₀…P₃. It starts at P₀ and ends at P₃; the two inner points shape the curve. All coordinates use the same abstract units, not pixels. Coordinates must be finite and between −1000000 and +1000000. The parameter t lies between 0 and 1.

The curve is evaluated by de Casteljau’s algorithm: interpolate between successive points, then interpolate those intermediate points twice more. Equivalently, B(t) = (1−t)³P₀ + 3(1−t)²tP₁ + 3(1−t)t²P₂ + t³P₃. The derivative is the quadratic Bézier curve with control points 3(P₁−P₀), 3(P₂−P₁) and 3(P₃−P₂). The displayed derivative components are with respect to t, not distance along the curve.

The green direction arrow uses B′(t)/|B′(t)|. Its display length is fixed for the current view and does not show the derivative magnitude. If B′(t) is exactly zero, no direction arrow is asserted. A point with zero derivative can still belong to a nonconstant curve. The stationary-point example illustrates this at t = 0.5.

Draw starts the view explicitly. Afterward, the t field and slider update B(t) together. Editing any coordinate clears the old result until Draw is pressed again. All four points can also be dragged; their numeric fields update through the same calculation. The view stays fixed during a drag and fits all control points after release. A cancelled drag restores the previous points. Only the point handles capture touch gestures; scrolling and the mouse wheel remain normal elsewhere. For coincident points, focus one of that point’s numeric fields before dragging its handle.

The plot uses upward-positive y and equal x/y scales. The curve lies within the convex hull of its control points. The optional length estimate sums 100 straight chords at equally spaced t values; it is not an exact or adaptively controlled arc length. Constant curves have zero length. Reset keeps the inputs and clears the view; valid inputs are retained across navigation. This tool has no quadratic mode, export or animation.

Sources: Michigan Technological University, de Casteljau’s algorithm and Bézier derivatives.