Drawing a circle with Bézier Curves

by G. Adam Stanislav

Introduction

If you have come to the conclusion it is not possible to draw a perfect circle using Bézier curves, well... You are right.
    Fortunately, the human eye does not have to be looking at a perfect circle for the human mind to say: “Hey, that is a circle.”
    So, while you indeed cannot draw a circle using Bézier curves, you can emulate one very closely.

Why draw circles with Bézier curves?

That is a perfectly legitimate question. Why should you use Bézier curves to emulate a circle, when you can draw one using just about any graphics library?
    The answer is simple: Sometimes you cannot. For example, if you are designing a Postcript font, you are limited to very few graphics primitives: You can draw a line, and you can draw a curve. A cubic Bézier curve, to be more specific.

Resources

There are a surprisingly few resources in computer graphics literature explaining how to use Bézier curves to emulate a circle. In all the years of studying computer graphics, I have seen only one book that touched the topic. And it came up with a wrong solution.
    Yet, someone has figured it out. Just about any major commercial drawing program which allows you to export a graphic as a glyph of a Postcript font will do it properly. But, for whatever reason, they do not seem to let others know how they do it.
    Several years ago, I decided to solve the puzzle, based on knowledge of basic geometry and principles of computerized typesetting. After I solved the puzzle, I posted the solution in one of Fidonet’s discussion groups (Laserpub).
    Many have thanked me for the solution, yet the knowledge seemed to remain with those who read my message.
    That is why I have decided to post the solution here on this Internet page.

Analysis

Let us consider some basic properties of a circle:
    A circle is a set of points on a plane, each equally distant from a center point. If we run a vertical line through the center, we divide the circle into two semicircles, each of which is the exact mirror image of the other. We can do the same using a horizontal line.
    If we use both, a vertical and a horizontal line, we divide the circle into four sections, all mirror images of the rest (the mirror can be horizontal, vertical, or both).
    That means that if we can figure out a way to draw one of the quadrants, we know how to draw all four of them.
    Secondly, if we draw a tangent to the circle at each point of intersection of our horizontal or vertical line with the circumference of the circle, the tangent itself will be either horizontal or vertical.
    If we are to emulate any of the quadrants with cubic Bézier curves (as used in Postscript fonts), we need to draw a curve which has a starting point, an ending point, and two control points.
    If we connect the starting point with the nearest control point, and the ending point with its nearest control point, we will have drawn two line segments: One of them horizontal, the other vertical (depending on the quadrant).
    Further, both line segments will be of the same length l.
    There are an infinite number of curves that have these properties (since there are, at least in theory, an infinite number of lengths l we can use). None of them will yield a perfect circle.

Solution

As I said in the introduction, we cannot draw a perfect circle but we can produce a very close approximation. The trick is in finding the right l.
    The value of l is different for each circle, depending on its radius r. That is not a problem. All we need to do is find the l for the special case where r = 1. The result will be a constant, which I shall call kappa (the first letter of the Greek word kyklos, circle). It is hard on the Internet to draw Greek letters, so I am translitterating it as kappa.
    Once we have determined the value of kappa as being l of a circle with r = 1, we can emulate any circle of radius r by using the formula:

l = r . kappa

The right kappa

The right value of kappa will draw a curve that is as close to a quadrant of a circle as we can get. It is my contention that we get the closest to a real circle if we draw the one curve with properties already discussed, and with the center point of the curve lying at the same point the center point of the circumference of a true quadrant of a circle would lie.
    I am not going to bore you with the details of deriving the value of such a kappa. I will just say that:

kappa = 0.5522847498

Simple as 1-2-3-4

Unfortunately, kappa is not a rational number. But you do not have to memorize its value to use it, nor do you you have to come back here every time you need to use it.
    Fortunately, the formula to derive kappa is very simple: Just remember the phrase “As simple as 1-2-3-4”. That will help you in remembering the full formula which I will describe verbally:

Subtract one
from square root of two,
divide the result by three,
and multiply by four.

4*(sqrt(2)-1)/3

Summary

To emulate a near perfect circle of radius r with cubic Bézier curves, draw four curves such that one of the line segments connecting the starting point with the nearest control point, or the ending point with its nearest control point, is vertical, while the other one is horizontal. The length l of each such segment equals r multiplied by kappa.
    To draw an ellipse, follow the same rule. But you will have two different radii: You need to multiply kappa with the radius that is parallel to the line segment connecting the starting/ending point with the nearest control point. If the radii of the ellipse are not horizontal and vertical, you will need to rotate the result using methods described in just about any computer graphics handbook (most notably in Michael Mortenson’s Geometric Transformations).

Excercise

Figure out how to draw a sine wave with Bézier curves, using kappa.

Source Code

If you need to use kappa in your own computer software, you can download my assembly language source code from my FTP server. You can assemble it with NASM, but it includes a preassembled object file for 32-bit Windows and another for Unix. It also includes a simple C test which just prints the value of kappa to stdout. I tested it with MS VC and GCC under Windows and GCC under FreeBSD.

The Mathematics

If you wish to see exactly how to derive the value of kappa mathematically, read this.

Further Resources

For information how to approximate a generic arc (i.e. other than a quadrant) take a look at BEZARC1.PDF available at Guru’s Lair Cubic Spline Directory. Thanks to Izumi Ohzawa for letting me know about this link!

Copyright © 1998 G. Adam Stanislav
All rights reserved

Home

Buy it now Click on the button to buy Michael Mortenson’s Geometric Transformations (an excellent book!), or to search for similar books.