Line Drawing Algorithms Asst. Prof. Dr. Ahmet Sayar Kocaeli University Computer Engineering Advanced 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

Special Lines - Horizontal Increment x by 1, keep y constant

Special Lines - Vertical

Special Lines - Vertical Keep x constant, increment y by 1

Special Lines - Diagonal

Special Lines - Diagonal Increment x by 1, increment y by 1

Line Equations Let’s quickly review the equations involved in drawing lines Slope-intercept line equation: x y y0 yend xend x0 where:

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 = -2 m = -4 m = ∞ m = 1/3 m = 1/2 m = 1 m = 2 m = 4

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 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 + 1 yi+1 = m xi+1 + b

A Very Simple Solution (cont…) x y (2, 2) (7, 5) 2 3 4 5 6 7 First work out m and b: Now for each x value work out the y value:

A Very Simple Solution (cont…) Now just round off the results and turn on these pixels to draw our line 7 6 5 4 3 2 1 1 2 3 4 5 6 7 8

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: and

A Quick Note About Slopes (cont…) Leaving out the details this gives us: We can see easily that this line doesn’t look very good! We choose which way to work out the line pixels based on the slope of the line 7 6 5 4 3 2 1 1 2 3 4 5 6 7 8

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 = -2 m = -4 m = ∞ m = 1/3 m = 1/2 m = 1 m = 2 m = 4

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:

The DDA Algorithm (cont…) Again the values calculated by the equations used by the DDA algorithm must be rounded to match pixel values (xk+1, round(yk+m)) (round(xk+ 1/m), yk+1) (xk, yk) (xk+ 1/m, yk+1) (xk+1, yk+m) (xk, yk) (round(xk), yk) (xk, round(yk))

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 + 1 yi+1 = yi + m

Does it Work? 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. 159.235 Graphics

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 + 1 yi+1 = m xi + m + b yi+1 = m ( xi + 1 ) + b yi = m xi + b yi+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 For 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 5 (xk+1, yk+1) 4 (xk, yk) 3 (xk+1, yk) 2 2 3 4 5

Deriving The Bresenham Line Algorithm At sample position xk+1 the vertical separations from the mathematical line are labelled dupper and dlower y yk Yk+1 xk+1 dlower dupper The y coordinate on the mathematical line at xk+1 is:

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

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:

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

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:

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:

The Bresenham Line Algorithm BRESENHAM’S LINE DRAWING ALGORITHM (for |m| < 1.0) Input the two line end-points, storing the left end-point in (x0, y0) Plot the point (x0, y0) Calculate the constants Δx, Δy, 2Δy, and (2Δy - 2Δx) and get the first value for the decision parameter as: 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:

The Bresenham Line Algorithm (cont…) Otherwise, the next point to plot is (xk+1, yk+1) and: Repeat step 4 (Δx – 1) times ! The algorithm and derivation above assumes slopes are less than 1. for other slopes we need to adjust the algorithm slightly

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…) k pk (xk+1,yk+1) 1 2 3 4 5 6 7 8 9 17 16 15 14 13 12 11 10 18 29 27 26 25 24 23 22 21 20 28 30

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…) k pk (xk+1,yk+1) 1 2 3 4 5 6 7 8 17 16 15 14 13 12 11 10 18 29 27 26 25 24 23 22 21 20 28 30

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