0% found this document useful (0 votes)
9 views8 pages

Computer Graphics Tutorial 2

This tutorial covers the manual implementation of circle drawing algorithms, focusing on Bresenham’s/Midpoint Circle Algorithm. It includes detailed examples, pseudocode, and a Python implementation, emphasizing the use of symmetry and decision parameters for efficient pixel plotting. The tutorial concludes with practice exercises to reinforce the concepts learned.

Uploaded by

doka7ahmed
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
9 views8 pages

Computer Graphics Tutorial 2

This tutorial covers the manual implementation of circle drawing algorithms, focusing on Bresenham’s/Midpoint Circle Algorithm. It includes detailed examples, pseudocode, and a Python implementation, emphasizing the use of symmetry and decision parameters for efficient pixel plotting. The tutorial concludes with practice exercises to reinforce the concepts learned.

Uploaded by

doka7ahmed
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

Computer Graphics

Tutorial 2
Manual Implementation of Circle Drawing Algorithms
Spring Semester 2025

1 Introduction
This tutorial focuses on practical implementation of circle drawing algorithms for raster dis-
plays, with emphasis on Bresenham’s/Midpoint Circle Algorithm. We’ll work through detailed
examples to ensure you understand not just the theory, but how to manually trace through the
algorithm step-by-step.

Note
This is a hands-on tutorial. Have pen, paper, and a calculator ready to work through
the examples.

2 Circle Drawing Algorithm Fundamentals


2.1 The Circle Equation
A circle with center (xc , yc ) and radius r is defined by:

(x − xc )2 + (y − yc )2 = r2 (1)
For simplicity, we’ll initially work with circles centered at the origin (0, 0):

x2 + y 2 = r 2 (2)

2.2 Circle Symmetry


A key insight: if the point (x, y) lies on a circle centered at the origin, so do (y, x), (−x, y),
(x, −y), (−x, −y), (y, −x), (−y, x), and (−y, −x).
This means we only need to calculate points for 1/8 of the circle and derive the rest through
symmetry.

3 Bresenham’s/Midpoint Circle Algorithm


Bresenham’s Circle Algorithm (often called Midpoint Circle Algorithm) efficiently determines
which pixels to plot when drawing a circle.

1
y

3 2
4 1
x
5 8
6 7

Figure 1: Circle divided into 8 octants - calculate just one octant, then use symmetry

3.1 Algorithm Intuition


The key idea is to make incremental decisions about which pixel to choose next:
1. Start at (0, r) and iterate x from 0 to √r2 2. For each x, decide whether to keep y the
same or decrement it 3. Use a decision parameter to efficiently make this choice 4. Plot all 8
symmetric points for each point determined

3.2 Algorithm Pseudocode

Algorithm 1 Midpoint Circle Algorithm


1: procedure DrawCircle(xc , yc , r)
2: x←0
3: y←r
4: d←1−r ▷ Initial decision parameter
5: while x ≤ y do
6: PlotEightPoints(xc , yc , x, y)
7: if d < 0 then
8: d ← d + 2x + 3
9: else
10: d ← d + 2(x − y) + 5
11: y ←y−1
12: end if
13: x←x+1
14: end while
15: end procedure

2
4 Detailed Worked Examples
Example

Tracing Through a Simple Circle


Let’s manually trace the algorithm for a circle with radius 5 centered at the origin.
Setup:

• x = 0, y = 5

• Initial decision parameter: d = 1 − r = 1 − 5 = −4

Iteration 1:

• Plot eight points: (0, 5), (0, −5), (5, 0), (−5, 0), etc.

• Since d < 0: d = −4 + 2(0) + 3 = −1

• Increment x: x = 1

Iteration 2:

• Plot eight points: (1, 5), (1, −5), (5, 1), (−5, 1), etc.

• Since d < 0: d = −1 + 2(1) + 3 = 4

• Increment x: x = 2

Iteration 3:

• Plot eight points: (2, 5), (2, −5), (5, 2), (−5, 2), etc.

• Since d > 0: d = 4 + 2(2 − 5) + 5 = 4 − 6 + 5 = 3

• Decrement y: y = 4

• Increment x: x = 3

Iteration 4:

• Plot eight points: (3, 4), (3, −4), (4, 3), (−4, 3), etc.

• Since d > 0: d = 3 + 2(3 − 4) + 5 = 3 − 2 + 5 = 6

• Decrement y: y = 3

• Increment x: x = 4

Iteration 5:

• Plot eight points: (4, 3), (4, −3), (3, 4), (−3, 4), etc.

• Since d > 0: d = 6 + 2(4 − 3) + 5 = 6 + 2 + 5 = 13

• Decrement y: y = 2

• Increment x: x = 5

3
Example

[continued] Tracing Through a Simple Circle (continued)


After Iteration 5, we have x = 5 and y = 2. Now we check the loop condition: x ≤ y.
Since x = 5 and y = 2, and 5 > 2, the condition x ≤ y is false. Therefore, we exit the
loop and stop the algorithm at this point.

Note
It’s important to understand the stopping criteria in the algorithm. We continue
while x ≤ y, which means we stop when x > y. This ensures we’ve plotted
enough points to cover 1/8 of the circle (from 0° to 45°). Continuing beyond this
point would cause us to replot points that have already been generated through
symmetry.

The complete set of points from our algorithm is shown in the figure below:
y

Note how these points closely follow the mathematical circle (red dashed line). The
algorithm properly stops when x > y, which corresponds to approximately the 45° mark
on the circle.

4
Example

Circle with Different Center


Now, let’s see how to handle a circle with a different center point. We’ll draw a circle
with radius 3 centered at (2,3).
Strategy: The algorithm works the same way, except we add the center coordinates to
each point.
Setup:

• x = 0, y = 3

• Initial decision parameter: d = 1 − r = 1 − 3 = −2

Iteration 1:

• Plot eight points: (2 + 0, 3 + 3), (2 + 0, 3 − 3), etc. = (2, 6), (2, 0), etc.

• Since d < 0: d = −2 + 2(0) + 3 = 1

• Increment x: x = 1

Iteration 2:

• Plot eight points: (2 + 1, 3 + 3), (2 + 1, 3 − 3), etc. = (3, 6), (3, 0), etc.

• Since d > 0: d = 1 + 2(1 − 3) + 5 = 1 − 4 + 5 = 2

• Decrement y: y = 2

• Increment x: x = 2

Iteration 3:

• Plot eight points: (2 + 2, 3 + 2), (2 + 2, 3 − 2), etc. = (4, 5), (4, 1), etc.

• Since d > 0: d = 2 + 2(2 − 2) + 5 = 2 + 0 + 5 = 7

• Decrement y: y = 1

• Increment x: x = 3

After Iteration 3, we have x = 3 and y = 1. Since x > y (3 ¿ 1), the loop condition x ≤ y
is false, so we stop the algorithm.
The complete set of points can be plotted to visualize the circle centered at (2,3):

5
Example

[continued] Circle with Different Center (continued)


Here is the visualization of our circle with radius 3 centered at (2,3):
y

Center

Notice how the algorithm generates points that closely follow the mathematical circle (red
dashed line) by using the 8-way symmetry property. We only needed to calculate points
in one octant (from 0° to 45°), and then translated them all by the center coordinates
(2,3).

5 Coding the Algorithm


Now let’s implement the Midpoint Circle Algorithm in Python:
1 def midpoint_circle ( xc , yc , r ) :
2 """
3 Implementation of Midpoint Circle Algorithm
4
5 Parameters :
6 xc , yc - center coordinates
7 r - radius
8
9 Returns :
10 List of points (x , y ) on the circle circumference
11 """
12 points = []
13 x, y = 0, r
14 d = 1 - r # Initial decision parameter
15
16 # Plot first point in each octant
17 p l o t _ sy mmetr ic_p oints ( xc , yc , x , y , points )
18
19 # Continue until we reach the 45 - degree mark ( where x > y )
20 while x <= y :
21 if d < 0: # Choose E
22 d = d + 2* x + 3
23 x += 1
24 else : # Choose SE
25 d = d + 2*( x - y ) + 5
26 x += 1
27 y -= 1
28
29 p lo t_sy mmetr ic_p oints ( xc , yc , x , y , points )
30
31 return points
32
33 def p l o t _ symme tric _poi nts ( xc , yc , x , y , points ) :
34 """ Plot all 8 symmetric points for a circle """
35 points . append (( xc +x , yc + y ) ) # Octant 1
36 points . append (( xc +y , yc + x ) ) # Octant 2
37 points . append (( xc -y , yc + x ) ) # Octant 3
38 points . append (( xc -x , yc + y ) ) # Octant 4

6
39 points . append (( xc -x , yc - y ) ) # Octant 5
40 points . append (( xc -y , yc - x ) ) # Octant 6
41 points . append (( xc +y , yc - x ) ) # Octant 7
42 points . append (( xc +x , yc - y ) ) # Octant 8
Listing 1: Midpoint Circle Algorithm Implementation

7
6 Practice Exercises
Now it’s your turn to apply what you’ve learned. Work through these exercises:

Exercise
Manual Trace Exercise
Manually trace through the Midpoint Circle Algorithm for a circle with radius 4 centered
at the origin. Fill in the following table:

Iteration x y Decision Key Points


Start 0 4 -3 (0,4), (4,0), ...
1
2
3

Draw the resulting circle on a grid paper.

Exercise
Offcenter Circle Exercise
Using the Midpoint Circle Algorithm, calculate the pixel coordinates for a circle with
radius 3 centered at (4,2). Fill the table and draw the resulting circle.

Exercise
Algorithm Variation
The initial decision parameter is sometimes written as d = 5/4 − r.

• How does this change the algorithm?

• Trace through the first 3 iterations of a circle with radius 5 using this variant.

7 Conclusion
In this tutorial, we’ve explored the Midpoint Circle Algorithm in detail, working through con-
crete examples to solidify your understanding. The knowledge you’ve gained will be directly
applied in Lab 3, where you’ll implement these algorithms in OpenGL.
Key takeaways:

• Circle drawing algorithms exploit 8-way symmetry

• The Midpoint/Bresenham method uses efficient integer calculations

• The decision parameter guides pixel selection

• The stopping criteria x > y ensures we’ve calculated one octant (from 0° to 45°)

• Transferring these concepts to different centers is straightforward

In the upcoming lab, you’ll apply these concepts to create interactive circle-drawing appli-
cations using OpenGL.

You might also like