Computer Graphics

(CoSc3072)

JIMMA UNIVERSITY
JIMMA INSTITUTE OF TECHNOLOGY
FACILITY OF COMPUTING AND INFORMATICS

CHAPTER TWO –GRAPHICS PRIMITIVES

 Chapter Two- Graphics Primitives
2

Point Drawing in
OpenGL

Line Drawing
Algorithms

Circle Drawing
Algorithms

Fill-Area
Primitives

Computer Graphics- CoSc3072 02/11/25

 Scan Conversion in Computer Graphics
3

“When we represent regular objects in the form of

discrete pixels, it is called Scan Conversion.”
 Every graphics system must transform the primitives into
a collection of pixels. The scan conversion is also
called “Rasterization.”
 Each pixel in the graphical system has two states
either on or off
“The Scan Converting rate is a technique that is used in
video processing. In this technique,

Computer Graphics- CoSc3072 02/11/25

 Scan Conversion in Computer Graphics
4

we can change the horizontal and vertical frequency for

many different purposes.”
We use a scan converter to perform scan conversions.
We can define a line by its starting and ending points.
On the other hand, we can define a circle by its radius,
circle equation, and center point.
We can apply the conversion to the following objects.
Line, Point, Polygon , Rectangle , Filled Region, Arc,
Character, Sector , Ellipse

Computer Graphics- CoSc3072 02/11/25

 Pixel or pel:
5

 Pixel or The term pixel is a short form of the picture element. It is

also called a point or dot.
 It is the smallest picture unit accepted by display devices.
 A picture is constructed from hundreds of such pixels.
 Intensity – The intensity of a pixel defines the brightness of the
image that appears on the screen.
 Name or Address- The name or address of a pixel defines the
position of the pixel.
 We can define the size of any image with a total number of
horizontal pixels and the vertical pixels
 For Example- (512 x 512, 640 x 480, or 1024 x 768).

Computer Graphics- CoSc3072 02/11/25

 Points
6

A point is represented by a set of floating-

point numbers called a vertex.
All internal calculations are done as if vertices
are three-dimensional.
Vertices specified by the user as two-
dimensional (that is, with only x and y
coordinates) are assigned a z coordinate equal
to zero by OpenGL
Scan-Converting a point involves illuminating the pixel
that contains the point.

Computer Graphics- CoSc3072 02/11/25

 7
Point Drawing in OpenGL
Points are the most basic type of primitive.
 glPointSize(2.0); //set the size of the points in
Point Drawing in pixels
OpenGL  The default point size is 1 pixel.
 Points that have a size greater than one pixel are
Line Drawing drawn as squares .
Algorithms  glBegin(GL_POINTS); // draw 3 points

Circle Drawing glVertex2f(100.0, 200.0);

Algorithms glVertex2f(150.0, 200.0);
Fill-Area glVertex2f(150.0, 250.0);
Primitives glEnd();
 GL_POINTS : specify how the vertices in
between should be interpreted.
 There is only 3D in OpenGL.
 2D + constant Z coordinate (equal to

zero)
Computer Graphics- CoSc3072 02/11/25
 8
Lines
 Lines are a very common primitive and will be
supported by almost all graphics packages.
 Lines are normally represented by the two end-points.
Point Drawing in
OpenGL

Line Drawing
Algorithms

Circle Drawing
Algorithms

Fill-Area
Primitives

y end  y 0  c  y  mx
m 0 0
xend  x 0  δy = m.δx
δx = (1/m).δy
Computer Graphics- CoSc3072 02/11/25
 9 Digital Differential Analyzer
Algorithm
• The Digital Differential Analyzer helps
Point Drawing in us to interpolate the variables on an
OpenGL interval from one point to another point.
Line Drawing • We can use the digital Differential
Algorithms
Analyzer algorithm to perform
DDA Algorithm rasterization on polygons, lines, and
triangles
Bresenham’s • Is
Algorithm
an incremental scan conversion
method.
Circle Drawing
• Characterized by performing calculation
Algorithms
at each steps using results from the
Fill-Area
Primitives
previous steps.
Computer Graphics- CoSc3072 02/11/25
 10 Digital Differential Analyzer
Algorithm
Steps In DDA:
1.Get the inputs to the two end points of the line( i.e initial and
Point Drawing in end points).
OpenGL
2.Calculate the difference between the two end points.
Line Drawing dx=X1-X0 and dy=Y1-Y0
Algorithms 3. Based on the calculated difference in step 2, you need to
identify the number of steps to put pixels. If dx>dy, you need
DDA Algorithm more steps in x coordinate otherwise in y coordinate.
 if (absolute (dx)>absolute (dy) )

Bresenham’s steps= absolute(dx);

Algorithm else
steps= absolute(dy);
Circle Drawing 4. Calculate the increment in x and y coordinate.
Algorithms 5. For each position (xk,yk) plot a line point at
 (round(xk),round(yk))
Fill-Area
 The round function will round to the nearest integer.
Primitives

Computer Graphics- CoSc3072 02/11/25

 11 Digital Differential Analyzer
Algorithm
Notice:
DDA algorithm depends on the value of the slope m.
Point Drawing in Case 1: If m < 1
OpenGL Then x coordinate tends to the Unit interval.
xk+1 = xk + 1
Line Drawing
yk+1 = yk + m
Algorithms
Case 2: If m > 1
Then y coordinate tends to the Unit interval.
DDA Algorithm
yk+1 = yk + 1
xk+1 = xk + 1/m
Bresenham’s
Case 3: If m = 1
Algorithm
Then x and y coordinate tend to the Unit interval.
xk+1 = xk + 1
Circle Drawing
Algorithms yk+1 = yk + 1
We can calculate all intermediate points with the help of above three

Fill-Area discussed cases

Primitives

Computer Graphics- CoSc3072 02/11/25

 12
Digital Differential Analyzer
Algorithm Example1

Point Drawing in
 Given (x0,y0) = (10,10)
y end  y 0  (13  10) 3
m    0.6
OpenGL
 and (xend,yend) =
(15,13)
xend  x0  (15  10) 5
 Compute m
Line Drawing  If |m| ≤ 1:
Algorithms  δx = 1
δx = 1
 δy = m
δy = 0.6
DDA Algorithm  If |m| > 1:
 δx = 1/m

 δy = 1
Bresenham’s (xend,yend) = (15,13)
Algorithm  Paint (x0,y0)

Circle Drawing
Algorithms

Fill-Area
Primitives (x0,y0) = (10,10)

Computer Graphics- CoSc3072 02/11/25

 13
Digital Differential Analyzer
Algorithm Example1

Point Drawing in
 Given (x0,y0) = (10,10)
y end  y 0  (13  10) 3
m    0.6
OpenGL
 and (xend,yend) =
(15,13)
xend  x0  (15  10) 5
 Compute m
Line Drawing  If |m| ≤ 1:
Algorithms  δx = 1
δx = 1
 δy = m
δy = 0.6
DDA Algorithm  If |m| > 1:
 δx = 1/m

 δy = 1
Bresenham’s (xend,yend) = (15,13)
Algorithm  Paint (x0,y0)

Circle Drawing
Algorithms

Fill-Area
Primitives (x0,y0) = (10,10)

Computer Graphics- CoSc3072 02/11/25

 14
Digital Differential Analyzer
Algorithm Example1
 Paint (x0,y0) δx = 1
Point Drawing in  Find successive pixel δy = 0.6
OpenGL positions
 x
k+1 = (xk + δx)
Line Drawing (x1,y1) = (10+1,10+0.6)
 yk+1 = (yk + δy)
Algorithms = (11,10.6)
 For each position (xk,yk)
plot a line point at colour pixel (11,11)
DDA Algorithm  (round(x ),round(y ))
k k

Bresenham’s (xend,yend) = (15,13)

Algorithm

Circle Drawing
Algorithms

Fill-Area
Primitives (x0,y0) = (10,10)

Computer Graphics- CoSc3072 02/11/25

 15
Digital Differential Analyzer
Algorithm Example1
 Paint (x0,y0) δx = 1
Point Drawing in  Find successive pixel δy = 0.6
OpenGL positions
 x
k+1 = (xk + δx)
Line Drawing (x2,y2) = (11+1,10.6+0.6)
 yk+1 = (yk + δy)
Algorithms = (12,11.2)
 For each position (xk,yk)
plot a line point at colour pixel (12,11)
DDA Algorithm  (round(x ),round(y ))
k k

Bresenham’s (xend,yend) = (15,13)

Algorithm

Circle Drawing
Algorithms

Fill-Area
Primitives (x0,y0) = (10,10)

Computer Graphics- CoSc3072 02/11/25

 16
Digital Differential Analyzer
Algorithm Example1
 Paint (x0,y0) δx = 1
Point Drawing in  Find successive pixel δy = 0.6
OpenGL positions
 x
k+1 = (xk + δx)
Line Drawing (x3,y3) = (12+1,11.2+0.6)
 yk+1 = (yk + δy)
Algorithms = (13,11.8)
 For each position (xk,yk)
plot a line point at colour pixel (13,12)
DDA Algorithm  (round(x ),round(y ))
k k

Bresenham’s (xend,yend) = (15,13)

Algorithm

Circle Drawing
Algorithms

Fill-Area
Primitives (x0,y0) = (10,10)

Computer Graphics- CoSc3072 02/11/25

 17
Digital Differential Analyzer
Algorithm Example1
 Paint (x0,y0) δx = 1
Point Drawing in  Find successive pixel δy = 0.6
OpenGL positions
 x
k+1 = (xk + δx)
Line Drawing (x4,y4) = (13+1,11.8+0.6)
 yk+1 = (yk + δy)
Algorithms = (14,12.4)
 For each position (xk,yk)
plot a line point at colour pixel (14,12)
DDA Algorithm  (round(x ),round(y ))
k k

Bresenham’s (xend,yend) = (15,13)

Algorithm

Circle Drawing
Algorithms

Fill-Area
Primitives (x0,y0) = (10,10)

Computer Graphics- CoSc3072 02/11/25

 18
Digital Differential Analyzer
Algorithm Example1
 Paint (x0,y0)
 Find successive pixel positions
δx = 1
Point Drawing in  xk+1 = (xk + δx) δy = 0.6
 yk+1 = (yk + δy)
OpenGL  For each position (xk,yk) plot a line point at
 (round(xk),round(yk))

Line Drawing (x5,y5) = (14+1,12.4+0.6)

Algorithms = (15,13)

colour pixel (15,13)

DDA Algorithm
Figure - The Operation of the DDA Line-Draiwng Algorithm

Bresenham’s (xend,yend) = (15,13)

Algorithm

Circle Drawing
Algorithms

Fill-Area
Primitives (x0,y0) = (10,10)

Computer Graphics- CoSc3072 02/11/25

 19
Digital Differential Analyzer
Algorithm Example2

Point Drawing in
 Given (x0,y0) = (10,10)
m
yend  y0   (15  10)  5 1.25
OpenGL
 and (xend,yend) =
xend  x0  (14  10) 4
(14,15)
 Compute m
Line Drawing  δx = 0.8
If |m| ≤ 1:
Algorithms  δx = 1 δy = 1
 δy = m
DDA Algorithm 
(xend,yend) = (14,15)
If |m| > 1:
 δx = 1/m

 δy = 1
Bresenham’s
Algorithm  Paint (x0,y0)

Circle Drawing
Algorithms

Fill-Area
Primitives (x0,y0) = (10,10)

Computer Graphics- CoSc3072 02/11/25

 20
Digital Differential Analyzer
Algorithm Example2

Point Drawing in
 Given (x0,y0) = (10,10)
m
yend  y0   (15  10)  5
OpenGL
 and (xend,yend) =
xend  x0  (14  10) 4
(14,15)
 Compute m
Line Drawing  δx = 0.8
If |m| ≤ 1:
Algorithms  δx = 1 δy = 1
 δy = m
DDA Algorithm 
(xend,yend) = (14,15)
If |m| > 1:
 δx = 1/m

 δy = 1
Bresenham’s
Algorithm  Paint (x0,y0)

Circle Drawing
Algorithms

Fill-Area
Primitives (x0,y0) = (10,10)

Computer Graphics- CoSc3072 02/11/25

 21
Digital Differential Analyzer
Algorithm Example2
 Paint (x0,y0) δx = 0.8
Point Drawing in  Find successive pixel δy = 1
OpenGL positions
 x
k+1 = (xk + δx)
Line Drawing (x1,y1) = (10+0.8,10+1)
 yk+1 = (yk + δy)
Algorithms = (10.8,11)
 For each position (xk,yk)
plot a line point at colour pixel (11,11)
DDA Algorithm  (round(x ),round(y ))
k k (xend,yend) = (14,15)

Bresenham’s
Algorithm

Circle Drawing
Algorithms

Fill-Area
Primitives (x0,y0) = (10,10)

Computer Graphics- CoSc3072 02/11/25

 22
Digital Differential Analyzer
Algorithm Example2
 Paint (x0,y0) δx = 0.8
Point Drawing in  Find successive pixel δy = 1
OpenGL positions
 x
k+1 = (xk + δx)
Line Drawing (x2,y2) = (10.8+0.8,11+1)
 yk+1 = (yk + δy)
Algorithms = (11.6,12)
 For each position (xk,yk)
plot a line point at colour pixel (12,12)
DDA Algorithm  (round(x ),round(y ))
k k (xend,yend) = (14,15)

Bresenham’s
Algorithm

Circle Drawing
Algorithms

Fill-Area
Primitives (x0,y0) = (10,10)

Computer Graphics- CoSc3072 02/11/25

 23
Digital Differential Analyzer
Algorithm Example2
 Paint (x0,y0) δx = 0.8
Point Drawing in  Find successive pixel δy = 1
OpenGL positions
 x
k+1 = (xk + δx)
Line Drawing (x3,y3) = (11.6+0.8,12+1)
 yk+1 = (yk + δy)
Algorithms = (12.4,13)
 For each position (xk,yk)
plot a line point at colour pixel (12,13)
DDA Algorithm  (round(x ),round(y ))
k k
(xend,yend) = (14,15)

Bresenham’s
Algorithm

Circle Drawing
Algorithms

Fill-Area
Primitives (x0,y0) = (10,10)

Computer Graphics- CoSc3072 02/11/25

 24
Digital Differential Analyzer
Algorithm Example2
 Paint (x0,y0) δx = 0.8
Point Drawing in  Find successive pixel δy = 1
OpenGL positions
 x
k+1 = (xk + δx)
Line Drawing (x4,y4) = (12.4+0.8,13+1)
 yk+1 = (yk + δy)
Algorithms = (13.2,14)
 For each position (xk,yk)
plot a line point at colour pixel (13,14)
DDA Algorithm  (round(x ),round(y ))
k k
(xend,yend) = (14,15)

Bresenham’s
Algorithm

Circle Drawing
Algorithms

Fill-Area
Primitives (x0,y0) = (10,10)

Computer Graphics- CoSc3072 02/11/25

 25
Digital Differential Analyzer
Algorithm Example2
 Paint (x0,y0)
 Find successive pixel positions
δx = 0.8
Point Drawing in  xk+1 = (xk + δx) δy = 1
 yk+1 = (yk + δy)
OpenGL  For each position (xk,yk) plot a line point at
 (round(xk),round(yk))

Line Drawing (x5,y5) = (13.2+0.8,14+1)

Algorithms = (14,15)

colour pixel (14,15)

DDA Algorithm
(xend,yend) = (14,15)

Bresenham’s
Algorithm

Circle Drawing
Algorithms

Fill-Area
Primitives (x0,y0) = (10,10)
Computer Graphics- CoSc3072 02/11/25
 26
Digital Differential Analyzer
Algorithm Example2
 Paint (x0,y0)
 Find successive pixel positions δx = 0.8
Point Drawing in  xk+1 = (xk + δx) δy = 1
 yk+1 = (yk + δy)
OpenGL  For each position (xk,yk) plot a line point at
 (round(xk),round(yk))

Line Drawing (x5,y5) = (13.2+0.8,14+1)

Algorithms = (14,15)

colour pixel (14,15)

DDA Algorithm
(xend,yend) = (14,15)

Bresenham’s
Algorithm

Circle Drawing
Algorithms

Fill-Area
Primitives (x0,y0) = (10,10)

Computer Graphics- CoSc3072 02/11/25

 27
Digital Differential Analyzer
Algorithm
Exercise1
Point Drawing in  Consider the above examples and
OpenGL plotting the line using DDA
algorithm:
Line Drawing  Given (x0,y0) = (5,5) and (xend,yend) = (10,9)
Algorithms

Exercise2
DDA Algorithm
 Consider the above examples and
plotting the line using DDA
Bresenham’s algorithm:
Algorithm  Given (x0,y0) = (2,2) and (xend,yend) = (6,12)

Circle Drawing Exercise3

Algorithms  Write a fragment of OpenGL code to
draw three points in GLUT window?
Fill-Area  Given P1(50.0,100.0), P2(100.0,200.0) and
Primitives P3(200.0,100.0)

Computer Graphics- CoSc3072 02/11/25

 28 Bresenham’s Line-Drawing
Algorithm
•Given (x0,y0) and (xend,yend)
•Compute m
 |m| < 1
Point Drawing in
 Plot (x0,y0)
OpenGL
 Compute the first
Line Drawing decision variable:
Algorithms p 0 2y  x
 For each k, starting
DDA Algorithm with k=0:
 If p < 0:
k
Bresenham’s  Plot (xk+1,yk)
Algorithm
p k 1  p k  2y
Circle Drawing
Algorithms  Otherwise:
 Plot (x +1,y +1)
k k
Fill-Area p k 1  p k  2y  2x
Primitives

Computer Graphics- CoSc3072 02/11/25

 29 Bresenham’s Line-Drawing
Algorithm
•Given (x0,y0) and (xend,yend)
•Compute m
 |m| < 1  |m| ≥ 1
Point Drawing in
 Plot (x0,y0)  Plot (x0,y0)
OpenGL
 Compute the first  Compute the first
Line Drawing decision variable: decision variable:
Algorithms p 0 2y  x p0 2x  y
 For each k, starting  For each k, starting
DDA Algorithm with k=0: with k=0:
 If p < 0:  If p < 0:
k k
Bresenham’s  Plot (xk+1,yk)  Plot (xk,yk+1)
Algorithm
p k 1  p k  2y pk 1  pk  2x
Circle Drawing
Algorithms  Otherwise:  Otherwise:
 Plot (x +1,y +1)  Plot (x +1,y +1)
k k k k
Fill-Area p k 1  p k  2y  2x pk 1  pk  2x  2y
Primitives

Computer Graphics- CoSc3072 02/11/25

 30
Bresenham’s Line-Drawing
Algorithm
•Example Given (x0,y0) = (10,10) and (xend,yend) = (15,13)
Compute m
 |m| < 1 m = 0.6 < 1
Point Drawing in
 Plot (x0,y0)
OpenGL
 Compute the first
Line Drawing decision variable:
Algorithms p 0 2y  x

DDA Algorithm

Bresenham’s (xend,yend) = (15,13)

Algorithm

Circle Drawing
Algorithms

Fill-Area
Primitives (x0,y0) = (10,10)

Computer Graphics- CoSc3072 02/11/25

 Bresenham’s Line-Drawing
31
Algorithm
•Given (x0,y0) = (10,10) and (xend,yend) = (15,13)
•Compute m
 |m| < 1 m = 0.6 < 1
Point Drawing in
 Plot (x0,y0) Δx =5
OpenGL
Δy = 3
 Compute the first
2Δy = 6
Line Drawing decision variable: 2Δy - 2Δx = -4
Algorithms p 0 2y  x

DDA Algorithm p 0 2y  x 2 3  5 1

Bresenham’s (xend,yend) = (15,13)
Algorithm

Circle Drawing
Algorithms

Fill-Area
Primitives (x0,y0) = (10,10)

Computer Graphics- CoSc3072 02/11/25

 32 Bresenham’s Line-Drawing
Algorithm
m = 0.6 < 1
 |m| < 1 Δx = 5 Δy = 3 2Δy = 6
Point Drawing in 2Δy - 2Δx = -4
 Plot (x0,y0)
OpenGL p0 =1
 For each k, starting
p0 ≥ 0, so
Line Drawing with k=0: Plot (x1,y1) = (x0+1,y0+1) =
Algorithms  If p < 0:
k (11,11)
 Plot (xk+1,yk) p1  p0  2y  2x
DDA Algorithm
1  4  3
p k 1  p k  2y
Bresenham’s (xend,yend) = (15,13)
Algorithm
 Otherwise:
 Plot (x +1,y +1)
k k

Circle Drawing p k 1  p k  2y  2x

Algorithms

Fill-Area
Primitives (x0,y0) = (10,10)

Computer Graphics- CoSc3072 02/11/25

 33 Bresenham’s Line-Drawing
Algorithm
m = 0.6 < 1
 |m| < 1 Δx = 5 Δy = 3 2Δy = 6
Point Drawing in 2Δy - 2Δx = -4
 Plot (x0,y0)
OpenGL
 For each k, starting p1 = -3
Line Drawing with k=0: p1 < 0, so
Algorithms  If p < 0:
Plot (x2,y2) = (x1+1,y1) =
k
(12,11)
 Plot (xk+1,yk) p2  p1  2y
DDA Algorithm
p k 1  p k  2y  3  6 3
Bresenham’s (xend,yend) = (15,13)
Algorithm
 Otherwise:
 Plot (x +1,y +1)
k k

Circle Drawing p k 1  p k  2y  2x

Algorithms

Fill-Area
Primitives (x0,y0) = (10,10)

Computer Graphics- CoSc3072 02/11/25

 34 Bresenham’s Line-Drawing
Algorithm
m = 0.6 < 1
 |m| < 1 Δx = 5 Δy = 3 2Δy = 6
Point Drawing in 2Δy - 2Δx = -4
 Plot (x0,y0)
OpenGL p2 =3
 For each k, starting
p2 ≥ 0, so
Line Drawing with k=0:
Algorithms Plot (x3,y3) = (x2+1,y2+1) =
 If p < 0:
k (13,12)
 Plot (xk+1,yk) p3  p2  2y  2x
DDA Algorithm
p k 1  p k  2y 3  4  1

Bresenham’s (xend,yend) = (15,13)

Algorithm
 Otherwise:
 Plot (x +1,y +1)
k k

Circle Drawing p k 1  p k  2y  2x

Algorithms

Fill-Area
Primitives (x0,y0) = (10,10)

Computer Graphics- CoSc3072 02/11/25

 35 Bresenham’s Line-Drawing
Algorithm
m = 0.6 < 1
 |m| < 1 Δx = 5 Δy = 3 2Δy = 6
Point Drawing in 2Δy - 2Δx = -4
 Plot (x0,y0)
OpenGL p3 = -1
 For each k, starting
p3 < 0, so
Line Drawing with k=0:
Algorithms Plot (x4,y4) = (x3+1,y3) =
 If p < 0:
k (14,12)
 Plot (xk+1,yk) p4  p3  2y
DDA Algorithm
p k 1  p k  2y  1  6 5
Bresenham’s (xend,yend) = (15,13)
Algorithm
 Otherwise:
 Plot (x +1,y +1)
k k

Circle Drawing p k 1  p k  2y  2x

Algorithms

Fill-Area
Primitives (x0,y0) = (10,10)

Computer Graphics- CoSc3072 02/11/25

 36 Bresenham’s Line-Drawing
Algorithm
m = 0.6 < 1
 |m| < 1 Δx = 5 Δy = 3 2Δy = 6
Point Drawing in 2Δy - 2Δx = -4
 Plot (x0,y0)
OpenGL
 For each k, starting p4 =5,
Line Drawing with k=0: p4 ≥ 0, so
Algorithms  If p < 0:
Plot (x5,y5) = (x4+1,y4+1) =
k
(15,13)
 Plot (xk+1,yk)
DDA Algorithm
p k 1  p k  2y
Bresenham’s (xend,yend) = (15,13)
Algorithm
 Otherwise:
 Plot (x +1,y +1)
k k

Circle Drawing p k 1  p k  2y  2x

Algorithms

Fill-Area
Primitives (x0,y0) = (10,10)

Computer Graphics- CoSc3072 02/11/25

 37 Bresenham’s Line-Drawing
Algorithm
m = 0.6 < 1
 |m| < 1 Δx = 5 Δy = 3 2Δy = 6
Point Drawing in 2Δy - 2Δx = -4
 Plot (x0,y0)
OpenGL
 For each k, starting p4 =5,
Line Drawing with k=0: p4 ≥ 0, so
Algorithms  If p < 0:
Plot (x5,y5) = (x4+1,y4+1) =
k
(15,13)
 Plot (xk+1,yk)
DDA Algorithm
p k 1  p k  2y
Bresenham’s (xend,yend) = (15,13)
Algorithm
 Otherwise:
 Plot (x +1,y +1)
k k

Circle Drawing p k 1  p k  2y  2x

Algorithms

Fill-Area
Primitives (x0,y0) = (10,10)

Computer Graphics- CoSc3072 02/11/25

 38
Bresenham’s vs. DDA
Line Drawing Algorithms
Point Drawing in
OpenGL  They plot the same pixels.

Line Drawing  Bresenham’s algorithm use only

Algorithms integer operations.
 Bresenham’s algorithm is more
DDA Algorithm
efficient than DDA.
Bresenham’s  Bresenham’s algorithm
Algorithm preferable for line drawing than
Circle Drawing
DDA in computer Graphics.
Algorithms

Fill-Area
Primitives

Computer Graphics- CoSc3072 02/11/25

 39
OpenGL Line Drawing
•GL_LINES : specify that vertices should be
Point Drawing in interpreted as line end-points.
OpenGL •glLineWidth(3.0); //set the width of the line

Line Drawing •For example, the following code will draw two
Algorithms
separate line segments:
•One line from (100,200) to (150,200)
DDA Algorithm •Another line from (150,250) to (200,250)
glLineWidth(3.0);
Bresenham’s glBegin(GL_LINES);
Algorithm glVertex2f(100.0, 200.0);
glVertex2f(150.0, 200.0);
Circle Drawing glVertex2f(150.0, 250.0);
Algorithms glVertex2f(200.0, 250.0);
glEnd();
Fill-Area
Primitives

Computer Graphics- CoSc3072 02/11/25

 OpenGL Data Types
40

Computer Graphics- CoSc3072 02/11/25

 Points, Lines and Polygons
41

Computer Graphics- CoSc3072 02/11/25

 Points, Lines and Polygons
42

Computer Graphics- CoSc3072 02/11/25

 43
OpenGL Line Drawing
Example
•GL_LINES : specify that vertices should be interpreted as line end-points.
Point Drawing in •glLineWidth(3.0); //set the width of the line
OpenGL GLint p1[] = {200,100}; GLint p2[] = {50,0};
GLint p3[] = {100,200}; GLint p4[] = {150,0};
Line Drawing GLint p5[] = {0,100};

Algorithms glBegin(GL_LINES);
glVertex2iv(p1);
glVertex2iv(p2);
DDA Algorithm glVertex2iv(p3);
glVertex2iv(p4);
glVertex2iv(p5);
Bresenham’s glEnd(); (GL_LINES)
Algorithm

Circle Drawing
Algorithms

Fill-Area (GL_LINE_LOOP)
(GL_LINE_STRIP)
Primitives

Computer Graphics- CoSc3072 02/11/25

 44
Circle Drawing Algorithms
Circle
Point Drawing in
OpenGL

Line Drawing
Algorithms

Circle Drawing
Algorithms

Basic Algorithms

Midpoint
Algorithms
 We will examine a number of approaches to plotting
Fill-Area points on a circle, culminating in the most efficient
Primitives algorithm: the midpoint algorithm.

Computer Graphics- CoSc3072 02/11/25

 45
Circle Drawing Algorithms
1. Plotting Points Using Cartesian Coordinates
Point Drawing in  Incrimenting x and computing y
OpenGL
y  yc  r 2  x  xc 
2
Line Drawing
Algorithms 2. Plotting Points Using Polar Coordinates
 The radius r will be constant and only
Circle Drawing
Algorithms changing θ
 Compute x and y
x  xc  r cos  y  yc  r sin 
Basic Algorithms
 More efficient
Midpoint than Cartesian
Algorithms one.
 Even more
Fill-Area
efficient with a
Primitives
little cost in
Computer Graphics- CoSc3072 quality. 02/11/25
 46
Circle Drawing Algorithms
3. Plotting Points Using Cartesian Coordinates
and Symmetry of Circles
Point Drawing in
OpenGL

Line Drawing
Algorithms

Circle Drawing
Algorithms

Basic Algorithms

 Generates extra points by re-

Midpoint
Algorithms
arrangment
 Need only compition for one octant of
Fill-Area the circle
Primitives  Still have square root operations and
Computer Graphics- CoSc3072 trigonometric calculations 02/11/25
 47 4. Midpoint Circle Drawing
Algorithm
 Given the center and radius
r
Point Drawing in  Plot the start-point of the
OpenGL circle (x0,y0) = (xc,r)
 Compute the first decision
Line Drawing
Algorithms variable: p0 1  r

Circle Drawing  For each k, starting with

Algorithms k=0:
If pk < 0:
Plot (xk+1,yk)
Basic Algorithms pk 1  pk  2 xk 1  1
Midpoint Otherwise:
Algorithms Plot (xk+1,yk-1)
Fill-Area
pk 1  pk  2 xk 1  1  2 yk 1
Primitives

Computer Graphics- CoSc3072 02/11/25

 48 Midpoint Algorithm
Example
 Given the center (0,0) and radius r = 10
 Plot the start-point of the circle (x0,y0) = (xc,r) = (0,10)
Point Drawing in  Compute the first decision variable:
OpenGL
p0 1  r
Line Drawing
Algorithms (10,10)

Circle Drawing p0 = -9
Algorithms

Basic Algorithms

Midpoint
Algorithms

Fill-Area
Primitives
(0,0)
Computer Graphics- CoSc3072 02/11/25
 49 Midpoint Algorithm
Example
p0 < 0,
Point Drawing in
Plot (x1,y1) = (x0+1,y0) = (1,10)
OpenGL
p1  p0  2 x1  1   9  3   6
Line Drawing
Algorithms (10,10)

Circle Drawing p0 = -9
Algorithms

Basic Algorithms

Midpoint
Algorithms

Fill-Area
Primitives
(0,0)
Computer Graphics- CoSc3072 02/11/25
 50 Midpoint Algorithm
Example
p1 < 0,
Plot (x2,y2) = (x1+1,y1) = (2,10)
Point Drawing in
OpenGL p 2  p1  2 x 2  1  6  5  1
Line Drawing
Algorithms (10,10)

Circle Drawing p1 = -6
Algorithms

Basic Algorithms

Midpoint
Algorithms

Fill-Area
Primitives
(0,0)
Computer Graphics- CoSc3072 02/11/25
 51 Midpoint Algorithm
Example
p2 < 0,
Plot (x3,y3) = (x2+1,y2) = (3,10)
Point Drawing in
OpenGL p 3  p 2  2 x 3  1   1  7 6
Line Drawing
Algorithms (10,10)

Circle Drawing p2 = -1
Algorithms

Basic Algorithms

Midpoint
Algorithms

Fill-Area
Primitives
(0,0)
Computer Graphics- CoSc3072 02/11/25
 52 Midpoint Algorithm
Example
p3 ≥ 0
Plot (x4,y4) = (x3+1,y3-1) = (4,9)
Point Drawing in
OpenGL p 4  p 3  2 x 4  1  2 y 4 6  9   3
Line Drawing
Algorithms (10,10)

Circle Drawing p3 = 6
Algorithms

Basic Algorithms

Midpoint
Algorithms

Fill-Area
Primitives
(0,0)
Computer Graphics- CoSc3072 02/11/25
 53 Midpoint Algorithm
Example
p4 < 0,
Plot (x5,y5) = (x4+1,y4) = (5,9)
Point Drawing in
OpenGL p5  p 4  2 x5  1  3  11 8
Line Drawing
Algorithms (10,10)

Circle Drawing p4 = -3
Algorithms

Basic Algorithms

Midpoint
Algorithms

Fill-Area
Primitives
(0,0)
Computer Graphics- CoSc3072 02/11/25
 54 Midpoint Algorithm
Example
p5 ≥ 0,
Plot (x6,y6) = (x5+1,y5-1) = (6,8)
Point Drawing in
OpenGL p6  p5  2 x6  1  2 y 6 8  3 5
Line Drawing
Algorithms (10,10)

Circle Drawing p5 = 8
Algorithms

Basic Algorithms

Midpoint
Algorithms

Fill-Area
Primitives
(0,0)
Computer Graphics- CoSc3072 02/11/25
 55 Midpoint Algorithm
Example
p6 ≥ 0,
Plot (x7,y7) = (x6+1,y6-1) = (7,7)
Point Drawing in
OpenGL p7  p6  2 x7  1  2 y7 19  13 6
Line Drawing
Algorithms (10,10)

Circle Drawing p6 = 5
Algorithms

Basic Algorithms

Midpoint
Algorithms

Fill-Area
Primitives
(0,0)
Computer Graphics- CoSc3072 02/11/25
 56 Midpoint Algorithm
Example
p7 ≥ 0,
Plot (x8,y8) = (x7+1,y7-1) = (8,6)
Point Drawing in
OpenGL p8  p7  2 x8  1  2 y8 22  11 11
Line Drawing
Algorithms (10,10)

Circle Drawing p7 = 6
Algorithms

Basic Algorithms

Midpoint
Algorithms

Fill-Area
Primitives
(0,0)
Computer Graphics- CoSc3072 02/11/25
 57 Midpoint Algorithm
Example
p8 ≥ 0,
Plot (x9,y9) = (x8+1,y8-1) = (9,5)
Point Drawing in
OpenGL p9  p8  2 x9  1  2 y9 29  9 20
Line Drawing
Algorithms (10,10)

Circle Drawing p8 = 11
Algorithms

Basic Algorithms

Midpoint
Algorithms

Fill-Area
Primitives
(0,0)
Computer Graphics- CoSc3072 02/11/25
 58 Midpoint Algorithm
Example
p9 ≥ 0,
Plot (x10,y10) = (x9+1,y9-1) = (10,4)
Point Drawing in
OpenGL

Line Drawing
Algorithms (10,10)

Circle Drawing p9 = 20
Algorithms

Basic Algorithms

Midpoint
Algorithms

Fill-Area
Primitives
(0,0)
Computer Graphics- CoSc3072 02/11/25
 59
Bresenham’s Line-Drawing
Algorithm
Exercise Given (x0,y0) = (10,10) and (xend,yend) = (14,15)
Compute m
 |m| ≥ 1 m = 1.25 ≥ 1
Point Drawing in
 Plot (x0,y0)
OpenGL
 Compute the first
Line Drawing decision variable:
Algorithms p0 2x  y

DDA Algorithm
(xend,yend) = (14,15)
Exercise4
Bresenham’s  Consider the above
Algorithm
examples and plotting the
line using Bresenham’s
Circle Drawing
algorithm:
Algorithms
 Given (x0,y0) = (10,10) and

Fill-Area (xend,yend) = (14,15)

Primitives (x0,y0) = (10,10)
Computer Graphics- CoSc3072 02/11/25
 60 Midpoint Algorithm
Example
 Given the center (0,0) and radius r = 5
 Plot the start-point of the circle (x0,y0) = (xc,r) = (0,5)
Point Drawing in  Compute the first decision variable:
OpenGL
p0 1  r
Line Drawing
Algorithms (5,5)

Circle Drawing P = -4
Algorithms Exercise5
 Consider the above
Basic Algorithms example and express the
midpoint circle-drawing
algorithm for a circle
Midpoint centred at the origin.
Algorithms
(0,0)  Given the center (0,0)
Fill-Area and radius r = 5
Primitives

Computer Graphics- CoSc3072 02/11/25

 61 OpenGL Circle
Drawing
1. Routine for Wireframe Rendering
Point Drawing in glutWireSphere(GLdouble radius,GLint nSlices, GLint nStacks);
2. Routine for Solid Rendering
OpenGL
glutSolidSphere(GLdouble radius, GLint nSlices, GLint nStacks);
ARGUMENTS
Line Drawing  radius - The radius of the Sphere / Circle.
Algorithms  nSlices – Number of Slices (Similar to lines of longitude).
 nStacks – Number of Stacks (Similar to lines of latitude).
Circle Drawing Example1:
Algorithms glutWireSphere(0.5, 50, 50); //draw Wire Sphere / Circle

Basic Algorithms
Exercise6
Midpoint  Consider the above
Algorithms example and create a
OpenGL Circle solid sphere / circle with a
Drawing radius of 1 units.
Fill-Area
Primitives
Computer Graphics- CoSc3072 02/11/25
Any Question?