1. Scan Conversion of Lines
Dr. Scott Schaefer

2. Displays – Cathode Ray Tube

3. Displays – Liquid Crystal Displays

4. Displays – Light-Emitting Diode

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

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

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

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

9. Special Lines - Horizontal

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

11. Special Lines - Vertical

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

13. Special Lines - Diagonal

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

15. How about Arbitrary Lines?

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

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

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

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

20. Simple Algorithm 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

21. Simple Algorithm 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

22. Simple Algorithm 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

23. Simple Algorithm 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

24. Simple Algorithm 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

25. Simple Algorithm 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

26. Simple Algorithm - Example

27. Simple Algorithm - Example

28. Simple Algorithm - Example

29. Simple Algorithm - Example

30. Simple Algorithm - Example

31. Simple Algorithm - Example

32. Simple Algorithm - Example

33. Simple Algorithm - Example

34. Simple Algorithm - Example

35. Simple Algorithm - 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

36. Midpoint Algorithm
Given a point just drawn, determine whether we move E or NE on next step

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

38. Midpoint Algorithm

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

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

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

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

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

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

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

46. Midpoint Algorithm – Implicit Forms

47. Midpoint Algorithm – Implicit Forms

48. Midpoint Algorithm – Implicit Forms

49. Midpoint Algorithm – Implicit Forms

50. Midpoint Algorithm – Implicit Forms

51. Midpoint Algorithm – Implicit Forms

52. Midpoint Algorithm Need value of to decide E or NE
Build incremental algorithm
Assume we have value of
Find value of if E chosen
Find value of if NE chosen

53. Midpoint Algorithm Need value of to decide E or NE
Build incremental algorithm
Assume we have value of
Find value of if E chosen
Find value of if NE chosen

54. Midpoint Algorithm
If E was chosen, find

55. Midpoint Algorithm
If E was chosen, find

56. Midpoint Algorithm
If NE was chosen, find

57. Midpoint Algorithm
If NE was chosen, find

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

78. OpenGL: Drawing Lines glBegin (GL_LINES); glVertex2f (p1.x, p1.y);
glEnd(); P6 P5 P1 P4 P2 P3