Computer Graphics Tutorial 2
Computer Graphics Tutorial 2
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.
(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)
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
2
4 Detailed Worked Examples
Example
• x = 0, y = 5
Iteration 1:
• Plot eight points: (0, 5), (0, −5), (5, 0), (−5, 0), etc.
• Increment x: x = 1
Iteration 2:
• Plot eight points: (1, 5), (1, −5), (5, 1), (−5, 1), etc.
• Increment x: x = 2
Iteration 3:
• Plot eight points: (2, 5), (2, −5), (5, 2), (−5, 2), etc.
• Decrement y: y = 4
• Increment x: x = 3
Iteration 4:
• Plot eight points: (3, 4), (3, −4), (4, 3), (−4, 3), etc.
• Decrement y: y = 3
• Increment x: x = 4
Iteration 5:
• Plot eight points: (4, 3), (4, −3), (3, 4), (−3, 4), etc.
• Decrement y: y = 2
• Increment x: x = 5
3
Example
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
• x = 0, y = 3
Iteration 1:
• Plot eight points: (2 + 0, 3 + 3), (2 + 0, 3 − 3), etc. = (2, 6), (2, 0), etc.
• Increment x: x = 1
Iteration 2:
• Plot eight points: (2 + 1, 3 + 3), (2 + 1, 3 − 3), etc. = (3, 6), (3, 0), etc.
• 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.
• 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
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).
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:
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.
• 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:
• The stopping criteria x > y ensures we’ve calculated one octant (from 0° to 45°)
In the upcoming lab, you’ll apply these concepts to create interactive circle-drawing appli-
cations using OpenGL.