LINE DRAWING ALGORITHMS

How does computer draw line?

Screen made of pixels High-level language specifies line System must color pixels Line Drawing: Assuming: Clipped (to fall within the window) 2D screen coordinates Each pixel covers a square region where is its center? Rounding (X, Y) implies center at (0.0, 0.0). Truncating implies center at (0.5, 0.5).

LINE DRAWING ALGORITHM

In Line drawing algorithm Cartesian Slope Intercept eqn. for a straight line is y = mx+b (or) y = c. m slope of the line b y intercept Here two end points of a line segment are specified at positions (x1 y1) & (x2 y2). (x2 y2) y= mx + b 1 (x1 y1)

LINE DRAWING ALGORITHM

Value of slope m is m= y2-y1
X2 -x1
2

value of y intercept b is b = y1 mx1 3 Straight line based on the eqn. 1, 2 & 3. For any given interval x along a line, corresponding y interval y from eqn.2 as
y = m x Where y = y2-y1 & x = x2-x1 Similarly we can obtain x interval x , corresponding to y interval y as x= y m

LINE DRAWING ALGORITHM

We can use these eqns. to determine the deflection voltages in analog devices. Here slope magnitude will be |m| 1,|m| 1, & |m| = 1.where xhorizontal, yvertical |m| 1 xsmall horizontal deflection volt with the corresponding vertical deflection volt y. |m| 1 ysmall vertical deflection volt with the corresponding horizontal deflection volt x. |m| = 1 x = y horizontal deflection = vertical deflection .

Scan Conversion
Also called rasterization. The 3D to 2D Projection gives us 2D vertices (points). We need to fill in the interior(for the differentiation).

The Problem Of Scan Conversion

A line segment in a scene is defined by the coordinate positions of the line end-points

(7, 5)

(2, 2)

 But what happens when we try to draw this on a pixel based display?

The Problem Of Scan Conversion

(7, 5)

(2, 2)

How do we choose which pixels to turn on? Which pixel values we choose? (DDA Algorithm find the nearest pixel values)

Considerations
Considerations to keep in mind about drawing on pixel: The line has to look good

Avoid jaggies(steep slope)like staircase

To avoid this - outline font & anti-aliasing techniques used for text. Anti-aliasing:In computer graphics, a software process for
removing or reducing the jagged distortions in curves and diagonal lines so that the lines appear smoother.

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.(repeatedly)

DDA LINE DRAWING ALGORITHM

DDA Algorithm
The invention of computer made things simple and one of them being solving of differential equations. Earlier it was done by mechanical differential analyzer that was slow and full of errors, but DDA or Digital differential Analyzer is the application of analyzer in digital form which is accurate and fast. Differential analyzer is used to make lines between two points so that a straight line or polygon with n number of sides can be seen on the screen. Distance between two points or a pixel is described by a differential equation where coordinates of the starting point and that of ending point are specified in the software. This can be achieved by DDA and Bresenham Algorithm.

DDA Algorithm
DDA stands for digital differential analyzer. The original differential analyzer was a physical machine developed by Vannevar Bush at MIT in the 1930s in order to solve ordinary differential equations. 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 Algorithm
What is DDA? DDA is used in drawing straight line to form a line, triangle or polygon in computer graphics. DDA analyzes samples along the line at regular interval of one coordinate as the integer and for the other coordinate it rounds off the integer that is nearest to the line. Therefore as the line progresses it scan the first integer coordinate and round the second to nearest integer. Therefore a line drawn using DDA for x coordinate it will be x0 to x1 but for y coordinate it will be y=mx+ b and to draw function it will be Fn(x, y rounded off).

DDA Algorithm
USES of DDA: 1. Scan line Conversion 2. Calculate pixel values and next nearest pixel values. 3. Based on calculating x (or) y using eqns. y = m x and x= y
m

Now we consider a line with +ve slope.

DDA Algorithm
In this slope is less than or equal to 1 a) ie. x =1 then succesive y values as yk+1 = yk + m b) y = 1 xk+1 = xk + 1 m For negative slope: c) x =-1 , yk+1 = yk - m

d) y =-1, xk+1= xk - 1 m

DDA Algorithm
The differential equation for a line is: m = dy / dx

 Start with starting and ending coordinates of the line: (x0, y0) and (x1, y1) Color first pixel (round to nearest integer) Suppose x1-x0 > y1-y0 (gentle slope) There will be x1-x0 steps (# pixels to be colored) Set x=x0, y=y0 At each step, increment x by (x1-x0)/num steps, and increment y by (y1-y0)/num steps For each step, round off x and y to nearest integer, and color pixel

DDA Algorithm (simple steps to understand)

DDA code(assume that slope is gentle)

assume that slope is gentle

DDA(float x0, float x1, float y0, float y1) { float x, y; float xinc, yinc; int numsteps; numsteps = Round(x1) Round(x0); xinc = (x1 x0) / numsteps; yinc = (y1 y0) / numsteps; 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
Suppose we want to draw a line starting at pixel (2,3) and ending at pixel (6,5). What are the values of the variables x and y at each timestep? What are the pixels colored, according to the DDA algorithm?
[numsteps = Round(x1) Round(x0) xinc = (x1 x0) / numsteps yinc = (y1 y0) / numsteps]

Where x0=2, y0=3; x1=6,y1=5. numsteps = 6 2 = 4 xinc = 4/4 = 1.0 yinc = 2/4 = 0.5

DDA Example
Starting position (x0,y0)
t 0 1 2 3 x 2 3 4 5 y 3 3.5 4 5.5 R(x) 2 3 4 5 R(y) 3 4 4 5

Round (x,y)

timestep

numsteps= 62=4 xinc = 4/4 = 1.0 yinc = 2/4 = 0.5

DDA Algorithm(find nearest pixel values) Procedure line DDA(xa,ya,xb,yb: integer); var dx , dy , steps, k: integer x increment , y increment, x, y: real; begin dx := xb - xa; dy := yb - ya; if abs (dx) > abs (dy) then steps := abs(dx) else steps:= abs(dy); x increment:= dx /steps; y increment:= dy /steps; x := xa; y := ya; set pixel(round(x),round(y),1); for k:= 1 to steps do begin x:= x + xincrement; y:= y + xincrement; set pixel(round(x),round(y),1); end; end;

DDA Algorithm
Floating point operations and rounding operations are also can be done in DDA. These arithmetic in procedure line DDA are Time Consuming. DDA algorithm is a faster method for calculating pixel position than the direct use of eqn. y=mx+b. We can improve the performance of DDA algorithm by separating the increments m & 1/m into integer & fractional parts. So that all calculations are reduced to integer opertions.

DDA Algorithm(find nearest pixel values) (X1 y1) (x2 y2) Values are( 20,10) (30,18) Here xa=20,ya=10,xb=30,yb=18. dx=30-20=10 [dx=xb - xa] dy=18-10=8 [dy=yb - ya] if (10 > 8 ) [if abs (dx) > abs (dy) then steps := abs(dx)] steps = 10 x inc= 10/10 = 1 [x inc=dx/steps] y inc= 8/10 = 0.8 [y inc=dy/steps] x=20 [x=xa] y=10 [y=ya] set pixel(20,10) [round(x), round(y)] For k=1 to 10 x=20+1=21 , x= 21+1=22 x=x+xincrement y=10+0.8=10.8=11 , y=10.8+0.8=11.6=12 y=y+yincrement set pixel(21,11) [round(x), round(y)]

DDA Algorithm
Such as for the remaining nearest pixel values are calculated. (x values are x=22+1=23,24,2530) (y values are y=12+0.8=13,14,1518) Therefore the values of (x2,y2) are (30,18). From starting pixel values (x1,y1) we are crossing the nearest pixel values to get the end pixel values (x2,y2) by using DDA algorithm.

BRESENHAM LINE DRAWING ALGORITHM

The Bresenham Line Algorithm

The algorithm was developed by Jack E. Bresenham in 1962 at IBM. The Bresenham algorithm is another incremental scan conversion algorithm. The big advantage of this algorithm is that it uses only integer calculations. The Bresenham's Line Drawing Algorithm offers a way to calculate the next coordinate as like in the DDA method but without using a floating point math. Bresenham's algorithm was later modified to produce circles, known as"Bresenham's circle algorithm" or midpoint circle algorithm.

The Bresenham Line Algorithm

What is Bresenham Algorithm?

It scans the coordinates but instead of rounding them off it takes the incremental value in account by adding or subtracting and therefore can be used for drawing circle and curves. Therefore if a line is to be drawn between two points x and y then next coordinates will be( xa+1, ya) and (xa+1, ya+1) where a is the incremental value of the next coordinates and difference between these two will be calculated by subtracting or adding the equations formed by them.

The Bresenham Line Algorithm

Algorithm which determines which points in an ndimensional raster should be plotted in order to form a close approximation to a straight line between two given points. It is commonly used to draw lines on a computer screen, as it uses only integer addition, subtraction and bit shifting, all of which are very cheap operations in standard computer architectures. It is one of the earliest algorithms developed in the field of computer graphics. A minor extension to the original algorithm also deals with drawing circles.

The Bresenham Line Algorithm

While algorithms such as Wu's algorithm are also frequently used in modern computer graphics because they can support antialiasing. The speed and simplicity of Bresenham's line algorithm means that it is still important. The algorithm is used in hardware such as plotters and in the graphics chips of modern graphics cards. It can also be found in many software graphics libraries.

The Bresenham Line Algorithm

In this algorithm Bresenham developed to decide which of two possible pixel positions is closer to the line path at each sample step. There are two levels ie. Upper pixel & lower pixel. for eg. (50,51) upper pixel, (49,50)lower pixel. Line path made to choose whether upper or lower pixel positions. These problems can be solved by this algorithm.

 The following is an explanation of how the Bresenham's linedrawing algorithm works, rather than exact implementation. It is impossible to draw the true line that we want because of the pixel spacing. ie) There's not enough precision for drawing true lines on a PC monitor especially when dealing with low resolutions.

The Bresenham Line Algorithm

The Bresenham's line-drawing algorithm is based on drawing an approximation of the true line.

The Bresenham Line Algorithm

The true line is indicated in bright color, and its approximation is indicated in black pixels. In this the starting point of the line is located exactly at (0,0) and the ending point of the line is located exactly at (9,6). First it decides which axis is the major axis and which is the minor axis. The major axis is longer than the minor axis.

The Bresenham Line Algorithm

In this picture the major axis is the X axis.
Each iteration progresses the current value of the major axis(starting from the original position (0,0)), by exactly one pixel.

Then it decides which pixel on the minor axis is appropriate for the current pixel of the major axis.
How can we approximate the right pixel on the minor axis that matches the pixel on the major axis?

 Bresenham's line-drawing algorithm does it by checking which pixel's center is closer to the true line.

The Bresenham Line Algorithm

The center of each pixel is marked with a dot.

The algorithm takes the coordinates of that dot and compares it to the true line. If the span from the center of the pixel to the true line is less or equal to 0.5, the pixel is drawn at that location.(span is known as error term)

Deriving The Bresenham Line Algorithm

First consider scan conversion process for line with +ve slope (m<1) Starting from left end point (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. Demonstrate the Kth step in the process.

Deriving The Bresenham Line Algorithm

Assuming we have determined that the next pixel at (xk,yk) is to be displayed. Next we need to decide which pixel to plot in column xk+1. Choices may be (Xk+1,yk) (or) (Xk+1,yk+1) (Xk+1,yk) it may be (2,3) or (3,3) (Xk+1,yk+1) it may be (2,3) or (3,4)

The Bresenham Line Algorithm

Move across the x axis in unit intervals and at each step choose between two different y coordinates
(Xk+1,yk+1) 5 4 (Xk ,yk) 3 2 2

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
3 4 5 (Xk+1,yk)

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

Deriving The Bresenham Line Algorithm

(d2) (d1)

(d1 & d2)

The y coordinate on the mathematical line at xk+1 is: Y=mx + b

y m(x 1) b k

Deriving The Bresenham Line Algorithm

So, dupper and dlower are given as follows: (d1) d lower y yk (d2) m( xk 1) b yk
and:

(d2) d upper ( yk 1) y

(d1)

yk 1 m( xk 1) b
We can use these to make a simple decision about which pixel is closer to the mathematical line

Deriving The Bresenham Line Algorithm

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

d lower d upper 2m( xk 1) 2 yk 2b 1

Lets substitute m with y/x where x and y are the differences between the end-points:

y x(dlower dupper ) x(2 ( xk 1) 2 yk 2b 1) x

2y xk 2x yk 2y x(2b 1)

2y xk 2x yk c

Deriving The Bresenham Line Algorithm

So, a decision parameter pk for the kth step along a line is given by: pk x(dlower dupper )

2y xk 2x yk c
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

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:

pk 1 2y xk 1 2x yk 1 c
Subtracting pk from this we get:

pk 1 pk 2y ( xk 1 xk ) 2x( yk 1 yk )

Deriving The Bresenham Line Algorithm

But, xk+1 is the same as xk+1 so: pk 1 pk 2y 2x( yk 1 yk ) 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: p0 2y x

1. Input the two line end-points, storing the left endpoint in (x0, y0). 2. Plot the point (x0, y0). 3. Calculate the constants x, y, 2y, and (2y 2x) and get the first value for the decision parameter as: p0 2y x 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: pk 1 pk 2y

Bresenham's Line-Drawing Algorithm for |m| < 1 (steps)

Bresenham's Line-Drawing Algorithm for |m| < 1 (steps)

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

5. 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's Line-Drawing Algorithm for |m| < 1

Procedure line Bres (xa,ya,xb,yb: integer); var dx, dy, x, y, xend, p:integer; begin dx:= abs(xa xb); dy:= abs(ya yb) p:= 2 * dy dx; if xa > xb then begin x:= xb; y:=yb; xend;= xa; end; [if xa > xb] else begin x:= xa; y:=ya; xend;= xb; end;

Bresenham's Line-Drawing Algorithm for |m| < 1

set pixel(x,y,1); while x < x end do begin x:=x + 1; if p<0 then p:=p+2*dy else begin y:= y + 1; p:=p + 2 * (dy dx ) end; set pixel ( x, y, 1) end; end;

Bresenham's Line-Drawing Algorithm

Values are( 1,3) (7,5) Here xa=1,ya=3,xb=7,yb=5. dx=1-7= -6=6 [dx=abs( xa xb)] dy=3-5= -2=2 [dy=abs( ya yb)] 2*2-6= -2 p=-2 [p= 2*dy-dx] if (1 > 7 ) [if (xa < xb) then x=xa, y=ya,xend=xb] x = 1, y=3, xend=7; set pixel( 1,3) [set pixel(x,y,1)]; 1<7 x=2 [while x < xend] x=1+1=2 x=2 [x=x+1]
if p<0 then p=p+2*dy=-2<0 (true) p=-2+2*2=2

p=2

Bresenham's Line-Drawing Algorithm

2<7 x=2+1=3

x=3

(now x=2)[while x < xend] [x=x+1]

(if p<0 then p=p+2*dy(here p=2 so false then y=y+1,p=p+2*(dy-dx))

=2<0 (false) p=p+2*(dy-dx) y =3+1=4, y=4 p=2+2*(2-6)=> p=-6 p=-6 set pixel(3,4) 3<7 (now x=3)[while x < xend] x=4 x=3+1=4 x=4 [x=x+1]
if p<0 then p=p+2*dy=-6<0 (true) p=-6+2*2= -2 p=-2

set pixel(4,4)

Bresenham's Line-Drawing Algorithm

4<7 x=4+1=5 x=5 (now x=4)[while x < xend] [x=x+1] if p<0 then p=p+2*dy = -2<0 (true) p=-2+2*2=2 p=2 set pixel(5,4) 5<7 (now x=5)[while x < xend] x=5+1=6 x=6 [x=x+1]
(if p<0 then p=p+2*dy(here p=2 so false then y=y+1,p=p+2*(dy-dx))

=2<0 (false) p=p+2*(dy-dx) y =4+1=5,y=5, p=2+2*(2-6)=> -6 p=-6 set pixel(6,5) 6<7 (now x=6)[while x < xend] x=6+1=7 x=7 [x=x+1] if p<0 then p=p+2*dy = -6<0 (true) p=-6+2*2=-2 p=-2 set pixel(7,5)

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

DIFFERENCES
Difference Between DDA and Bresenham Algorithm

DDA uses floating points where as Bresenham algorithm use fixed points.

DDA round off the coordinates to nearest integer but Bresenham algorithm does not. Bresenham algorithm is much accurate and efficient than DDA. Bresenham algorithm can draw circles and curves with much more accuracy than DDA. DDA uses multiplication and division of equation but bresenham algorithm uses subtraction and addition only.

CIRCLE GENERATING ALGORITHMS