Approximate a circle with cubic Bézier curves

A good cubic Bézier approximation to the unit right circular arc is:
, , , , where , , and .

This yields a cubic Bézier curve, centered about the origin, starting at and ending at , which is virtually indistinguishable from a circular arc.

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.

Diagram of a right circular arc, showing the four control points.
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:

The Bézier curve touches the right circular arc at its initial endpoint, then drifts outside the arc, inside, outside again, and finally returns to touch the arc at its endpoint.
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 replace the final constraint with a new constraint:

  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 maximum radial drift must be as small as possible.

This explicitly constrains the radial drift, resulting in a better fit.

The first constraint yields the parametric form of the cubic Bézier curve:

…which gives the radial drift:

The Bézier curve touches the right circular arc at its initial endpoint, then drifts outside the arc, inside, outside again, and finally returns to touch the arc at its endpoint.
Figure 3: Radial drift in the better approximation.

This function, , has minima at , and maxima at .

Because the Bézier curve is symmetric about , the two maxima have the same value. The radial deviation is minimized when the magnitude of this maximum is equal to the magnitude of the minimum at .

This gives a better value for :

In this approximation, the maximum radial drift is . This is better than the standard approximation.

An even better approximation

For some time, this was the state of the art… until David Ellsworth wrote in with an improved first constraint:

  1. The four control points are:
    , , ,
  2. The maximum radial drift must be as small as possible.

The constraint on the maximum radial drift already keeps the Bézier approximation close to the circle, so we can relax the constraint on the endpoints. This allows for many new solutions—some of which are better than anything we’ve seen so far!

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

The first constraint gives us:

…which yields the radial drift:

…and the maximum radial drift:

Our task now is to find the values for , , and that minimize .

But we can calculate those values numerically:
,
, and
.

And this is the result:

The cubic Bézier curve oscillates around the right circular arc: starting outside the circle, then dipping in and out three times.
Figure 4: Radial drift in the even-better approximation.

The endpoints of the Bézier curve no longer lie on the circle, and a cusp has formed there: This solution was not previously possible. However, it is significantly better. The maximum radial drift is in this approximation. This is better than the standard approximation!

The result is virtually indistinguishable from a circle:

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

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

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. Even a chord approximation can become arbitrarily good if the circle is subdivided into enough arcs.

Least-squares approximation

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

A. The least-squares approximation is almost as tight as the best approximation presented here, but with a smaller squared-residuals sum.