1. CHAPTER 3 2D GRAPHICS ALGORITHMS
COMPUTER GRAPHICS
CHAPTER 3
2D GRAPHICS ALGORITHMS

2. 2D Graphics Algorithms Output Primitives Line Drawing Algorithms
DDA Algorithm
Midpoint Algorithm
Bersenhem’s Algorithm
Circle Drawing Algorithms
Midpoint Circle Algorithm
Antialising
Fill-Area Algorithms

3. Output Primitives

4. Output Primitives
The basic objects out of which a graphics display is created are called.
Describes the geometry of objects and – typically referred to as geometric primitives.
Examples: point, line, text, filled region, images, quadric surfaces, spline curves
Each of the output primitives has its own set of attributes.

5. Output Primitives Points Attributes: Size, Color. glPointSize(p);
glBegin(GL_POINTS);
glVertex2d(x1, y1);
glVertex2d(x2, y2);
glVertex2d(x3, y3);
glEnd()

6. Output Primitives Lines Attributes: Color, Thickness, Type
glLineWidth(p);
glBegin(GL_LINES);
glVertex2d(x1, y1);
glVertex2d(x2, y2);
glVertex2d(x3, y3);
glVertex2d(x4, y4);
glEnd()

7. Output Primitives Polylines (open)
A set of line segments joined end to end.
Attributes: Color, Thickness, Type
glLineWidth(p);
glBegin(GL_LINE_STRIP);
glVertex2d(x1, y1);
glVertex2d(x2, y2);
glVertex2d(x3, y3);
glVertex2d(x4, y4);
glEnd()

8. Output Primitives Polylines (closed)
A polyline with the last point connected to the first point .
Attributes: Color, Thickness, Type
Note: A closed polyline cannot be filled.
glBegin(GL_LINE_LOOP);
glVertex2d(x1, y1);
glVertex2d(x2, y2);
glVertex2d(x3, y3);
glVertex2d(x4, y4);
glEnd()

9. Output Primitives Polygons A set of line segments joined end to end.
Attributes: Fill color, Thickness, Fill pattern
Note: Polygons can be filled.
glBegin(GL_POLYGON);
glVertex2d(x1, y1);
glVertex2d(x2, y2);
glVertex2d(x3, y3);
glVertex2d(x4, y4);
glEnd()

10. Output Primitives Text
Attributes: Font, Color, Size, Spacing, Orientation.
Font:
Type (Helvetica, Times, Courier etc.)
Size (10 pt, 14 pt etc.)
Style (Bold, Italic, Underlined)

11. Output Primitives Images
Attributes: Image Size, Image Type, Color Depth.
Image Type:
Binary (only two levels)
Monochrome
Color.
Color Depth:
Number of bits used to represent color.

12. Output Primitives Output Primitive Attributes Point Size Color Line
Thickness (1pt, 2pt …)
Type (Dashed, Dotted, Solid)
Text
Font (Arial, Courier, Times Roman…)
Size (12pt, 16pt ..)
Spacing
Orientation (Slant angle)
Style (Bold, Underlined, Double lined)
Filled Region
Fill Pattern
Fill Type (Solid Fill, Gradient Fill)
Fill Color
Images
Color Depth (Number of bits/pixel)

13. Line Drawing Algorithms

14. Line Drawing Line drawing is fundamental to computer graphics.
We must have fast and efficient line drawing functions.
Rasterization Problem: Given only the two end points, how to compute the intermediate pixels, so that the set of pixels closely approximate the ideal line.

15. Line Drawing - Analytical Methodx
y=mx+c ax bx
A(ax,ay)
B(bx,by)

16. Line Drawing - Analytical Method
double m = (double)(by-ay)/(bx-ax);
double c = ay - m*ax;
double y;
int iy;
for (int x=ax ; x <=bx ; x++) {
y = m*x + c;
iy = round(y);
setPixel (x, iy); }
Directly based on the analytical equation of a line.
Involves floating point multiplication and addition
Requires round-off function.

17. Incremental Algorithms
I have got a pixel on the line (Current Pixel).
How do I get the next pixel on the line?
Compute one point based on the previous point:
(x0, y0)…….…………..(xk, yk) (xk+1, yk+1) …….
Next pixel on next row
(when slope is large)
Next pixel on next column
(when slope is small)

18. Incrementing along x xk+1 = xk+1 Current Pixel (xk, yk) (6,3)
To find (xk+1, yk+!):
xk+1 = xk+1
yk+1 = ?
(5,2)
(6,2)
(6,1)
Assumes that the next pixel to be set is on the next column of
pixels (Incrementing the value of x !)
Not valid if slope of the line is large.

19. Line Drawing - DDA
Digital Differential Analyzer Algorithm is an incremental algorithm.
Assumption: Slope is less than 1 (Increment along x).
Current Pixel = (xk, yk).
(xk, yk) lies on the given line. yk = m.xk + c
Next pixel is on next column. xk+1 = xk+1
Next point (xk+1, yk+1) on the line yk+1 = m.xk+1 + c
= m (xk+1) +c
= yk + m
Given a point (xk, yk) on a line, the next point is given by
xk+1 = xk+1
yk+1 = yk + m

20. Line Drawing - DDA double m = (double) (by-ay)/(bx-ax); double y = ay;
int iy;
for (int x=ax ; x <=bx ; x++) {
iy = round(y);
setPixel (x, iy);
y+ = m; }
Does not involve any floating point multiplication.
Involves floating point addition.
Requires round-off function

21. Midpoint Algorithm xk+1 = xk+1 yk+1 = Either yk or yk+1
Midpoint algorithm is an incremental algorithm
Assumption:
Slope < 1
Current
Pixel
xk+1 = xk+1
yk+1 = Either yk or yk+1

22. Midpoint Algorithm - Notations
Candidate Pixels
Current Pixel
( xk, yk)
Midpoint
Line
Coordinates of Midpoint = ( xk+1, yk+(1/2) )
( xk+1, yk)
( xk+1, yk+1)

23. Midpoint Algorithm: Choice of the next pixel
Midpoint Below Line
Midpoint Above Line
If the midpoint is below the line, then the next pixel is (xk+1, yk+1).
If the midpoint is above the line, then the next pixel is (xk+1, yk).

24. Equation of a line revisited.
Equation of the line:
Let w = bx  ax, and h = by  ay.
Then, h (x  ax)  w (y  ay) = 0.
(h, w , ax , ay are all integers).
In other words, every point (x, y) on the line satisfies the equation F(x, y) =0, where
F(x, y) = h (x  ax)  w (y  ay).
A(ax,ay)
B(bx,by)

25. Midpoint Algorithm: Regions below and above the line.
F (x,y) > 0
(for any point below line)
F(x,y) < 0
(for any point above line)
F(x,y) = 0

26. Midpoint Algorithm Decision Criteria
Midpoint below line
F(MP) < 0
Midpoint above line
F(MP) > 0

27. Midpoint Algorithm Decision Criteria
Decision Parameter
F(MP) = F(xk+1, yk+ ½) = Fk (Notation)
If Fk < 0 : The midpoint is above the line. So the next pixel is (xk+1, yk).
If Fk  0 : The midpoint is below or on the line. So the next pixel is (xk+1, yk+1).

28. Midpoint Algorithm – Story so far.
Midpoint Above Line
Next pixel = (xk+1, yk)
Fk < 0
yk+1 = yk
Midpoint Below Line
Fk > 0
yk+1 = yk+1
Next pixel = (xk+1, yk+1)

29. Midpoint Algorithm Update Equation
Fk = F(xk+1, yk+ ½) = h (xk+1  ax)  w (yk+½  ay)
Update Equation
But, Fk+1 = Fk + h  w (yk+1­­­ yk). (Refer notes)
So,
Fk< 0 : yk+1 = yk. Hence, Fk+1 = Fk + h .
Fk  0 : yk+1 = yk+1. Hence, Fk+1 = Fk + h  w.
F0 = h  w/2.

30. Midpoint Algorithm int h = by-ay; int w = bx-ax; float F=h-w/2;
int x=ax, y=ay;
for (x=ax; x<=bx; x++){
setPixel(x, y);
if(F < 0)
F+ = h;
else{
F+ = h-w;
y++; }

31. Bresenham’s Algorithm
int h = by-ay;
int w = bx-ax;
int F=2*h-w;
int x=ax, y=ay;
for (x=ax; x<=bx; x++){
setPixel(x, y);
if(F < 0)
F+ = 2*h;
else{
F+ = 2*(h-w);
y++; }

32. Circle Drawing Algorithms

33. Midpoint Circle Drawing Algorithm
To determine the closest pixel position to the specified circle path at each step.
For given radius r and screen center position (xc, yc), calculate pixel positions around a circle path centered at the coodinate origin (0,0).
Then, move each calculated position (x, y) 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 gradient varies from 0 to -1.

34. Midpoint Circle Drawing Algorithm
8 segments of octants for a circle:

35. Midpoint Circle Drawing Algorithm
Circle function:
fcircle (x,y) = x2 + y2 –r2
> 0, (x,y) outside the circle
< 0, (x,y) inside the circle
= 0, (x,y) is on the circle boundary {
fcircle (x,y) =

36. Midpoint Circle Drawing Algorithmyk
yk-1
midpoint yk
yk-1
midpoint
Next pixel = (xk+1, yk)
Fk < 0
yk+1 = yk
Next pixel = (xk+1, yk-1)
Fk >= 0
yk+1 = yk - 1

37. Midpoint Circle Drawing Algorithm
We know xk+1 = xk+1,
Fk = F(xk+1, yk- ½)
Fk = (xk +1)2 + (yk - ½)2 - r (1)
Fk+1 = F(xk+1, yk- ½)
Fk+1 = (xk +2)2 + (yk+1 - ½)2 - r (2)
(2) – (1)
Fk+1 = Fk + 2(xk+1) + (y2k+1 – y2k) - (yk+1 – yk) + 1
If Fk < 0,
Fk+1 = Fk + 2xk+1+1
If Fk >= 0,
Fk+1 = Fk + 2xk+1+1 – 2yk+1

38. Midpoint Circle Drawing Algorithm
For the initial point, (x0 , y0) = (0, r)
f0 = fcircle (1, r-½ )
= 1 + (r-½ )2 – r2
= 5 – r 4
≈ 1 – r

39. Midpoint Circle Drawing Algorithm
Example:
Given a circle radius = 10, determine the circle octant in the first quadrant from x=0 to x=y.
Solution:
f0 = 5 – r 4
= 5 – 10
= -8.75
≈ –9

40. Midpoint Circle Drawing Algorithm
Initial (x0, y0) = (1,10)
Decision parameters are: 2x0 = 2, 2y0 = 20 k Fk x y
2xk+1
2yk+1 -9 1 10 2 20
-9+2+1=-6 4
-6+4+1=-1 3 6
-1+6+1=6 9 8 18
=-3 5 =8 12 16 =5 7 14

41. Midpoint Circle Drawing Algorithm
void circleMidpoint (int xCenter, int yCenter, int radius) {
int x = 0;
Int y = radius;
int f = 1 – radius;
circlePlotPoints(xCenter, yCenter, x, y);
while (x < y) {
x++;
if (f < 0)
f += 2*x+1;
else {
y--;
f += 2*(x-y)+1; } }

42. Midpoint Circle Drawing Algorithm
void circlePlotPoints (int xCenter, int yCenter, int x, int y) {
setPixel (xCenter + x, yCenter + y);
setPixel (xCenter – x, yCenter + y);
setPixel (xCenter + x, yCenter – y);
setPixel (xCenter – x, yCenter – y);
setPixel (xCenter + y, yCenter + x);
setPixel (xCenter – y, yCenter + x);
setPixel (xCenter + y, yCenter – x);
setPixel (xCenter – y, yCenter – x); }

43. Antialiasing

44. Antialiasing
Antialiasing is a technique used to diminish the jagged edges of an image or a line, so that the line appears to be smoother; by changing the pixels around the edges to intermediate colors or gray scales.
Eg. Antialiasing disabled:
Eg. Antialiasing enabled:

45. Antialiasing (OpenGL)
Antialiasing disabled
Antialiasing enabled
Setting antialiasing option for lines:
glEnable (GL_LINE_SMOOTH);

46. Fill Area Algorithms

47. Fill Area Algorithms
Fill-Area algorithms are used to fill the interior of a polygonal shape.
Many algorithms perform fill operations by first identifying the interior points, given the polygon boundary.

48. Basic Filling Algorithm
The basic filling algorithm is commonly used in interactive graphics packages, where the user specifies an interior point of the region to be filled.
4-connected pixels

49. Basic Filling Algorithm
[1] Set the user specified point.
[2] Store the four neighboring pixels in a stack.
[3] Remove a pixel from the stack.
[4] If the pixel is not set,
Set the pixel
Push its four neighboring pixels into the stack
[5] Go to step 3
[6] Repeat till the stack is empty.

50. Basic Filling Algorithm (Code)
void fill(int x, int y) {
if(getPixel(x,y)==0){
setPixel(x,y);
fill(x+1,y);
fill(x-1,y);
fill(x,y+1);
fill(x,y-1); }

51. Basic Filling Algorithm
Requires an interior point.
Involves considerable amount of stack operations.
The boundary has to be closed.
Not suitable for self-intersecting polygons

52. Types of Basic Filling Algorithms
Boundary Fill Algorithm
For filling a region with a single boundary color.
Condition for setting pixels:
Color is not the same as border color
Color is not the same as fill color
Flood Fill Algorithm
For filling a region with multiple boundary colors.
Color is same as the old interior color

53. Boundary Fill Algorithm (Code)
void boundaryFill(int x, int y,
int fillColor, int borderColor) {
getPixel(x, y, color);
if ((color != borderColor)
&& (color != fillColor)) {
setPixel(x,y);
boundaryFill(x+1,y,fillColor,borderColor);
boundaryFill(x-1,y,fillColor,borderColor);
boundaryFill(x,y+1,fillColor,borderColor);
boundaryFill(x,y-1,fillColor,borderColor); }

54. Flood Fill Algorithm (Code)
void floodFill(int x, int y,
int fillColor, int oldColor) {
getPixel(x, y, color);
if (color != oldColor)
setPixel(x,y);
floodFill(x+1, y, fillColor, oldColor);
floodFill(x-1, y, fillColor, oldColor);
floodFill(x, y+1, fillColor, oldColor);
floodFill(x, y-1, fillColor, oldColor); }

55. Filling Polygons (OpenGL)
Enabling polygon fill (Default):
glPolygonMode(GL_FRONT_AND_BACK, GL_FILL);
Disabling polygon fill:
glPolygonMode(GL_FRONT_AND_BACK, GL_LINE);