Calculating Cubic Béziers

In Chapter 6 in the book, we showed how a quadratic Bézier curve is constructed mathematically from the end points and the control point, by comparing it to a “string art” drawing, as shown in Figure 6-X4.

A shape with two pointed corners and two curved sides, in blue. A series of purple lines wrap around both curved sides, while tracing out the edges of a square with their start and end points. — Figure 6-X4. A quadratic Bézier path, and the string art mesh that encloses it

Cubic Bézier curves are more complicated, starting from the fact that they have two control points for each segment. If you wanted to draw a cubic curve by hand, using the “string art” method, you would need a multi-step process:

First, you create two over-lapping quadratic curves as a sort of scaffolding:
1. using the cubic curve’s start point, first control point, and second control point
2. using the two control points and the end point.
Then, you create a new set of strings that start and end at evenly-spaced positions along these curves. For example, one line would start at 10% of the distance along the first quadratic and end 10% of the distance along the second quadratic.
This second set of strings are the tangents to your cubic curve. The point 10% of the distance along your 10% line would be a point on the curve.

The string art diagrams get rather messy for cubic curves, as shown in Figure 6-X5, but the final curves can be very elegant. The dark blue and purple lines show how the quadratic scaffolding was constructed. The thick red strings connect them and sketch out the actual cubic Bézier shape.

Four square figures, arranged in a grid. Each has a solid, curved shape, with lines wrapped around it. The top-left curve is in a D-shape. The top-right is a stretched S-shape along the diagonal. Bottom-left is almost triangular, with convex curves joining in a point. Bottom-right is a tear-drop shape in one corner. — Figure 6-X5. Cubic Bézier curves and their “string art” basis

The four curves in Figure 6-X5 are as follows (using a scale with 10 units along each edge of the square, instead of 10cm):

<path d="M 0,0 C 10,0  10,10 0,10"/>
<path d="M 0,0 C 10,0   0,10 10,10"/>
<path d="M 0,0 C 10,10 10,0   0,10"/>
<path d="M 0,0 C  0,10 10,0   0, 0"/>

Each curve has start, end, and control points in different corners of a square; the thin purple and navy strings are used to sketch out the quadratic curves, and then the thick red strings sketch the cubic curve. Nonetheless, for the computer, it is just a weighted average of weighted averages of all the points.

View a live, animated version of the S-curve. You can then change the start point, control points, and end point by editing the s, c1, c2, and e parameters in the URL.