Bézier Curve Editor — Animated De Casteljau Construction (2D)

Bézier Curve Editor (2D)

Parameter t 0.50

Drag any control point to reshape the curve. The slider moves the point-at-t marker and its construction lines live.

Construction build-up

Step Construction replays the recursive de Casteljau interpolation one level at a time, animating each new line as it is built instead of showing the finished construction instantly.

Live Readouts

Curve type

Quadratic

Levels

Point B(t)

(—, —)

How this differs from the 3D version

The 3D companion renders the same De Casteljau construction through a WebGL orthographic scene and shows every interpolation level at once. This 2D view draws with a plain getContext('2d') canvas and adds a build-up mode: pressing Step Construction replays the recursion level by level, animating each new interpolation line as it grows from its start point to its end point:

level 0: P0..Pn            (control points)
level 1: lerp(Pi, Pi+1, t)  for i in level0
level 2: lerp(Qi, Qi+1, t)  for i in level1
...
level n: single point = B(t)

Only when a level's line has finished drawing does the next level begin, making the recursive nature of the algorithm — each round of linear interpolation feeding the next — visible as a sequence rather than a static diagram.