Computer Graphics

Lecture 06

Circle Drawing Techniques

Taqdees A. Siddiqi
[email protected]
 What is Circle

A circle is the set of points in a plane that are equidistant from

a given point O. The distance r from the center is called the
radius, and the point O is called the center. Twice the radius
is known as the diameter. The angle a circle subtends from
its center is a full angle, equal to 360° or 2 radians.
Circle Cont..
 Circle Cont..
A circle has the maximum possible area for a given
perimeter, and the minimum possible perimeter for a given
area.

The perimeter C of a circle is called the circumference, and is

given by

C=2r
 Circle Drawing Techniques

- Input for circle drawing

. one center point (xc, yc) and
. radius r

Now, using these two inputs there are a number of ways

to draw a circle.
 Circle Drawing Techniques
These techniques have:
- Understanding curve
. very simple to
. complex
- Time complexity
. inefficient to
. efficient
 Circle Drawing Using Cartesian
Coordinates
This technique uses the equation for a circle with radius r
centered at (0,0):

x2 + y2 = r2,
an obvious choice is to plot
y = ± r2 - x2
against different values of x.
 Circle Drawing Using Cartesian
Coordinates

Using above equation a circle can be easily drawn. The value

of x varies from r-xc to r+xc, and y is calculated using above
formula. Using this technique a simple algorithm will be:
 Circle Drawing Using Cartesian
Coordinates
for x= radius-xcenter to radius+xcenter
y = yc + r2 – ( x - xc )2

drawPixel (x, y)

y = yc - r2 – ( x - xc )2

drawPixel (x, y)
 Drawbacks/ Shortcomings

This works, but …

. is inefficient
. multiplications & square root
. large gaps in the circle for values of x close to
r

(as shown in the next figure)

Drawbacks/ Shortcomings
Circle Drawing Using Polar Coordinates
Polar Coordinates:
Radius r
Angle 
calculate points along the circular boundary
using polar coordinates r and 
Expressing the circle equation in parametric polar form yields
the pair of equations:
Circle Drawing Using Polar Coordinates
Cont…
x = xc + r cos 
y = yc + r sin 

Using above equation circle can be plotted by calculating x

and y coordinates as  takes values from 0 to 360 degrees or
0 to 2 radians.
Circle Drawing Using Polar Coordinates
Cont…
The step size for  depends on:
. application and
. display device
Larger angular separations along the circumference can be
connected with straight-line segments to approximate the
circular path.
Step size at 1/r gives continuous boundary
This plots pixel positions that are approximately one unit apart.
 Polar Coordinates Algorithm

Circle2 (xcenter, ycenter, radius)

for  = 0 to 2 step 1/r
x = xc + r * cos 
y = yc + r * sin 
drawPixel (x, y)
 Discussion

- very simple technique

- solves problem of unequal space
- is inefficient in terms of calculations
- involves floating point calculations
 Reduction in Calculations
▪ Symmetry in octants
▪ Upper half circle symmetric to lower half circle
▪ Left half circle symmetric to right half circle
▪ Finally two halves of the same quarters are symmetric to
each other
Eight Octants Symmetry
 Optimizing the Algorithm
Now this algorithm can be optimized by using symmetric
octants as:

Circle2 (xcenter, ycenter, radius)

for  = 0 to /4 step 1/r

x = xc + r * cos 
y = yc + r * sin 
DrawSymmetricPoints(xcenter, ycenter, x,y)
 Optimized Algorithm

DrawSymmeticPoints (xcenter, ycenter, x, y)

Plot (x + xcenter, y + ycenter)
Plot (y + xcenter, x + ycenter)
Plot (y + xcenter, -x + ycenter)
Plot (x + xcenter, -y + ycenter)
Plot (-x + xcenter, -y + ycenter)
Plot (-y + xcenter, -x + ycenter)
Plot (-y + xcenter, x + ycenter)
Plot (-x + xcenter, y + ycenter)
 Inefficiency Still Prevails

▪ Reduction in calculations by exploiting symmetric octants

but…
▪ Floating point calculations still involved
 Midpoint Circle Algorithm

▪ Derivation of decision parameter

▪ Decrement decision in the y coordinate against increment of
x coordinate
 Midpoint Circle Algorithm

Consider only the first octant of a circle of radius r centered

on the origin.

We begin by plotting point (0, r) and end when x = y.

 Midpoint Circle Algorithm

The decision at each step is whether to choose :

the pixel to the right of the current pixel
or
the pixel which is to the right and below the current pixel
(8-way stepping)
 Midpoint Circle Algorithm
X2- Y2 - r2 =0 X=Y
Assume:
P = (xk, yk) is the current
pixel.
Q = (xk+1, yk) is the pixel
to the right
R = (xk+1, yk -1) is the
pixel to the right and below.
 Midpoint Circle Algorithm

To apply the midpoint method, we define a circle function:

fcircle(x, y) = x2 + y2 – r2

The following relations can be observed:

f circle (x, y) < 0,if (x, y) is inside the circle boundary

f circle (x, y) = 0,if (x, y) is on the circle boundary
f circle (x, y) > 0,if (x, y) is outside the circle
boundary
 Midpoint Circle Algorithm

Circle function tests are performed for the midpoints between

pixels near the circle path at each sampling step.
Midpoint Circle Algorithm

k
X2+Y2-R2=0

k Xk+1
 Midpoint Circle Algorithm

Figure given in previous slide shows the midpoint between

the two candidate pixels at sampling position xk+1.

Our decision parameter is the circle function evaluated at the

midpoint between these two pixels:
 Decision Parameter

Pk = f circle ( xk + 1, yk - ½ )

Pk = ( xk + 1 ) 2 + ( yk - ½ ) 2 – r 2 ……...(1)
 Decision Parameter

If pk < 0, this midpoint is inside the circle and the pixel on

scan line yk is closer to the circle boundary. Otherwise, the
mid position is outside or on the circle boundary, and we
select the pixel on scan-line yk-1.
 Decision Parameter

Successive decision parameters are obtained using

incremental calculations. We obtain a recursive expression
for the next decision parameter by evaluating the circle
function at sampling position xk+1+1 = xk+2:
 Decision Parameter

Pk+1 = f circle ( xk+1 + 1, yk+1 - ½ )

Pk+1 = [ ( xk + 1 ) + 1 ] 2 + ( yk+1 - ½ ) 2 – r 2
.………(2)
 Decision Parameter

Subtracting (1) from (2), we get:

Pk+1 - Pk = [ ( xk + 1 ) + 1 ] 2 + ( yk+1 - ½ ) 2 – r 2 – ( xk + 1 ) 2 - ( yk -
½)2+r2
or
Pk+1 = Pk + 2( xk + 1 ) + ( y2k+1 - y2k ) – ( yk+1 - yk ) + 1
 Decision Parameter

Where yk+1 is either yk or yk-1, depending on the sign of Pk.

Therefore, if Pk < 0 or negative then yk+1 will be yk and the
formula to calculate Pk+1 will be:
 Decision Parameter

Pk+1 = Pk + 2( xk + 1 ) + ( y2k - y2k )

– ( yk - yk ) + 1

Pk+1 = Pk + 2( xk + 1 ) + 1
 Decision Parameter

Otherwise, if Pk > 0 or positive then yk+1 will be yk-1 and the

formula to calculate Pk+1 will be:
 Decision Parameter

Pk+1 = Pk + 2( xk + 1 ) + [ (y k -1)2 - y2k ]

– (yk -1- yk ) + 1
Pk+1 = Pk + 2(xk + 1) + (y2 k - 2 y k +1 - y2k )
– ( yk -1- yk ) + 1
Pk+1 = Pk + 2( xk + 1 ) - 2 y k + 1 + 1 +1
Pk+1 = Pk + 2( xk + 1 ) - 2 y k + 2 +1
Pk+1 = Pk + 2( xk + 1 ) - 2 ( y k – 1 ) + 1
 Decision Parameter

Now a similar case that we observed in line algorithm is that

how would starting Pk be calculated.
For this, the starting pixel position will be (0, r).

Therefore, putting this value in equation, we get

 Decision Parameter
P0 = ( 0 + 1 ) 2 + ( r - ½ ) 2 – r 2
P0 = 1 + r2 - r + ¼ – r 2
P0 = 5/4 – r
If radius r is specified as an integer, we can simply round p0
to:
P0 = 1 – r
Since all increments are integer. Finally the algorithm can be
summed up as :
 Algorithm
MidpointCircle (xcenter, ycenter, radius)
x = 0;
y = r;
p = 1 - r;
do
DrawSymmetricPoints (xcenter, ycenter, x, y)
x=x+1
If p < 0 Then
p=p+2*(y+1)+1
 Algorithm Cont…
else
y=y-1
p = p + 2 * ( y + 1) –2 ( x – 1 ) + 1
while ( x < y )

Example to calculate first octant of the circle using above

algorithm.
 Example
center ( 0, 0 ) radius = 10
 Example Cont…

Behaviour of
calculated points
around the circle is
observable
 Computer Graphics

Lecture 06

Circle Drawing Techniques

Taqdees A. Siddiqi
[email protected]