Chapter Three Part I Output Primitives CS 380

Outline Part II: In this chapter we will cover the following topics: Line drawing algorithms. Circle generating algorithms Part II: Pixel addressing and object geometry. Filled-Area primitives. Setting frame-buffer values This chapter will show the discrete nature for computer graphics. CS 380

Line drawing What is a line? Is the path between two end points. Any point (x, y) on the line must follow the line equation: y = m * x + b, where m is the slope of the line. b is a constant that represent the intercept on y-axis. CS 380

Line drawing (cont.) If we have two end points, (x0, y0) and (x1, y1), then the slope of the line between those points can be calculated as: m = y / x = (y1 – y0) / (x1 – x0) To draw a line, we can use two algorithms: DDA (Digital Differential Analyzer). Bresenham’s Line Algorithm. CS 380

Line drawing (cont.)

Line drawing – DDA algorithm (DDA) is a scan-conversion line algorithm based on calculating either y or x. y = m * x x = y / m we have many cases based on sign of the slope, value of the slope, and the direction of drawing. Slope sign: positive or negative. Slope value: <= 1 or >1. Direction: (left – right) or (right – left) CS 380

DDA – case 1 Positive slope and left to right: If slope <= 1 then: xk+1 = xk + 1 yk+1 = yk + m If slope > 1 then: xk+1 = xk + 1/m yk+1 = yk + 1 CS 380

DDA – case 2 Positive slope and right to left: If slope <= 1 then: xk+1 = xk – 1 yk+1 = yk – m If slope > 1 then: xk+1 = xk – 1/m yk+1 = yk – 1 CS 380

DDA – case 3 If |m | <= 1 then: If |m | > 1 then: Negative slope and left to right: If |m | <= 1 then: xk+1 = xk + 1 yk+1 = yk – m If |m | > 1 then: xk+1 = xk + 1/m yk+1 = yk – 1 CS 380

DDA – case 4 If |m | <= 1 then: If |m | > 1 then: Negative slope and right to left: If |m | <= 1 then: xk+1 = xk – 1 yk+1 = yk + m If |m | > 1 then: xk+1 = xk – 1/m yk+1 = yk + 1 CS 380

Bresenham’s Line Algorithm Is an efficient algorithm for line drawing. When we have a point (xk, yk), then we must decide whether to draw the point (xk+1, yk) or (xk+1, yk+1). Note that, at all cases, we move to xk+1, still we must decide to move to yk or yk+1. Xk+1 y d1 d2 yk+1 yk CS 380

Bresenham’s Line Algorithm (cont.) After calculating d1 and d2 we will choose yk or yk+1. y = m (xk + 1) + b d1 = y – yk = m (xk + 1) + b - yk d2 = (yk+1) – y = yk+1 - m (xk + 1) - b d1 – d2 = 2m*xk + 2m – 2yk + 2b -1 d1 – d2 = 2m (xk + 1) – 2yk + 2b -1 CS 380

Bresenham’s Line Algorithm (cont.) Now we will define pk (decision parameter) as: pk = ∆x (d1 – d2) = 2 ∆ y * X k- 2 ∆ x * yk + c, where c = 2 ∆ y + ∆ x (2b – 1) , k represents the kth step If pk < 0 (i.e. d1 < d2)  we plot the pixel (xk+1, yk) Otherwise we plot the pixel (xk+1, yk+1) CS 380

Bresenham’s Line Algorithm (cont.) to get the next pk  pk+1 pk+1 = pk + 2 ∆y - 2 ∆x (yk+1 – yk) p0 = 2 ∆ y - ∆ x CS 380

Bresenham’s Line Algorithm (cont.) Input two end points and store (x0, y0) in the frame buffer. plot (x0, y0) to be the first point. Calculate the constants ∆ x, ∆ y, 2 ∆ y, and 2 ∆ y – 2 ∆ x, and obtain the starting value for the decision parameter as p0 = 2 ∆ y - ∆ x. At each xk along the line, starting at k = 0, perform the following test. If pk < 0, plot (xk+1, yk) and pk+1 = pk + 2∆y Otherwise, plot (xk+1, yk+1) and pk+1 = pk + 2∆y - 2∆x. Perform step 4 ∆x – 1 times. CS 380

Bresenham’s Line Algorithm ( Example) Note: Bresenham’s algorithm is used when slope is <= 1. using Bresenham’s Line-Drawing Algorithm, Digitize the line with endpoints (20,10) and (30,18). y = 18 – 10 = 8 x = 30 – 20 = 10 m = y / x = 0.8 plot the first point (x0, y0) = (20, 10) p0 = 2 * y – x = 2 * 8 – 10 = 6 , so the next point is (21, 11) CS 380

Example (cont.) K Pk (xk +1, yk +1) 6 (21,11) 5 (26,15) 1 2 (22,12) 6 (21,11) 5 (26,15) 1 2 (22,12) (27,16) -2 (23,12) 7 (28,16) 3 14 (24,13) 8 (29,17) 4 10 (25,14) 9 (30,18) CS 380

Example (cont.)

Bresenham’s Line Algorithm (cont.) Notice that bresenham’s algorithm works on lines with slope in range 0 < m < 1. We draw from left to right. To draw lines with slope > 1, interchange the roles of x and y directions. CS 380

Circle Generating Algorithms What is a circle? It is a set of points that are all at a given distance r from center position (xc, yc). The distance relationship equation of a circle is expressed by the Pythagorean theorem in Cartesian coordinates as: ( x – xc)2 + ( y – yc)2 = r2 CS 380

Circle Generating Algorithms (cont.) We can re-write the circle equation as: y = yc ± ( r2 – ( x – xc)2 )0.5 By substitution with x , xc and yc we can get y. Two problems with this approach: it involves considerable computation at each step. The spacing between plotted pixel positions is not uniform, as demonstrated below CS 380

Circle Generating Algorithms (cont.) Polar coordinates (r and ) are used to eliminate the unequal spacing shown above. Expressing the circle equation in parametric polar form yields the pair of equations x = xc + r cos  y = yc + r sin  CS 380

Circle Generating Algorithms (cont.) When a circle is generated with these equations using a fixed angular step size, a circle is plotted with equally spaced points along the circumference. The step size chosen  depends on the application and the display device. Computation can be reduced by considering the symmetry of circles. The shape of the circle is similar in each quadrant. We can take this one step further and note that there is also symmetry between octants. CS 380

Circle Generating Algorithms (cont.) CS 380

Mid-point circle algorithm A method for direct distance comparison is to test the halfway position between two pixels to determine if this midpoint is inside or outside the circle boundary. This method is more easily applied to other conics, and for an integer circle radius. we sample at unit intervals and determine the closest pixel position to the specified circle path at each step. CS 380

Mid-point circle algorithm (cont.) For a given radius r and screen center position (xc, yc), we can first set up our algorithm to calculate pixel positions around a circle path centered at the coordinate origin ( 0, 0 ). Then each calculated position (x, y) is moved to its proper screen position by adding xc to x and yc to y. Along the circle section from x = 0 to x = y in the first quadrant, the slope of the curve varies from 0 to - 1. Therefore, we can take unit steps in the positive x direction over this octant and use a decision parameter to determine which of the two possible y positions is closer to the circle path at each step. CS 380

Mid-point circle algorithm (cont.) Positions in the other seven octants are then obtained by symmetry. To apply the midpoint method. we define a circle function: fcircle(x, y) = x² + y² – r² Any point (x, y) on the boundary of the circle with radius r satisfies the equation fcircle( x, y ) = 0. If fcircle( x, y ) < 0, the point is inside the circle boundary , If fcircle( x, y ) > 0, the point is outside the circle boundary, If fcircle( x, y ) = 0, the point is on the circle boundary. CS 380

Mid-point circle algorithm (cont.) CS 380

Mid-point Circle Algorithm Calculating pk First, set the pixel at (xk , yk ), next determine whether the pixel (xk + 1, yk ) or the pixel (xk + 1, yk – 1) is closer to the circle using: pk = fcircle (xk + 1,yk – ½) = (xk + 1)²+(yk – ½)² – r²

Calculating Pk +1 Pk +1 = fcircle (xk + 1 + 1,yk + 1 – ½) =[(xk + 1) + 1 ]² + (yk + 1 – ½)² – r² Or Pk + 1 = pk + 2(xk + 1) + (y²k+ 1 – y²k ) – (yk+ 1 – yk ) + 1

Calculating p0 p0 = fcircle (1, r – ½) = 1 + (r – ½)² – r² or p0 = 5 /4 – r ≅ 1 – r

Mid-point Circle Algorithm - Steps Input radius r and circle center (xc, yc ). set the first point (x0 , y0 ) = (0, r ). Calculate the initial value of the decision parameter as p0 = 1 – r. At each xk position, starting at k = 0, perform the following test: If pk < 0, plot (xk + 1, yk ) and pk+1 = pk + 2xk + 1 + 1, Otherwise, plot (xk+ 1, yk – 1 ) and pk+1 = pk + 2xk+1 + 1 – 2yk+1, where 2xk + 1 = 2xk + 2 and 2yk + 1 = 2yk – 2. Circle-Drawing Algorithms

Mid-point Circle Algorithm - Steps Determine symmetry points on the other seven octants. Move each calculated pixel position (x, y) onto the circular path centered on (xc, yc) and plot the coordinate values: x = x + xc , y = y + yc Repeat steps 3 though 5 until x  y. For all points, add the center point (xc, yc ) Circle-Drawing Algorithms

Mid-point Circle Algorithm - Steps Now we drew a part from circle, to draw a complete circle, we must plot the other points. We have (xc + x , yc + y), the other points are: (xc - x , yc + y) (xc + x , yc - y) (xc - x , yc - y) (xc + y , yc + x) (xc - y , yc + x) (xc + y , yc - x) (xc - y , yc - x) Circle-Drawing Algorithms 34

Mid-point circle algorithm (Example) Given a circle radius r = 10, demonstrate the midpoint circle algorithm by determining positions along the circle octant in the first quadrant from x = 0 to x = y. Solution: p0 =1 – r = – 9 Plot the initial point (x0, y0 ) = (0, 10), 2x0 = 0 and 2y0 =20.  Successive decision parameter values and positions along the circle path are calculated using the midpoint method as appear in the next table: CS 380

Mid-point circle algorithm (Example) K Pk (xk+1, yk+1) 2 xk+1 2 yk+1 – 9 (1, 10) 2 20 1 – 6 (2, 10) 4 – 1 (3, 10) 6 3 (4, 9) 8 18 – 3 (5, 9) 10 5 (6,8) 12 16 (7,7) 14 CS 380

Mid-point circle algorithm (Example) CS 380

Mid-point Circle Algorithm – Example (2) Given a circle radius r = 15, demonstrate the midpoint circle algorithm by determining positions along the circle octant in the first quadrant from x = 0 to x = y. Solution: p0 = 1 – r = – 14 plot the initial point (x0 , y0) = (0, 15), 2x0 = 0 and 2y0 = 30. Successive decision parameter values and positions along the circle path are calculated using the midpoint method as: CS 380

Mid-point Circle Algorithm – Example (2) K Pk (xk+1, yk+1) 2 xk+1 2 yk+1 – 14 (1, 15) 2 30 1 – 11 (2, 15) 4 – 6 (3, 15) 6 3 (4, 14) 8 28 – 18 (5, 14) 10 CS 380

Mid-point Circle Algorithm – Example (2) K Pk (xk+1, yk+1) 2 xk+1 2 yk+1 5 – 7 (6,14) 12 28 6 (7,13) 14 26 7 – 5 (8,13) 16 8 (9,12) 18 24 9 (10,11 ) 20 22 10 (11,10) CS 380