Savitribai Phule Pune University (SPPU)

Second Year of Computer Engineering (2019 Course)

Subject Code :210244
Subject Name : (CG)
Computer Graphics

AISSMS College Of Engineering Pune

SE-B
Faculty Name- Ms. Amruta S. Aphale
CG Syllabus
Unit .2. Polygon,Windowing and Clipping
• Polygons: Introduction to polygon, types: convex, concave and
complex. Inside test.
• Polygon Filling: flood fill, seed fill, scan line fill.
• Windowing and clipping: viewing transformations, 2-D clipping: Cohen
– Sutherland algorithm line Clipping algorithm, Sutherland Hodgeman
Polygon clipping algorithm, Weiler Atherton Polygon Clipping
algorithm.
Observe-vertex,edge,face
Vertices
• Vertices are points where two
or more lines or edges meet in
a geometric shape, such as a
polygon or a polyhedron.
• In mathematics, vertices are
fundamental components of
various geometric objects and
are often used to describe and
analyze the properties of these
shapes.
Introduction to Polygons
• A polygon is a two-dimensional closed geometric shape that is
formed by connecting a sequence of straight line segments.
• These line segments are called sides or edges, and the points where
they meet are called vertices.
• Polygons are fundamental shapes in geometry and can have various
properties and classifications.
Polygon
A polygon is a closed two-dimensional shape with straight sides.
It can have three or more sides, and the sides cannot cross each other.
Common types of polygons include triangles (3 sides), quadrilaterals (4
sides), pentagons (5 sides), hexagons (6 sides), and so on.

Polygons are often used in computer graphics to represent and render

various shapes, such as triangles for 3D graphics or complex irregular
shapes in 2D graphics.
hexagonal prisms

Many stones at the Giant’s

Causeway are hexagonal
prisms.
How many faces, edges
and vertices has a
hexagonal prism?
hexagonal prisms
A hexagonal prism has 8 faces, 18 edges and 12 vertices.
3D shapes
• 3D shapes, like cubes and pyramids, can be opened or unfolded along
their edges to create a flat shape.The unfolded shape is called the net of
the solid.
Types of Polygons
Convex Polygon:
A convex polygon is a polygon in which all of its
interior angles are less than 180 degrees.
• All diagonals of a convex polygon lie inside the
polygon itself.
• Convex polygons have no "dips" or indentations in
their boundaries.
• Example of a convex polygon: A regular hexagon.
Area of a Hexagon with Apothem

The formula for this scenario is:

Area of hexagon = (1/2) ×
apothem × Perimeter of hexagon,
or, Area of hexagon = (1/2) × a ×
P = (1/2) × a × 6 × s = 3as,

‘a’ represents the length of the

apothem.
‘P’ is the perimeter of the
hexagon.
‘s’ stands for the length of the
hexagon’s side.
Concave Polygon
A concave polygon is a polygon that
has at least one interior angle greater
than 180 degrees.
Concave polygons have at least one
"dip" or indentation in their
boundaries.
Example of a concave polygon: A
crescent moon shape.
Complex Polygon
A complex polygon is a polygon with
both convex and concave sections
within the same shape.
• It combines characteristics of both
convex and concave polygons.
• Example: A star shape with both
inward and outward-pointing
angles.
Inside Test of Polygon – Odd Even Test
Inside Test of Polygon – Odd Even Test
• Lets consider this polygon and a point (above figure) that we need to
check for Inside or Outside of polygon.
• For that we just draw a line from that point in one direction(as drawn
in below figure).
Inside Test of Polygon – Odd Even Test
In this technique, we will count the edge crossing along the line from
any point (x,y) to infinity.
If the number of interactions is odd, then the point x,y is an interior
point;
and if the number of interactions is even, then the point x,y is an
exterior point.
Inside Test of Polygon – Odd Even Test

From the figure, we can see that

from the point x,y,
the number of interactions point
on the left side is 5 and on the
right side is 3.
From both ends, the number of
interaction points is odd, so the
point is considered within the
object.
 Polygon

For filling polygons with particular colors,

you need to determine the pixels falling
on the border of the polygon and those
which fall inside the polygon.
Flood fill-Seed fill
• Flood fill, also called seed fill, is a flooding algorithm that determines
and alters the area connected to a given node in a multi-dimensional
array with some matching attribute.
• Choose a starting pixel (seed) inside the region you want to fill.
• Check the color of the seed pixel.
• Recursively or iteratively visit neighboring pixels (usually in 4 or 8
directions - up, down, left, right, and diagonals).
• If the neighboring pixel has the same color as the seed pixel, change
its color to the fill color and add it to the list of pixels to be processed.
• Repeat steps 3 and 4 until all connected pixels have been visited.
implementing seed fill
• Select a Seed Point:
The algorithm starts by selecting a seed point (x, y) inside the region
you want to fill. This point should be chosen carefully because it
determines the color or pattern that will be used to fill the region.

• Filling Process:
The algorithm begins filling the region by changing the color of the
seed point to the desired fill color. It then examines its neighboring
pixels (often the four neighboring pixels: up, down, left, and right) to
determine if they should also be filled.
implementing seed fill
Recursive or Stack-Based Approach: There are two common methods
for implementing seed fill:
• Recursive: In the recursive approach, if a neighboring pixel has the
same color as the seed point's original color, the algorithm recursively
calls itself on that neighboring pixel.
• Stack-Based: In the stack-based approach, the algorithm uses a stack
data structure to keep track of the pixels to be processed. It pushes
neighboring pixels onto the stack for processing, allowing it to handle
large regions without overflowing the call stack.
implementing seed fill
• Repeat: Steps 2 and 3 are repeated until all connected pixels within
the region have been filled, and there are no more pixels left to
process.

• Boundary Checking: It's essential to include boundary checking to

ensure that the algorithm doesn't fill outside the intended region.
Flood fill-Seed fill
Scan Line Algorithm

• This algorithm works by intersecting scanline with polygon edges and

fills the polygon between pairs of intersections. The following steps
depict how this algorithm works.
Scan Line Algorithm
Step 1 − 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. they
are named as p0, p1, p2, p3.

Step 3 − Sort the intersection point in the

increasing order of X coordinate

Step 4 − Fill all those pair of coordinates that

are inside polygons and ignore the alternate
pairs.
Flood Fill Algorithm
• Sometimes we come across an object where we want to fill the area and its
boundary with different colors. We can paint such objects with a specified
interior color instead of searching for particular boundary color as in
boundary filling algorithm.

• Instead of relying on the boundary of the object, it relies on the fill color. In
other words, it replaces the interior color of the object with the fill color.
When no more pixels of the original interior color exist, the algorithm is
completed.

• Once again, this algorithm relies on the Four-connect or Eight-connect

method of filling in the pixels. But instead of looking for the boundary
color, it is looking for all adjacent pixels that are a part of the interior.
Flood Fill Algorithm
all adjacent pixels that are a part of the interior
Boundary Fill Algorithm
• The boundary fill algorithm works as its name.
• This algorithm picks a point inside an object and starts to fill until it
hits the boundary of the object. The color of the boundary and the
color that we fill should be different for this algorithm to work.
• In this algorithm, we assume that color of the boundary is same for
the entire object.
• The boundary fill algorithm can be implemented by 4-connected
pixels or 8-connected pixels.
4-Connected Polygon
• In this technique 4-connected pixels are used as shown in the figure.
We are putting the pixels above, below, to the right, and to the left
side of the current pixels and this process will continue until we find a
boundary with different color.
4-Connected Polygon
Algorithm
Step 1 − Initialize the value of seed point seedx,seedy fcolor and dcol.
Step 2 − Define the boundary values of the polygon.
Step 3 − Check if the current seed point is of default color, then repeat
the steps 4 and 5 till the boundary pixels reached.
Step 4 − Change the default color with the fill color at the seed point.
Step 5 − Recursively follow the procedure with four neighborhood
points.
8-Connected Polygon
• In this technique 8-connected pixels
are used as shown in the figure. We
are putting pixels above, below, right
and left side of the current pixels as
we were doing in 4-connected
technique.

• In addition to this, we are also putting

pixels in diagonals so that entire area
of the current pixel is covered. This
process will continue until we find a
boundary with different color.
8-Connected Polygon
Algorithm
Step 1 − Initialize the value of seed point seedx,seedy, fcolor and dcol.
Step 2 − Define the boundary values of the polygon.
Step 3 − Check if the current seed point is of default color then repeat
the steps 4 and 5 till the boundary pixels reached
Step 4 − Change the default color with the fill color at the seed point.
Step 5 − Recursively follow the procedure with four neighbourhood
points
Step 6 − Exit
Windowing
• Windowing, in the context of computer graphics, refers to the
process of selecting and displaying a portion of a larger graphical
scene or image. This selected portion is called a "window."
• Windowing is commonly used when dealing with large datasets or
when you want to focus on a specific region of interest within a
graphic.
• It is particularly important in tasks like zooming and panning within a
graphical application.
Clipping
• Clipping is a technique in computer graphics used to remove or hide
portions of objects or graphics that are outside the boundaries of a
specified region or window.
• The most common type of clipping is "viewing volume clipping,"
where objects outside the viewing frustum (a 3D volume defining the
visible region) are clipped or not rendered.
• Clipping is essential for optimizing rendering performance and
ensuring that only the visible parts of objects are displayed.
Types of Lines
Lines are of three types:

• Visible: A line or lines entirely inside

the window is considered visible
• Invisible: A line entirely outside the
window is considered invisible
• Clipped: A line partially inside the
window and partially outside is
clipped. For clipping point of
intersection of a line with the
window is determined.
line-clipping algorithm
• A line-clipping algorithm processes each line in a scene through a
series of tests and intersection calculations to determine whether the
entire line or any part of it is to be saved.
• It also calculates the intersection position of a line with the window
edges so its major goal is to minimize these calculations.
Applications of clipping

• It will extract part we desire.

• For identifying the visible and invisible area in the 3D object.
• For creating objects using solid modeling.
• For drawing operations.
• Operations related to the pointing of an object.
• For deleting, copying, moving part of an object.
Cohen Sutherland Line Clipping Algorithm
In the algorithm, first of all, it is detected whether line lies inside the
screen or it is outside the screen.
All lines come under any one of the following categories:
• Visible
• Not Visible
• Clipping Case
Cohen Sutherland Line Clipping
In this algorithm, we are given 9 regions on the screen. Out of which
one region is of the window and the rest 8 regions are around it given
by 4 digit binary. The division of the regions are based on (x_max,
y_max) and (x_min, y_min).

The central part is the viewing region or window, all the lines which lie
within this region are completely visible. A region code is always
assigned to the endpoints of the given line.

To check whether the line is visible or not.

Cohen Sutherland Line Clipping
Cohen Sutherland line clipping algorithm
Cohen Sutherland line clipping algorithm
•Cohen Sutherland line clipping algorithm divides a two-dimensional
space into 9 regions and then efficiently determines the lines and
portions of lines that are inside the given rectangular area.
Cohen Sutherland line clipping algorithm
•The algorithm can be outlines as follows-
•Nine regions are created, eight "outside" regions and one "inside"
region.
•For a given line extreme point (x, y), we can quickly find its region's
four-bit code.Four-bit code can be computed by comparing x and y with
four values (x_min, x_max, y_min and y_max).
•If x is less than x_min then bit number 1 is set.
•If x is greater than x_max then bit number 2 is set.
•If y is less than y_min then bit number 3 is set.
•If y is greater than y_max then bit number 4 is set
Cohen Sutherland line clipping algorithm
Cohen Sutherland line clipping algorithm
There are three possible cases-
1. Completely inside the given rectangle: Bitwise OR of region of two end
points of line is 0 (Both points are inside the rectangle)
2. Completely outside the given rectangle: Both endpoints share at least
one outside region which implies that the line does not cross the visible
region. (bitwise AND of endpoints! = 0).
3. Partially inside the window: Both endpoints are in different regions. In
this case, the algorithm finds one of the two points that is outside the
rectangular region. The intersection of the line from outside point and
rectangular window becomes new corner point and the algorithm repeats.
Cohen Sutherland line clipping algorithm
Cohen Sutherland line clipping algorithm
Step 1: Assign a region code for two endpoints of given line.
Step 2: If both endpoints have a region code 0000 then given line is completely inside.
Step 3: Else, perform the logical AND operation for both region codes.
Step 3.1: If the result is not 0000, then given line is completely outside.
Step 3.2: Else line is partially inside.
Step 3.2.1: Choose an endpoint of the line that is outside the given rectangle.
Step 3.2.2: Find the intersection point of the rectangular boundary (based on region
code).
Step 3.2.3: Replace endpoint with the intersection point and update the region code.
Step 3.2.4: Repeat step 2 until we find a clipped line either trivially accepted or trivially
rejected.
Step 4: Repeat step 1 for other lines.
 Cohen Sutherland Line Clipping
1) Assign the region codes to both endpoints.

2) Perform OR operation on both of these endpoints.

3) if OR = 0000,

then it is completely visible (inside the window).

Algorithm-Cohen Sutherland Line Clipping

else
Perform AND operation on both
these endpoints.
i) if AND ≠ 0000,
then the line is invisible and not inside
the window. Also, it can’t be considered
for clipping.
ii) else AND = 0000,
then line is partially inside the window
and considered for clipping.
Cohen Sutherland Line Clipping
Line AB is the visible case
Line OP is an invisible case
Line PQ is an invisible line
Line IJ are clipping candidates
Line MN are clipping candidate
Line CD are clipping candidate
Example of Cohen-Sutherland Line Clipping
Algorithm
• Let R be the
rectangular window
whose lower left-hand
corner is at L (-3, 1)
and upper right-hand
corner is at R (2, 6).
Find the region codes
for the endpoints in
fig:
Example of Cohen-Sutherland Line Clipping
Algorithm
A (-4, 2)→ 0001 F (1, 2)→ 0000
B (-1, 7) → 1000 G (1, -2) →0100
C (-1, 5)→ 0000 H (3, 3) → 0100
D (3, 8) → 1010 I (-4, 7) → 1001
E (-2, 3) → 0000 J (-2, 10) → 1000
Example of Cohen-Sutherland Line Clipping
Algorithm
• We place the line segments in their appropriate categories by testing
the region codes found in the problem.
• Category1 (visible): EF since the region code for both endpoints is
0000.
• Category2 (not visible): IJ since (1001) AND (1000) =1000 (which is
not 0000).
• Category 3 (candidate for clipping): AB since (0001) AND (1000) =
0000, CD since (0000) AND (1010) =0000, and GH. since (0100) AND
(0010) =0000.
• The candidates for clipping are AB, CD, and GH.
Weiler-Atherton Polygon Clipping:
• When the clipped polygons have two or more separate sections, then
it is the concave polygon handled by this algorithm.
• The vertex-processing procedures for window boundaries are
modified so that concave polygon is displayed.
• Let the clipping window be initially called clip polygon and the
polygon to be clipped the subject polygon.
• We start with an arbitrary vertex of the subject polygon and trace
around its border in the clockwise direction until an intersection with
the clip polygon is encountered
Weiler-Atherton Polygon Clipping:

If the edge enters the

clip polygon, record the
intersection point and
continue to trace the
subject polygon.
Weiler-Atherton Polygon Clipping:
• If the edge leaves the clip polygon, record the intersection point and
make a right turn to follow the clip polygon in the same manner.
• Whenever our path of traversal forms a sub-polygon we output the
sub-polygon as part of the overall result.
• We then continue to trace the rest of the original subject polygon
from a recorded intersection point that marks the beginning of a
not-yet traced edge or portion of an edge.
• The algorithm terminates when the entire border of the original
subject polygon has been traced exactly once.
Weiler-Atherton Polygon Clipping:
fig (a) indicates the order in which the edges and portion
of edges are traced. We begin at the starting vertex and
continue along the same edge (from 1 to 2) of the subject
polygon as it enters the clip polygon. As we move along
the edge that is leaving the clip polygon, we make a right
turn (from 4 to 5) onto the clip polygon, which is now
considered the subject polygon. Following the same logic
leads to the next right turn (from 5 to 6) onto the current
clip polygon, this is the original subject polygon. With the
next step done (from 7 to 8) in the same way, we have a
sub-polygon for output in fig (b). We then resume our
traversal of the original subject polygon from the
recorded intersection point where we first changed our
course. Going from 9 to 10 to 11 produces no output.
After skipping the already traversed 6 and 7, we continue
with 12 and 13 and come to an end. The fig (b) is the final
result.
Weiler-Atherton Polygon Clipping:

1. Finding all the intersection points and grouping them Here, let
there be a polygon ABCD and another polygon VWXYZ. Let ABCD
be the clipping polygon and let VWXYZ be the clipped polygon.
 Weiler-Atherton Polygon Clipping:
2. Making and
filling of two
lists Now, we
make two lists.
One for the
clipping polygon
and one for the
clipped polygon.
Now this is how
we fill it:
Weiler-Atherton Polygon Clipping:
3. Running of the
algorithm We start at
the clipped polygon’s
list, i.e. VWXYZ. Now,
we find the first
intersecting point that
is entering. Hence we
choose i1. From here
we begin the making
of the list of vertices
(or vector) to make a
clipped sub-polygon.
Weiler-Atherton Polygon Clipping:
Weiler-Atherton Polygon Clipping:

Hence, we were able to get two sub-polygons as a result of this

polygon clipping, which involved a concave polygon