Approximate a circle with cubic Bézier curves

Bézier curves are often used to generate smooth curves because they are computationally inexpensive and produce high-quality results.

The standard way to approximate a circle is to divide it up into four equal sections, and replace each right circular arc with a cubic Bézier curve.

Figure 1: The optimal cubic Bézier curve approximation to a unit right circular arc. If we knew the locations of these four control points, we could approximate any circle.

Standard approximation

The standard approach imposes the following constraints:

1. The endpoints of the cubic Bézier curve must coincide with the endpoints of the unit right circular arc, and their first derivatives must agree there.
2. The midpoint of the cubic Bézier curve must lie on the circle.

The general form of a cubic Bézier curve is:
,

The first constraint implies that:

And the second constraint provides the value of :

This gives the approximation:

The cubic Bézier curve remains outside the circle at all times, except momentarily when it dips in to touch the circle at its midpoint and endpoints:

Figure 2: Radial drift in the standard approximation.

The radial drift is the radial distance from the cubic Bézier curve to the circle. In the standard approximation, the maximum radial drift is .

A better approximation

However, a better approximation is possible if we update the constraints to (1) keep the cubic Bézier curve as close to the circle as possible, and (2) increase our flexibility when choosing the control points:

1. The maximum radial drift must be as small as possible.
2. The four control points are:
   , , ,
   
   …where , , and are parameters that we can choose to get the best possible fit.

Figure 3: These are the control points for the cubic Bézier curve that approximates a unit right circular arc.

Rather than choose , , and manually, we’ll solve for the best-possible values.

The general form of a cubic Bézier curve is:
,

From the second part of the constraint, we get the parametric form of the curve:

…which gives the radial drift:

…and the maximum radial drift:

Our goal is to choose , , and that is minimized.

Through numerical computation:
,
, and
.

…thanks to David Ellsworth who formulated part two of the constraint and wrote in with the numerical solution.

Here is the result:

Figure 4: Radial drift in the better approximation.

In the better approximation, the maximum radial drift is , which is five times better than the standard approximation.

Figure 5: The better Bézier approximation is virtually indistinguishable from a circle.

The circle in Figure 5 was created using the cubic Bézier curve:
, , , , where
,
, and
.

If you view the source code of the SVG file, you’ll see the control points: The first few control points were taken from this article, and the rest were obtained by rotation. The function will rotate a point ninety degrees clockwise.

Further refinements

More arcs

Q. What if we divide the circle into more than four arcs?

A. We can achieve an arbitrarily-good approximation that way, at the cost of additional computation.

Least-squares approximation

Q. What if we borrow a page from physics and use a least-squares regression to find the best-fit Bézier curve?

A. The least-squares approximation has a smaller squared-residuals sum, but it strays further away from the circle at its furthest point.