217523 : Computer Graphics SEM-I

Empowerment Through Quality Technical Education

AJEENKYA DY PATIL SCHOOL OF ENGINEERING
Dr. D. Y. Patil Knowledge City, Charholi (Bk), Lohegaon, Pune – 412 105
Website: https://dypsoe.in/

LAB MANUAL

OOP AND COMPUTER GRAPHICS

LABORATORY
(217523)
SE (AI&DS) 2019 COURSE

Course Coordinator
Prof. Priyanka Shreyas Bhore

DEPARTMENT OF
ARTIFICIAL INTELLIGENCE & DATA SCIENCE

Department of Artificial Intelligence and Data Science Engineering, ADYPSOE 1

217523 : Computer Graphics SEM-I

Department of Artificial Intelligence & Data Science

Vision:
Imparting quality education in the field of Artificial Intelligence and Data Science

Mission:
 To include the culture of R and D to meet the future challenges in AI and DS.
 To develop technical skills among students for building intelligent systems to
solve problems.
 To develop entrepreneurship skills in various areas among the students.
 To include moral, social and ethical values to make students best citizens of country.
Program Educational Outcomes:
1. To prepare globally competent graduates having strong fundamentals, domain knowledge,
updated with modern technology to provide the effective solutions for engineering problems.

2. To prepare the graduates to work as a committed professional with strong professional ethics
and values, sense of responsibilities, understanding of legal, safety, health, societal, cultural
and environmental issues.

3. To prepare committed and motivated graduates with research attitude, lifelong learning,
investigative approach, and multidisciplinary thinking.

4. To prepare the graduates with strong managerial and communication skills to work
effectively as individuals as well as in teams.

Program Specific Outcomes:

1. Professional Skills- The ability to understand, analyze and develop computer programs in the
areas related to algorithms, system software, multimedia, web design, networking, artificial
intelligence and data science for efficient design of computer-based systems of varying
complexities.

2. Problem-Solving Skills- The ability to apply standard practices and strategies in software
project development using open-ended programming environments to deliver a quality product
for business success.

3. Successful Career and Entrepreneurship- The ability to employ modern computer

languages, environments and platforms in creating innovative career paths to be an entrepreneur
and to have a zest for higher studies.

Department of Artificial Intelligence and Data Science Engineering, ADYPSOE 2

217523 : Computer Graphics SEM-I

Table of Contents

Contents
1. Guidelines to manual usage ..........................................................................................4

2. Laboratory Objective ..................................................................................................8

3. Laboratory Equipment/Software.....................................................................................8

4. Laboratory Experiment list ...........................................................................................9

4.1. Experiment No. 1 ..................................................................................................11

4.2. Experiment No. 2 ..................................................................................................15

4.3. Experiment No. 3 ..................................................................................................19

4.4. Experiment No. 4 ..................................................................................................23

4.5. Experiment No. 5 ..................................................................................................30

4.6. Experiment No. 6 ..................................................................................................34

4.7. Experiment No. 7 ..................................................................................................42

Department of Artificial Intelligence and Data Science Engineering, ADYPSOE 3

217523 : Computer Graphics SEM-I

1. Guidelines to manual usage

This manual assumes that the facilitators are aware of collaborative learning methodologies.

This manual will provide a tool to facilitate the session on Digital Communication modules in
collaborative learning environment.

The facilitator is expected to refer this manual before the session.

Icon of Graduate Attributes

K A D I
Applying Problem Analysis Design & Investigation
Knowledge Development of problems

M E E T
Modern Tool Engineer Environment Ethics
Usage & Sustainability
Society

T O M I
Individual & Communication Project Life-Long
Team work Management Learning
& Finance

Department of Artificial Intelligence and Data Science Engineering, ADYPSOE 4

217523 : Computer Graphics SEM-I

Disk Approach- Digital Blooms Taxonomy

Department of Artificial Intelligence and Data Science Engineering, ADYPSOE 5

217523 : Computer Graphics SEM-I

Program Outcomes:
1. Engineering knowledge: An ability to apply knowledge of mathematics, including
discrete mathematics, statistics, science, computer science and engineering fundamentals to
model the software application.
2. Problem analysis: An ability to design and conduct an experiment as well as interpret
data, analyze complex algorithms, to produce meaningful conclusions and recommendations.
3. Design/development of solutions: An ability to design and development of software
system, component, or process to meet desired needs, within realistic constraints such as
economic, environmental, social, political, health & safety, manufacturability, and
sustainability.
4. Conduct investigations of complex problems:An ability to use research based
knowledge including analysis, design and development of algorithms for the solution of
complex problems interpretation of data and synthesis of information to provide valid
conclusion.
5. Modern tool usage: An ability to adapt current technologies and use modern IT tools, to
design, formulate, implement and evaluate computer based system, process, by considering
the computing needs, limits and constraints.
6. The engineer and society: An ability of reasoning about the contextual knowledge of the
societal, health, safety, legal and cultural issues, consequent responsibilities relevant to IT
practices.
7. Environment and sustainability: An ability to understand the impact of engineering
solutions in a societal context and demonstrate knowledge of and the need for sustainable
development.
8. Ethics: An ability to understand and commit to professional ethics and responsibilities
and norms of IT practice.
9. Individual and team work: An ability to apply managerial skills by working effectively
as an individual, as a member of a team, or as a leader of a team in multidisciplinary projects.
10. Communication: An ability to communicate effectively technical information in speech,
presentation, and in written form
11. Project management and finance: An ability to apply the knowledge of Information
Technology and management principles and techniques to estimate time and resources needed
to complete engineering project.
12. Life-long learning: An ability to recognize the need for, and have the ability to engage in
independent and life-long learning.

Department of Artificial Intelligence and Data Science Engineering, ADYPSOE 6

 217523 : Computer Graphics SEM-I

Course Name: OOP And Computer Graphics Laboratory

Course Code: (217523)

Course Outcomes
1. CO1: Understand and apply the concepts like inheritance, polymorphism, exception
handling and generic structures for implementing reusable programming codes.
2. CO2: Analyze the concept of file and apply it while storing and retrieving the data
fromsecondary storages.
3. CO3: Analyze and apply computer graphics algorithms for line-circle drawing, scan
conversion and filling with the help of object oriented programming concepts.
4. CO4: Understand the concept of windowing and clipping and apply various
algorithms tofill and clip polygons.
5. CO5: Apply logic to implement, curves, fractals, animation and gaming programs.

CO to PO Mapping:

PO1 PO2 PO3 PO4 PO5 PO6 PO7 PO8 PO9 PO10 PO11 PO12
CO1 - 1 2 1 - - - - - - - -
CO2 - 1 2 1 - - - - - - - -
CO3
2 1 1 - - - - - - - - -
CO4
1 2 2 1 - - - - - - - -
CO5
- 2 2 1 - - - - - - - -

CO to PSO Mapping:

PSO1 PSO2 PSO3

CO1 2 1 -
CO2 2 2 -
CO3 2 1 -
CO4 1 2 -
CO5 2 2 1

Department of Artificial Intelligence and Data Science Engineering, ADYPSOE 7

217523 : Computer Graphics SEM-I

2. Laboratory Objective
To understand basics of Computer Graphics, apply various methods and techniques
for implementing line-circledrawing, projections, animation, shading, illumination
and lighting using concepts of Object Oriented Programming.

3. Laboratory Equipment/Software
Software Requirement:
For C++ Programming with graphics:
Linux operating System, Text Editor
Open Source C++ Programming tool like G++/GCC, OPENGL

Hardware Requirement:
Computer nodes with proper configuration

Department of Artificial Intelligence and Data Science Engineering, ADYPSOE 8

217523 : Computer Graphics SEM-I

4. Laboratory Experiment list

Sr. No Title
Prerequisite practical assignments or installation (if any)

1 Basic programming skills of C++

List of Assignments
GROUP A
1 Write C++ program to draw a concave polygon and fill it with
desired color using scan fillalgorithm.

2 Write C++ program to implement Cohen Southerland line clipping algorithm.

3 a. Write C++ program to draw the following pattern. Use DDA line
and Bresenham‘s circle drawing algorithm. Apply the concept of
encapsulation.

OR
b. Write C++ program to draw the following pattern. Use DDA line and
Bresenham‘s circle drawing algorithm. Apply the concept of
encapsulation.

Group B
4 a. Write C++ program to draw 2-D object and perform following basic
transformations:
1. Scaling 2. Translation 3. Rotation. Apply the concept of operator
overloading.
OR
b. Write C++ program to implement translation, rotation and scaling
transformations onequilateral triangle and rhombus. Apply the
concept of operator overloading.

5 a. Write C++ program to generate snowflake using concept of fractals.

OR
b. Write C++ program to generate Hilbert curve using concept of fractals.

Department of Artificial Intelligence and Data Science Engineering, ADYPSOE 9

217523 : Computer Graphics SEM-I

OR
c. Write C++ program to generate fractal patterns by using Koch curves.
GROUP C
6 a. Design and simulate any data structure like stack or queue visualization using
graphics. Simulation should include all operations performed on designed data
structure. Implement the same using OpenGL.
OR
b. Write C++ program to draw 3-D cube and perform following
transformations on it usingOpenGL i) Scaling ii) Translation iii) Rotation
about an axis (X/Y/Z).
OR
c. Write OpenGL program to draw Sun Rise and Sunset.

7 Write a C++ program to control a ball using arrow keys. Apply the concept of
polymorphism.
OR
Write a C++ program to implement bouncing ball using sine wave form. Apply
the concept of polymorphism.
OR
Write C++ program to draw man walking in the rain with an umbrella. Apply
the concept of polymorphism.
OR
Write a C++ program to implement the game of 8 puzzle. Apply the concept of
polymorphism.
OR
Write a C++ program to implement the game Tic Tac Toe. Apply the concept
of polymorphism.

Mini- Project
8 Design and implement game / animation clip / Graphics Editor using open
source graphics library. Make use of maximum features of Object Oriented
Programming.

Department of Artificial Intelligence and Data Science Engineering, ADYPSOE 10

217523 : Computer Graphics SEM-I

4.1. Experiment No. 1

Aim: Write C++ program to draw a concave polygon and fill it with desired color using scan fill
algorithm. Apply the concept of inheritance.

Objective:
To understand and implement scanline polygon fill algorithm.

Theory:
Polygon:

A polygon is a closed planar path composed of a finite number of sequential line segments.
A polygon is a two-dimensional shape formed with more than three straight lines. When
starting point and terminal point is same then it is called polygon.

Types of Polygons
Concave
Convex
Complex
A convex polygon is a simple polygon whose interior is a convex set. In a convex polygon,
all interior angles are less than 180 degrees.

The following properties of a simple polygon are all equivalent to convexity:

 Every internal angle is less than or equal to 180 degrees.
 Every line segment between two vertices remains inside or on the boundary of the
polygon.
Convex Polygons: In a convex polygon, any line segment joining any two inside points lies
inside the polygon. A straight line drawn through a convex polygon crosses at most two
sides.
A concave polygon will always have an interior angle greater than 180 degrees. It is
possible to cut a concave polygon into a set of convex polygons. You can draw at least
one straight line through a concave polygon that crosses more than two sides.

Complex polygon is a polygon whose sides cross over each other one or more times.

Department of Artificial Intelligence and Data Science Engineering, ADYPSOE 11

217523 : Computer Graphics SEM-I

Inside outside test (Even- Odd Test):

We assume that the vertex list for the polygon is already stored and proceed as follows.
1. Draw any point outside the range Xmin and Xmax and Ymin and Ymax. Draw a scan line
through P up to a point A under study

2. If this scan line

i) Does not pass through any of the vertices then its contribution is equal to the number of times
it intersects the edges of the polygon. Say C if
a) C is odd then A lies inside the polygon.
b) C is even then it lies outside the polygon.
ii) If it passes through any of the vertices then the contribution of this intersection say V is,
a) Taken as 2 or even. If the other points of the two edges lie on one side of the scan line.

b) Taken as 1 if the other end points of the 2 edges lie on the opposite sides of the scan- line.
c) Here will be total contribution is C + V.

Polygon Filling:

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.

Department of Artificial Intelligence and Data Science Engineering, ADYPSOE 12

217523 : Computer Graphics SEM-I

Scan fill algorithm:

A scan-line fill of a region is performed by first determining the intersection positions of the
boundaries of the fill region with the screen scan lines Then the fill colors are applied to
each section of a scan line that lies within the interior of the fill region The scan-line fill
algorithm identifies the same interior regions as the odd-even rule.

It is an image space algorithm. It processes one line at a time rather than one pixel at a time. It
uses the concept area of coherence. This algorithm records edge list, active edge list. So
accurate bookkeeping is necessary. The edge list or edge table contains the coordinate of two
endpoints. Active Edge List (AEL) contain edges a given scan line intersects during its sweep.
The active edge list (AEL) should be sorted in increasing order of x. The AEL is dynamic,
growing and shrinking.

Algorithm:

Step1: Start algorithm

Step2: Initialize the desired data structure

1. Create a polygon table having color, edge pointers, coefficients

2. Establish edge table contains information regarding, the endpoint of edges,
pointer to polygon, inverse slope.
3. Create Active edge list. This will be sorted in increasing order of x.
4. Create a flag F. It will have two values either on or off.

Step3: Perform the following steps for all scan lines

1. Enter values in Active edge list (AEL) in sorted order using y as value
2. Scan until the flag, i.e. F is on using a background color
3. When one polygon flag is on, and this is for surface S1enter color intensity as I1into
Department of Artificial Intelligence and Data Science Engineering, ADYPSOE 13
217523 : Computer Graphics SEM-I

refresh buffer
4. When two or image surface flag are on, sort the surfaces according to depth
and use intensity value Sn for the nth surface. This surface will have least z depth
value
5. Use the concept of coherence for remaining planes.

Step4: Stop Algorithm

Applications:
1. To eliminate unimportant words

2. To allow applications to focus on the important words

3. To drop common words

Input:
Enter the no. of edges

100 200 300 400 500 50

Output:

Conclusion:
Hence, we have studied concept of concave scan line algorithm

Questions:
1. Which are the different approaches to fill a polygon?

2. What are advantages and drawbacks of scan line polygon fill algorithm?

Department of Artificial Intelligence and Data Science Engineering, ADYPSOE 14

217523 : Computer Graphics SEM-I

4.2. Experiment No. 2

Aim: Write C++ program to implement Cohen Southerland line clipping
algorithm.

Objective:
To learn Cohen Southerland line clipping algorithm

Theory:
Cohen Sutherland Algorithm is a line clipping algorithm that cuts lines to portions which
are within a rectangular area. It eliminates the lines from a given set of lines and rectangle area
of interest(view port) which belongs outside the area of interest and clips those lines which
are partially inside the area of interest.
Example:

Algorithm

The algorithm divides a two-dimensional space into 9 regions (eight outside regions and one
inside region) and then efficiently determines the lines and portions of lines that are visible in the
central region of interest (the viewport).
Following image illustrates the 9 regions:

Department of Artificial Intelligence and Data Science Engineering, ADYPSOE 15

217523 : Computer Graphics SEM-I

As you seen each region is denoted by a 4 bit code like 0101 for the bottom right region

Four Bit code is calculated by comparing extreme end point of given line (x,y) by four co-
Ordinate sx_min, x_max, y_max, y_min which are the coordinates of the area of interest
(0000)
Calculate the four bit code as follows:
 Set First Bit if 1 Points lies to left of window (x < x_min)
 Set Second Bit if 1 Points lies to right of window (x > x_max)
 Set Third Bit if 1 Points lies to left of window (y < y_min)
 Set Forth Bit if 1 Points lies to right of window (y > y_max)

The more efficient Cohen-Sutherland Algorithm performs initial tests on a line to

determine whether intersection calculations can be avoided.

Algorithm

• Step1: Calculate positions of both endpoints of the line

• Step2: Perform OR operation on both of these end-points
• Step3:If the OR operation gives 0000
Then
line is considered to be visible
else
Perform AND operation on both endpoints
If And ≠ 0000
then the line is invisible
else
Department of Artificial Intelligence and Data Science Engineering, ADYPSOE 16
217523 : Computer Graphics SEM-I

And=0000
Line is considered the clipped case.
• Step4:If a line is clipped case, find an intersection with boundaries of the window
m=(y2-y1 )/(x2-x1)
• (a) If bit 1 is "1" line intersects with left boundary of rectangle window
y=y1+m(X-X1)
where X = Xwmin
where Xwminis the minimum value of X co-ordinate of window
• (b) If bit 2 is "1" line intersect with right boundary
y=y1+m(X-X1)
where X = Xwmax
where X more is maximum value of X co-ordinate of the window
• (c) If bit 3 is "1" line intersects with bottom boundary
X=X1+(y-y1)/m
where y = ywmin
ywmin is the minimum value of Y co-ordinate of the window
• (d) If bit 4 is "1" line intersects with the top boundary
X=X1+(y-y1)/m
where y = ywmax
ywmax is the maximum value of Y co-ordinate of the window

Applications:
1. To eliminate unimportant words

2. To allow applications to focus on the important words

3. To drop common words

Input: Enter the co-ordinates : 200 100 300

Department of Artificial Intelligence and Data Science Engineering, ADYPSOE 17

217523 : Computer Graphics SEM-I

Output:

Conclusion:
Hence, we have studied concept of polygon clipping using Cohen Southerland line clipping
algorithm.

Questions:

1. What is the limitation of Cohen Sutherland Line Clipping algorithm?

2. What are the advantages of Cohen Sutherland Line Clipping?

Department of Artificial Intelligence and Data Science Engineering, ADYPSOE 18

217523 : Computer Graphics SEM-I

4.3. Experiment No. 3

Aim: Write C++ program to draw a given pattern. Use DDA line and Bresenham’s circle drawing
algorithm. Apply the concept of encapsulation.

Objective:

To learn and apply DDA line and Bresenham’s circle drawing algorithm

Theory:
DDA Line Drawing Algorithm:

Pixel is a basic element in graphics. To draw a line, you need two end points between which
you can draw a line. Digital Differential Analyzer (DDA) line drawing algorithm is the
simplest line drawing algorithm in computer graphics. It works on incremental method. It
plots the points from starting point of line to end point of line by incrementing in X and Y
direction in each iteration.
DDA line drawing algorithm works as follows:
Step 1: Get coordinates of both the end points (X1, Y1) and (X2, Y2) from user.

Step 2: Calculate the difference between two end points in X and Y direction.

dx = X2 – X1;
dy = Y2 – Y1;

Step 3: Based on the calculated difference in step-2, you need to identify the number of steps
to put pixel. If dx > dy, then you need more steps in x coordinate; otherwise in y coordinate.

if (absolute(dx) >
absolute(dy)) Steps =
absolute(dx);
else
Steps = absolute(dy);

Step 4: Calculate the increment in x coordinate and y coordinate.

Xincrement = dx / (float) steps;
Yincrement = dy / (float) steps;

Step 5: Plot the pixels by successfully incrementing x and y coordinates accordingly and
complete the drawing of the line.

for(int i=0; i < Steps; i++)

{

X1 = X1 + Xincrement;
Y1 = Y1 + Yincrement;

Department of Artificial Intelligence and Data Science Engineering, ADYPSOE 19

217523 : Computer Graphics SEM-I

putpixel(Round(X1), Round(Y1), ColorName);

}

Bresenham’s Circle Drawing Algorithm:

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 Algorithm is a circle drawing algorithm that selects the nearest
pixel position to complete the arc. The unique part of this algorithm is that is uses only integer
arithmetic which makes it significantly faster than other algorithms using floating point
arithmetic.

Step 1: Read the x and y coordinates of center: (centx, centy)

Step 2: Read the radius of circle: (r)

Step 3: Initialize, x = 0; y = r;

Step 4: Initialize decision parameter: p = 3 – (2 * r)

Step 5:
do {
putpixel(centx+x, centy-
y, ColorName); if (p<0)
p = p+(4*x)+6;else
{
p=p+[4*(x-y)]+10;
y=y-1;
}
Department of Artificial Intelligence and Data Science Engineering, ADYPSOE 20
217523 : Computer Graphics SEM-I

x=x+1;
} while(x<y)

Here in step 5, putpixel() function is used which will print Octant-1 of the circle with radius r
after the completion of all the iterations of do-while loop. Because of the eight-way symmetry
property of circle, we can draw other octants of the circle using following putpixel()

Functions:
Octant 1: putpixel(centx+x, centy-y,
ColorName);
Octant 2: putpixel(centx+y, centy-x,
ColorName);
Octant 3: putpixel(centx+y, centy+x,
ColorName);
Octant 4: putpixel(centx+x, centy+y,
ColorName);
Octant 5: putpixel(centx-x, centy+y,
ColorName);
Octant 6: putpixel(centx-y, centy+x,
ColorName);
Octant 7: putpixel(centx-y, centy-x,
ColorName);
Octant 8: putpixel(centx-x, centy-y,
ColorName);

Drawing Pattern using lines and circles:

This pattern is made up of one equilateral triangle and two concentric circles. To draw the
triangle, we require coordinates of 3 vertices forming an equilateral triangle. To draw two
concentric circles, we require coordinates of common center and radius of both the circles.

We will take coordinates of circle and radius of one of the circle from user. Then using the
properties of an equilateral triangle, we can find all 3 vertices of equilateral triangle and radius of
other circle. Once we get all these parameters, we can call DDA line drawing and Bresenham’s
circle drawing algorithms by passing appropriate parameters to get required pattern.
Department of Artificial Intelligence and Data Science Engineering, ADYPSOE 21
217523 : Computer Graphics SEM-I

OR

To draw this pattern, we require two rectangles and one circle. We can use suitable geometry
to get coordinates to draw rectangles and circle. Then we can call DDA line drawing and
Bresenham’s circle drawing algorithms by passing appropriate parameters to get required
pattern.

Applications:

1. To eliminate unimportant words

2. To allow applications to focus on the important words
3. To drop common words
Input:
Enter the co-ordinates of center of
circle Value Of X: 100
Value Of Y: 70
Value Of Radius: 30
Output:

Conclusion:
Hence, we have studied that DDA line and Bresenham’scircle drawing algorithm and apply the
concept of encapsulation.

Questions:

1. Explain the derivation of decision parameters in Bresenham’s circle drawing algorithm.

2. Explain the concept of encapsulation with example.

Department of Artificial Intelligence and Data Science Engineering, ADYPSOE 22

217523 : Computer Graphics SEM-I

4.4. Experiment No. 4

Aim:

a) Write C++ program to draw 2-D object and perform following basic transformations:
Scaling, Translation, Rotation. Apply the concept of operator overloading.

OR

b) Write C++ program to implement translation, rotation and scaling transformations on

equilateral triangle and rhombus. Apply the concept of operator overloading.

Objective: To learn and apply basic transformations on 2-D objects.

Theory:
Transformation means changing some graphics into something else by applying rules. We can
have various types of transformations such as translation, scaling up or down, rotation, shearing,
reflection etc. When a transformation takes place on a 2D plane, it is called 2D transformation.
Transformations play an important role in computer graphics to reposition the graphics on the
screen and change their size or orientation. Translation, Scaling and Rotation are basic
transformations.
1)Translation:
A translation moves an object to a different position on the screen. You can translate a point in
2Dby adding translation coordinate or translation vector (Tx, Ty) to the original coordinates.
Consider
Initial coordinates of the object O = (Xold, Yold)
New coordinates of the object O after translation = (Xnew, Ynew)
Translation vector or Shift vector = (Tx, Ty)

Department of Artificial Intelligence and Data Science Engineering, ADYPSOE 23

217523 : Computer Graphics SEM-I

This translation is achieved by adding the translation coordinates to the old coordinates of the
object as-

Xnew = Xold + Tx
(This denotes translation towards X axis)
Ynew = Yold + Ty
(This denotes translation towards Y axis)
In Matrix form, the above translation equations may be represented as-

2)Rotation:

In rotation, we rotate the object at particular angle θ (theta) from its original position. Consider
- Initial coordinates of the object O = (Xold, Yold)
- Initial angle of the object O with respect to origin = Φ
- Rotation angle = θ
- New coordinates of the object O after rotation = (Xnew, Ynew)

This anti-clockwise rotation is achieved by using the

following rotation equations-Xnew = Xold x cosθ – Yold x
sinθ
Ynew = Xold x sinθ + Yold x cosθ

Department of Artificial Intelligence and Data Science Engineering, ADYPSOE 24

217523 : Computer Graphics SEM-I

In Matrix form, the above rotation equations may be represented as-

3)Scaling:
Scaling transformation is used to change the size of an object. In the scaling process,
you either expand or compress the dimensions of the object. Scaling can be achieved
by multiplying the originalcoordinates of the object with the scaling factor (Sx, Sy). If
scaling factor > 1, then the object size is increased. If scaling factor < 1, then the
object size is reduced. Consider Initial coordinates of the object O = (Xold, Yold)
- Scaling factor for X-axis = Sx
- Scaling factor for Y-axis = Sy
- New coordinates of the object O after scaling = (Xnew, Ynew)

This scaling is achieved by using the following scaling

equations- Xnew = Xold x Sx
Ynew = Yold x Sy

In Matrix form, the above scaling equations may be represented as-

Department of Artificial Intelligence and Data Science Engineering, ADYPSOE 25

217523 : Computer Graphics SEM-I

Homogeneous Coordinates:
Matrix multiplication is easier to implement in hardware and software as compared to
matrix addition. Hence we want to replace matrix addition by multiplication while
performing transformation operations. So the solution is homogeneous coordinates,
which allows us to express all transformations (including translation) as matrix
multiplications.
To obtain homogeneous coordinates we have to represent transformation matrices in
3x3 matrices instead of 2x2. For this we add dummy coordinate. Each 2 dimensional
position (x,y) can be represented by homogeneous coordinate as (x,y,1).

Translation Matrix (Homogeneous Coordinates representation)

Rotation Matrix (Homogeneous Coordinates representation)

Scaling Matrix (Homogeneous Coordinates representation)

Department of Artificial Intelligence and Data Science Engineering, ADYPSOE 26

217523 : Computer Graphics SEM-I

Applying transformations on equilateral triangle:

Consider that coordinates of vertices of equilateral triangle are (X1,Y1), (X2,Y2) and
(X3,Y3). After applying basic transformations, we will get corresponding coordinates as
(X1’,Y1’), (X2’,Y2’) and (X3’,Y3’) respectively. Following multiplication will give the
translation on this equilateral triangle:

Similarly, we can apply rotation and scaling on equilateral triangle.

Applying transformations on rhombus:

Consider that coordinates of vertices of rhombus are (X1,Y1), (X2,Y2), (X3,Y3) and (X4,Y4)
applying basic transformations, we will get corresponding coordinates as (X1’,Y1’), (X2’,Y2’),
(X3’,Y3’) and (X4’,Y4’) respectively.
Following multiplication will give the translation on this rhombus:

Similarly, we can apply rotation and scaling on rhombus.

Applications:
1. To eliminate unimportant words

2. To allow applications to focus on the important words

3. To drop common words

Department of Artificial Intelligence and Data Science Engineering, ADYPSOE 27
217523 : Computer Graphics SEM-I

Input:
Enter number of vertices
Enter (x,y) Co-ordinate of point P
Enter X-Translation tx
Enter X-Translation ty
Polygon after Translation
Enter the angle of rotation in degrees
Enter your choice
Output:

Department of Artificial Intelligence and Data Science Engineering, ADYPSOE 28

217523 : Computer Graphics SEM-I

Conclusion:
Hence, we have studied that 2-D object and perform following basic transformations: Scaling,
Translation, Rotation. Apply the concept of operator overloading.

Questions:
1. How to rotate any 2-D object about an arbitrary point? Explain in brief.
2. Explain the concept of operator overloading with example.

Department of Artificial Intelligence and Data Science Engineering, ADYPSOE 29

217523 : Computer Graphics SEM-I

4.5. Experiment No. 5

Aim: a) Write C++ program to generate snowflake using concept of fractals.
OR
b) Write C++ program to generate Hilbert curve using concept of fractals.

OR
c)Write C++ program to generate fractal patterns by using Koch curves.

Objective: To study curves and fractals.

Theory: Koch Curve-

The Koch curve fractal was first introduced in 1904 by Helge von Koch. It was one of the
first fractal objects to be described. To create a Koch curve
1. Create a line and divide it into three parts.
2. The second part is now rotated by 60°.
3. Add another part which goes from the end of part 2 to the beginning of part 3
4. Repeat step 1 to step 3 with each part of the line.

We will get following Koch curve as number of iteration goes on increasing

Step 1: In Iteration 0, we have a horizontal line.

Step 2: In Iteration 1, line is divided into 3 equal parts. Middle part of a line is rotated in
00, because it forms a perfect an equilateral triangle as shown below:

Department of Artificial Intelligence and Data Science Engineering, ADYPSOE 30

217523 : Computer Graphics SEM-I

Here, (x1,y1) and (x2, y2) is accepted from user.

Now, we can see line is divided into 3 equal segments: segment((x1,y1),(x3,y3)),
segment((x3,y3),(x4,y4)),segment((x4,y4),(x2,y2)) in above figure.

Coordinates of middle two points will be calculated as follows:

x3 = (2*x1+x2)/3;
y3 = (2*y1+y2)/3;
x4 = (x1+2*x2)/3;
y4 = (y1+2*y2)/3;

In our curve, middle segment((x3,y3),(x4,y4)) will not be drawn. Now, in order to find out
coordinates of the top vertex (x,y) of equilateral triangle, we have rotate point (x4,y4) with
respect to arbitrary point (x3,y3) by angle of 60 degree in anticlockwise direction. After
performing this rotation, we will get rotated coordinates (x, y) as:
𝑥 = 𝑥3 + (𝑥4 − 𝑥3) ∗ cos 𝜃 + (𝑦4 − 𝑦3) ∗ sin 𝜃
𝑦 = 𝑦3 − (𝑥4 − 𝑥3) ∗ sin 𝜃 + (𝑦4 − 𝑦3) ∗ cos𝜃

Step 3: In iteration 2, you will repeat step 2 for every segment obtained in
iteration1.In this way, you can generate Koch curve for any number of
iterations.
The Hilbert curve

The Hilbert curve is a space filling curve that visits every point in a square grid with a size
of 2×2, 4×4, 8×8, 16×16, or any other power of 2. It was first described by David Hilbert
in 1892. Applications of the Hilbert curve are in image processing: especially image
compression and dithering. It has advantages in those operations where the coherence
between neighboring pixels is important. The Hilbert curve is also a special version of a
quad tree; any image processing function that benefits from the use of quad trees may also
use a Hilbert curve.

Cups and joins

The basic elements of the Hilbert curves are what I call "cups" (a square with one
open side) and "joins" (a vector that joins two cups). The "open" side of a cup can be
top, bottom, left or right. In addition, every cup has two end-points, and each of these
can be the "entry" point or the "exit" point. So, there are eight possible varieties of
cups. In practice, a Hilbert curve uses only four types of cups. In a similar vein, a join
has a direction: up, down, left or right.
A first order Hilbert curve is just a single cup (see the figure on the
left). It fills a 2×2 space. The second order Hilbert curve replaces
that cup by four (smaller) cups, which are linked together by three
joins (see the figure on the right; the link between a cup and a join
has been marked with a fat dot in the figure). Every next order

Department of Artificial Intelligence and Data Science Engineering, ADYPSOE 31

217523 : Computer Graphics SEM-I

repeats the process or replacing each cup by four smaller cups

and three joins.

Cup subdivision rules

The function presented below (in the "C" language) computes the Hilbert curve. Note that
the curve is symmetrical around the vertical axis. It would therefore be sufficient to draw
half of the Hilbert curve.

Snowflake curve:
Snowflake curve is drawn using koch curve iterations. In koch curve, we just have a single
line in the starting iteration and in snowflake curve, we have an equilateral triangle. Draw
an equilateral triangle and repeat the steps of Koch curve generation for all three segments
of an equilateral triangle.

Applications:
1. To eliminate unimportant words
2. To allow applications to focus on the important words
3. To drop common words

Input: Give the value of n:

x3 = (2*x1+x2)/3;

Department of Artificial Intelligence and Data Science Engineering, ADYPSOE 32

217523 : Computer Graphics SEM-I

y3 = (2*y1+y2)/3;

x4 = (x1+2*x2)/3;

y4 = (y1+2*y2)/3;

Output:

Conclusion:
Hence, we have studied that to generate Hilbert curve using concept of fractals.

Questions:
1. What is the importance of curves and fractals in computer graphics?
2. What are applications of curves and fractals?

Department of Artificial Intelligence and Data Science Engineering, ADYPSOE 33

217523 : Computer Graphics SEM-I

4.6. Experiment No. 6

Aim: Implementation of OpenGL functions
a) Design and simulate any data structure like stack or queue visualization using graphics.
Simulation should include all operations performed on designed data structure. Implement the
same using OpenGL.
OR
b) Write C++ program to draw 3-D cube and perform following transformations on it using
OpenGL i) Scaling ii) Translation iii) Rotation about an axis (X/Y/Z).
OR
C) Write OpenGL program to draw Sun Rise and Sunset.
Objective:
To implement OpenGL functions.

Theory:
OpenGL Basics:
Open Graphics Library (OpenGL) is a cross-language (language independent), cross-platform
(platform independent) API for rendering 2D and 3D Vector Graphics (use of polygons to
represent image). OpenGL is a low-level, widely supported modeling and rendering software
package, available across all platforms. It can be used in a range of graphics applications, such as
games, CAD design, or modeling. OpenGL API is designed mostly in hardware.
 Design: This API is defined as a set of functions which may be called by the client
program. Although functions are similar to those of C language but it is language
independent.
 Development: It is an evolving API and Khronos Group regularly releases its new
version having some extended feature compare to previous one. GPU vendors may also
provide some additional functionality in the form of extension.
 Associated Libraries: The earliest version is released with a companion library called
OpenGL utility library. But since OpenGL is quite a complex process. So in order to
make it easier other library such as OpenGL Utility Toolkit is added which is later
superseded by free glut. Later included library were GLEE, GLEW and glbinding.
 Implementation: Mesa 3D is an open source implementation of OpenGL. It can do pure
software rendering and it may also use hardware acceleration on BSD, Linux, and other
platforms by taking advantage of Direct Rendering Infrastructure.

Installation of OpenGL on Ubuntu

We need the following sets of libraries in programming OpenGL:
1. Core OpenGL (GL): consists of hundreds of functions, which begin with a prefix "gl"
(e.g.,glColor, glVertex, glTranslate, glRotate). The Core OpenGL models an object via a
set of geometric primitives, such as point, line, and polygon.
Department of Artificial Intelligence and Data Science Engineering, ADYPSOE 34
217523 : Computer Graphics SEM-I

2. OpenGL Utility Library (GLU): built on-top of the core OpenGL to provide important
utilities and more building models (such as qradric surfaces). GLU functions start with a
prefix "glu"(e.g.,gluLookAt, gluPerspective).
3. OpenGL Utilities Toolkit (GLUT): provides support to interact with the Operating
System (such as creating a window, handling key and mouse inputs); and more building
models (such as sphere and torus). GLUT functions start with a prefix of "glut"
(e.g., glutCreatewindow, glutMouseFunc). GLUT is designed for constructing small to
medium sized OpenGL programs. While GLUT is well-suited to learning OpenGL and
developing simple OpenGL applications, GLUT is not a full-featured toolkit so large
applications requiring sophisticated user interfaces are better off using native window
system toolkits. GLUT is simple, easy, and small.
Alternative of GLUT includes SDL.
4. OpenGL Extension Wrangler Library (GLEW): "GLEW is a cross-platform open-
sourceC/C++ extension loading library. GLEW provides efficient run-time mechanisms for
determining which OpenGL extensions are supported on the target platform.
 sudo apt-get install freeglut3-dev
For working on Ubuntu operating system:
 gcc filename.c -lGL -lGLU -lglut
where filename.c is the name of the file with which this program is saved.
Prerequisites for OpenGL
Since OpenGL is a graphics API and not a platform of its own, it requires a language to
operate in and the language of choice is C++.
Getting Started with OpenGL:Overview of an OpenGL Program:

 Main
 Open window and configure frame buffer (using GLUT for example)
 Initialize GL states and display (Double buffer, color mode, etc.)
 Loop
 Check for events
if window event (resize, unhide, maximize etc.) modify the view report and Redraw else if
input event(keyboard and mouse etc) handle the event (such as move the camera or
change the state) and usually draw the scene
 Redraw
 Clear the screen (and buffers e.g., z-buffer)
 Change states (if desired)
 Render
 Swap buffers (if double buffer)
OpenGL order of operations
 Construct shapes (geometric descriptions of objects – vertices, edges, polygons etc.)
 Use OpenGL to
o Arrange shape in 3D (using transformations)
Department of Artificial Intelligence and Data Science Engineering, ADYPSOE 35
217523 : Computer Graphics SEM-I

o Select your vantage point (and perhaps lights)

o Calculate color and texture properties of each object
o Convert shapes into pixels on screen
OpenGL Syntax
 All functions have the form: gl*
o glVertex3f() – 3 means that this function take three arguments, and f means that the type
of those arguments is float.
o glVertex2i() – 2 means that this function take two arguments, and i means that the type of
those arguments is integer
All variable types have the form: GL*
o In OpenGL program it is better to use OpenGL variable types (portability)
 Glfloat instead of float
 Glint instead of int
OpenGL primitives
Drawing two lines
glBegin(GL_LINES);

glVertex3f(_,_,_); // start point of line

1glVertex3f(_,_,_); // end point of line 1
glVertex3f(_,_,_); // start point of line 2
glVertex3f(_,_,_); // end point of line 2 glEnd();

We can replace GL_LINES with GL_POINTS, GL_LINELOOP, GL_POLYGON etc.

OpenGL states
 On/off (e.g., depth buffer test)
o glEnable( GLenum )
o glDisable( GLenum )
o Examples:
 glEnable(GL_DEPTH_TEST);
 glDisable(GL_LIGHTING);
 Mode States
o Once the mode is set the effect stays until reset
o Examples:
 glShadeModel(GL_FLAT) or glShadeModel(GL_SMOOTH)
 glLightModel(…) etc.
Drawing in 3D
 Depth buffer (or z-buffer) allows scene to remove hidden surfaces. Use
glEnable(GL_DEPTH_TEST) to enable it.
o glPolygonMode( Face, Mode )
 Face: GL_FRONT, GL_BACK, GL_FRONT_AND_BACKMode: GL_LINE,
Department of Artificial Intelligence and Data Science Engineering, ADYPSOE 36
217523 : Computer Graphics SEM-I

GL_POINT, GL_FILL
o glCullFace( Mode )
 Mode: GL_FRONT, GL_BACK, GL_FRONT_AND_BACK
 glFrontFace( Vertex_Ordering )
 Vertex Ordering: GL_CW or GL_CCW
Viewing transformation
 glMatrixMode ( Mode )
 Mode: GL_MODELVIEW, GL_PROJECTION, or GL_TEXTURE
 glLoadIdentity()
 glTranslate3f(x,y,z)
 glRotate3f(angle,x,y,z)
 glScale3f(x,y,z)
OpenGL provides a consistent interface to the underlying graphics hardware. This abstraction
allows a single program to run a different graphics hardware easily. A program written with
OpenGL can even be run in software (slowly) on machines with no graphics acceleration.
OpenGL function names always begin with gl, such as glClear(), and they may end with
characters that indicate the types of the parameters, for example glColor3f(GLfloat red, GLfloat
green, GLfloat blue) takes three floating-point color parameters and glColor4dv(const GLdouble
*v) takes a pointer to an array that contains 4double-precision floating-point values. OpenGL
constants begin with GL, such as GL DEPTH. OpenGL also uses special names for types that are
passed to its functions, such as GLfloat or GLint, the corresponding C types are compatible, that is
float and int respectively.
GLU is the OpenGL utility library. It contains useful functions at a higher level than those
provided by OpenGL, for example, to draw complex shapes or set up cameras. All GLU
functions are written on top of OpenGL. Like OpenGL, GLU function names begin with glu, and
constants begin with GLU.
GLUT, the OpenGL Utility Toolkit, provides a system for setting up callbacks for interacting with
the user and functions for dealing with the windowing system. This abstraction allows a program
to run on different operating systems with only a recompile. Glut follows the convention of
prepending function names with glut and constants with GLUT.

Writing an OpenGL Program with GLUT

An OpenGL program using the three libraries listed above must include the appropriate headers.
This requires the following three lines:
#include <GL/gl.h>
#include <GL/glu.h>
#include <GL/glut.h>
Before OpenGL rendering calls can be made, some initialization has to be done. With GLUT,
this consists of initializing the GLUT library, initializing the display mode, creating the window,

Department of Artificial Intelligence and Data Science Engineering, ADYPSOE 37

217523 : Computer Graphics SEM-I

and setting up callback functions. The following lines initialize a full color, double buffered
display: glutInit(&argc, argv);
glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGB);
Double buffering means that there are two buffers, a front buffer and a back buffer. The front
buffer is displayed to the user, while the back buffer is used for rendering operations. This
prevents flickering that would occur if we rendered directly to the front buffer.
Next, a window is created with GLUT that will contain the viewport which displays the

OpenGLfront buffer with the following three lines:

glutInitWindowPosition(px, py);
glutInitWindowSize(sx, sy);
glutCreateWindow(name);
To register callback functions, we simply pass the name of the function that handles the event to
the appropriate GLUT function.
glutReshapeFunc(reshape);
glutDisplayFunc(display);
Here, the functions should have the following prototypes:
void reshape(int width, int height); void display();
In this example, when the user resizes the window, reshape is called by GLUT, and when the
display needs to be refreshed, the display function is called. For animation, an idle event handler
that takes no arguments can be created to call the display function to constantly redraw the scene
with glutIdleFunc. Once all the callbacks have been set up, a call to glutMainLoop allows the
program to run.
In the display function, typically the image buffer is cleared, primitives are rendered to it, and the
results are presented to the user. The following line clears the image buffer, setting each pixel
color to the clear color, which can be configured to be any color:
glClear(GL_COLOR_BUFFER_BIT);
The next line sets the current rendering color to blue. OpenGL behaves like a state machine, so
certain state such as the rendering color is saved by OpenGL and used automatically later as it is
needed.
glColor3f(0.0f, 0.0f, 1.0f);

To render a primitive, such as a point, line, or polygon, OpenGL requires that a call to glBegin
is made to specify the type of primitive being rendered.
glBegin(GL_LINES);

Only a subset of OpenGL commands is available after a call to glBegin. The main command that
is used is glVertex, which specifies a vertex position. In GL LINES mode, each pair of vertices
define endpoints of a line segment. In this case, a line would be drawn from the point at ( x0, y0)
to (x1, y1).
glVertex2f(x0, y0); glVertex2f(x1, y1);

Department of Artificial Intelligence and Data Science Engineering, ADYPSOE 38

217523 : Computer Graphics SEM-I

A call to glEnd completes rendering of the current primitive. glEnd(); Finally, the back buffer
needs to be swapped to the front buffer that the user will see, which GLUT can handle for us:

glutSwapBuffers();

Developer-Driven Advantages

 Industry standard
An independent consortium, the OpenGL Architecture Review Board, guides the
OpenGL specification. With broad industry support, OpenGL is the only truly open,
vendor-neutral, multiplatform graphics standard.
 Stable
OpenGL implementations have been available for more than seven years on a wide
variety of platforms. Additions to the specification are well controlled, and proposed
updates are announced intime for developers to adopt changes. Backward
compatibility requirements ensure that existing applications do not become obsolete.
 Reliable and portable
All OpenGL applications produce consistent visual display results on any OpenGL
API- compliant hardware, regardless of operating system or windowing system.

 Evolving
Because of its thorough and forward-looking design, OpenGL allows new hardware
innovations to be accessible through the API via the OpenGL extension mechanism.
In this way, innovations appear in the API in a timely fashion, letting application
developers and hardware vendors incorporate new features into their normal product
release cycles.
 Scalable
OpenGL API-based applications can run on systems ranging from consumer
electronics to PCs, workstations, and supercomputers. As a result, applications can
scale to any class of machine that the developer chooses to target.
 Easy to use
OpenGL is well structured with an intuitive design and logical commands. Efficient
OpenGL routines typically result in applications with fewer lines of code than those
that make up programs generated using other graphics libraries or packages. In
addition, OpenGL drivers encapsulate information about the underlying hardware,
freeing the application developer from having to design for specific hardware
features.
 Well-documented:

Department of Artificial Intelligence and Data Science Engineering, ADYPSOE 39

217523 : Computer Graphics SEM-I

Numerous books have been published about OpenGL, and a great deal of sample code is
readily available, making information about OpenGL inexpensive and easy to obtain.

Applications:
1. To eliminate unimportant words

2. To allow applications to focus on the important words

3. To drop common words

Input:
glTranslate3f(x,y,z)
glRotate3f(angle,x,y,z)
glScale3f(x,y,z)
Output:

Department of Artificial Intelligence and Data Science Engineering, ADYPSOE 40

217523 : Computer Graphics SEM-I

Conclusion:
Hence, we have studied that OpenGL program to draw Sun Rise and Sunset.

Questions:
1. What is OpenGL Program Explain in details?
2. What are advantages of Developer-driven?

Department of Artificial Intelligence and Data Science Engineering, ADYPSOE 41

217523 : Computer Graphics SEM-I

4.7. Experiment No. 7

Aim: Animation using C++
a) Write a C++ program to control a ball using arrow keys. Apply the concept of polymorphism.
OR
b) Write a C++ program to implement bouncing ball using sine wave form. Apply the concept of
polymorphism.
OR
c) Write C++ program to draw man walking in the rain with an umbrella. Apply the concept of
polymorphism.
OR
d) Write a C++ program to implement the game of 8 puzzle. Apply the concept of
polymorphism.
OR
e) Write a C++ program to implement the game Tic Tac Toe. Apply the concept of
polymorphism.

Objective:
To learn scanline polygon fill algorithm

Theory:
What is animation?
Animation is the process of designing, drawing, making layouts and preparation of photographic
sequences which are integrated in the multimedia and gaming products. Animation involves the
exploitation and management of still images to generate the illusion of movement. How to move
an element to left, right, up and down using arrow keys?

To detect which arrow key is pressed, you can use ncurses.h header file. Arrow key's code is
defined as: KEY_UP, KEY_DOWN, KEY_LEFT, KEY_RIGHT.

#include<ncurses.h>
int main()
{

int ch;
/* Curses Initialisations */initscr();
raw ();
keypad (stdscr, TRUE);noecho();
Department of Artificial Intelligence and Data Science Engineering, ADYPSOE 42
217523 : Computer Graphics SEM-I

printw("Welcome - Press # to Exit\n");while((ch = getch()) != '#')

{
switch(ch)
{

case KEY_UP: printw("\nUp Arrow");

break;
case KEY_DOWN: printw("\nDown Arrow");break; case KEY_LEFT: printw("\nLeft
Arrow");break; case KEY_RIGHT: printw("\nRight Arrow");break; default:
{
printw("\nThe pressed key is "); attron(A_BOLD);
printw("%c", ch); attroff(A_BOLD);
}

printw("\n\nBye Now!\n");refresh(); getch();

endwin(); return 0;
}
How to draw a sine wave using c++?
#include <math.h>
#include<graphics.h>
#include <iostream>

int main() {
int gd = DETECT, gm;int angle
= 0; double x, y;

initgraph(&gd, &gm, NULL);

line(0, getmaxy() / 2, getmaxx(), getmaxy() / 2);
/* generate a sine wave */
for(x = 0; x < getmaxx(); x+=3) {

/* calculate y value given x */y = 50*sin(angle*3.141/180);

y = getmaxy()/2 - y;
/* color a pixel at the given position */putpixel(x, y, 15); delay(100);
/* increment angle */angle+=5;
}

/* deallocate memory allocated for graphics screen */closegraph(); return 0;

}
Department of Artificial Intelligence and Data Science Engineering, ADYPSOE 43
217523 : Computer Graphics SEM-I

A game of 8 puzzle:
An 8 puzzle is a simple game consisting of a 3 x 3 grid (containing 9 squares). One of the
squares is empty. The object is to move to squares around into different positions and having the
numbers displayed in the "goal state". The image to the left can be thought of as an unsolved
initial state of the "3 x 3" 8 puzzle. Eight digits will in random order. To solve a puzzle, you have
to move blocks by performing translation of blocks.

Implementation of Tic-Tac-Toe game

Rules of the Game
 The game is to be played between two people (in this program between HUMAN and
COMPUTER)

 One of the player chooses ‘O’ and the other ‘X’ to mark their respective cells

 The game starts with one of the players and the game ends when one of the players
has one whole row/ column/ diagonal filled with his/her respective character (‘O’ or
‘X’)

 If no one wins, then the game is said to be a draw

Note: In all above programs, you have to perform translation of an image to

show animation effect.

Department of Artificial Intelligence and Data Science Engineering, ADYPSOE 44

217523 : Computer Graphics SEM-I

Applications:
4. To eliminate unimportant words

5. To allow applications to focus on the important words

6. To drop common words

Input:

Output:

Conclusion:
Hence, we have studied that bouncing ball using sine wave form.Apply the concept of
polymorphism.

Questions:

1. What is Animation explain in details?

2. What is an 8 Puzzle Program? Explain in details?

Department of Artificial Intelligence and Data Science Engineering, ADYPSOE 45