Chapter 2 CGR

SANJIVANI K. B. P.
POLYTECHNIC, KOPARGAON
With NBA ACCREDIATED programs , Approved by AICTE, New Delhi,
Recognized by Govt. of Maharashtra, Affiliated to Maharashtra State Board of Technical Education, Mumbai,
ISO 9001:2015 Certified Institute
Department:- Infomation Technology Class:- SY CO
Name of Subject:- Computer Graphics MSBTE Subject Code:-

22318
Chapter 2
Raster Scan Basic Graphics
Sanjivani K.B.P. Polytechnic, Kopargaon Department of Computer Engg A. L. Deokate

1.1 Basic Concepts in line drawing
• 1.Line is Straight object with no curves, no thickness and it extends in

both directions without end. if it doesn't ends it is called a line
segment.
• 2.A vector is a quantity having direction as well as magnitude,
especially as determining the position of one point in space relative to
other.
• 3.The process of ‘turning on’ the pixel for a line segment is called
Vector generation or line generation and the algorithms or line
drawing algorithm.
Sanjivani K.B.P. Polytechnic, Kopargaon Department

of Computer Engg A. L. Deokate
Problems of vector generation
1.The 45 Degree line is straight but its width is not constant.
2.The line with any other orientation is neither straight nor has same width. Such cases are due to
the finite resolution of display.
3.The brightness of the line is dependent on the orientation of line.
4.we can observe that the effective spacing between pixels for the 45 degree line is greater than
for the vertical and horizontal lines appear brighter than the 45 degree line.
4.Complex calculations are required to provide equal brightness along lines of varying length and
orientation .
5.Therefore, to draw line rapidly some compromises are made such as.
1.calculate only an approximation line length.
2.Reduce the calculation using simple integer arithmetic.
3.implement result in hardware and firmware.

DDA Line generation Algorithm in Computer Graphics
• In computer graphics , a digital differential analyzer (DDA) is hardware

or software used for interpolation of variables over an interval between
start and end point. DDAs are used for rasterization of lines, triangles
and polygons
• In any 2-Dimensional plane if we connect two points (x0, y0) and (x1,
y1), we get a line segment. But in the case of computer graphics we can
not directly join any two coordinate points, for that we should calculate
intermediate points coordinate and put a pixel for each intermediate
point, of the desired color with the help of functions like putpixel(x, y,
K) in C, where (x,y) is our co-ordinate and K denotes some color.

Examples:
• 1. Explain DDA line drawing algorithm. For line segment between (2,
2) and (6, 6) :
• we need (3, 3) (4, 4) and (5, 5) as our intermediate Points.
• Answer: suppose we want to draw a line from (2,2) to (6,6)
So x1=2,y1=2,x2=6,y2=6
Therefore Dx=(x2-x1)=6-2=4
Dy=(y2-y1)=6-2=4

As |Dx|=|Dy| the line is of gentle slope category
steps=abs(Dx) =4
Xinc = Dx/steps=4/4=1
Yinc=Dy/steps=4/4=1
First point we know i.e. x1,y1, so plot it
Therefor Xnew= Xold + Xinc= 2+1=3
Ynew=Yold+Yinc=2+1=3
Second point we know i.e. x2,y2 ,so plot it
Therefore
Xnew=Xold+Xinc= 3+1=4
Third point we know i.e x3,y3 ,so plot it.
Xnew =Xold+Xinc=4+1=5
Ynew= Yold+ Yinc=4+1=5
Fourth point we know i.e x3,y3 ,so plot it.
Ynew= Yold+ Yinc=5+1=6

Sr.no x y plot

0 2 2 (2,2)

1 3 3 (3,3)

2 4 4 (4,4)

3 5 5 (5,5)

4 6 6 (6,6)


2.Draw DDA line algorithm. For following segments (1,1) to (5,3) for rasterize this line. Answer:
suppose we want to draw a line from (1,1) to (5,3) So x1=1,y1=1,x2=5,y2=3
Therefore Dx=(x2-x1)=5-1=4
Dy=(y2-y1)=3-1=2

As |Dx|>|Dy| the line is of gentle slope category

steps=abs(Dx) =4

Xinc = Dx/steps=4/4=1

Yinc=Dy/steps=2/4=0.5
First point we know i.e. x1,y1, so plot it
Therefor
Xnew= Xold + Xinc= 1+1=2
Ynew=Yold+Yinc=1+0.5=1.5
Second point we know i.e. x2,y2 ,so plot it
Therefore
Xnew=Xold+Xinc= 2+1=3
Ynew=Yold+Yinc=1.5+0.5=2
Third point we know i.e x3,y3 ,so plot it.
Ynew=Yold+Yinc=2+0.5=2.5
Fourth point we know i.e x4,y4 ,so plot it
Xnew=Xold+Xinc=4+1=5
Xnew=Yold+Yinc=2.5+0.5=3
Sr.no x y plot

0 1 1 (1,1)

1

1

1.5

(1,2)

2 3 2 (3,2)

3

4

2.5

(4,3)

4 5 3 (5,3)


3.Explain DDA line drawing algorithm. Consider the line from (1,1) to (5,6) Use
DDA line drawing
algorithm to rasterize this line.
Answer :
Given x1=1 , y1=1 ,x2=5, y2=6
Dx=x1-x2=5-1=4 Dy=y1-y2=6-1=5
Since |Dy|>|Dx| the line is of steep slope category
Steps= abs(Dy)=5
Xinc= Dx/steps=⅘=0.8
Yinc=Dy/steps=5/5=1
As we know the first point, let’s plot it as(1,1)
Xnew=Xold+Xinc=1+0.8=1.8
As we know the 2nd point, let’s plot it as(1.8,2)
Xnew=Xold+Xinc=1.8+0.8=2.6
As we know, the 3nd point, let’s plot it as(3,3)

As we know the 4th point, let’s plot it as(3.4,4)
As we know the 5th point, let’s plot it as(4.2,5)
Xnew=Xold+Xinc=4.2+0.8=5

Sr.no

x

Y

plot
0

1

1

(1,1)

1 1.8 2 (1.8,2)

2 2.6 3 (2.6,3)

3

3.4

4

(3.4,4)

4 4.2 5 (4.2,5)

5 5 6 (5,6)


• For using graphics functions, our system output screen is treated as a
coordinate system where the coordinates of the top-left corner is (0,
0) and as we move down our y-ordinate increases and as we move
right our x-ordinate increases for any point (x, y).
• Now, for generating any line segment we need intermediate points
and for calculating them we have can use a basic algorithm called
DDA(Digital differential analyzer) line generating algorithm.

DDA Algorithm:
Consider one point of the line as (X0,Y0) and the second point of the line as (X1,Y1).

calculate dx , dy dx = X1 - X0;
dy
= Y1 - Y0;
Depending upon absolute value of dx & dy
choose number of steps to put pixel as
steps
= abs(dx) > abs(dy) ? abs(dx) : abs(dy) steps = abs(dx) > abs(dy) ? abs(dx) : abs(dy);
calculate increment in x & y for each step Xinc = dx / (float) steps;
Yinc
= dy / (float) steps;
Put pixel for each step
X=X0;
Y=Y0;
for (int i = 0; i <= steps; i++)
{
putpixel (X,Y,WHITE);
X += Xinc;
Y += Yinc;
}

C

program for DDA line generation #include<stdio.h> #include<graphics.h>
//Function for finding absolute value
int abs (int n)
{
return ( (n>0) ? n : ( n * (-1)));
}

//DDA Function for line generation
void DDA(int X0, int Y0, int X1, int Y1)
{
calculate
dx & dy int dx = X1 - X0; int dy = Y1 - Y0;
calculate steps required for generating pixels int steps = abs(dx) > abs(dy) ?
abs(dx)
: abs(dy);
calculate
• increment in x & y for each step

float Xinc = dx / (float) steps;
float Yinc = dy / (float) steps;

Put pixel for each step float X = X0;
float Y = Y0;
for (int i = 0; i <= steps; i++)
{
putpixel (X,Y,RED); // put pixel at (X,Y)
X += Xinc; // increment in x at each step
Y += Yinc; // increment in y at each step
delay(100); // for visualization of line-
// generation step by step
}
}

Driver program int main()
{
int gd = DETECT, gm;

Initialize

graphics function initgraph (&gd, &gm, "");
int X0 = 2, Y0 = 2, X1 = 14, Y1 = 16;
DDA(2, 2, 14, 16);
return 0;
}

Advantage:
1.It is the simplest algorithm and it does algorithm is still time
consuming.
2.It is faster method for calculating pixel position than the direct use of
equation y=mx+b .
Disadvantage
1.Flaoting point arithmetic in DDA algorithm is still time consuming
2.The algorithm is orientation dependent. Hence end point accuracy is
poor .
Bresenham’s Line Algorithm
1. This algorithm is used for scan converting a line. It was developed by Bresenham. It is
an efficient method because it involves only integer addition, subtractions, and
multiplication operations. These operations can be performed very rapidly so lines can be
generated quickly.
2. In this method, next pixel selected is that one who has the least distance from true line.
3.Therefore,it is an efficient method for scan-converting straight lines.
4.The basic principle of Bresenham’s line algorithm is to select the optimum raster
locations to represent a straight line.
5.To accomplish this the algorithm always increments either x or y by one unit depending
on the slope of line.
6.The increment in the other variables is determined by examining the distance between
the actual line location and the nearest pixel. This distance is called decision variable or
error .
7.This is illustrated in below figure.
The line does not pass through all raster points (pixel).It passes through
raster point(0,0) and subsequently crosses three pixels.
8.It is seen that the intercept of line with the line x=1 is closer to the
line y=0 ,i.e. pixel(1,0) than to the line y=1 i.e. pixel(1,1).
9.Hence ,in this case, the raster point at (1,0) better represents the path
line than that at(1,1).
10.The intercept of line with the line x=2 is close to the line y=1, i.e.
pixel(2,1) than to the line y =0,i.e. Pixel (2,0).Hence the raster point
at(2,1) better represent the path of line as shown in the above figure.

11.in the mathematical terms error or decision variables is defined as
Pk=D B -D A or D A -D B
12.Let us define Pk=D B -D A. now if Pk>0 , then it implies that D B > D A
i.e. the pixel above the line closer to the true line.
13.If D B < D A (i.e.Pk<0) then we can say that the pixel below the line is
closer to the true line.

Thus by checking only the sign of error term it is possible to determine the better pixel to represent the line
path.
14.The error term is initially set as
Pk= 2Δy-Δx
Where Δy=y2-y1 ,and Δx=x2-x1

15.Then according to value of e following actions are taken
while(Pk≥ 0)
{
y=y+1
Pk=Pk+2Δy-2*Δx
}
x=x+1
Pk=Pk+2 * Δy
WhenPk≥ 0 error is initialized with Pk=Pk+2Δy-2*Δx
This is continued till error is negative.in each iteration y is incremented by 1. When Pk<0, error is
initialized to Pk= Pk+2 Δy. In both case x is incremented by 1.
Bresenham’ line algorithm
1. Read the line end points (x1,y1) and (x2,y2) such that they are not equal.
[if equal then plot that point and exit]
2. Δx = |x2 - x1| and Δy = |y2-y1|
3. [initialize starting point]
x=x1
y=y1
4.Pk= 2 * Δy - Δx
[Initialize value of decision variable or error to compensate for nonzero intercepts]
5.i= 1 [Initialization counter]
6. Plot (x,y)
7. While (Pk ≥ 0)
{
y=y+1
Pk=Pk+2Δy-2*Δx
}
x= x+1
Pk=Pk+2*Δy
8. i= i+1
9.if (i ≤ Δx) then go to step 6.
10. Stop.
Problem: - Consider the line from (5, 5) to (13, 9). Use Bresenham's algorithm to
rasterize the line.
Solution :-
Evaluating steps 1 through 4 in the Bresenham’s algorithm we have,
Given: -
step 1 :- x1 = 5 , y1 = 5 and x2 = 13 , y2 = 9 .
step 2 :- Δx = | 13 - 5| =8 Δy = | 9 - 5 | = 4
step 3 :- x = 5 , y = 5
step 4 :- Pk = 2 * Δy - Δx = 2 * 4 - 8 = 0 .
Tabulating the results of each iteration in the step 5 through 10.
2.Plot a line by using Bresenham's line generating algorithm from (1, 1) to (5, 3).
1.calcualte Δx and Δy
Δx=x2-x1 & Δy=y2-y1
Δx=5-1=4 & Δy=3-1=2
2.Calculating Decision Variable
Pk= 2*Δy-Δx , Pk= 2*2-4=0
3. Initialize value of e=0 starting coordinate of graph are x1,y1(1,1)
4. Here dx =4 =steps
5. Check condition e>=0
y=y+1 or y=1+1=2
Pk=Pk-2*Δx or Pk=0-2*4 =-8
Finally x get incremented x=x+1 or x=1+1=2

6. Check condition Pk<0
Directly calculate x =x+1 and Pk=Pk+2*Δy
Therefore x=2+1=3, e=-8+2*8=0

3.Consider the line from (5,5) to (13,9).use the Bresenham’s algorithm to rasterize the line.
Write a Program Bresenham’s algorithm
#include<stdio.h>
//#include<conio.h>
#include<graphics.h>
#include<math.h>
int main()
{
float x,y,dx,dy ,x1,y1,x2,y2,e;
int gd=DETECT,gm;
int i;
//clrscr();
initgraph(&gd,&gm,"");
//Read Two end point
printf("Enter the value of x1:\t");
scanf("%f",&x1);
printf("Enter the value of y1:\t");
scanf("%f",&y1);
printf("Enter the value of x2:\t");
scanf("%f",&x2);
printf("Enter the value of y2:\t");
scanf("%f",&y2);
•

calculate
dx and dy dx=abs(x2-x1); dy=abs(y2-y1); //Initialize the starting points x=x1;
y=y1;
//initialize decision variable or error e=2*dy-dx;
//initialize loop counter as i i=1;
do
{
putpixel(x,y,15);
while(e>=0)
{
y=y+1; e=e-2*dy;
}
x=x+1;
e=e+2*dy;
i=i+1;
}
while (i<=dx); getch();
closegraph();
//getch();
}

Advantage:
• It involves only integerarithmetic, so it is simple.
• It avoidsthe generation of duplicate points.
• It can be implemented using hardware because it does not use multiplication and division.
• It is faster as compared to DDA (Digital Differential Analyzer) because it does not involve
floating point calculations like DDA Algorithm.
Disadvantage:
• This algorithm is meant for basic line drawing only Initializing is not a part of Bresenham's
line algorithm. So to draw smooth lines, you should want to look into a different algorithm.


2.2 Circle generation Algorithms:- Symmetry of circle,Bresenham’s circle drawing
algorithm
1.Symmetry of circle:-
1.A circle is a geometric figure which is round, and can be divided into
360 degrees. A circle is a symmetrical figure which follows 8-way
symmetry.
8-Way symmetry: Any circle follows 8-way symmetry. This means that
for every point (x,y) 8 points can be plotted. These (x,y), (y,x), (-y,x), (x,-
y), (-x,-y), (-y,-x), (y,-x), (-x, y).
For any point (x+a, y+b), points (x ± a, y ± b) and (y ± a, x ± b) also lie on
the same circle. So it is sufficient to compute only 1/8 of a circle, and all
the other points can be computed from it.
Drawing a circle: To draw a circle we need two things, the coordinates
of the centre and the radius of
the circle.
Radius: The radius of a circle is the length of the line from the centre to
any point on its edge.
Equation of the circle: For any point on the circle (x,y) and the centre at
point (x c ,y c ), the equation of the
circle is
(x-x c ) 2 + (y-y c ) 2 - r 2 = 0
Here r is the radius of the circle. If the circle has origin (0,0) as its centre then the above equation
can be
reduced to
x2+y2=r2
Defining a circle using Polynomial Method:
The first method defines a circle with the second-order polynomial equation as shown in fig:
y 2 =r 2 -x 2
Where x = the x coordinate
y = the y coordinate
r = the circle radius
With the method, each x coordinate in the sector, from 90° to 45°, is found by stepping x from 0
to & each y coordinate is found by evaluating for each step of x.
Bresenham’s circle drawing algorithm
• It is not easy to display a continuous smooth arc on the computer screen as our
computer screen is made of pixels organized in matrix form. So, to draw a circle on a
computer screen we should always choose the nearest pixels from a printed pixel so as
they could form an arc. There are two algorithm to do this:
• Both of these algorithms uses the key feature of circle that it is highly symmetric. So, for
whole 360 degree of circle we will divide it in 8-parts each octant of 45 degree. In order
to that we will use Bresenham’s Circle Algorithm for calculation of the locations of the
pixels in the first octant of 45 degrees. It assumes that the circle is centered on the
origin. So for every pixel (x, y) it calculates, we draw a pixel in each of the 8 octants of
the circle as shown below :
• Now, we will see how to calculate the next pixel location from a previously known pixel
location (x, y). In Bresenham’s algorithm at any point (x, y) we have two options either
to choose the next pixel in the east i.e. (x+1, y) or in the south east i.e. (x+1, y-1).
• And this can be decided by using the decision parameter d as:
• If d > 0, then (x+1, y-1) is to be chosen as the next pixel as it will be closer to
the arc.
• else (x+1, y) is to be chosen as the next pixel.
• Now to draw the circle for a given radius ‘r’ and centre (xc, yc) We will start
from (0, r) and move in first quadrant till x=y (i.e. 45 degree). We should
start from listed initial condition:
d = 3 - (2 * r)
x=0
y=r
Bresenham's Circle Drawing Algorithm
Algorithm to plot ⅛ of the circle using bresenham’s algorithm.
1.Read the radius (r) of the circle.
2.d= 3-2r
[Initialize the decision variable]
3.x=0 ,y=r
[Initialize starting points]

4.do
{
plot(x,y)
If (d<0) then
{
d=d+4x+6
}
Else
{
d=d+4(x-y)+10
y=y-1
}
x=x+1
}while(x<y)
5.Stop.

Example.
1.calculate the pixel position along the circle path with radius r= 10
centered on the origin using
Bresenham’s circle drawing algorithm from point(0,10) to point x=y.
Answer:-
1.Decision variable:-
d=3-2r
if(d<0) then
d= d+4x+6
x=x+1
if(d>0)
d= d+4(x-y)+10
y=y-1
1.(x,y)=(0,10)
Calculate d =3-2r =3-2*10=-17
2. d=d+4x+6 =-17+4*0+6=-11
3.d=d+4x+6=-11+4*1+6=-1

sr.no x y d

1 0 10 -17

2 1 10 -11

3 2 10 -1

4 3 10 13

5 4 9 -5

6 5 9 17

7 6 8 11

8 7 7 13


2. Plot a circle using Bresenham’s algorithm for r= 3 and center at(0,0)
Ans:
Here r= 3, x=0,y=0
First point to plot is (0,r)=(0,3)
1. Plot pixel for x1,y1 d =-3
If e>0
d=d+4x+6
d=-3+4*0+6=3
Then x=x+1 ,x=1+0=1 and y remain constant
2. Plot pixel for x2,y2 and d= 3
Otherwise e<0
d=d+4(x-y)+10

Sr.No x y d

1 0 3 -3

2 1 3 3

3 2 2 5


What is a Polygon? :
1. Polygons can be regular or irregular. They can be simple or complex, convex or

concave.
2.They can be the familiar shapes you see in geometry textbooks, or they can be
strange shapes, like darts and bowties.
3.The word " polygon " means "many-angled," from Greek. To be a polygon, a flat,
closed shape must use only line segments to create its sides. So a circle or any shape
that has a curve is not a polygon.
4. The three identifying properties of any polygon are that the polygon is:
1. A two-dimensional shape
2. Closing in a space (having an interior and exterior)
3. Made with straight sides
Types of Polygons
• Let's take a look at the vast array of shapes that are polygons and go
into detail.

1. Regular and Irregular Polygons
Regular polygons have congruent sides and interior angles. Every side
is equal in length to every other side, and every interior angle is equal
to all other interior angles. The number of regular polygons is limitless.

• Irregular polygons do not have
congruent sides and angles.
Home plate on a softball or
baseball field is an irregular
pentagon, because it has five
sides with two 90° angles.

• 3.Convex and Concave Polygons
• A convex polygon closes in an interior area
without looking "dented."
• Every interior angle of a convex polygon is
less than 180°.
• In geometry, you could have a four-sided
polygon that points outward in all directions,
like a kite , or you could have the same four
sides so two of them point inward, forming a
dart . The kite is convex; the dart is concave.
• 4.A concave polygon has at least
one angle greater than 180°.
Think of a bowtie-shaped simple
hexagon (6 sides). It will have
two interior angles greater than
180°.

• 5.Simple and Complex Polygons:-Simple polygons have no self-
intersecting sides.
• Complex polygons, also called self-intersecting polygons, have sides
that cross over each other. The classic star is a complex polygon. Most
people can doodle a star on paper quickly, but few people label it a
pentagram,complex polygon, or self-intersecting polygon.

• The family of complex star-shaped polygons generally share the Greek
number prefix and use the suffix -gram: pentagram, hexagram,
octagram, and so on.
• You cannot draw a complex triangle. For every polygon with four or
more sides, a complex polygon can be drawn. A complex quadrilateral
is that familiar bowtie shape, but it is considered to have only four
sides, because one pair of opposite sides has twisted to cross each
other. Just as you do not count the crossed sides as four line segments,
you do not count the two angles they create as interior angles. The
complex quadrilateral still only has four sides and four interior angles.

• 6.Complex polygons may be hard to imagine unless you think of them
with elastic sides. If you could lift part of the polygon up and twist it, so
two sides cross one another, and then put it down flat again, you would
have a complex polygon. Because you twisted two sides, you still have
those two sides (they do not double in number by crossing). They also do
not create new vertices where they cross.
• 7.Antiparallelogram
• An unusual complex polygon is the antiparallelogram, which looks a bit
like bird wings. An antiparallelogram (or crossed parallelogram) has the
normal two pairs of congruent, opposite sides, but one pair has been
crossed, forming what appears to be two touching triangles.
• Like any parallelogram, though, the antiparallelogram still only has four sides
and four interior angles. Its diagonals, however, lie outside the shape!
• Inside and Outside Tests :- Once the polygon is entered in the display file, we
can draw the outline of the polygon. To show polygon as a solid object we have
to set the pixels inside the polygon as well as pixels on the boundary of it.Now
the question is how to determine whether or not a point is inside a polygon.
One simple method of doing this is to construct a line segment between the
point in question and a point known to be outside the polygon, as shown in
the figure (a). Now count how many intersections of the line segment with the
polygon boundary occur. If there are an odd number of intersections, then the
point in question is inside; otherwise it is outside. This method is called the
even-oddmethod of determining polygon inside points.
• As shown in figure (b) , If the intersection point is a vertex of the
Polygon then we have to look at the other endpoint of the two
segments which meet at this vertex. If these points lie on the same
side of the constructed line, then the point in question counts as an
even number of intersections. If they lie on opposite sides of the
constructed line, then the point is counted as a single intersection.

• 2.Nonzero Winding Number Rule:-This method is also used with the
simple polygons to test the given point is interior or not.

• In another alternative method, give directions to all the edges of the polygon. Draw
a scan line from the point to be tested towards the left most of the X direction.
• Give the value 1 to all the edges which are going to upward direction and all other -
1 as direction values.
• Check the edge direction values from which the scan line is passing and sum up
them.
• If the total sum of this direction value is non-zero, then this point to be tested is an
interior point, otherwise it is an exterior point.
• In the above figure, we sum up the direction values from which the scan line is
passing then the total is 1 – 1 + 1 = 1; which is non-zero. So the point is said to be
an interior point.

Polygon filling
1.Filling the polygon means highlighting all the pixel which lie inside the polygon with any color
other than background color.
2.Polygoan are easier to fill since they have linear boundaries.There are two basic approaches used
to fill the polygon.
3. One way to fill a polygon is to start from a given “seed”,point known to be inside the polygon
and highlight outward from this point i.e. neighbouring pixel until we encounter the boundary
pixels.This approach is called seed fill because color flows from the seed pixel until reaching the
polygon boundary,
4.Another approach to fill the polygon is to apply the inside test i.e. to check whether the pixel is
inside the polygon or outside the polygon and then highlight pixels which lie inside the
polygon.this approach is known as scan-line algorithm.
Seed fill:-
The seed fill algorithm is further classified as flood fill algorithm and boundary fill algorithm.
Algorithm that fill interior defined regions are called flood-fill algorithm; those that fill boundary-
defined regions are called boundary-fill algorithm or edge fill algorithm.
Boundary Fill Algorithm
• Introduction : Boundary Fill Algorithm starts at a pixel inside the

polygon to be filled and paints the interior proceeding outwards
towards the boundary. This algorithm works only if the color with
which the region has to be filled and the color of the boundary of the
region are different.
• If the boundary is of one single color, this approach proceeds
outwards pixel by pixel until it hits the boundary of the region.

• Boundary Fill Algorithm is recursive in nature. It takes an interior
point(x, y), a fill color, and a boundary color as the input.
• The algorithm starts by checking the color of (x, y). If it’s color is not
equal to the fill color and the boundary color, then it is painted with
the fill color and the function is called for all the neighbours of (x, y). If
a point is found to be of fill color or of boundary color, the function
does not call its neighbours and returns. This process continues until
all points up to the boundary color for the region have been tested.
• The boundary fill algorithm can be implemented by 4-connected
pixels or 8-connected pixels.
• 4-connected pixels : After painting a pixel, the function is called for
four neighboring points. These are the pixel positions that are right,
left, above and below the current pixel. Areas filled by this method
are called 4-connected. Below given is the algorithm :

Algorithm :
void boundaryFill4(int x, int y, int fill_color,int boundary_color)

{
if(getpixel(x, y) != boundary_color &&
getpixel(x, y) != fill_color)
{
putpixel(x, y, fill_color);
boundaryFill4(x + 1, y, fill_color, boundary_color);
boundaryFill4(x, y + 1, fill_color, boundary_color);
boundaryFill4(x - 1, y, fill_color, boundary_color);
boundaryFill4(x, y - 1, fill_color, boundary_color);
}
}
• Below is the implementation of above algorithm :

C Implementation for Boundary Filling Algorithm #include
<graphics.h>

Function for 4 connected Pixels
void boundaryFill4(int x, int y, int fill_color,int boundary_color) {
if(getpixel(x, y) != boundary_color && getpixel(x, y) !=
fill_color)
{
boundaryFill4(x + 1, y, fill_color, boundary_color); boundaryFill4(x,
y + 1, fill_color, boundary_color); boundaryFill4(x - 1, y,
fill_color, boundary_color); boundaryFill4(x, y - 1, fill_color,
boundary_color);
}
}


//driver code
int main()
{
//gm is Graphics mode which is
//a computer display mode that
//generates image using pixels.
//DETECT is a macro defined in
//"graphics.h" header file

//initgraph initializes the
//graphics system by loading a
//graphics driver from disk initgraph(&gd, &gm, "");

int x = 250, y = 200, radius = 50;


//circle fuction
circle(x, y, radius);

//Function calling
boundaryFill4(x, y, 6, 14);

delay(10000);

getch();

//closegraph function closes the
//graphics mode and deallocates
//all memory allocated by
//graphics system .
closegraph();

return 0;
}

Output

• 8-connected pixels : More complex figures are filled using this
approach. The pixels to be tested are the 8 neighboring pixels, the
pixel on the right, left, above, below and the 4 diagonal pixels. Areas
filled by this method are called 8-connected. Below given is the
algorithm :

Algorithm

:
if(getpixel(x, y) != boundary_color &&
getpixel(x, y) != fill_color)
{
boundaryFill8(x + 1, y, fill_color, boundary_color); boundaryFill8(x, y + 1,
fill_color, boundary_color); boundaryFill8(x - 1, y, fill_color,
boundary_color); boundaryFill8(x, y - 1, fill_color, boundary_color);
boundaryFill8(x - 1, y - 1, fill_color, boundary_color); boundaryFill8(x - 1,
y + 1, fill_color, boundary_color); boundaryFill8(x + 1, y - 1, fill_color,
boundary_color); boundaryFill8(x + 1, y + 1, fill_color, boundary_color);
}
}

//C Implementation for Boundary Filling Algorithm #include <graphics.h>

//Function for 8 connected Pixels
if(getpixel(x, y) != boundary_color && getpixel(x, y) != fill_color)
{
boundaryFill8(x + 1, y, fill_color, boundary_color); boundaryFill8(x, y + 1,
fill_color, boundary_color); boundaryFill8(x - 1, y, fill_color,
boundary_color); boundaryFill8(x, y - 1, fill_color, boundary_color);
boundaryFill8(x - 1, y - 1, fill_color, boundary_color); boundaryFill8(x - 1, y
+ 1, fill_color, boundary_color); boundaryFill8(x + 1, y - 1, fill_color,
boundary_color); boundaryFill8(x + 1, y + 1, fill_color, boundary_color);
}
}

//driver code
int main()
{
gm is Graphics mode which is
a computer display mode that
generates image using pixels.
DETECT is a macro defined in
"graphics.h" header file

initgraph initializes the
graphics system by loading a
graphics driver from disk initgraph(&gd, &gm, "");

Rectangle fuction rectangle(50, 50, 100, 100);

Function calling boundaryFill8(55, 55, 4, 15);

delay(10000);

getch();

closegraph function closes the
graphics mode and deallocates
all memory allocated by
graphics system . closegraph();
return 0;
}

• Output :

• 4-connected pixels Vs 8-connected pixels :
• Let us take a figure with the boundary color as GREEN and the fill
color as RED. The 4-connected method fails to fill this figure
completely. This figure will be efficiently filled using the 8 connected
technique.

• Flood fill Vs Boundary fill :
• Though both Floodfill and Boundary fill algorithms color a given
figure with a chosen color, they differ in one aspect. In Flood fill, all
the connected pixels of a selected color get replaced by a fill color. On
the other hand, in Boundary fill, the program stops when a given color
boundary is found.
Comparison Chart
BASIS FOR
BOUNDARY-FILL
COMPARIS FLOOD-FILL ALGORITHM
ALGORITHM
ON

• Basic It can have an area containing It defines the area with a
several colours. single colour.


Painting A random colour can be used to Interior points are
process colour the interior portion then coloured by continuously
the old one is replaced with a searching for the
new one. boundary colour.
Memory High Low
consumption
Speed Comparatively slower Fast
Algorithm Simple relatively Complicated
complexity

Scan Conversion Definition
• It is a process of representing graphics objects a collection of pixels. The

graphics objects are continuous. The pixels used are discrete. Each pixel
can have either on or off state.
• The circuitry of the video display device of the computer is capable of
converting binary values (0, 1) into a pixel on and pixel off information. 0 is
represented by pixel off. 1 is represented using pixel on. Using this ability
graphics computer represent picture having discrete dots.
• Any model of graphics can be reproduced with a dense matrix of dots or
points. Most human beings think graphics objects as points, lines, circles,
ellipses. For generating graphical object, many algorithms have been
developed.
Advantage of developing algorithms for scan conversion
1. Algorithms can generate graphics objects at a faster rate.
2. Using algorithms memory can be used efficiently.
3. Algorithms can develop a higher level of graphical objects.

Examples of objects which can be scan converted
1. Point
2. Line
3. Sector
4. Arc
5. Ellipse
6. Rectangle
7. Polygon
8. Characters
9. Filled Regions
The process of converting is also called as rasterization. The algorithms implementation varies from one
computer system to another computer system. Some algorithms are implemented using the software. Some are
performed using hardware or firmware. Some are performed using various combinations of hardware,
firmware, and software.
Pixel or Pel:
• The term pixel is a short form of the picture element. It is also called a
point or dot. It is the smallest picture unit accepted by display devices. A
picture is constructed from hundreds of such pixels. Pixels are generated
using commands. Lines, circle, arcs, characters; curves are drawn with
closely spaced pixels. To display the digit or letter matrix of pixels is used.
• The closer the dots or pixels are, the better will be the quality of picture.
Closer the dots are, crisper will be the picture. Picture will not appear
jagged and unclear if pixels are closely spaced. So the quality of the
picture is directly proportional to the density of pixels on the screen.
• Pixels are also defined as the smallest addressable unit or element of the
screen. Each pixel can be assigned an address as shown in fig:
• Different graphics objects can be generated by setting the different intensity of
pixels and different colors of pixels. Each pixel has some co-ordinate value. The
coordinate is represented using row and column. P (5, 5) used to represent
a pixel in the 5th row and the 5th column. Each pixel has some intensity value
which is represented in memory of computer called a frame buffer.Frame Buffer
is also called a refresh buffer. This memory is a storage area for storing pixels
values using which pictures are displayed. It is also called as digital memory.
Inside the buffer, image is stored as a pattern of binary digits either 0 or 1. So
there is an array of 0 or 1 used to represent the picture. In black and white
monitors, black pixels are represented using 1's and white pixels are represented
using 0's. In case of systems having one bit per pixel frame buffer is called a
bitmap. In systems with multiple bits per pixel it is called a pixmap.

• A framebuffer (frame buffer,or sometimes framestore) is a portion of RAM[1] containing a
bitmap that drives a video display. It is a memory buffer containing a complete frame of
data.[2] Modern video cards contain framebuffer circuitry in their cores. This circuitry
converts an in-memory bitmap into a video signalthat can be displayed on a computer
monitor.
N-bit colour Frame buffer

1.The intensity of each pixel on the CRT is controlled by a corresponding pixel location in each of the N
bit planes.
2.The binary value from each of the N bit planes is loaded into corresponding positions in a register.
3.The resulting binary number is interpreted as an intensity level between 0 (dark) and 2 n -1 (full
intensity).
4.This is converted into an analog voltage between 0 and the maximum voltage of the electron gun by
the DAC. A total of 2 N intensity levels are possible.
5.Figure given below illustrates a system with 3 bit planes for a total of 8 (2 3 ) intensity levels. Each bit
plane requires the full complement of memory for a given raster resolution; e.g., a 3-bit plane frame
buffer for a 1024 X1024 raster requires 3,145,728 (3 X 1024 X1024) memory bits.


Chapter 2 CGR

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Chapter 2 CGR

Uploaded by

Copyright:

Available Formats

SANJIVANI K. B. P.

Department:- Infomation Technology Class:- SY CO

Name of Subject:- Computer Graphics MSBTE Subject Code:-

Raster Scan Basic Graphics

Sanjivani K.B.P. Polytechnic, Kopargaon Department of Computer Engg A. L. Deokate

• 1.Line is Straight object with no curves, no thickness and it extends in

Sanjivani K.B.P. Polytechnic, Kopargaon Department

Sanjivani K.B.P. Polytechnic, Kopargaon Department

• In computer graphics , a digital differential analyzer (DDA) is hardware

Sanjivani K.B.P. Polytechnic, Kopargaon Department

Sanjivani K.B.P. Polytechnic, Kopargaon Department

Sanjivani K.B.P. Polytechnic, Kopargaon Department

Sanjivani K.B.P. Polytechnic, Kopargaon Department

Sanjivani K.B.P. Polytechnic, Kopargaon Department

Sanjivani K.B.P. Polytechnic, Kopargaon Department

Sanjivani K.B.P. Polytechnic, Kopargaon Department

Sanjivani K.B.P. Polytechnic, Kopargaon Department

Sanjivani K.B.P. Polytechnic, Kopargaon Department

Sanjivani K.B.P. Polytechnic, Kopargaon Department

Sanjivani K.B.P. Polytechnic, Kopargaon Department

Sanjivani K.B.P. Polytechnic, Kopargaon Department of Computer Engg A. L. Deokate

Sanjivani K.B.P. Polytechnic, Kopargaon Department

Where Δy=y2-y1 ,and Δx=x2-x1

Sanjivani K.B.P. Polytechnic, Kopargaon Department

Sanjivani K.B.P. Polytechnic, Kopargaon Department

Sanjivani K.B.P. Polytechnic, Kopargaon Department

Sanjivani K.B.P. Polytechnic, Kopargaon Department

Sanjivani K.B.P. Polytechnic, Kopargaon Department

Sanjivani K.B.P. Polytechnic, Kopargaon Department of Computer Engg A. L. Deokate

Sanjivani K.B.P. Polytechnic, Kopargaon Department of Computer Engg A. L. Deokate

Sanjivani K.B.P. Polytechnic, Kopargaon Department of Computer Engg A. L. Deokate

Sanjivani K.B.P. Polytechnic, Kopargaon Department of Computer Engg A. L. Deokate

Sanjivani K.B.P. Polytechnic, Kopargaon Department of Computer Engg A. L. Deokate

Sanjivani K.B.P. Polytechnic, Kopargaon Department of Computer Engg A. L. Deokate

1. Polygons can be regular or irregular. They can be simple or complex, convex or

Sanjivani K.B.P. Polytechnic, Kopargaon Department of Computer Engg A. L. Deokate

Sanjivani K.B.P. Polytechnic, Kopargaon Department

Sanjivani K.B.P. Polytechnic, Kopargaon Department

Sanjivani K.B.P. Polytechnic, Kopargaon Department of Computer Engg A. L. Deokate

Sanjivani K.B.P. Polytechnic, Kopargaon Department

Sanjivani K.B.P. Polytechnic, Kopargaon Department

Sanjivani K.B.P. Polytechnic, Kopargaon Department

Sanjivani K.B.P. Polytechnic, Kopargaon Department

Sanjivani K.B.P. Polytechnic, Kopargaon Department

• Introduction : Boundary Fill Algorithm starts at a pixel inside the

Sanjivani K.B.P. Polytechnic, Kopargaon Department

Sanjivani K.B.P. Polytechnic, Kopargaon Department

void boundaryFill4(int x, int y, int fill_color,int boundary_color)

Sanjivani K.B.P. Polytechnic, Kopargaon Department

Sanjivani K.B.P. Polytechnic, Kopargaon Department

Sanjivani K.B.P. Polytechnic, Kopargaon Department

Sanjivani K.B.P. Polytechnic, Kopargaon Department

Sanjivani K.B.P. Polytechnic, Kopargaon Department

Sanjivani K.B.P. Polytechnic, Kopargaon Department

Sanjivani K.B.P. Polytechnic, Kopargaon Department

Sanjivani K.B.P. Polytechnic, Kopargaon Department

Sanjivani K.B.P. Polytechnic, Kopargaon Department

Sanjivani K.B.P. Polytechnic, Kopargaon Department

Sanjivani K.B.P. Polytechnic, Kopargaon Department

Sanjivani K.B.P. Polytechnic, Kopargaon Department

Sanjivani K.B.P. Polytechnic, Kopargaon Department

process colour the interior portion then coloured by continuously