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

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

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

4. Line-drawing using “Paint”

5. How can we represent and display images?

6. Displays – Liquid Crystal Displays

7. Displays – Plasma

8. Displays – Smart Phone
8/110 8

9. Displays – Oculus
9/110 9

10. Image Representation An image is a 2D rectilinear array of Pixels
- A width*height array where each entry of the array stores a single pixel
- Each pixel stores color information
(255,255,255)

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

12. Image Representation A pixel stores color information Luminance pixels
- gray-scale images (intensity images)
or 0-255
- 8 bits per pixel
Red, green, blue pixels (RGB)
- Color images
- Each channel: or 0-255
- 24 bits per pixel

13. Digital Scan Conversion
Convert graphics output primitives into a set of pixel values for storage in the frame buffer

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

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

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

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

18. Line-drawing using “Paint”

19. Special Lines - Horizontal

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

21. Special Lines - Vertical

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

23. Special Lines - Diagonal

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

25. How about Arbitrary Lines?
How to draw an arbitrary line?

26. Arbitrary Lines Slope-intercept equation for a line: m: slope
b: y-intercept
Slope-intercept equation for a straight line. Here me is the slope of the line and b is the y intercept

27. Arbitrary Lines Slope-intercept equation for a line:
How can we compute the equation from (xL,yL), (xH,yH)?
m: slope
b: y-intercept
Slope-intercept equation for a straight line. Here me is the slope of the line and b is the y intercept

28. Arbitrary Lines Slope-intercept equation for a line:
How can we compute the equation from (xL,yL), (xH,yH)?
m: slope
b: y-intercept
Slope-intercept equation for a straight line. Here me is the slope of the line and b is the y intercept

29. Arbitrary Lines Assume
Slope-intercept equation for a straight line. Here me is the slope of the line and b is the y intercept

30. Arbitrary Lines Assume Other lines by swapping x, y or negating
- e.g., reverse the role of x and y if m>1
Slope-intercept equation for a straight line. Here me is the slope of the line and b is the y intercept
30/110 30

31. 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
Slope-intercept equation for a straight line. Here me is the slope of the line and b is the y intercept
31/110 31

32. Arbitrary Lines Assume Other lines by swapping x, y or negating
A simple idea: Take steps in x and determine where to fill y
Slope-intercept equation for a straight line. Here me is the slope of the line and b is the y intercept
32/110 32

33. Digital Differential Analyzer
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+1 + b

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

35. Digital Differential Analyzer (DDA)
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

36. DDA 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

37. DDA 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 + b + m

38. DDA 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 + b + m

39. DDA 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 = yi + m

40. DDA - Example

41. DDA - Example

42. DDA - Example

43. DDA - Example

44. DDA - Example

45. DDA - Example

46. DDA - Example

47. DDA - Example

48. DDA - Example

49. DDA - Example

50. DDA - Example

51. DDA - Example

52. DDA - Example

53. DDA - Example

54. DDA - Example

55. 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

56. Outline How to draw a line? - Digital Differential Analyzer (DDA)
- Midpoint algorithm

57. How to Improve It?
Question: if we draw the current pixel, where is the next pixel?
(xk,yk)
(xk+1,yk+1)

58. How to Improve It?
Question: if we draw the current pixel, where is the next pixel?
(xk,yk)
(xk+1,yk+1)
58/110 58

59. How to Improve It?
Question: if we draw the current pixel, where is the next pixel?
(xk,yk)
(xk+1,yk+1)
59/110 59

60. How to Improve It?
xk+1 = xk+1
yk+1 = yk or yk+1
Question: if we draw the current pixel, where is the next pixel?
Next column: E or NE direction; why?

61. Midpoint Algorithm
Given a point just drawn, determine whether we move E or NE on next step
xk+1 = xk+1
yk+1 = yk or yk+1

62. 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

63. Above/Below the Line?

64. Issues How to evaluate if the midpoint is above or below the line?
How to incrementally evaluate this?
How to avoid floating point operations?

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

66. 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
66/110 66

67. 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!
67/110 67

68. 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

69. Midpoint Algorithm – Implicit Forms
How do we tell if a point is above or below the line?

70. Midpoint Algorithm – Implicit Forms
How do we tell if a point is above or below the line?

71. Midpoint Algorithm – Implicit Forms
How do we tell if a point is above or below the line?

72. Midpoint Algorithm – Implicit Forms
How do we tell if a point is above or below the line?

73. Midpoint Algorithm – Implicit Forms
How do we tell if a point is above or below the line?

74. 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

75. 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
75/110 75

76. Midpoint Algorithm – Implicit Forms

77. Midpoint Algorithm – Implicit Forms

78. Midpoint Algorithm – Implicit Forms

79. Midpoint Algorithm – Implicit Forms

80. Midpoint Algorithm – Implicit Forms

81. Midpoint Algorithm – Implicit Forms

82. Two Issues How to evaluate if the midpoint is above or below the line?
How to incrementally evaluate this?

83. Above/Below the Line?

84. Midpoint Algorithm What about starting value?
What is the middle point?
(xL,yL)

85. Midpoint Algorithm What about starting value?
What is the middle point?
(xL,yL)
(xL+1,yL+1/2)

86. Midpoint Algorithm What about starting value?
What is the middle point?
(xL,yL)
(xL+1,yL+1/2)

87. What about starting value?
Midpoint Algorithm
What about starting value?

88. What about starting value?
Midpoint Algorithm
What about starting value?
88/110 88

89. What about starting value?
Midpoint Algorithm
What about starting value?
is on the line!

90. What about starting value?
Midpoint Algorithm
What about starting value?

91. What about starting value?
Midpoint Algorithm
What about starting value?
Multiplying coefficients by 2 doesn’t change sign of f

92. 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

93. Midpoint Algorithm Need value of to determine E or NE
Build incremental algorithm
Assume we have value of
Find value of if E chosen
Next mid point
(x,y)

94. 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
(x,y)
94/110 94

95. Midpoint Algorithm
If E was chosen, find

96. Midpoint Algorithm
If E was chosen, find

97. Midpoint Algorithm
If NE was chosen, find

98. Midpoint Algorithm
If NE was chosen, find

99. Midpoint Algorithm – Summary
x=xL y=yL
d=xH - xL c=yL - yH
sum=2c+d
draw(x,y)
while ( x < xH)
if ( sum < 0 )
sum += 2d
y++
x++
sum += 2c

100. Midpoint Algorithm – Summary
x=xL y=yL
d=xH - xL c=yL - yH
sum=2c+d //initial value
draw(x,y)
while ( x < xH)
if ( sum < 0 )
sum += 2d
y++
x++
sum += 2c

101. Midpoint Algorithm – Summary
x=xL y=yL
d=xH - xL c=yL - yH
sum=2c+d //initial value
draw(x,y)
while ( x < xH) // iterate until reaching the end point
if ( sum < 0 )
sum += 2d
y++
x++
sum += 2c

102. Midpoint Algorithm – Summary
x=xL y=yL
d=xH - xL c=yL - yH
sum=2c+d //initial value
draw(x,y)
while ( x < xH) // iterate until reaching the end point
if ( sum < 0 ) // below the line and choose NE
sum += 2d
y++
x++
sum += 2c

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

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

105. Midpoint Algorithm – Example
x=xL y=yL
d=xH - xL c=yL - yH
sum=2c+d
draw(x,y)
while ( x < xH)
if ( sum < 0 )
sum += 2d
y++
x++
sum += 2c
Dx =6 dy = 2
d =6 c = -2

106. Midpoint Algorithm – Example
x=xL y=yL
d=xH - xL c=yL - yH
sum=2c+d
draw(x,y)
while ( x < xH)
if ( sum < 0 )
sum += 2d
y++
x++
sum += 2c
d =6 c = -2

107. Midpoint Algorithm – Example
x=xL y=yL
d=xH - xL c=yL - yH
sum=2c+d
draw(x,y)
while ( x < xH)
if ( sum < 0 )
sum += 2d
y++
x++
sum += 2c
d =6 c = -2

108. Midpoint Algorithm – Example
x=xL y=yL
d=xH - xL c=yL - yH
sum=2c+d
draw(x,y)
while ( x < xH)
if ( sum < 0 )
sum += 2d
y++
x++
sum += 2c
d =6 c = -2

109. Midpoint Algorithm – Example
x=xL y=yL
d=xH - xL c=yL - yH
sum=2c+d
draw(x,y)
while ( x < xH)
if ( sum < 0 )
sum += 2d
y++
x++
sum += 2c
d =6 c = -2

110. Midpoint Algorithm – Example
x=xL y=yL
d=xH - xL c=yL - yH
sum=2c+d
draw(x,y)
while ( x < xH)
if ( sum < 0 )
sum += 2d
y++
x++
sum += 2c
d =6 c = -2

111. Midpoint Algorithm – Example
x=xL y=yL
d=xH - xL c=yL - yH
sum=2c+d
draw(x,y)
while ( x < xH)
if ( sum < 0 )
sum += 2d
y++
x++
sum += 2c
d =6 c = -2

112. Midpoint Algorithm – Example
x=xL y=yL
d=xH - xL c=yL - yH
sum=2c+d
draw(x,y)
while ( x < xH)
if ( sum < 0 )
sum += 2d
y++
x++
sum += 2c
d =6 c = -2

113. 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)

114. Midpoint Algorithm: Circle

115. Midpoint Algorithm: Circle

116. Midpoint Algorithm: Circle

117. Midpoint Algorithm: Circle
Two issues:
What are two possible solutions?
What is the evaluation function?

118. Midpoint Algorithm: Circle

119. Midpoint Algorithm: Circle
(xk+1,yk)
(xk+1,yk-1)
Two issues:
What are two possible solutions?
What is the evaluation function?

120. Midpoint Algorithm: Circle
(xk+1,yk)
Midpoint: (xk+1,yk-1/2)
(xk+1,yk-1)
Two issues:
What are two possible solutions?
What is the evaluation function?

121. Midpoint Algorithm: Circle
(xk+1,yk)
Midpoint: (xk+1,yk-1/2)
(xk+1,yk-1)
Two issues:
What are two possible solutions?
What is the evaluation function?

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

123. Next Lecture
How to draw a polygon?
- section