Line Drawing Algorithms

Asst. Prof. Dr. Ahmet SayarKocaeli University

Computer EngineeringAdvanced Computer Graphics

Spring 2012

The Problem Of Scan Conversion•But what happens when we try to draw this on a pixel based display?

How do we choose which pixels to turn on?

Considerations•Considerations to keep in mind:

– The line has to look good• Avoid jaggies

– Lines should pass from the endpoints (if possible)– It has to be lightening fast!

• How many lines need to be drawn in a typical scene?• This is going to come back to bite us again and again

Special Lines - Horizontal

4/110

Special Lines - Horizontal

Increment x by 1, keep y constant

5/110

Special Lines - Vertical

6/110

Special Lines - Vertical

Keep x constant, increment y by 1

7/110

Special Lines - Diagonal

8/110

Special Lines - Diagonal

Increment x by 1, increment y by 1

9/110

Line Equations

•Let’s quickly review the equations involved in drawing lines

x

y

y0

yend

xendx0

Slope-intercept line equation:

bxmy where:

0

0

xx

yym

end

end

00 xmyb

Lines & Slopes•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 = 0

m = -1/3

m = -1/2

m = -1

m = -2m = -4

m = ∞

m = 1/3

m = 1/2

m = 1

m = 2m = 4

m = 0

A Very Simple Solution

•We could simply work out the corresponding y coordinate for each unit x coordinate•Let’s consider the following example:

x

y

(2, 2)

(7, 5)

2 7

2

5

Simple solution Algorithm• Start from (xL, yL) and draw to (xH, yH)

where xL< xH

( x0, y0 ) = ( xL, yL )For ( i = 0; i <= xH-xL; i++ ) // sample unit intervals in x coordinate

DrawPixel ( xi, Round ( yi ) ) //find the nearest pixel for each sampled point

xi+1 = xi + 1yi+1 = m xi+1 + b

13/110

A Very Simple Solution (cont…)•First work out m and b:

x

y

(2, 2)

(7, 5)

2 3 4 5 6 7

2

5

5

3

27

25

m

5

42

5

32 b

Now for each x value work out the y value:

5

32

5

43

5

3)3( y

5

13

5

44

5

3)4( y

5

43

5

45

5

3)5( y

5

24

5

46

5

3)6( y

A Very Simple Solution (cont…)

•Now just round off the results and turn on these pixels to draw our line

35

32)3( y

35

13)4( y

45

43)5( y

45

24)6( y

0 1 2 3 4 5 6 7 8

0

1

2

3

4

5

6

7

A Very Simple Solution (cont…)•However, this approach is just way too slow•In particular look out for:

– The equation y = mx + b requires the multiplication of m by x

– Rounding off the resulting y coordinates– a floating point multiplication, addition, rounding

•We need a faster solution

A Quick Note About Slopes

•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?•So this gives us:

•where: andm

byx

0

0

xx

yym

end

end

00 xmyb

A Quick Note About Slopes (cont…)

•Leaving out the details this gives us:

•We can see easily that this line doesn’t lookvery good!•We choose which way to work out the line pixels based on the slope of the line

0 1 2 3 4 5 6 7 8

0

1

2

3

4

5

6

7

43

23)3( x 5

3

15)4( x

A Quick Note About Slopes (cont…)•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 coordinates

m = 0

m = -1/3

m = -1/2

m = -1

m = -2m = -4

m = ∞

m = 1/3

m = 1/2

m = 1

m = 2m = 4

m = 0

The DDA Algorithm•The digital differential analyzer (DDA) algorithm takes an incremental approach in order to speed up scan conversion

•Simply calculate yk+1 based on yk

DDA - simply

The DDA Algorithm (cont…)•When the slope of the line is between -1 and 1 begin at the first point in the line and, by incrementing the x coordinate by 1, calculate the corresponding y coordinates as follows:

•When the slope is outside these limits, increment the y coordinate by 1 and calculate the corresponding x coordinates as follows:

myy kk 1

mxx kk

11

The DDA Algorithm (cont…)•Again the values calculated by the equations used by the DDA algorithm must be rounded to match pixel values

(xk, yk) (xk+1, yk+m)

(xk, round(yk))

(xk+1, round(yk+m))

(xk, yk) (xk+ 1/m, yk+1)

(round(xk), yk)

(round(xk+ 1/m), yk+1)

Digital Differential Algorithm

• input line endpoints, (x0,y0) and (xn, yn)• set pixel at position (x0,y0) • calculate slope m• Case |m|≤1: repeat the following steps until (xn, yn) is reached:• yi+1 = yi + y/ x• xi+1 = xi + 1• set pixel at position (xi+1,Round(yi+1))• Case |m|>1: repeat the following steps until (xn, yn) is reached:• xi+1 = xi + x/ y• yi+1 = yi + 1• set pixel at position (Round(xi+1), yi+1)

DDA - Problems

• Floating point operations• Rounding• Can we do better?

( x0, y0 ) = ( xL, yL )For ( i = 0; i <= xH-xL; i++ )

DrawPixel ( xi, Round ( yi ) )xi+1 = xi + 1yi+1 = yi + m

25/110

Does it Work?

159.235 Graphics 26

It seems to work okay for lines with a slope of 1 or less,

but doesn’t work well for lines with slope greater than 1 – lines become more discontinuous in appearance and we must add more than 1 pixel per column to make it work.

Solution? - use symmetry.

The DDA Algorithm Summary•The DDA algorithm is much faster than our previous attempt

– In particular, there are no longer any multiplications involved

•However, there are still two big issues:– 2 ‘round’s and 2 adds per pixel

•Is there a simpler way ?•Can we use only integer arithmetic ?

– Easier to implement in hardware

Conclusion•In this lecture we took a very brief look at how graphics hardware works•Drawing lines to pixel based displays is time consuming so we need good ways to do it•The DDA algorithm is pretty good – but we can do better•Next time we’ll look at the Bresenham line algorithm

Question: why do we add m to y at each step?

Start from (xL, yL) and draw to (xH, yH)where xL< xH

( x0, y0 ) = ( xL, yL )For ( i = 0; i <= xH-xL; i++ )

DrawPixel ( xi, Round ( yi ) )xi+1 = xi + 1yi+1 = m xi + m + b

yi+1 = m ( xi + 1 ) + b

yi = m xi + byi+1 = yi + m

Question: when and why do we add 1/m to x at each step?

• ???

Bresenham Line Drawing Algorithm,

The Big Idea•Move across the x axis in unit intervals and at each step choose between two different y coordinates

2 3 4 5

2

4

3

5For example, from position (2, 3) we have to choose between (3, 3) and (3, 4)

We would like the point that is closer to the original line

(xk, yk)

(xk+1, yk)

(xk+1, yk+1)

The y coordinate on the mathematical line at xk+1 is:

Deriving The Bresenham Line Algorithm

•At sample position xk+1 the vertical separations from the mathematical line are labelled dupper and

dlower

bxmy k )1(

y

yk

Yk+1

xk+1

dlower

dupper

Deriving The Bresenham Line Algorithm (cont…)

•So, dupper and dlower are given as follows:

•and:

•We can use these to make a simple decision about which pixel is closer to the mathematical line

klower yyd

kk ybxm )1(

yyd kupper )1(

bxmy kk )1(1

Deriving The Bresenham Line Algorithm (cont…)

•This simple decision is based on the difference between the two pixel positions:

•Let’s substitute m with ∆y/∆x where ∆x and ∆y are the differences between the end-points:

122)1(2 byxmdd kkupperlower

)122)1(2()(

byxx

yxddx kkupperlower

)12(222 bxyyxxy kk

cyxxy kk 22

Deriving The Bresenham Line Algorithm (cont…)

•So, a decision parameter pk for the kth step along a line is given by:

•The sign of the decision parameter pk is the same as that of dlower – dupper

•If pk is negative, then we choose the lower pixel, otherwise we choose the upper pixel

cyxxy

ddxp

kk

upperlowerk

22

)(

Deriving The Bresenham Line Algorithm (cont…)

•Remember coordinate changes occur along the x axis in unit steps so we can do everything with integer calculations•At step k+1 the decision parameter is given as:

•Subtracting pk from this we get:cyxxyp kkk 111 22

)(2)(2 111 kkkkkk yyxxxypp

Deriving The Bresenham Line Algorithm (cont…)

•But, xk+1 is the same as xk+1 so:

•where yk+1 - yk is either 0 or 1 depending on the

sign of pk

•The first decision parameter p0 is evaluated at (x0, y0) is given as:

)(22 11 kkkk yyxypp

xyp 20

The Bresenham Line AlgorithmBRESENHAM’S LINE DRAWING ALGORITHM

(for |m| < 1.0)

1. Input the two line end-points, storing the left end-point in (x0, y0)

2. Plot the point (x0, y0)

3. Calculate the constants Δx, Δy, 2Δy, and (2Δy - 2Δx) and get the first value for the decision parameter as:

4. At each xk along the line, starting at k = 0, perform the

following test. If pk < 0, the next point to plot is

(xk+1, yk) and:

xyp 20

ypp kk 21

The Bresenham Line Algorithm (cont…)

•! The algorithm and derivation above assumes slopes are less than 1. for other slopes we need to adjust the algorithm slightly

Otherwise, the next point to plot is (xk+1, yk+1) and:

5. Repeat step 4 (Δx – 1) times

xypp kk 221

Bresenham Example•Let’s have a go at this•Let’s plot the line from (20, 10) to (30, 18)•First off calculate all of the constants:

– Δx: 10– Δy: 8– 2Δy: 16– 2Δy - 2Δx: -4

•Calculate the initial decision parameter p0:– p0 = 2Δy – Δx = 6

Bresenham Example (cont…)

17

16

15

14

13

12

11

10

18

292726252423222120 28 30

k pk (xk+1,yk+1)

0

1

2

3

4

5

6

7

8

9

Bresenham Exercise

•Go through the steps of the Bresenham line drawing algorithm for a line going from (21,12) to (29,16)

Bresenham Exercise (cont…)

17

16

15

14

13

12

11

10

18

292726252423222120 28 30

k pk (xk+1,yk+1)

0

1

2

3

4

5

6

7

8

Bresenham Line Algorithm Summary

•The Bresenham line algorithm has the following advantages:

– An fast incremental algorithm– Uses only integer calculations

•Comparing this to the DDA algorithm, DDA has the following problems:

– Accumulation of round-off errors can make the pixelated line drift away from what was intended

– The rounding operations and floating point arithmetic involved are time consuming

Backup

How to calculate po in Bresenham Algorithm

How to calculate po in Bresenham Algorithm