Chapter Three

Geometry and Line Generation

Cont..
 Chapter two Geometry and Line Generation
 Point and Lines
 Line Thickness and Line Style
 Circle drawing Algorithm
 Plotting General Curves
 Polygons and fill area primitives
 Text and Characters

2 Prepared By Haftom B. 10/31/2022

Graphics Primitives (Output Primitives) geometric primitives
 primitives are basic elements, such as lines, curves, and
polygons, which can be combined to create more complex
graphical images.
 All graphics packages construct pictures from basic building
blocks known as graphics primitives.
 Primitives that describe the geometry, or shape, of these
building blocks are known as geometric primitives.

3 Prepared By Haftom B. 10/31/2022

Cont..
 In computer graphics, we need to represent continuous
graphics objects using discrete pixels.
 This process is known as scan conversion.
 Every graphics system must transform the primitives like
lines, circles, and ellipses into a collection of pixels.

4 Prepared By Haftom B. 10/31/2022

Line Drawing Algorithms

 Lines are a very common primitive and will be supported by almost

all graphics packages.
 In addition, lines form the basis of more complex primitives such as
polylines (a connected sequence of straight-line segments) or
polygons (2-D objects formed by straight-line edges).
 Lines are normally represented by the two end-points of the line,
and points (x,y) along the line must satisfy the following slope-
intercept equation:

5
 Cont..
 y = m*x +c where m is the slope of the line and c is the y-intercept
 Or m is the slope or gradient of the line, and c is the coordinate at which the
line intercepts the y-axis.
 Given that the two endpoints of a line (x1, y1) and (x2, y2), we can
determine m & b by:
∆𝑦 𝑦2−𝑦1
m = = , b = y1 – mx1
∆𝑥 𝑥1−𝑥1

 Why do we need slop for?

 So that we can use it to determine the intervals.
 Is there undetermined Slop ? Yes /No If yes when ?
6
  These equations form the basis of the two line-drawing
algorithms described below:
DDA algorithm and
Brenseham's algorithm.

7 Prepared By Haftom B. 10/31/2022

 DDA Line-Drawing Algorithm
 The Digital Differential Analyser (DDA) algorithm operates by starting at one end-
point of the line, and then generate successive pixels until the second end-point is
reached.
 Therefore, first, we need to assign values for δx and δy.

8
 DDA Cont’d …

 Figure 1 – ‘Holes’ in a Line Drawn by Incrementing x and Computing the

Corresponding y-Coordinate
 The solution to this problem is to make sure that both δx and δy have values less
than or equal to one.
 To ensure this, we must first check the size of the line gradient. The conditions
are: If |m| ≤ 1:
 δx = 1
 δy = m
 If |m| > 1:
 δx = 1/m
 δy = 1

9
 DDA Cont’d…

 Once we have computed values for δx and δy, the basic DDA algorithm is:
 Start with (x0,y0)
 Find successive pixel positions by adding on (δx, δy) and rounding to the nearest
integer, i.e.
 xk+1 = xk + δx
 yk+1 = yk + δy
 For each position (xk,yk) computed, plot a line point at (round(xk),round(yk)), where
the round function will round to the nearest integer.
 Note that the actual pixel value used will be calculated by rounding to the nearest
integer, but we keep the real-valued location for calculating the next pixel position.
 DDA Cont’d…
 example of applying the DDA algorithm for drawing a straight-line segment.
 Given (10,10)(15,13) ( y end − y0 ) (13 − 10) 3
m = = = = 0.6
( xend − x0 ) (15 − 10) 5
 Now, because |m| ≤ 1, we compute δx and δy as follows:
δx = 1
δy = 0.6
 Using these values of δx and δy we can now start to plot line points:
 Start with (x0,y0) = (10,10) – colour this pixel
 Next, (x1,y1) = (10+1,10+0.6) = (11,10.6) – so we colour pixel (11,11)
 DDA Cont’d…

 Next, (x2,y2) = (11+1,10.6+0.6) = (12,11.2) – so we colour pixel (12,11)

 Next, (x3,y3) = (12+1,11.2+0.6) = (13,11.8) – so we colour pixel (13,12)
 Next, (x4,y4) = (13+1,11.8+0.6) = (14,12.4) – so we colour pixel (14,12)
 Next, (x5,y5) = (14+1,12.4+0.6) = (15,13) – so we colour pixel (15,13)
 We have now reached the end-point (xend, yend), so the algorithm terminates

Figure 2 - The Operation of the DDA Line-Drawing Algorithm

 DDA Cont’d…
 The DDA algorithm is simple and easy to implement, but it does
involve floating point operations to calculate each new point.

 Floating point operations are time-consuming when compared to

integer operations.
 Since line-drawing is a very common operation in computer
graphics, it would be nice if we could devise a faster algorithm which
uses integer operations only.
 The next section describes such an algorithm.
 Bresenham’s Line Drawing Algorithms

 Bresenham’s line-drawing algorithm provides significant improvements in

efficiency over the DDA algorithm.
 These improvements arise from the observation that for any given line, if we
know the previous pixel location, we only have a choice of 2 locations for the
next pixel.
 This concept is illustrated in Figure 3: given that we know (xk,yk) is a point on
the line, we know the next line point must be either pixel A or pixel B.
 Therefore we do not need to compute the actual floating-point location of the
‘true’ line point; we need only make a decision between pixels A and B.
Figure - Bresenham's Line-Drawing Algorithm
 Cont..
 Bresenham’s algorithm works as follows.
 First,we denote by dupper and dlower the distances between the centers of
pixels A and B and the ‘true’ line (see Figure 3).
 Using Eq. (1) the ‘true’ y-coordinate at xk+1 can be calculated as:
y = m( xk + 1) + c … ……………………… (6)
 Therefore we compute dlower and dupper as:
d lower = y − yk = m( xk + 1) + c − yk ……………………… (7)
……………………… (8)
 Now, we can decide which of pixels A and B to choose based on comparing the
values of dupper and dlower:
 We make this decision by first subtracting dupper from dlower:
…………………………………… (9)
 If the value of this expression is positive, we choose pixel A; otherwise we
choose pixel B.
 The question now is how we can compute this value efficiently.
 To do this, we define a decision variable pk for the kth step in the algorithm and
try to formulate pk so that it can be computed using only integer operations.
 To achieve this, we substitute (where Δx and Δy are the horizontal and vertical
separations of the two line end-points) and define pk as:
…………………………… (10)
 Where d is a constant that has the value . Note that the sign of pk will be the
same as the sign of (dlower – dupper), so if pk is positive we choose pixel A and
if it is negative we choose pixel B.
 In addition, pk can be computed using only integer calculations, making the
algorithm very fast compared to the DDA algorithm.
 An efficient incremental calculation makes Bresenham’s algorithm even faster.
(An incremental calculation means we calculate the next value of pk from the
last one.) Given that we know a value for pk, we can calculate pk+1 from Eq.
(10) by observing that:
 Always xk+1 = xk+1
 If pk < 0, then yk+1 = yk, otherwise yk+1 = yk+1
 Therefore we can define the incremental calculation as:
p k +1 = p k + 2y , if pk < 0 …………………………… (11)

p k +1= p + 2y − 2x

,if pk ≥ 0 ……………………………… (12)
k
 The initial value for the decision variable, p0, is calculated by substituting xk =
x0 and yk = y0 into Eq. (10), which gives the following simple expression:
 Summary
 To summarize, we can express Bresenham’s algorithm as follows:
• Plot the start-point of the line (x0,y0)
• Compute the first decision variable:
 For each k, starting with k=0:

If pk < 0:
Plot (xk+1,yk),
 Otherwise:
Plot (xk+1,yk+1),
Exercise
Plotting the line Given (10,10)(15,13)using Bresenham’s
algorithm:
First,compute the following values:
Δx = 5
Δy = 3
2Δy = 6
2Δy - 2Δx = -4
Plot (x0,y0) = (10,10)
 Iteration0:
 p0 ≥ 0, so
 Plot (x1,y1) = (x0+1,y0+1) = (11,11)

Iteration 1:
 p1 < 0, so
 Plot (x2,y2) = (x1+1,y1) = (12,11)

Iteration2:
p2 ≥ 0, so
Plot (x3,y3) = (x2+1,y2+1) = (13,12)
 Iteration 3:
p3 < 0, so
Plot (x4,y4) = (x3+1,y3) = (14,12)

 Iteration 4:
 p4 ≥ 0, so
 Plot (x5,y5) = (x4+1,y4+1) = (15,13)
 We have reached the end-point, so the algorithm terminates
 We can see that the algorithm plots exactly the same points as the DDA
algorithm but it computes those using only integer operations.
 OpenGL Line Functions for Line Thickness and Line Style

 We can draw straight-lines in OpenGL using the same glBegin … glEnd functions
that we saw for point-drawing.
 This time we specify that vertices should be interpreted as line end-points by using
the symbolic constant GL_LINES. For example, the following code:
glLineWidth(3.0); // to adject the line thickness
glBegin(GL_LINES); // for change the type of lines
glVertex2f(100.0, 200.0);
glVertex2f(150.0, 200.0);
glVertex2f(150.0, 250.0);
glVertex2f(200.0, 250.0);
glEnd();
The line will be drawn in the current drawing colour and with a width defined by
the argument of the function glLineWidth.
Two other symbolic constants allow us to draw slightly different types of
straight-line primitive: GL_LINE_STRIP and GL_LINE_LOOP.
The following example illustrates the difference between the three types of line
primitive.
 First we define 5 points as arrays of 2 Glint values.
Next, we define exactly the same vertices for each of the three types of line
primitive.
The images to the right show how the vertices will be interpreted by each
primitive.
void display(void){
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluOrtho2D(0.0, 340.0, 0.0, 340.0);//specifies the coordinate system OpenGL assumes
as it draws the
//final image and how the image gets mapped to the screen
glClearColor(1.0, 1.0, 1.0, 0.0); // white background
glClear(GL_COLOR_BUFFER_BIT); // Clear Screen
glColor3f(1,0,0); // red foreground
glBegin(GL_LINES);
glVertex2f(200,100);
glVertex2f(50,20);
glVertex2f(100,200);
glVertex2f(150,20);
glVertex2f(20,100);
glEnd();
glFlush(); // send all output to the display
}
void display(void){
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluOrtho2D(0.0, 340.0, 0.0, 340.0);//specifies the coordinate system OpenGL assumes
//as it draws the final image and how the image gets mapped to the screen
glClearColor(1.0, 1.0, 1.0, 0.0); // white background
glClear(GL_COLOR_BUFFER_BIT); // Clear Screen
glColor3f(0,0,0); // black foreground
glBegin(GL_LINE_STRIP);
glVertex2f(200,100);
glVertex2f(50,20);
glVertex2f(100,200);
glVertex2f(150,20);
glVertex2f(20,100);
glEnd();
glFlush(); // send all output to the display
}
void display(void){
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluOrtho2D(0.0, 340.0, 0.0, 340.0);//specifies the coordinate system OpenGL assumes
//as it draws thefinal image and how the image gets mapped to the screen
glClearColor(1.0, 1.0, 1.0, 0.0); // white background
glClear(GL_COLOR_BUFFER_BIT); // Clear Screen
glColor3f(0,0,1); // blue foreground
glBegin(GL_LINE_LOOP);
glVertex2f(200,100);
glVertex2f(50,20);
glVertex2f(100,200);
glVertex2f(150,20);
glVertex2f(20,100);
glEnd();
glFlush(); // send all output to the display
 We can see that GL_LINES treat the vertices as pairs of end-points.
 Lines are drawn separately and any extra vertices (i.e. a start-point with no end-
point) are ignored. GL_LINE_STRIP will create a connected polyline, in which each
vertex is joined to the one before it and after it.
 The first and last vertices are only joined to one other vertex.
 Finally, GL_LINE_LOOP is the same as GL_LINE_STRIP except that the last
point is joined to the first one to create a loop.

27
 Circle Drawing Algorithm
 Some graphics packages allow us to draw circle primitives.
 Before we examine algorithms for circle-drawing we will consider the
mathematical equations of a circle.
1. Cartesian coordinates we can write:
(x − x ) + ( y − y ) = r
c
2
c
2 2
2. Polar coordinates we can write:
 in polar coordinates we express a position in the coordinate
system as an angle θ and a distance r.

 where (xc,yc) is the centre of the circle.

29 Prepared By Haftom B. 10/31/2022

Example
 suppose we want to draw a circle with (xc,yc) = (5,5) and r = 10. We start
with θ =0o and compute x and y as:

30 Prepared By Haftom B. 10/31/2022

3. Midpoint Circle-Drawing Algorithm

 The midpoint algorithm takes advantage of the symmetry

property of circles to produce a more efficient algorithm for
drawing circles.
 The algorithm works in a similar way to Bresenham’s line
drawing algorithm, in that it formulates a decision variable
that can be computed using integer operations only.

31 Prepared By Haftom B. 10/31/2022

Algorithm

32 Prepared By Haftom B. 10/31/2022

Example

33 Prepared By Haftom B. 10/31/2022

Cont..

34 Prepared By Haftom B. 10/31/2022

35 Prepared By Haftom B. 10/31/2022
Character Primitives
 The final type of graphics primitive we will consider is the character
primitive.
 We can identify two different types of representation for characters:
1. Bitmap representation (or font), characters are stored as a grid of pixel
values
1. This is a simple representation that allows fast rendering of the
character. However, such representations are not easily scalable
2. Stroke, or outline, representation (see Figure 33(b)).
Using stroke representations characters are stored using line or curve
primitives.
1. To draw the character we must convert these primitives into pixel values
on the display.

36 Prepared By Haftom B. 10/31/2022

37 Prepared By Haftom B. 10/31/2022
 Polygons and Fill-Area Routines
 GL_POLYGON glBegin(GL_TRIANGLES);
 glBegin(GL_POLYGON); glVertex2iv(p1);
glVertex2iv(p1); glVertex2iv(p2);
glVertex2iv(p2); glVertex2iv(p6);
glVertex2iv(p3);
glVertex2iv(p3); glVertex2iv(p4);
glVertex2iv(p4); glVertex2iv(p5);
glVertex2iv(p5); glEnd()
glVertex2iv(p6);
glEnd();

38 Prepared By Haftom B. 10/31/2022

Cont..
 GL_QUADS.
glBegin(GL_QUADS);
glVertex2iv(p1);
glVertex2iv(p2);
glVertex2iv(p3);
glVertex2iv(p4);
glVertex2iv(p5);
glVertex2iv(p6);
glVertex2iv(p7);
glVertex2iv(p8);
glEnd();
39 Prepared By Haftom B. 10/31/2022
Chapter Summery
 Graphics Primitives (output primitives )
 Line drawing algorithms
 DDA
 Brenseham's algorithm
 OpenGL Functions and routines
 Circle drawing algorithms
 Cartesian coordinates
 Polar coordinates
 Midpoint cercle drawing algorithm
 Character generations
 Bitmap representation (or font),
 Stroke, or outline,
 Fill area primitives

40 Prepared By Haftom B. 10/31/2022