Computer Graphics Course Notes

Circle drawing algorithms

Given the circle center point ( ) and radius R, we want to draw an approximation of the
circle. Different methods are based on one of circle equations given next.

[1] Circle equations:

Cartesian equation:

This equation expresses the fact that every point (x, y) on the circle is at a constant distance
R from the center point ( ), thus:

( ) ( )

Parametric equation (polar form)

If the angle between the vector from the center point ( ) to the point (x, y) and the
positive x axis direction is then the coordinates of the point (x, y) are:

( )

( )

All circle points can be obtained by changing from 0 to . Note here we use the radian
system of measuring angles.

[2] Circle symmetry

Consider the case when the center point ( ) is at the origin (i.e. ). If
some point (a, b) lies on the circle, it will satisfy the circle equation, i.e.:

It is easy to see that changing the signs and exchanging the variables a and b in the left hand
side of the above equation gives the same result. So, the following eight points are all on the
circle if one of them is on the circle:

{( )( )( )( )( )( )( )( )}

This fact can be exploited in circle drawing algorithms by computing the points of only one-
eighth of the circle and inferring all the other points by symmetry.

A circle with general center point ( ) other than the origin are simply computed by
shifting the points of the circle centered about the origin by ( ), so if we have some
point (a, b) on the circle centered about the origin, the corresponding eight similar points on
the general circle are:

Prof. Reda A. El-Khoribi Page 1

 Computer Graphics Course Notes

{( )( )( )( )( )(
)( )( )}

The following utility function expresses this fact; it will be used in circle drawing algorithms.

void Draw8Points(HDC hdc,int xc,int yc, int a, int b,COLORREF color)

{
SetPixel(hdc, xc+a, yc+b, color);
SetPixel(hdc, xc-a, yc+b, color);
SetPixel(hdc, xc-a, yc-b, color);
SetPixel(hdc, xc+a, yc-b, color);
SetPixel(hdc, xc+b, yc+a, color);
SetPixel(hdc, xc-b, yc+a, color);
SetPixel(hdc, xc-b, yc-a, color);
SetPixel(hdc, xc+b, yc-a, color);
}

[3] Circle drawing methods

Note that in all of the following algorithms, the computations of circle points (x, y) are for
points of circles centered about the origin and the utility ‘Draw8Points’ described above is
used to exploit the 8-symmetry and shifting properties for general circles.

3-1. Direct Cartesian method

Circle equation ( ) can be solved for y as:

Circle points are obtained by changing x and computing y. To know which octant (one-eighth
of the circle) to compute in this case, we must be sure that the slope of the circle at each
point of the octant is less than one in magnitude (absolute value). By taking the derivative of
both sides of the circle equation with respect to x, we obtain:

So:

For the absolute value of the slope to be less than or equal to one, we should have:

| | | |

One of the octants satisfying this condition is the one satisfying the condition: , so
the main loop of the algorithm starts at x=0 and ends when x=y.

void CircleDirect(HDC hdc,int xc,int yc, int R,COLORREF color)

Prof. Reda A. El-Khoribi Page 2

 Computer Graphics Course Notes
{
int x=0,y=R;
int R2=R*R;
Draw8Points(hdc,xc,yc,x,y,color);
while(x<y)
{
x++;
y=round(sqrt((double)(R2-x*x)));
Draw8Points(hdc,xc,yc,x,y,color);
}
}

3-2. Polar direct method

Using polar equations ( ( ) ( ), one can change from 0 to for

example and compute both x and y in each iteration to compute the first octant. This octant
also satisfy the condition: . The problem is how to select the step by which
is incremented? If is big, we’ll obtain few (disconnected) points. If it is very small, we’ll
obtain so many points that will be approximated (by rounding) in such a way that the same
pixel is drawn many times. To tackle this problem, we may notice that the length of a circle
arc making an angle is provided that is expressed in radians. So, for an arc
length of 1, we must have:

So

The implementation of the algorithm is as shown below:

void CirclePolar(HDC hdc,int xc,int yc, int R,COLORREF color)

{
int x=R,y=0;
double theta=0,dtheta=1.0/R;
Draw8Points(hdc,xc,yc,x,y,color);
while(x>y)
{
theta+=dtheta;
x=round(R*cos(theta));
y=round(R*sin(theta));
Draw8Points(hdc,xc,yc,x,y,color);
}
}
3-3. Iterative polar algorithm

The above algorithm computes the trigonometric functions sin and cos which take a very
long time because they are computed using infinite series expansions. [ ( )

, ( ) ]

Prof. Reda A. El-Khoribi Page 3

 Computer Graphics Course Notes

To speed up the algorithm the following iterative approach is used:

Let (x, y) be a point on the circle centered about the origin. Let ( ) be its corresponding
polar coordinates. Mathematically:

Next point (x’, y’) to draw on the circle is obtained by incrementing by , thus it has polar
coordinates (R, ). Mathematically:

( )

( )

Expanding x’ and y’ using some trigonometric identities:

( ) ( ) ( )

( ) ( ) ( )

The idea is to start at some point (R, 0) and use the above formulae to compute next points
iteratively. The following functions implements the idea.

void CircleIterativePolar(HDC hdc,int xc,int yc, int R,COLORREF color)

{
double x=R,y=0;
double dtheta=1.0/R;
double cdtheta=cos(dtheta),sdtheta=sin(dtheta);
Draw8Points(hdc,xc,yc,R,0,color);
while(x>y)
{
double x1=x*cdtheta-y*sdtheta;
y=x*sdtheta+y*cdtheta;
x=x1;
Draw8Points(hdc,xc,yc,round(x),round(y),color);
}
}

3-4. Bresenham (midpoint) algorithm

The following function can be used to test if some point is on the circle, inside or outside the
circle (centered at the origin)

( )

Using this function to test a point (x, y) is as follows:

Prof. Reda A. El-Khoribi Page 4

 Computer Graphics Course Notes

( )
( ) { ( )
( )

The idea is to start at the point (0, R). This point is considered the current point (x, y). The
circle testing function is then used to test whether the next midpoint (x+1, y-1/2) is inside or
outside the circle. If it is inside, next point to draw is (x+1, y), otherwise next point is (x+1, y-
1). In the shown Figure, drawn points are represented as blue stars while the midpoints are
represented as red stars.

An iterative approach is used to compute the testing function at the middle point as follows:

Define d(x, y) as the mid-point test function to be tested after drawing the point (x, y). d(x,
y) is thus given by:

( ) ( ) ( ) ( )

( )

So,

( ) ( )

Initial value of d(x, y) is:

( ) ( ) ( ) ( )

Prof. Reda A. El-Khoribi Page 5

 Computer Graphics Course Notes

Change in d(x, y):

If d(x, y)<0 then (x, y) is inside the circle and next point to draw is (x+1, y) so the change in d
is given by:

( ) ( )

So:

( ) ( ) ( ( ) )
( ) ( ) ( ) ( )

If d(x, y)>0 then (x, y) is outside the circle and next point to draw is (x+1, y-1) and the change
in d is thus:

( ) ( )

So:

( ) ( ) ( ) ( ( ) )
( ) ( )
( ) ( ) ( ) ( )

The initial value of d contains the constant value which is a real number. Fortunately
and removing from this constant will not affect the algorithm since the sign of d
will not be affected by this removal. So we will use d=1-R as the initial value of d and the
algorithm will be purely integer. Bresenham algorithm for circle drawing is given below:

void CircleBresenham(HDC hdc,int xc,int yc, int R,COLORREF color)

{
int x=0,y=R;
int d=1-R;
Draw8Points(hdc,xc,yc,x,y,color);
while(x<y)
{
if(d<0)
d+=2*x+2;
else
{
d+=2*(x-y)+5;
y--;
}
x++;
Draw8Points(hdc,xc,yc,x,y,color);
}
}
Further enhancement of the above algorithm can be obtained if the computation of the
changes (2x+3) and (2(x-y)+5) are done iteratively as follows:

Prof. Reda A. El-Khoribi Page 6

 Computer Graphics Course Notes

Define the functions ( ) and ( ) as:

( )

( ) ( )

Initial values of the two functions are thus given by:

( ) ( )

( ) ( )

Changes in the two functions with changing decision d are as follows

If d(x,y) < 0 then

( ) ( ) ( ) ( ) ( )

( ) ( ) ( ) ( ) ( ( ) )

Else

( ) ( ) ( ) ( ) ( )

( ) ( ) ( ) ( ) ( ( ) )

End if

The implementation of the following is given below:

void CircleFasterBresenham(HDC hdc,int xc,int yc, int R,COLORREF color)

{
int x=0,y=R;
int d=1-R;
int c1=3, c2=5-2*R;
Draw8Points(hdc,xc,yc,x,y,color);
while(x<y)
{
if(d<0)
{
d+=c1;
c2+=2;
}
else
{
d+=c2;
c2+=4;
y--;
}
c1+=2;
x++;
Draw8Points(hdc,xc,yc,x,y,color);
}
}

Prof. Reda A. El-Khoribi Page 7