1

LINE DRAWING
ALGORITHMS
Lecture 4 ITSW4111 Computer Graphics
 Chapter Objectives
2

Know and understand two algorithms for line

drawing
 An algorithm that uses the Slope-Intercept
Equation
 An algorithm that uses the DDA Line Drawing
algorithm
 Points and Lines
3

 Point plotting is accomplished by converting

a single coordinate position furnished by an
application program into appropriate
operations for the output device in use.
 With a CRT monitor, for example, the
electron beam is turned on to illuminate the
screen phosphor at the selected location.
6 (3,
5 3)
4
3
2
1
0
0 1 2 3 4 5 6
 Where to draw a line?
4

 Line drawing is accomplished by calculating

intermediate positions along the line path
between specified end points.
 An output device is then directed to fill in
these positions between the endpoints.
 Precise definition of line drawing
Given two points P and Q in the plane, both
with integer coordinates, determine which
pixels on a raster screen should be on in
order to make a picture of a unit-width line
segment starting from P and ending at Q.
 Scan Converting 2D Line
5
Segments
 Given:
 Segment endpoints (integers x1, y1; x2, y2)

 Identify:
 Set of pixels (x, y) to display for segment

(x2, y2)

(x1, y1)
 Line Rasterization
6
Requirements
 Transform continuous primitive into
discrete samples
 Uniform thickness and brightness
 Continuous appearance
 No gaps (x2, y2)
 Accuracy
 Speed

(x1, y1)
 Line Drawing: The
7
Horizontal Line
 The horizontal line is obtained by keeping
the value of y constant and repeatedly
incrementing the x value by one unit.
 The following code draws a horizontal line
from
(xstart,y) to (xend,y), xstart <= xend.
For (x=xstar; x<= xend ; x++)do
Putpixel(x,y,8);
If xstart>xend, in the for loop you
must start from reserved order
(high to low)
 Line Drawing: The
8
Vertical Line
The vertical line is obtained by keeping the
value of x constant and repeatedly
incrementing the y value by one unit.
The following code draws a vertical line

from (x,ystart) to (x,yend), xstart <= xend.

For (y=ystart ; y<=yend ;y++) do
Putpixel(x,y,8);
If ystart>yend, the for loop counter
must be replaced by its reserve
counter (high to low).
 Drawing a Line
9

 The thinnest line is of one-pixel wide. We will

concentrate on drawing a line of 1 pixel
resolution.
 The Cartesian slope-intercept equation for a
straight line is y= m. x + b
m is the slope of the line and b is the y
intercept.
Given the endpoints of a line segment.
m = y2-y1 / x2-x1
b= y1-m.x1
 Scan Converting A Line
10

 The Cartesian slope- intercept equation for

a straight line is: y = mx+b
So b = y - mx
in particular y  y
m 2 1
x2  x1
b = y1 – mx1, where
y 2  y1 y
m  so y mx
x 2  x1 x

y
y mx x 
m
 Scan Converting A Line
11

y mx y
x 
m

|m|<1 |m|>1
 Line Drawing (cont)
12

 For any given x interval ∆x along a line, we

can compute the corresponding y interval ∆y
from ∆y= m∆x
 Similarly we can obtain the x interval ∆x
corresponding to a specified ∆y as
∆x= ∆y / m
 These equations form the basis for
determining deflection voltages in analog
devices.
 Line Drawing (cont)
13

 For lines with slope magnitudes |m| < 1, ∆x can

be set proportional to a small horizontal
deflection voltage and the corresponding vertical
deflection is then set proportional to ∆y as
calculated from the equation: ∆y= m∆x

 For lines whose slopes have magnitudes |m|> 1,

∆y can be set proportional to a small vertical
deflection voltage with the corresponding
horizontal deflection voltage set proportional to
∆x, calculated from the equation: ∆x= ∆y/m.

 For lines with m = 1, ∆ x = ∆ y and the horizontal

and vertical deflections voltages are equal.
 Scan Converting a Line
14

On raster system, lines are plotted with pixels.

The step size (horizontal and vertical direction) are constrained by
pixel separation.
 Scan Converting a Line
15

We must sample a line at discrete positions and determine the

nearest pixel to the line at each sampled position.
 Symmetry
16

 If we could draw lines with positive slope

(0<=slope<=1) we would be done.
 For a line with negative slope (0>=slope>=-1)

We negate all Y values

 For a line with slope > 1 or slope <-1

we just swap x and y axes

(y,-x) (y,x)

(-x,y) (x,y)
450

(-x,-y) (x,-y)

(-y,-x) (y,-x)
 Lines and Slopes
17

 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
m=∞
m = -4 m=4
m = -2 m=2

m = -1 m=1

m = -1/2 m = 1/2
m = -1/3 m = 1/3

m=0 m=0
 A Very Simple Solution
18

 We could simply work out the corresponding y

coordinate for each unit x coordinate
 Let’s consider the following example:

(7, 5)
5

2
(2, 2)

x
2 7
 A Very Simple Solution
19
(cont…)
5

0 1 2 3 4 5 6 7
 A Very Simple Solution (cont…)
20

y
(7, 5) First work
5 out m and b: 5 2 3
m 
7 2 5
2 3 4
(2, 2)
b 2   2 
5 5
x
2 3 4 5 6 7
 Now for each x value work out the y value:

3 4 3 3 4 1
y (3)  3  2 y (4)  4  3
5 5 5 5 5 5
3 4 4 3 4 2
y (5)  5  3 y (6)  6  4
5 5 5 5 5 5
 A Very Simple Solution (cont…)
21

 Now just round off the results and turn on these

pixels to draw our line
3
7 y (3) 2 3
6 5
5 1
y (4) 3 3
4
5
3
4
2 y (5) 3 4
1 5
0 2
y (6) 4 4
0 1 2 3 4 5 6 7 8 5
 A Very Simple Solution (cont…)
22

 However, this approach is just way too

slow because
 The equation y = mx + b requires the

multiplication of m by x
 We need to round off the resulting y

coordinates
 Thus, we need a faster solution
 A Quick Note About Slopes
23

 In the previous example we chose to solve

the parametric line equation to give us the
y coordinate for each unit x coordinate
 What if we had done it the other way
around? y b
x
 So this gives us: m
yend  y0
m b  y0  m x0
 where: xend  x0 and
 A Quick Note About Slopes
(cont…)
24

 Leaving out the details this gives us:

2 1
x(3) 3 4 x(4) 5 5
3 3
 We can see easily that 7
this line doesn’t look
6
very good!
5
 We choose which way 4
to work out the line 3
pixels based on the 2
slope of the line
1
0
0 1 2 3 4 5 6 7 8
 A Quick Note About Slopes
(cont…)
25

 If the slope of a line is between -1 and 1 then

we work out the y coordinates for a line
based on it’s unit x coordinates
 Otherwise we do the opposite – x
coordinates are computed based on unit y
m=∞
coordinates m = -4 m=4
m = -2 m=2
m = -1 m=1

m = -1/2 m = 1/2
m = -1/3 m = 1/3

m=0 m=0
26

Digital Differential
Analyzer
(DDA Algorithm)
 DDA Algorithm
27

 Algorithm is an incremental scan conversion method.

 Based on calculating either ∆y or ∆x
 If |m|<1,
y
(x 1)
y mx x

y K 1
y  m
k
 DDA Algorithm
28

If |m|>1 , (y 1)

y 1
x  , xK 1  xk 
m m
For the above cases it
is assumed that lines
are to be processed (x  1)
from the left endpoint
to the right endpoint.

If the process is reverse,if y mx, y K 1  y k  m

1
if y  1, y m, xK 1  xk 
m
 DDA Pseudo-code
29

// assume that slope is gentle

DDA(float x0, float x1, float y0, float y1) { Q: For each step, how many floating
float x, y; point operations are there?
float xinc, yinc; A: 4
int numsteps;

numsteps = Round(x1) – Round(x0);

Q: For each step, how many integer
xinc = (x1 – x0) / numsteps; operations are there?
yinc = (y1 – y0) / numsteps; A: 2
x = x0;
y = y0;
ColorPixel(Round(x),Round(y));

for (int i=0; i<numsteps; i++) {

x += xinc;
y += yinc;
ColorPixel(Round(x),Round(y));
}

}
 DDA Example
30
numsteps = 12 – 2 = 10
 Suppose we want to xinc = 10/10 = 1.0
yinc = 5/10 = 0.5
draw a line starting
at pixel (2,3) and t x y R(x) R(y)
0 2 3 2 3
ending at pixel
1 3 3.5 3 4
(12,8).
2 4 4 4 4
 What are the values 3 5 4.5 5 5
of the variables x 4 6 5 6 5
and y at each 5 7 5.5 7 6
timestep? 6 8 6 8 6
 What are the pixels 7 9 6.5 9 7

colored, according 8 10 7 10 7

to the DDA 9 11 7.5 11 8

algorithm? 10 12 8 12 8
 DDA Algorithm
31

 Major advantages in the above approach :

 Faster method for calculating pixel positions than the direct
use of
Eq. y=mx+c
 Eliminates the multiplication by making use of raster
characteristics, so that appropriate increments are applied
in the x or y direction to step to pixel positions along the
line path.
 Major deficiency in the above approach :
 The rounding operations and floating-point arithmetic in
DDA algorithm are still time-consuming.
 We can improve the performance of the DDA algorithm by
separating the increments m and l /m into integer and
fractional parts so that all calculation are reduced to integer
 References
32

 Computer Graphics with OpenGL, Hearn

and Baker, Pearson, Fourth Edition.