1. Rasterizing Lines 1
Lecture 32
Mon, Nov 12, 2007

2. Pixels and Screen Coordinates
We think of the viewport as consisting of a rectangular array of pixels.

3. Pixels and Screen Coordinates
A basic question is, what are the coordinates of the pixels?
Are they integers, e.g., (3, 2)?
Or, are they half-integers, e.g. (3½, 2½)? 1 2 3
Integers
(3, 2)
Half-integers
(3½, 2½)

4. Pixels and Screen Coordinates
F. S. Hill’s book adopts the view that they are integers.
OpenGL adopts the view that they are half-integers.
We will conform to OpenGL’s view, so that our results will match OpenGL’s results.

5. Lines and Polygons
To draw the boundary of a polygon, should we simply draw the edges as lines?
To draw the interior of a polygon, should be draw the edges as lines and shade all interior points?
Four lines or one
polygon?
Which pixels to
shade?

6. Lines and Polygons
To draw the boundary of a polygon, should we simply draw the edges as lines?
To draw the interior of a polygon, should be draw the edges as lines and shade all interior points?
Four lines or one
polygon?
Which pixels to
shade?

7. Lines and Polygons
Is it necessary that the interior of a polygon be contiguous?
Which pixels
to shade?

8. Lines and Polygons
Is it necessary that the interior of a polygon be contiguous?
Which pixels
to shade?

9. Lines and Polygons
Is it necessary that the interior of a polygon be contiguous?
Which pixels
to shade?

10. Bresenham’s Algorithm
Read
Run

11. Pixels and Screen Coordinates
All lines will go from one intersection of grid lines to another.

12. Rasterizing Lines
In what follows, we will assume that the line has a slope between 0 and 1.
That is, the change in x is greater than the change in y.
The other cases are “easily” adapted from this case.

13. Rasterizing Lines
When drawing a line on the screen, how do we decide which pixels to color?
(16, 7)
(0, 0)

14. Rasterizing Lines
In each vertical strip, choose the pixel whose center is closest to the line.

15. Lines and Pixels
In each vertical strip, choose the pixel whose center is closest to the line.
(0, 0)
(16, 7)

16. Choosing the Pixel Let the equation of the line be y = mx + b.
Given that we have just colored pixel (px, py), the next pixel to color is either (px + 1, py) or (px + 1, py + 1).
Why?

17. Choosing the Pixel
What is the most efficient way to determine which point to color?
We could compute m(px + 1) + b and then compare it to py and py + 1 to see which is closer.
Why is this not a good idea?
For a fixed change in x, i.e., 1, there will be a fixed change in y, i.e., m.

18. (bx – ax)(y – ay) = (by – ay)(x – ax).
The Decision Function
We need a function which, when evaluated, will tell us whether to increase y or to keep y the same.
Let the line go from A = (ax, ay) to B = (bx, by).
The equation of the line can be written
(bx – ax)(y – ay) = (by – ay)(x – ax).

19. The Decision Function Let W = bx – ax (the width).
Let H = by – ay (the height).
Note that W  H  0 by our assumption.
Then the equation can be written
–W(y – ay) + H(x – ax) = 0.
Let F(x, y) = –2W(y – ay) + 2H(x – ax).
The factor of 2 is introduced to avoid the fraction ½ later.

20. The Decision Function Note that
If F(x, y) < 0, then the line is below (x, y).
If F(x, y) > 0, then the line is above (x, y).
We will call F(x, y) the decision function.

21. Bresenham’s Midpoint Algorithm
Suppose we have colored pixel P = (px, py).
Now, in the next column, we need to decide whether to color the lower pixel L = (px + 1, py) or the upper pixel U = (px + 1, py + 1).
Let M be midway between U and L.
Then M = (px + 1, py + ½).

22. Bresenham’s Midpoint Algorithm
If the line is above M, then we should color U.
If the line is below M, then we should color L.
That is,
If F(px + 1, py + ½) > 0, then color U.
If F(px + 1, py + ½) < 0, then color L.

23. Bresenham’s Midpoint Algorithm
To find a recursive formula for the decision, consider what happens as we go from px + 1 to px + 2.
There are two cases:
We colored L in the previous step.
We colored U in the previous step.

24. Bresenham’s Midpoint Algorithm
py + 2
“over-over”
M U
py + 1 M M L py px
px + 1
px + 2

25. Bresenham’s Midpoint Algorithm
py + 2
“over-over”
M
“over-up” U
py + 1 M M L py px
px + 1
px + 2

26. Bresenham’s Midpoint Algorithm
py + 2
“over-over”
M
“over-up”
“up-over” U
py + 1 M M L py px
px + 1
px + 2

27. Bresenham’s Midpoint Algorithm
py + 2
“over-over”
M
“over-up”
“up-over” U
py + 1
“up-up” M M L py px
px + 1
px + 2

28. Bresenham’s Midpoint Algorithm
Case 1: We colored L.
Compute the difference
F(px + 2, py + ½) – F(px + 1, py + ½)
to see how much F(x, y) has increased.
We get an increase of 2H.

29. Bresenham’s Midpoint Algorithm
Case 2: We colored U.
Compute the difference
F(px + 2, py + ½) – F(px + 1, py + 1½)
to see how much F(x, y) has increased.
We get an “increase” of -2(W – H).
This is really a decrease of 2(W – H).

30. Bresenham’s Midpoint Algorithm
Summarizing the two cases:
If the previous value of F was negative, then the next value is 2H larger.
If the previous value of F was positive, then the next value is 2(W – H) smaller.
This allows us to move quickly from one decision to the next, since we need only add or subtract a constant.
We do not need to evaluate F(x, y) each time.

31. Bresenham’s Midpoint Algorithm
To start the process, consider the first point (ax, ay).
The first midpoint considered is
M = (ax + 1½, ay + 1).
The value of F(ax + 1½, ay + 1) is 3H – 2W.
Therefore, the initial value of the decision function is 3H – 2W.

32. Bresenham’s Midpoint Algorithm
The algorithm.
Initialize x = ax, y = ay., F = 3H – 2W.
Repeat until x = bx.
Increment x.
If F < 0, then
Add 2H to F.
If F > 0, then
Subtract 2(W – H)
Increment y.

33. Bresenham’s Midpoint Algorithm
This algorithm produces the coordinates of the grid point to the lower left of the pixel to be shaded.

34. Example Rasterize the line from (0, 0) to (16, 7). W = 16, H = 7.
2H = 14, 2(W – H) = 18, 3H – 2W = -11. x F y y 1 2 3 4 5 x F y y 6 7 8 9 10 11 x F y y 12 13 14 15

35. Example Rasterize the line from (0, 0) to (16, 7). W = 16, H = 7.
2H = 14, 2(W – H) = 18, 3H – 2W = -11. x F y y
-11 1 3 2
-15 -1 4 13 5 -5 x F y y 6 9 7 -9 8 5
-13 10 1 11
-17 x F y y 12 -3 13 11 14 -7 15 7

36. Example Rasterize the line from (0, 0) to (16, 7). W = 16, H = 7.
2H = 14, 2(W – H) = 18, 3H – 2W = -11. x F y y
-11 1 3 2
-15 -1 4 13 5 -5 x F y y 6 9 1 7 -9 8 5
-13 10 11
-17 x F y y 12 -3 13 11 1 14 -7 15 7

37. Example Rasterize the line from (0, 0) to (16, 7). W = 16, H = 7.
2H = 14, 2(W – H) = 18, 3H – 2W = -11. x F y y
-11 1 3 2
-15 -1 4 13 5 -5 x F y y 6 9 1 2 7 -9 3 8 5
-13 4 10 11
-17 x F y y 12 -3 5 13 11 1 14 -7 6 15 7

38. Lines and Pixels
(16, 7)
(0, 0)

39. Another Example Rasterize the line from (3, 5) to (16, 14).
W = 13, H = 9.
2H = 18, 2(W – H) = 8, 3H – 2W = 1. x F y y 3 4 5 6 7 8 9 x F y y 10 11 12 13 14 15

40. Another Example Rasterize the line from (3, 5) to (16, 14).
W = 13, H = 9.
2H = 18, 2(W – H) = 8, 3H – 2W = 1. x F y y 3 1 4 -7 5 11 6 7 -5 8 13 9 x F y y 10 -3 11 15 12 7 13 -1 14 17 9

41. Another Example Rasterize the line from (3, 5) to (16, 14).
W = 13, H = 9.
2H = 18, 2(W – H) = 8, 3H – 2W = 1. x F y y 3 1 4 -7 5 11 6 7 -5 8 13 9 x F y y 10 -3 11 15 1 12 7 13 -1 14 17 9

42. Another Example Rasterize the line from (3, 5) to (16, 14).
W = 13, H = 9.
2H = 18, 2(W – H) = 8, 3H – 2W = 1. x F y y 3 1 5 4 -7 6 11 7 -5 8 13 9 x F y y 10 -3 11 15 1 12 7 13 -1 14 17 9

43. Example 14 5 3 16

44. Bresenham’s Algorithm
void bresenham(Point2 A, Point2 B) {
int y = A.y;
int W = B.x – A.x;
int H = B.y – A.y;
int H2 = 2*H;
int WH2 = 2*(W – H);
int F = 3*H – 2*W;
for (int x = A.x; x < B.x; x++)
setPixel(x, y);
if (F < 0)
F += H2;
else
F -= WH2;
y++; }

45. Bresenham’s Algorithm
Read
Run

46. OpenGL’s Line Drawer
Read
Run

47. Freehand Drawing
Read
Run