1

Graphics output
primitive
Primitive graphic objects

Computer-generated images are produced

using primitive graphic objects such as:
 Points
 Straight lines
 Circles
Line Drawing

Many computer-generated pictures are

composed of straight-line segments.
A line segment is displayed by turning on a
set of adjacent pixels.
In order to draw a line, it is necessary to
determine which pixels lie nearest the line
and provide the best approximation to the
desired line.
The line drawing routine should be accurate,
fast, and easy to implement.
The Problem of Scan
Conversion
A line segment is defined by the
coordinate positions of the line
endpoints.
We have a line with the endpoints (2,2)
and (8,7) and we want to draw this line
on a pixel based display.
How do we choose
which pixels to
turn on?
Slope-Intercept Line Equation
A line segment in a scene is defined by the
coordinate positions of the line endpoints. The
starting point is (Xstart, Ystart) and the
ending point is (Xend, Yend).
Slope-Intercept Line Equation
Line Equation is defined as:
y=mx+b
Where m is the slope of the line, and defined as the
change in y values divided by the change in x values:
Yend –
m Ystart
b is the y-intercept.=Recall
Xendthat– the y-intercept is the line’s
y value when x equals zero.
Xstart
For example, the line defined by equation y=5x+3 the y-
intercept is b=3.
Slope-Intercept Line
Equation
The y-intercept can be calculated by the
following equation in terms of the coordinate
of the starting points.
b = Ystart – m Xstart
The y-intercept can also be calculated by the
following equation in terms of the coordinate
of the ending points.
b = Yend – m Xend
Slope-Intercept Line
Equation
The slope of a line (m) is defined by its start
and end coordinates. The diagram below
shows some examples of lines and their
slopes, in all cases b=0.
Horizontal Line Drawing Algorithm

The screen coordinates of the points on a

horizontal Line are obtained by keeping the
value of y constant and repeatedly
incrementing the x value by one unit.

horizontal line with

starting point (0,4)
and ending point
(8,4) on a pixel
based display
Horizontal Line Drawing
Algorithm
The following code can be used to draw a
horizontal line from (Xstart, Y) to (Xend, Y),
where Xstart  Xend

x = Xstart
y=Y
Next: Set pixel (x, y) with desired color
x=x+1
If x  Xend then go to Next
End
Vertical Line Drawing
Algorithm
The screen coordinates of the points on a
Vertical Line are obtained by keeping the
value of x constant and repeatedly
incrementing the y value by one unit.

a vertical line with

starting point (4,0)
and ending point
(4,8) on a
pixelbased display.
Vertical Line Drawing
Algorithm
The following code can be used to draw a
vertical line from (X, Ystart) to (X, Yend),
where Ystart  Yend

x=X
y = Ystart
Next: Set pixel (x, y) with desired color
y = y+ 1
If y  Yend then go to Next
End
Diagonal Line Drawing Algorithm
(m=1)
To draw a diagonal line with a slope equals
+1 (m=1), we need only repeatedly
increment by one unit both the x and y
values from the starting to the ending pixels.

a diagonal line
(m=1) with starting
point (2,2) and
ending point (7,7)
on a pixel based
display
14
Diagonal Line Drawing Algorithm
(m=1)The following code can be used to draw a diagonal
line from (Xstart, Ystart) to (Xend, Yend), where
Xstart  Xend and Ystart  Yend

x = Xstart
y = Ystart
Next: Set pixel (x, y) with desired color
y = y+ 1
x=x+1
If x  Xend then go to Next
End 15
Diagonal Line Drawing Algorithm
(m=-1)
To draw a diagonal line with a slope equals –1
(m=-1), we need only repeatedly increment
by one unit the x and decrementing by one
unit the y values from the starting to the
ending pixels.
a diagonal line (m=-
1) with starting
point (2,7) and
ending point (7,2)
on a pixel based
display.
16
Diagonal Line Drawing Algorithm
(m=-1)
The following code can be used to draw a
diagonal line from (Xstart, Ystart) to (Xend,
Yend), where Xstart  Xend and Ystart 
Yend

x = Xstart
y = Ystart
Next: Set pixel (x, y) with desired color
y=y– 1
x=x+1
If x  Xend then go to Next
17
End
Arbitrary Lines Drawing
Algorithm
Drawing lines with arbitrary slope creates
several problems.
 Direct Line Drawing Algorithm
 Simple Digital Differential Analyzer
(simple
DDA) Line Drawing Algorithm
 Bresenham ’s Line Drawing Algorithm

18
Direct Line Drawing
Algorithm
Perhaps the most natural method of generating a
straight line is to use its equation. First we calculate
the slope (m) and the y-intercept (b) using these
equations:
Yend –
m Ystart
= Xend –
b = Ystart – m Xstart or b = Yend – m Xend
Xstart
We then draw the line by incrementing the x value
one unit from (Xstart, Ystart) to (Xend, Yend) and at
each step solve for the corresponding y value. For
non-integer y value, we must first determine the
nearest integer coordinate. 19
Direct Line Drawing
Algorithm
The following code can be used to draw a line
from (Xstart, Ystart) to (Xend, Yend), where
Xstart  Xend
x = Xstart
y = Ystart
m= (Yend-Ystart)/(Xend-Xstart)
b= Ystart – m Xstart
Next: Set pixel (x, Round(y)) with desired color
x= x + 1
y = mx + b
If x  Xend then go to Next
20
End
Direct Line Drawing
Algorithm
Note that: the Round function is used to
obtain an integer coordinate value.
There are two fundamental problems with
this method:
The first problem is the computational time
required to draw the line. On many computer
systems the operations of multiplication and
division can take from 50 to 200 times longer
to perform than an addition.

21
Direct Line Drawing
Algorithm
a division operation used to calculate the slop
(m)
 a multiplication operation used to calculate b
 There are (Xend-Xstart+1) multiplication
operations used to calculate the y value
The second problem concerns lines with a slop
whose absolute value is greater than 1 (m > 1).
These lines will be near the vertical. Using the
direct method, the displayed lines will have gaps
between plotted points. 22
Direct Line Drawing
Algorithm
The following example illustrates this problem. We
will use the direct method to draw a line with
starting point (1,1) and ending point (3,6) on a pixel
based display.

Yend – 6–1 5
Ystart
m= = =
Xend – 3–1 2
Xstart
23
Direct Line Drawing
Algorithm

Round(
x y
y)
1 1 1
(5/2)*2-(3/2) =
2 4
7/2=3.5
(5/2)*3-(3/2) = 12/2
3 6
=6

24
Direct Line Drawing
Algorithm
There are several methods of correcting both
problems.
 Performing incremental calculations at each
step based on the previous step can eliminate
repeated multiplication.
 The second problem can be resolved by
incrementing y by one unit and solving the
straight line equation for x when absolute value of
the slope is greater than 1 (abs(m) > 1).

25
Simple (DDA) Line Drawing Algorithm

To illustrate the idea of DDA algorithm, we still want

to draw the line segment with endpoints (Xstart,
Ystart) and (Xend, Yend) having slope :
Yend –
m Ystart
= Xend –
Any two consecutive points (x1, y1), (x2, y2)
lying on this lineXstart
satisfies the equation:
y2 –
y1 Equation
= m
x2 – 1
26
x1
Simple DDA Line Drawing Algorithm

The algorithm is divided into two cases that depend on

the absolute value of the slope of the line. Note that:
 We should test the line endpoints to ensure that the line
is neither horizontal (Xstart = Xend) nor vertical (Ystart
=Yend). If the line is horizontal use the horizontal line
drawing algorithm and use the vertical line drawing
algorithm when it is vertical.
 The starting and ending points of the line are plotted
separately since these values are known from the given
data.
 In the two cases below the computed incremental
values for y2 and x2 may not be integers. The Round
27
function must be used to obtain an integer coordinate
Simple DDA Line Drawing
Algorithm
Case 1: For abs(m) < 1 and Xstart < Xend,
we generate the line by incrementing the previous
x value one unit until Xend is reached and then
solve for y. if Xstart > Xend, swap the two
endpoints. Thus for these consecutive points:
x2 = x1 + 1 or x2 – x1 = 1
Substituting this difference into equation 1 yields:
(y2 – y1)/1= m or y2 = y1 + m Equation 2

28
Simple DDA Line Drawing
Algorithm
Equation 2 enables us to calculate successive
values of y from the previous value by replacing
the repeated multiplication with floating point
addition.
This method of obtaining the current value by
adding a constant to the previous value is an
example of incremental calculation. Using
knowledge of one point to compute the next is a
great time saving technique.
The following code can be used to draw a line from
(Xstart, Ystart) to (Xend, Yend) using simple DDA29
Simple DDA Line Drawing Algorithm
m = (Yend-Ystart) / (Xend-Xstart)
If (abs(m)<1 and Xstart>Xend) then
Swap endpoints Xstart  Xend and Ystart  Yend
end if
Set pixel (Xstart, Ystart) with desired color
If abs(m) < 1 then
y = Ystart
x = Xstart + 1
Next: y = y + m
Set pixel (x, Round(y)) with desired color
x=x+1
If x  Xend-1 then go to Next
endif
Set pixel (Xend, Yend) with desired color 30
Simple DDA Line Drawing
Algorithm
We will use the simple DDA algorithm to draw a line with
starting point (2,0) and ending point (7,4) on a pixel based
display. Firstly, we compute the slope m: m
=(Yend–Ystart)/(Xend–Xstart)=(4–0)/(7–2)=4/5 = 0.8
y = Ystart = 0 x = Xstart + 1 = 2 + 1 =3
x y Round(y)
2 0
y=y+m=0 +
3 1
0.8=0.8
y = y + m = 0.8 +
4 2
0.8=1.6
y = y + m = 1.6 +
5 2
0.8=2.4 31
Simple DDA Line Drawing Algorithm

32
Simple DDA Line Drawing
Algorithm
Case 2: For abs(m) > 1 and Ystart < Yend,
we generate the line by reversing the above
procedure. Namely, we increment the y value
one unit until Yend is reached and then solve
for x. if Ystart > Yend, swap the two
endpoints. For these consecutive points:
y2 = y1 + 1 or y2 – y1 = 1
Substituting this difference into equation 1
yields:
1/(x2 – x1) = m or x2 = x1 + 1/m 33
Simple DDA Line Drawing
Algorithm

Equation 3 is the desired incremental line

equation.
The following code can be used to draw a line
from (Xstart, Ystart) to (Xend, Yend) using
simple DDA algorithm (case 2):

34
Simple DDA Line Drawing Algorithm

m = (Yend-Ystart) / (Xend-Xstart)
If (abs(m)>1 and Ystart>Yend) then
Swap endpoints Xstart  Xend and Ystart  Yend
end if
Set pixel (Xstart, Ystart) with desired color
If abs(m) > 1 then m = 1/m , y = Ystart + 1
x = Xstart
Next: x= x + m
Set pixel (Round(x), y) with desired color
y=y+1
If y  Yend-1 then go to Next
endif
Set pixel (Xend, Yend) with desired color 35
Simple DDA Line Drawing
Algorithm
We will use the simple DDA algorithm to draw a line with
starting point (2,2) and ending point (6,7) on a pixel based
display. Firstly, we compute the slope m: m
=(Yend–Ystart)/(Xend–Xstart)=(7–2)/(6–2)=5/4
m=1/m = 0.8, y = Ystart + 1 = 2 + 1 = 3 , x= Xstart =2
y x Round(x)
2 2
x=x+m=2 +
3 3
0.8=2.8
x = x + m = 2.8 +
4 4
0.8=3.6
x = x + m = 3.6 +
5 4
0.8=4.4 36
Simple DDA Line Drawing Algorithm

37
Bresenham ’s Line Drawing Algorithm

The simple DDA has the disadvantages of

using two operations that are expensive in
computational time: floating point addition
and the round function.
Several good line drawing algorithms avoid
these problems by using only integer
arithmetic such as Bresenham’s line drawing
algorithm.
The Bresenham’s line drawing algorithm is
another incremental scan conversion
algorithm. 38
 Bresenham’s Line Algorithm
• In this section, we introduce an accurate and
efficient raster line-generating algorithm,
developed by Bresenham, that uses only
incremental integer calculations.
• In addition, Bresenham’s line algorithm can be
adapted to display circles and other curves.

• Figures 4 and 5 illustrate sections of a display

screen where straight-line segments are to be
drawn.
39
Bresenham’s Line Algorithm

40
 Bresenham’s Line Algorithm

• These questions are answered with Bresenham’s

line algorithm by testing the sign of an integer
parameter whose value is proportional to the
difference between the vertical separations of the
two pixel positions from the actual line path.

41
 Bresenham’s Line Algorithm

• To illustrate Bresenham’s approach, we first

consider the scan-conversion process for lines with
positive slope less than 1.0.

• Pixel positions along a line path are then

determined by sampling at unit x intervals.

• Starting from the left endpoint (x0, y0) of a given

line, we step to each successive column (x position)
and plot the pixel whose scan-line y value is closest
to the line path.
42
 Bresenham’s Line Algorithm

• Figure 6 demonstrates the kth step in this process.

• Assuming that we have determined that the pixel

at (xk , yk ) is to be displayed, we next need to
decide which pixel to plot in column xk+1 = xk +
1.

• Our choices are the pixels at positions (xk + 1,

yk ) and (xk + 1, yk + 1).

43
Bresenham’s Line Algorithm

44
 Bresenham’s Line Algorithm
• At sampling position xk + 1, we label vertical pixel
separations from the mathematical line path as dlower and
dupper (Figure 7).
• The y coordinate on the mathematical line at pixel column
position xk + 1 is calculated as
y = m(xk + 1) + b (10)
Then
dlower = y − yk
= m(xk + 1) + b − yk (11)
and
dupper = (yk + 1) − y
= yk + 1 − m(xk + 1) − b (12)
45
Bresenham’s Line Algorithm

46
 Bresenham’s Line Algorithm

• To determine which of the two pixels is closest to

the line path, we can set up an efficient test that is
based on the difference between the two pixel
separations as follows:
dlower − dupper = 2m(xk + 1) − 2yk + 2b − 1
(13)

47
Bresenham’s Line Algorithm

48
Bresenham’s Line Algorithm

49
Bresenham’s Line Algorithm

50
Bresenham’s Line Algorithm

51
Bresenham’s Line Algorithm

52
Bresenham’s Line Algorithm

53
Bresenham’s Line Algorithm

54
Bresenham’s Line Algorithm

55
 Bresenham’s Line Algorithm

• An implementation of Bresenham line drawing for

slopes in the range 0<m<1.0 is given in the
following procedure.

• Endpoint pixel positions for the line are passed to

this procedure, and pixels are plotted from the left
endpoint to the right endpoint.

56
Bresenham’s Line Algorithm

57
Bresenham’s Line Algorithm

58
Comparation

59
 Displaying Polylines

• Implementation of a polyline procedure is

accomplished by invoking a line drawing routine
n−1 times to display the lines connecting the n
endpoints.

• Each successive call passes the coordinate pair

needed to plot the next line section, where the
first endpoint of each coordinate pair is the last
endpoint of the previous section.
60
THANK YOU
61