1 CSCE 441 Lecture 2: Scan Conversion of Lines Jinxiang Chai

2/110 Displays – Cathode Ray Tube

3/110 Displays – Liquid Crystal Displays

4/110 Displays – Plasma

5/110 Displays – Pixels Pixel: the smallest element of picture - Integer position (i,j) - Color information (r,g,b) x y (0,0)

6/110 Digital Scan Conversion Convert graphics output primitives into a set of pixel values for storage in the frame buffer

7/110 OpenGL Geometric Primitives All geometric primitives are specified by vertices GL_QUAD_STRIP GL_POLYGON GL_TRIANGLE_STRIP GL_TRIANGLE_FAN GL_POINTS GL_LINES GL_LINE_LOOP GL_LINE_STRIP GL_TRIANGLES GL_QUADS

8/110 OpenGL Geometric Primitives All geometric primitives are specified by vertices GL_QUAD_STRIP GL_POLYGON GL_TRIANGLE_STRIP GL_TRIANGLE_FAN GL_POINTS GL_LINES GL_LINE_LOOP GL_LINE_STRIP GL_TRIANGLES GL_QUADS

9/110 Outline How to draw a line? - Digital Differential Analyzer (DDA) - Midpoint algorithm Required readings - HB 6.1 to 6.8

10/110 Problem Given two points (P, Q) on the screen (with integer coordinates) determine which pixels should be drawn to display a unit width line

11/110 Problem Given two points (P, Q) on the screen (with integer coordinates) determine which pixels should be drawn to display a unit width line

12/110 Problem Given two points (P, Q) on the screen (with integer coordinates) determine which pixels should be drawn to display a unit width line

Line-drawing using “Paint”

14/110 Special Lines - Horizontal

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

16/110 Special Lines - Vertical

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

18/110 Special Lines - Diagonal

19/110 Special Lines - Diagonal Increment x by 1, increment y by 1

20/110 How about Arbitrary Lines? How to draw an arbitrary line?

21/110 Slope-intercept equation for a line: Arbitrary Lines m: slope b: y-intercept

22/110 Slope-intercept equation for a line: How can we compute the equation from (x L,y L ), (x H,y H )? Arbitrary Lines m: slope b: y-intercept

23/110 Slope-intercept equation for a line: How can we compute the equation from (x L,y L ), (x H,y H )? Arbitrary Lines m: slope b: y-intercept

24/110 Arbitrary Lines Assume

25/110 Arbitrary Lines Assume Other lines by swapping x, y or negating - e.g., reverse the role of x and y if m>1

26/110 Arbitrary Lines Assume Other lines by swapping x, y or negating - e.g., reverse the role of x and y if m>1 - e.g., negate y if

27/110 Arbitrary Lines Assume Other lines by swapping x, y or negating Take steps in x and determine where to fill y

28/110 Digital Differential Analyzer Start from (x L, y L ) and draw to (x H, y H ) where x L < x H ( x 0, y 0 ) = ( x L, y L ) For ( i = 0; i <= x H -x L ; i++ ) DrawPixel ( x i, Round ( y i ) ) x i+1 = x i + 1 y i+1 = m x i+1 + b

29/110 Digital Differential Analyzer Simple algorithm: - sample unit intervals in one coordinate - find the nearest pixel for each sampled point.

30/110 Digital Differential Analyzer (DDA) Start from (x L, y L ) and draw to (x H, y H ) where x L < x H ( x 0, y 0 ) = ( x L, y L ) For ( i = 0; i <= x H -x L ; i++ ) // sample unit intervals in x coordinate DrawPixel ( x i, Round ( y i ) ) // find the nearest pixel for each sampled point. x i+1 = x i + 1 y i+1 = m ( x i + 1 ) + b

31/110 DDA Start from (x L, y L ) and draw to (x H, y H ) where x L < x H ( x 0, y 0 ) = ( x L, y L ) For ( i = 0; i <= x H -x L ; i++ ) DrawPixel ( x i, Round ( y i ) ) x i+1 = x i + 1 y i+1 = m x i + m + b

32/110 DDA Start from (x L, y L ) and draw to (x H, y H ) where x L < x H ( x 0, y 0 ) = ( x L, y L ) For ( i = 0; i <= x H -x L ; i++ ) DrawPixel ( x i, Round ( y i ) ) x i+1 = x i + 1 y i+1 = m x i + b + m

33/110 DDA Start from (x L, y L ) and draw to (x H, y H ) where x L < x H ( x 0, y 0 ) = ( x L, y L ) For ( i = 0; i <= x H -x L ; i++ ) DrawPixel ( x i, Round ( y i ) ) x i+1 = x i + 1 y i+1 = m x i + b + m

34/110 DDA Start from (x L, y L ) and draw to (x H, y H ) where x L < x H ( x 0, y 0 ) = ( x L, y L ) For ( i = 0; i <= x H -x L ; i++ ) DrawPixel ( x i, Round ( y i ) ) x i+1 = x i + 1 y i+1 = y i + m

35/110 DDA - Example

36/110 DDA - Example

37/110 DDA - Example

38/110 DDA - Example

39/110 DDA - Example

40/110 DDA - Example

41/110 DDA - Example

42/110 DDA - Example

43/110 DDA - Example

44/110 DDA - Example

45/110 DDA - Example

46/110 DDA - Example

47/110 DDA - Example

48/110 DDA - Example

49/110 DDA - Example

50/110 DDA - Problems Floating point operations Rounding Can we do better? ( x 0, y 0 ) = ( x L, y L ) For ( i = 0; i <= x H -x L ; i++ ) DrawPixel ( x i, Round ( y i ) ) x i+1 = x i + 1 y i+1 = y i + m

51/110 Outline How to draw a line? - Digital Differential Analyzer (DDA) - Midpoint algorithm

52/110 How to Improve It? Question: if we draw the current pixel, where is the next pixel? (x k,y k )(x k+1,y k+1 )

53/110 How to Improve It? Question: if we draw the current pixel, where is the next pixel? (x k,y k )(x k+1,y k+1 )

54/110 How to Improve It? Question: if we draw the current pixel, where is the next pixel? (x k,y k )(x k+1,y k+1 )

55/110 How to Improve It? Question: if we draw the current pixel, where is the next pixel? Next column: E or NE direction; why? x k+1 = x k +1 y k+1 = y k or y k +1

56/110 Midpoint Algorithm Given a point just drawn, determine whether we move E or NE on next step x k+1 = x k +1 y k+1 = y k or y k +1

57/110 Midpoint Algorithm Given a point just drawn, determine whether we move E or NE on next step Is the line above or below midpoint ? Below: move E Above: move NE

58/110 Above/Below the Line?

59/110 Two Issues How to evaluate if the midpoint is above or below the line? How to incrementally evaluate this? How to avoid floating point operations?

60/110 Midpoint Algorithm – Implicit Forms How do we tell if a point is above or below the line?

61/110 Midpoint Algorithm – Implicit Forms How do we tell if a point is above or below the line? Properties y=mx+b (x,y) on the line y<mx+b (x,y) below the line y>mx+b (x,y) above the line

62/110 Midpoint Algorithm – Implicit Forms How do we tell if a point is above or below the line? Properties y=mx+b (x,y) on the line y<mx+b (x,y) below the line y>mx+b (x,y) above the line But this still requires floating point operations!

63/110 Midpoint Algorithm – Implicit Forms How do we tell if a point is above or below the line? Properties f(x,y)=0 (x,y) on the line f(x,y)<0 (x,y) below the line f(x,y)>0 (x,y) above the line

64/110 Midpoint Algorithm – Implicit Forms How do we tell if a point is above or below the line?

65/110 Midpoint Algorithm – Implicit Forms How do we tell if a point is above or below the line?

66/110 Midpoint Algorithm – Implicit Forms How do we tell if a point is above or below the line?

67/110 Midpoint Algorithm – Implicit Forms How do we tell if a point is above or below the line?

68/110 Midpoint Algorithm – Implicit Forms How do we tell if a point is above or below the line?

69/110 Midpoint Algorithm – Implicit Forms How do we tell if a point is above or below the line? Properties f(x,y)=0 (x,y) on the line f(x,y)<0 (x,y) below the line f(x,y)>0 (x,y) above the line

70/110 Midpoint Algorithm – Implicit Forms How do we tell if a point is above or below the line? Properties f(x,y)=0 (x,y) on the line f(x,y)<0 (x,y) below the line f(x,y)>0 (x,y) above the line Note that e is an integer because

71/110 Midpoint Algorithm – Implicit Forms

72/110 Midpoint Algorithm – Implicit Forms

73/110 Midpoint Algorithm – Implicit Forms

74/110 Midpoint Algorithm – Implicit Forms

75/110 Midpoint Algorithm – Implicit Forms

76/110 Midpoint Algorithm – Implicit Forms

77/110 Two Issues How to evaluate if the midpoint is above or below the line? How to incrementally evaluate this?

78/110 Above/Below the Line?

79/110 Midpoint Algorithm What about starting value? What is the middle point? (x L,y L )

80/110 Midpoint Algorithm What about starting value? What is the middle point? (x L +1,y L +1/2) (x L,y L )

81/110 Midpoint Algorithm What about starting value? What is the middle point? (x L +1,y L +1/2) (x L,y L )

82/110 Midpoint Algorithm What about starting value?

83/110 Midpoint Algorithm What about starting value? is on the line!

84/110 Midpoint Algorithm What about starting value?

85/110 Midpoint Algorithm What about starting value? Multiplying coefficients by 2 doesn’t change sign of f

86/110 Midpoint Algorithm Need value of to determine E or NE Build incremental algorithm Assume we have value of  Find value of if E chosen  Find value of if NE chosen

87/110 Midpoint Algorithm Need value of to determine E or NE Build incremental algorithm Assume we have value of  Find value of if E chosen

88/110 Midpoint Algorithm Need value of to determine E or NE Build incremental algorithm Assume we have value of  Find value of if E chosen  Find value of if NE chosen

89/110 Midpoint Algorithm If E was chosen, find

90/110 Midpoint Algorithm If E was chosen, find

91/110 Midpoint Algorithm If NE was chosen, find

92/110 Midpoint Algorithm If NE was chosen, find

93/110 Midpoint Algorithm – Summary x=x L y=y L d=x H - x L c=y L - y H sum=2c+d draw(x,y) while ( x < x H ) if ( sum < 0 ) sum += 2d y++ x++ sum += 2c draw(x,y)

94/110 Midpoint Algorithm – Summary x=x L y=y L d=x H - x L c=y L - y H sum=2c+d //initial value draw(x,y) while ( x < x H ) if ( sum < 0 ) sum += 2d y++ x++ sum += 2c draw(x,y)

95/110 Midpoint Algorithm – Summary x=x L y=y L d=x H - x L c=y L - y H sum=2c+d //initial value draw(x,y) while ( x < x H ) // iterate until reaching the end point if ( sum < 0 ) sum += 2d y++ x++ sum += 2c draw(x,y)

96/110 Midpoint Algorithm – Summary x=x L y=y L d=x H - x L c=y L - y H sum=2c+d //initial value draw(x,y) while ( x < x H ) // iterate until reaching the end point if ( sum < 0 ) // below the line and choose NE sum += 2d y++ x++ sum += 2c draw(x,y)

97/110 Midpoint Algorithm – Summary x=x L y=y L d=x H - x L c=y L - y H sum=2c+d //initial value draw(x,y) while ( x < x H ) // iterate until reaching the end point if ( sum < 0 ) // below the line and choose NE sum += 2d y++ x++ sum += 2c draw(x,y) - Update the current pixel - Update the function value of midpoint

98/110 Midpoint Algorithm – Summary x=x L y=y L d=x H - x L c=y L - y H sum=2c+d //initial value draw(x,y) while ( x < x H ) // iterate until reaching the end point if ( sum < 0 ) // below the line and choose NE sum += 2d y++ x++ sum += 2c draw(x,y) - Draw the pixel based on the function value of midpoint

99/110 x=x L y=y L d=x H - x L c=y L - y H sum=2c+d draw(x,y) while ( x < x H ) if ( sum < 0 ) sum += 2d y++ x++ sum += 2c draw(x,y) Midpoint Algorithm – Example d =6 c = -2

100/110 Midpoint Algorithm – Example x=x L y=y L d=x H - x L c=y L - y H sum=2c+d draw(x,y) while ( x < x H ) if ( sum < 0 ) sum += 2d y++ x++ sum += 2c draw(x,y) d =6 c = -2

101/110 Midpoint Algorithm – Example x=x L y=y L d=x H - x L c=y L - y H sum=2c+d draw(x,y) while ( x < x H ) if ( sum < 0 ) sum += 2d y++ x++ sum += 2c draw(x,y) d =6 c = -2

102/110 x=x L y=y L d=x H - x L c=y L - y H sum=2c+d draw(x,y) while ( x < x H ) if ( sum < 0 ) sum += 2d y++ x++ sum += 2c draw(x,y) Midpoint Algorithm – Example d =6 c = -2

103/110 Midpoint Algorithm – Example x=x L y=y L d=x H - x L c=y L - y H sum=2c+d draw(x,y) while ( x < x H ) if ( sum < 0 ) sum += 2d y++ x++ sum += 2c draw(x,y) d =6 c = -2

104/110 Midpoint Algorithm – Example x=x L y=y L d=x H - x L c=y L - y H sum=2c+d draw(x,y) while ( x < x H ) if ( sum < 0 ) sum += 2d y++ x++ sum += 2c draw(x,y) d =6 c = -2

105/110 x=x L y=y L d=x H - x L c=y L - y H sum=2c+d draw(x,y) while ( x < x H ) if ( sum < 0 ) sum += 2d y++ x++ sum += 2c draw(x,y) Midpoint Algorithm – Example d =6 c = -2

106/110 x=x L y=y L d=x H - x L c=y L - y H sum=2c+d draw(x,y) while ( x < x H ) if ( sum < 0 ) sum += 2d y++ x++ sum += 2c draw(x,y) Midpoint Algorithm – Example d =6 c = -2

107/110 Midpoint Algorithm Only integer operations Exactly the same as the more commonly found Bresenham’s line drawing algorithm Extends to other types of shapes (circles)

108/110 Midpoint Algorithm: Circle

109/110 Midpoint Algorithm: Circle

110/110 Midpoint Algorithm: Circle

111/110 Midpoint Algorithm: Circle Two issues: - What are two possible solutions? - What is the evaluation function?

112/110 Midpoint Algorithm: Circle

113/110 Midpoint Algorithm: Circle (x k +1,y k ) (x k +1,y k -1) Two issues: - What are two possible solutions? - What is the evaluation function?

114/110 Midpoint Algorithm: Circle (x k +1,y k ) Midpoint: (x k +1,y k -1/2) (x k +1,y k -1) Two issues: - What are two possible solutions? - What is the evaluation function?

115/110 Midpoint Algorithm: Circle (x k +1,y k ) Midpoint: (x k +1,y k -1/2) (x k +1,y k -1) Two issues: - What are two possible solutions? - What is the evaluation function?

116/110 Circle, Ellipse, etc Need implicit forms - circle: - ellipse: Equations for incremental calculations Initial positions More details in section of the textbook

117/110 Next Lecture How to draw a polygon? - section