# Bezier curves

Until now, we can draw straight lines for our polygons, but not curves. However, curves are everywhere, also in the typography. So we need a way to represent any type of curves mathematically in a way that the specification is both simple and performant.

Bevor the Bezier curves, costume designers and architects had this instrument called *french curve* or *pistolet* in french. It is a plastic template to draw curves of any radius. My architect parents had in their atelier.

After the World War II, the automobile industry and the fast growing economy asked for the fast development of new models. Pierre Bezier worked in the 1960s as engineer for Renault and developed Unisurf Cad, one of the earliest CAD softwares. The Peugeot 204 was the first car developed with this software using Bezier curves.

However, Bezier was not alone. The engineer Paul de Castelijau worked for Citroën and had the same idea. He invented cubic Bezier curves already in 1959.

It happens sometimes that multiple clever people have the same idea at the same time, because the idea is ready. If you want split the credits, Castelijau developed the astonishing simple algorithm we will use, while Bezier takes credits for that curve handles you see in each layout program.

So what is a cubic Bezier curve? The curve is defined by four points P0, P1, P2 and P3. Only P0 and P3 are on the curve. The other points P2 and P3 act like gravity points and form the vectors V0 and V3 with their counterpart points P0 and P3. The longer the vectors are and the more they point fare away from the opposite point, the more likely the curve will stay at the starting point.

De Caseljau showed that with a simple linear interpolation, a cubic Bezier curve could be split into two Bezier curves. If you do that recursively, you finish either with a straight line at least for the resolution we are drawing. So the algorithms converts the curve in a sequence of lines we can handle.

If the original points are P0, P1, P2, P3 then you calculate P4 as center of [P0 P1], P5 as center of [P1 P2], P6 as center of [P2 P3]. Then you calculate P7 as center of [P4 P5], P8 as center of [P5 P6]. Finally you calculate P9 as center of [P7 P8]. (The triple linear interpolation represents the cubic character of this curve.)

The you have to new curves:

- P0 P4 P7 P9
- P9 P8 P6 P3

P1 and P2 are out of the game

We create a bezier function which takes a curve path element and returns an array of lines.

We also rewrite scanfill as independent function.

Rewrite the fill operator and add the curveto and rcurveto operator.

Some drawings with curves

Some letters with and without curves. The "O" looks rough because we do not have any antialiasing at all here.

Bezier cannot draw every curve exactly, but it can imitate it very well. With 4 points, it can imitate a circle with 99% precision. The formula for circle is with n segments distance to the control points, is (4/3)*tan(pi/(2n)).

On the left, a rough cercle with only 2 points and on the right a quite perfect circle with 4 points.

The current codebase has now 1285 lines ps20240722.js