Computer Graphics 2 nd Unit

M.A. Zahed
Lecturer in computer
Government Polytechnic Jintur
Objectives
• After learning this unit student can able to
Write program using given line drawing algorithm
Apply given algorithm to generate circle
Use given algorithm to rasterize given line
Apply character genratin algorithm to generate character
Line Drawing algorithms
• Line should be terminated
• Density of line should constant
• Density of line should be independent of length
and angle of line
• Line end point should be specified
Basics of line
• 
Equation to draw a line
• 
DDA Algorithms
• We need to scan over through one sampling axis and
by using those sampling axis we need to find other
axis values
• If you sampling through x unit interval we need to
find y interval values vice versa
• We know that slope of a line is given as
• ……equation(1)

• Above differential equation can be used to obtain

rasterized straight line, for any given x interval
along a line we can compute the corresponding y
interval from equa on 1 as
….equa on(2)
• 
• 

 
Example 1
• 

I X Y Plot(x,y)
0 0 (0,o)
1 =0+0.6=0.6 =0+1=1 (1,1)
2 =0.6+0.6=1.2 2 (1,2)
3 =1.2+0.6=1.8 3 (2,3)
4 =1.8+0.6=2.4 4 (2,4)
5 =2.4+0.6=3 5 (3,5)
6 =3+0.6=3.6 6 (4,6)
Example 2
• 

I X Y Plot(x,y)

5 4 (5,4)

1 6 =4+0.4=4.4 (6,4)

2 7 =4.4+0.4=4.8 (7,5)

3 8 =4.8+0.4=5.2 (8,5)

4 9 =5.2+0.4=5.6 (9,6)

5 10 =5.6+0.4=6 (10,6)

6 11 =6+0.4=6.4 (11,6)

7 12 =6.4+0.4=6.8 (12,7)
Example 3
• 

I X Y Plot
10 6 10,6
1 11 6.6 11,7
2 12 7.2 12,7
3 13 7.8 13,8
4 14 8.4 14,8
5 15 9 15,9
• Advantages
• It is simple
• Easy to understand
• Eliminate multiplication
• Faster than simple line drawing algorithm
• Doesn’t require any special skill to implement it

• Disadvantages
• Floating point arithmetic in DDA algorithm is time consuming
• Orientation dependent hence end point accuracy is poor.
• Slower than Bresenham’s algorithm
Bresenham’s Algorithm
• It uses only integer addition and subtraction and
multiplication by 2, and we know that the
computer can perform the operations of integer
addition and subtraction very rapidly, therefore it
is an efficient method for scan converting straight
lines
• Principle: is to select optimum raster locations to
represent a straight line. To accomplish this the
algorithm always increment either x or y by one
unit depend on slope of line. The increment in the
other variable is determined by examining the
distance between the actual line and nearest pixel.
The distance is called as decision variable or error.
• As shown in fig the line does not pass through all raster
points(pixels). It passes through raster point(0,0) and
subsequently three pixels.
• The term error or decision variable is defined as e=DB – DA or
e=DA – DB
• let us define e=DB –DA , now if e>0 then it implies that DB>DA i.e.
pixel above true line is closer to true line.
• If DB<DA then e<0 we can say that pixel below the line is closer
to true line
• Thus by checking the error term it is possible to determine
pixel position to represent the line path
• The error term is initially set as e=2* Δy - Δx where
Δy=y2-y1 and Δx=x2-x1
According to value of e following action are taken
While( e>=0)
{
y=y+1
e=e-2* Δx
}
x=x+1
e=e+2* Δy
When e>=0 error is initialize with e=e-2* Δx. this will
continued till error is negative. In each iteration y is
incremented by 1.
When e<0 error is initialized to e=e+2* Δy. in both cases x is
incremented by 1
Bresenham’s Algoritm
• 
Example:1 Consider the line from (5,5) to (13,9) use the Bresenham’s
algorithm to rasterize the line
• Δx=|13-5|=8 & Δy=|9-5|=4
• x=5 & y=5
• e=2*Δy-Δx=2*4-8=0
• i= Δx

e=0 e=-8 e=0

y=y+1=5+1=6 y=y=7 y=y+1=8+1=9
x=x+1=5+1=6 x=x+1=8+1=9 x=x+1=11+1=12
e= 0+2*(4-8)=-8 e=-8+(2*4)=0 e= 0+2*(4-8)=-8

e=-8 e=0 e=-8

y=y=6 y=y+1=7+1=8 y=y=9
x=x+1=6+1=7 x=x+1=9+1=10 x=x+1=12+1=13
e=-8+(2*4)=0 e= 0+2*(4-8)=-8 e=-8+(2*4)=0

e=0 e=-8
y=y+1=6+1=7 y=y=8
x=x+1=7+1=8 x=x+1=10+1=11
e=0+2*(4-8)=-8 e=-8+(2*4)=0
I X Y E PLOT(X,Y)
5 5 0 5,5
1 6 6 -8 6,6
2 7 6 0 7,6
3 8 7 -8 8,7
4 9 7 0 9,7
5 10 8 -8 10,8
6 11 8 0 11,8
7 12 9 -8 12,9
8 13 9 0 13,9
• 

e=6 e=14 e=2

x=x+1=10+1=11 x=x+1=13+1=14 x=x+1=16+1=17
y=y+1=12+1=13 y=y+1=14+1=15 y=y+1=17+1=18
e=6+(-4)=2 e=14+(-4)=10 e=2+(-4)=-2

e=2 e=10 e=-2

x=x+1=11+1=12 x=x+1=14+1=15 x=x+1=17+1=18
y=y+1=13+1=14 y=y+1=15+1=16 y=y=18

x=x+1=19+1=20
y=y+1=19+1=20
e=2+(-4)=-2 e=10+(-4)=6 e=-2+16=14

e=10+(-4)=6
e=-2 e=6 e=14
x=x+1=12+1=13 x=x+1=15+1=16 x=x+1=18+1=19

e=10
y=y=14 y=y+1=16+1=17 y=y+1=18+1=19
e=-2+16=14 e=6+(-4)=2 e=14+(-4)=10
I X Y E Plot(x,y)
10 12 6 10,12
1 X=x+1=11 13 2 11,13
2 12 14 -2 12,14
3 13 14 14 13,14
4 14 15 10 14,15
5 15 16 6 15,16
6 16 17 2 16,17
7 17 18 -2 17,18
8 18 18 14 18,18
9 19 19 10 19,19
10 20 20 6 20,20
• Consider the line from (6,5) to (15,10) use the Bresenham’s
algorithm to rasterize the line;

Solution: dx=15-6=9 & dy=10-5=5

x=6 & y=5
e=2*dy-dx=2*5-9=1
2(dy-dx)=2*-4=-8 &2*dy=2*5=10

e=1 e=-1 e=-7

x=x+1=6+1=7 x=x+1=9+1=10 x=x+1=12+1=13
y=y+1=5+1=6 y=y=7 y=y=10
e=1+(-8)=-7 e=-1+(10)=9 e=-7+10=3

e=-7 e=9 e=3

x=x+1=7+1=8 x=x+1=10+1=11 x=x+1=13+1=14
y=y=6 y=y+1=9 y=y+1=10+1=11
e=-7+10=3 e=9+(-8)=1 e=3+-8=-5

e=3 e=1 e=-5

x=x+1=8+1=9 x=x+1=11+1=12 x=x+1=14+1=15
y=y+1=6+1=7 y=y+1=9+1=10 y=y=11
e=3+(-4)=-1 e=1+(-8)=-7 e=-3+(10)=7
• Advantages:
• It is faster than DDA Algorithm
• More efficient and much accurate than DDA
• It produce mathematically accurate results using only integer addition,
subtraction and multiplication by 2 which can be accomplished by a simple
arithmetic shift operation.

• Disadvantages:
• Though it improve accuracy of generated points but still the
resulted line is not smooth
• This algorithm is for the basic line drawing
Basic concept of circle Drawing
• 
Basic concept of circle Drawing
• Circle is an eight-way symmetric figure. The shape of circle is the same in all quadrants. In each
quadrant, there are two octants. If the calculation of the point of one octant is done, then the
other seven points can be calculated easily by using the concept of eight-way symmetry.
Bresenham’s circle drawing
• 
• 
Bresenham’s Circle Drawing
Algorithm
• 
 Bresanham’s circle drawing algorithm
Determine and plot symmetric points in other octants as well (if a
circle is
given of center Xc,Yc then write plot (Xc + Xi+1, Yc + Yi+1)
Draw Circle (Xc, Yc, X, Y):
PutPixel(Xc + X, Yc, + Y)
PutPixel(Xc - X, Yc, + Y)
PutPixel(Xc + X, Yc, - Y)
PutPixel(Xc - X, Yc, - Y)
PutPixel(Xc + Y, Yc, + X)
PutPixel(Xc - Y, Yc, + X)
PutPixel(Xc + Y, Yc, - X)
PutPixel(Xc - Y, Yc, - X)
• Plot a circle having radius 10 using Bresenham’s
I) If di<0 then di+1= di+4xi+6
xi+1= xi+1 and

II)If di>=0 then di+1= di+4(xi- yi )+10.

xi+1= xi+1 & yi+1 = yi -1
In this x=0 y=r=10
r=10 d0 =3-2*r=3-2*10=-17
I X Y Decision parameter
0 0 10 D0=3-2*10=-17
1 1 10 D1=-17+4*0+6=-11
2 2 10 D2=-11+4*1+6=-1
3 3 10 D3=-1+4*2+6=13
4 4 9 D4=13+4(3-10)+10=-5
5 5 9 D5=-5+4*4+6=17
6 6 8 D6=17+4(5-9)+10=11
7 7 7 D7=11+4(6-8)+10=13
• Plot a circle having radius 9 using Bresenham’s
I) If di<0 then di+1= di+4xi+6
xi+1= xi+1 and

II)If di>=0 then di+1= di+4(xi- yi )+10.

xi+1= xi+1 & yi+1 = yi -1
In this x=0 y=r=9
r=9 d0 =3-2*r=3-2*9=-15
I X Y Decision parameter
0 0 9 D0=3-2*9=-15
1 1 9 D1=-15+4*0+6=-9
2 2 9 D2=-9+4*1+6=1
3 3 8 D3=1+4(2-9)+10=-17
4 4 8 D4=-17+4*3+6=1
5 5 7 D5=1+4(4-8)+10=-5
6 6 7 D6=-5+4*5+6=21
Polygon
• Polygon is the closed figure made up of connected lines. The polygon can be represented by lis ng
its n ver ces in an ordered list. P = {(x1, y1), (x2, y2), ……., (xn, yn)}. The polygon can be displayed
by drawing a line between (x1, y1), and (x2, y2), then a line between (x2, y2), and (x3, y3), and so
on un l the end vertex. In order to close up the polygon, a line between (xn, yn), and (x1, y1) must
be drawn.
• Types of Polygons:
Convex Polygon - For any two points P1, P2 inside the polygon, all points on the line segment
which connects P1 and P2 are inside the polygon. Angle between the pair of edges is less
than 180.
Concave Polygon
- A polygon which is not convex. For any two points P1, P2 inside the polygon, all points on
the line segment which connects P1 and P2 are outside the polygon. Angle between at
least one pair of edges is greater than 180.

- Convex Concave
Polygon Filling
• When filling polygons we should decide whether a par cular point is interior or exterior to a
polygon.
• Even-Odd Method: If there are an odd number of intersec ons, then the point is inside,
otherwise it is outside. This inside test or Even-Odd method is used in scan line method of
polygon filling.

• Winding Number Method: Instead of just coun ng the number of intersec ons, each edge
crossed is given a direc on number.
Value of the direc on number is :
* 1, (Ystart < Yend)
* -1, (Ystart > Yend)
Point is inside the Polygon if the sum of direc on numbers is non-zero,
else outside.
Polygon Filling

Polygon filling
Algorithm

Scan Line Polygon Seed Fill

Filling Algorithm Algorithm

Boundary filling Flood filling

Algorithm Algorithm
Seed Fill Algorithm
• Seed fill algorithm select interior pixel of the polygon as seed and grow
gradually. Algorithm examines the neighbors of each pixel, if it is not filled
with specified color or boundary color then fill it with the given color
recursively until polygon filled with specified color.
1. Boundary Fill Algorithm: A boundary-fill procedure accepts as input the
coordinate of the interior point (x, y), a fill color, and a boundary color.
The following steps illustrate the idea of the recursive boundary-fill algorithm:
1. Start from an interior point.
2. If the current pixel is not already filled and if it is not an edge point, then set
the pixel with the fill color, and store its neighboring pixels (4 or 8-connected) in
the stack for processing. Store only neighboring pixel that is not already filled
and is not an edge point.
3. Select the next pixel from the stack, and continue with step 2.
Boundary Fill Algorithm
(The order of pixels that should be added to stack using 4-connected is above,
below, left, and right. For 8-connected is above, below, left, right, aboveleft,
above-right, below-left, and below-right.)
Boundary Fill Algorithm
• 4-connected (example)
Boundary Fill Algorithm
• 4-connected (example)
Boundary Fill Algorithm
• 4-connected (example)
Boundary Fill Algorithm
• 4-connected (example)
Boundary Fill Algorithm
• 4-connected (example)
Boundary Fill Algorithm
• 4-connected (example)
Boundary Fill Algorithm
• 4-connected (example)

• Some me 4-way connec vity fails to paint the en re region.

Boundary Fill Algorithm
• 8-connected (example)
Boundary Fill Algorithm
• 8-connected (example)
Boundary Fill Algorithm
• 8-connected (example)
Boundary Fill Algorithm
• 8-connected (example)
Boundary Fill Algorithm
• 8-connected (example)
Boundary Fill Algorithm
• 8-connected (example)
Boundary Fill Algorithm
• 8-connected (example)
Boundary Fill Algorithm
• 8-connected (example)
Boundary Fill Algorithm
• 8-connected (example)
Boundary Fill Algorithm
• 8-connected (example)
Boundary Fill Algorithm
• 8-connected (example)
Boundary Fill Algorithm
• 8-connected (example)
Boundary Fill Algorithm
• 8-connected (example)
Boundary Fill Algorithm
• 8-connected (example)
Boundary Fill Algorithm
void boundaryFill(int x, int y, int fillColor, int borderColor)
{
getPixel(x, y, color);
if ((color != borderColor)
&& (color != fillColor))
{
putpixel(x,y, fillColor);
boundaryFill(x+1,y,fillColor,borderColor);
boundaryFill(x-1,y,fillColor,borderColor);
boundaryFill(x,y+1,fillColor,borderColor);
boundaryFill(x,y-1,fillColor,borderColor);
}
}
Boundary Fill Algorithm
• Advantages:
✔ Simple
✔ Easy to implement
✔ Work for any type of polygon

• Disadvantages:
― Require extensive stacking due to recursion
― Doesn’t work if boundary specified with multiple colors
― Require more memory
― Fail to fill certain parts of polygon
Flood fill Algorithm
• Modified form of Boundary Fill Method.
• Fill polygon star ng with a “seed” point known to be inside the polygon & set the
neighboring pixels un l we encounter the boundary pixels.
• The algorithm starts with the interior pixel, fill color and old color. If the color of
the current pixel is the same as old color then it fills the pixel with fill color and
examines its neighbors
• this method is more suitable for filling multiple colors boundary.

Procedure: floodfill (int x, int y, int fill_ color, int old_color) 

    If (getpixel(x,y) =old_color)  
   {  
    putpixel (x, y, fill_color);  
    fill (x+1, y, fill_color, old_color);  
     fill (x-1, y, fill_color, old_color);  
    fill (x, y+1, fill_color, old_color);  
    fill (x, y-1, fill_color, old_color);  
     }  
}  
Flood Fill Algorithm
• Advantages:
✔ Simple
✔ Easy to implement
✔ Handle object with multi color boundary

• Disadvantages:
― Require extensive stacking due to recursion
― Slow in nature
― Not suitable for large polygon
Scan Line Polygon Filling Algorithm
The scan-line polygon-filling algorithm involves
• The horizontal scanning of the polygon from its lowermost to its topmost vertex,
• Iden fying which edges intersect the scan-line, and finally drawing the interior
horizontal lines with the specified fill color.
The scan-line algorithm works as follows:
i. Find intersec ons of the scan-line with all edges
ii. Sort intersec ons in increasing x
iii.Make the pair of line intersec ons
iv. Fill all the pixels between pairs of intersec ons
Scan Line Polygon Filling Algorithm
• 

YMAX XMIN 1/m *ptr

Scan Line Polygon Filling Algorithm
For each scan line crossing a polygon, the area-fill algorithm locates the
intersection points of the scan line with the polygon edges.
∙ These intersection points are then sorted from left to right, and the
corresponding frame-buffer positions between each intersection pair are set to the
specified fill color.
∙ Scan line algorithm works by intersecting scan line with polygon edges and fills
the polygon between pairs of intersections. The following steps depict how this
algorithm works.
Step1: Find out the Ymin and Ymax from the given polygon.
Step 2: ScanLine intersects with each edge of the polygon
From Ymin to Ymax. Name each intersection point of the
polygon. As per the Fig. shown, they are named as p0, p1,
p2, p3.
Step 3: Sort the intersection point in the increasing order of
X coordinate i.e. (p0, p1), (p1, p2), and (p2, p3).
Step 4: Fill all those pair of coordinates that are inside polygons and ignore the
alternate pairs.
• If both lines intersecting at the vertex are on the same side of the
scanline, consider it as two opoints.
• If lines intersecting at the vertex are at opposite sides of the
scanline, consider it as only one point
Scan Line Polygon Filling Algorithm
• (Example) Polygon = {A, B, C, D, E, F, G}
• Polygon = {(2, 7), (4, 12), (8,15), (16, 9), (11, 5), (8, 7), (5, 5)}

Here x represents in above table x

coordinate of polygon edge where
first intersection of scan line on
vertex of polygon will occur.
Example scan line algorithm
Example scan line algorithm
Example scan line algorithm
Example scan line algorithm
Example scan line algorithm
Example scan line algorithm
Example scan line algorithm
Example scan line algorithm
Example scan line algorithm
Example scan line algorithm
Example scan line algorithm
• Scan Conversion: It is a process of computing pixel locations of
primitives and displaying it on monitor screen, Most of Monitors and
Television supports raster scan display, (picture definition stored as
discrete pixels values.) Computed pixel values may be fraction, so it
needs to round off to show it on monitor screen as (10.8, 10.8),
(12.6, 11.7) and (13.3, 10.4) are rounded to nearest integer (11, 11),
(13, 12) and (13.10) respectively.

• Frame Buffer: The frame buffer is the video memory (RAM) that is used
to hold or map the image displayed on the screen.
Display
Frame Video
The system having screen Processor Monitor
Buffer Controller
Memory
resolu on 1280*1280 and
suppor ng 24 bits per
pixel require 4.69 MB of
Display Processor/Graphics System
memory for Frame Buffer CPU
Controller Memory

System Bus

I/O Devices
Character Generation Method
• There are basically 3 methods of character
generation
1) Stroke Method
2) Bitmap or Dot Matrix Method
3) Starburst Method
Stroke method
• Method creates characters out of a series of line segments, like strokes
of a pen, as shown in fig.

• In this method, basic primi ve shapes like line, curves are used to
generate the character. To produce a character , we give a sequence of
commands that defines the start point and end points of the straight
lines.
• By using this method various faces of character can be generated, by
changing the values (parameters) in line and arc func on.
Starburst Method
1. In this method a fixed pattern of line is used to generate the character.
2. In this method we use a combination of 24 bit line segment.
3. In 24 bit line segment code each bit represent a single line.
4. To highlight a line we put corresponding bit 1 in 24 bit line segment code and 0 otherwise.
Eg. :- The starbust patterns for characters A and M
24-bit code for Character ‘A’ is 0011 0000 0011 1100 1110 0001 and
24-bit code for character ‘M’ is 0000 0011 0000 1100 1111 0011

Disadvantages:
• It requires more memory.
• It requires additional code conversion programs to display characters from the 24 bit code.
• Requires code conversion software to display character from its 24-bit code
• Character quality is poor. It is worst for curve shaped characters.
• This method is not used now-a-days.
Bitmap Method
• This method is called as, “Bitmap method”. In this method, characters are
represented by an array of dots, as shown in fig.

• A bitmap font uses a rectangular pattern of pixels to define each character.

• It requires more space, because each variation (size or format) must be stored
in memory.
• Depending on size of font array size varies.
• Easy to retrive and display character using this method. But not much scalable
due to fixed array size.
Thank you…!!!