ALGORITHM VISUALIZER

PROJECT REPORT

CATEGORY(CSE/IT)

SUBMITTED BY: MENTOR NAME:

TEAM: BETAMIN C MS Apoorva Arora

RUCHIKA RANA (2002601)

SHWETA CHOWDHARY (2002641)
SANTANU DASS (2002618)

DEPARTMENT OF COMPUTER SCIENCE

AND ENGINEERING
Chandigarh Engineering College – Landran
Mohali, Punjab – 140307
 INDEX

S
N0. DESCRIPTION PAGE NO.

1. Introduction 1

2. Objective 2

3. Algorithms 3

4. Technology used 4

5. Source Code 5-11

6. Output 12-13

7. Conclusion 14

8. Future scope 15

9. References 16
 INTRODUCTION:

Algorithm visualization has been high topic in Computer science education for
years, but it did not make its way to schools/collages lecture halls as the main
educational tool. The present paper identifies two key circumstances that an
algorithm visualization must fulfil to be successful: general availability of used
software, and visualization of why an algorithm solves the problem rather than
what it is doing. One possible method of “why” algorithm visualization is using
algorithm unvarying rather than showing the data conversion only. Invariants are
known in Program faultleness. Theory and Software authentication and many
researchers believe that knowledge of invariants is essentially correspondent to
understanding the algorithm. Algorithm stable visualizing leads to codes that are
computationally very commanding, and powerful software tools require
downloading/installing compilers and/or runtime machines, which restrict the
opportunity of users. The use of images to deliver some useful information about
algorithms. Algorithm Visualization. In addition to the mathematical and
verifiable analyses of algorithms, there is yet a third way to study algorithms.
Keywords:visualization, animation, algorithm, Invariant.Due to advances in
video streaming and expansion of low-cost storage media, digital video has
become an important factor in education, entertainment, and commerce.
Consequently, there has been a great interest in designing and building systems
thatorganize and search video data based on its content. In addition to search
capabilities, such systems should be able to derive intuitive andcompact data
representations so that users may easily and quickly browse through the whole
database or through the results of a query. Such representations rapidly provide
the user with information about the contents of the particular sequence being
examined while preserving the essential message.
 OBJECTIVE:

Algorithm visualization (often called algorithm animation) uses dynamic graphics to

visualize computation of a given algorithm. It was expected that algorithm visualization
would completely change the way algorithms are taught. Many algorithm animations had
appeared, mostly for simple problems like primary tree data structures and sorting. There
were even attempts to robotize development of animated algorithms and algorithm
visualization. Another guidance was to develop tools that would allow learners to prepare
their own animations comfortably. Instead of giving appropriate references to algorithm
animation papers, the reader is directed to a super-reference (Algoviz,) that brings a list
of more than 650 authors/creator, some of them even with 29 references in algorithm
animation and visualization. However, algorithm visualization and animation has not
fulfilled the desire, and it is still not used too much in computer Science courses.
complaining about low approval of algorithm animation tools by teachers. The number of
articles, reports, and visualization tools sensibly declined in the second decade of the new
golden age. The present paper is an attempt to find why algorithm animation and
visualization is used much fewer in instruction then we desire 10 or 20 years ago. We
strongly understand that the reason is relative basic: An algorithm operates on some data.
Usually, in any particular scope of Computer Science, there is a fundamental way of
visualization of data - graphs and trees are drawn as circles linked by line segments,
number chain could be visualized as collections of vertical bars, there are fundamental
ways of drawing matrices, vectors, real functions, etc. An algorithm animation is usually
enforce by running the algorithm slowly or in steps, and simply reorganize the visual
portrayalof the data in the screen. A person who knows and understands the algorithm in
question can see how the algorithm progresses, but a learner user just sees visual objects
moving and changing their shapes and colours, but finding out why the movie runs in
that way is usually too difficult for him or her. With the help of this project we will try to
use algorithms for path finding and will visualize them for better understanding of
different algorithms. With this project we will learn algorithms in a better way.
 ALGORITHMS:
Dijkstra's Algorithm (weighted):

the father of pathfinding algorithms; guarantees the shortest path

A Search* (weighted): arguably the best pathfinding algorithm; uses heuristics to

guarantee the shortest path much faster than Dijkstra's Algorithm

Greedy Best-first Search (weighted):

a faster, more heuristic-heavy version of A*; does not guarantee the shortest path

Swarm Algorithm (weighted):

a mixture of Dijkstra's Algorithm and A*; does not guarantee the shortest-path

Convergent Swarm Algorithm (weighted):

the faster, more heuristic-heavy version of Swarm; does not guarantee the shortest path

Bidirectional Swarm Algorithm (weighted):

Swarm from both sides; does not guarantee the shortest path

Breath-first Search (unweighted):

a great algorithm; guarantees the shortest path

Depth-first Search (unweighted):

a very bad algorithm for pathfinding; does not guarantee the shortest path

On top of the pathfinding algorithms listed above, we implemented a Recursive

Division Maze Generation algorithm.
 TECHNOLOGY USED:

 HTML:

HTML stands for Hyper Text Markup Language. It is the standard

markup language for creating Web pages. It describes the structure of
a Web page. Itconsists of a series of elements. It’s elements tell the
browser how to displaythe contents.

 CSS:
It is a style sheet language used for describing the presentation of a
document written in a markup language such as HTML. CSS is a
cornerstone technologyof the World Wide Web, alongside HTML and
JavaScript. It is designed to enable the separation of presentation and
content, including layout, colors, and fonts. This separation can improve
content accessibility; provide more flexibility and control in the
specification of presentation characteristics; enable multiple web pages
to share formatting by specifying the relevant CSS in a separate .css file,
which reduces complexity and repetition in the structuralcontent; and
enable the .css file to be cached to improve the page load speed between
the pages that share the file and its formatting.

 JAVASCRIPT:

It is a lightweight, interpreted, or just-in-time compiled programming

language with first-class functions. While it is most well-known as the
scripting language for Web pages, many non-browser environments
also useit, such as Node.js, Apache CouchDB and Adobe Acrobat. It is
a prototype- based, multi-paradigm, single-threaded, dynamic
language, supporting object-oriented, imperative, and declarative
styles.
 SOURCE CODE:

Main html code:

<html>
<head>
<title>Pathfinding Visualizer</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link id="cssTheme" rel="stylesheet" href="public/styling/cssBasic.css"/>
<link rel="shortcut icon" type="image/png" href="public/styling/c_icon.png"/>
</head>
<body>
<div id='navbarDiv'>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a id="refreshButton" class="navbar-brand"
href="#">Pathfinding Visualizer</a>
</div>
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-
toggle="dropdown" href="#">Algorithms
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li id='startButtonDijkstra'><a href="#">Dijkstra's Algorithm</a></li>
<li id='startButtonAStar2'><a href="#">A* Search</a></li>
<li id='startButtonGreedy'><a href="#">Greedy Best-
first Search</a></li>
<li id='startButtonAStar'><a href="#">Swarm Algorithm</a></li>
<li id='startButtonAStar3'><a href="#">Convergent
Swarm Algorithm</a></li>
<li id='startButtonBidirectional'><a href="#">Bidirectional Swarm
Algorithm</a></li>
<li id='startButtonBFS'><a href="#">Breadth-first Search</a></li>
<li id='startButtonDFS'><a href="#">Depth-first Search</a></li>
</ul>
</li>
<li class="dropdown">
<a cla<html>
<head>
<title>Pathfinding Visualizer</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link id="cssTheme" rel="stylesheet" href="public/styling/cssBasic.css"/>
<link rel="shortcut icon" type="image/png" href="public/styling/c_icon.png"/>
</head>
<body>
<div id='navbarDiv'>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a id="refreshButton" class="navbar-brand"
href="#">Pathfinding Visualizer</a>
</div>
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-
toggle="dropdown" href="#">Algorithms
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li id='startButtonDijkstra'><a href="#">Dijkstra's Algorithm</a></li>
<li id='startButtonAStar2'><a href="#">A* Search</a></li>
<li id='startButtonGreedy'><a href="#">Greedy Best-
first Search</a></li>
<li id='startButtonAStar'><a href="#">Swarm Algorithm</a></li>
<li id='startButtonAStar3'><a href="#">Convergent
Swarm Algorithm</a></li>
<li id='startButtonBidirectional'><a href="#">Bidirectional Swarm
Algorithm</a></li>
<li id='startButtonBFS'><a href="#">Breadth-first Search</a></li>
<li id='startButtonDFS'><a href="#">Depth-first Search</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown"
href="#">Mazes &amp; Patterns
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li id='startButtonCreateMazeTwo'><a
href="#">Recursive Division</a></li>
<li id='startButtonCreateMazeThree'><a href="#">Recursive
Division (vertical skew)</a></li>
<li id='startButtonCreateMazeFour'><a href="#">Recursive
Division (horizontal skew)</a></li>
<li id='startButtonCreateMazeOne'><a href="#">Basic
Random Maze</a></li>
<li id='startButtonCreateMazeWeights'><a href="#">Basic
Weight Maze</a></li>
<li id='startStairDemonstration'><a href="#">Simple
Stair Pattern</a></li>
</ul>
</li>
<li id='startButtonAddObject'><a href="#">Add Bomb</a></li>
<li id='startButtonStart'><button id="actualStartButton" class="btn
btn- default navbar-btn" type="button">Visualize!</button></li>
<li id='startButtonClearBoard'><a href="#">Clear Board</a></li>
<li id='startButtonClearWalls'><a href="#">Clear Walls
&amp; Weights</a></li>
<li id='startButtonClearPath'><a href="#">Clear Path</a></li>
<li class="dropdown">
<a id="adjustSpeed" class="dropdown-toggle" data-
toggle="dropdown" href="#">Speed: Fast
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li id='adjustFast'><a href="#">Fast</a></li>
 <li id='adjustAverage'><a href="#">Average</a></li>
<li id='adjustSlow'><a href="#">Slow</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
<div id="tutorial">
<h3>Welcome to Pathfinding Visualizer!</h3>
<h6>This short tutorial will walk you through all of the features of
this application.</h6>
<p>If you want to dive right in, feel free to press the "Skip Tutorial"
button below. Otherwise, press "Next"!</p>
<div id="tutorialCounter">1/9</div>
<img id="mainTutorialImage" src="public/styling/c_icon.png">
<button id="nextButton" class="btn btn-default navbar-
btn" type="button">Next</button>
<button id="previousButton" class="btn btn-default navbar-btn"
type="button">Previous</button>
<button id="skipButton" class="btn btn-default navbar-
btn" type="button">Skip Tutorial</button>
</div>
<div id='mainGrid'>
<div id='mainText'>
<ul>
<li>
<div class="start"></div>Start Node</li>
<li>
<div class="target"></div>Target Node</li>
<li id="bombLegend">
<div class="object"></div>Bomb Node</li>
<li id="weightLegend">
<div class="borderlessWeight"></div>Weight Node</li>
<li>
<div class="unvisited"></div>Unvisited Node</li>
 <li>
<div class="visited"></div><div
class="visitedobject"></div>Visited Nodes</li>
<li>
<div class="shortest-path"></div>Shortest-path Node</li>
<li>
<div class="wall"></div>Wall Node</li>
</ul>
</div>
<div id="algorithmDescriptor">Pick an algorithm and visualize it!</div>
<table id='board'/>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></
script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script
>
<script src='public/browser/bundle.js'></script>
</html>

ss="dropdown-toggle" data-toggle="dropdown" href="#">Mazes &amp; Patterns

<span class="caret"></span></a>
<ul class="dropdown-menu">
<li id='startButtonCreateMazeTwo'><a
href="#">Recursive Division</a></li>
<li id='startButtonCreateMazeThree'><a href="#">Recursive
Division (vertical skew)</a></li>
<li id='startButtonCreateMazeFour'><a href="#">Recursive
Division (horizontal skew)</a></li>
<li id='startButtonCreateMazeOne'><a href="#">Basic
Random Maze</a></li>
<li id='startButtonCreateMazeWeights'><a href="#">Basic
Weight Maze</a></li>
<li id='startStairDemonstration'><a href="#">Simple
Stair Pattern</a></li>
</ul>
 </li>
<li id='startButtonAddObject'><a href="#">Add Bomb</a></li>
<li id='startButtonStart'><button id="actualStartButton" class="btn
btn- default navbar-btn" type="button">Visualize!</button></li>
<li id='startButtonClearBoard'><a href="#">Clear Board</a></li>
<li id='startButtonClearWalls'><a href="#">Clear Walls
&amp; Weights</a></li>
<li id='startButtonClearPath'><a href="#">Clear Path</a></li>
<li class="dropdown">
<a id="adjustSpeed" class="dropdown-toggle" data-
toggle="dropdown" href="#">Speed: Fast
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li id='adjustFast'><a href="#">Fast</a></li>
<li id='adjustAverage'><a href="#">Average</a></li>
<li id='adjustSlow'><a href="#">Slow</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
<div id="tutorial">
<h3>Welcome to Pathfinding Visualizer!</h3>
<h6>This short tutorial will walk you through all of the features of
this application.</h6>
<p>If you want to dive right in, feel free to press the "Skip Tutorial"
button below. Otherwise, press "Next"!</p>
<div id="tutorialCounter">1/9</div>
<img id="mainTutorialImage" src="public/styling/c_icon.png">
<button id="nextButton" class="btn btn-default navbar-
btn" type="button">Next</button>
<button id="previousButton" class="btn btn-default navbar-btn"
type="button">Previous</button>
<button id="skipButton" class="btn btn-default navbar-
btn" type="button">Skip Tutorial</button>
 </div>
<div id='mainGrid'>
<div id='mainText'>
<ul>
<li>
<div class="start"></div>Start Node</li>
<li>
<div class="target"></div>Target Node</li>
<li id="bombLegend">
<div class="object"></div>Bomb Node</li>
<li id="weightLegend">
<div class="borderlessWeight"></div>Weight Node</li>
<li>
<div class="unvisited"></div>Unvisited Node</li>
<li>
<div class="visited"></div><div
class="visitedobject"></div>Visited Nodes</li>
<li>
<div class="shortest-path"></div>Shortest-path Node</li>
<li>
<div class="wall"></div>Wall Node</li>
</ul>
</div>
<div id="algorithmDescriptor">Pick an algorithm and visualize it!</div>
<table id='board'/>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></
script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script
>
<script src='public/browser/bundle.js'></script>
</html>
 OUTPUT:

(first screen displayed)

(screen after skipping the tutorial)

(during visualization)

(shortest path found )

 CONCLUSION:

In this study, we introduced Pathfinder, a method for visualizing path analysis

in sizable multivariate graphs. Our query-based technique enables users to
search for paths utilizing different path-finding algorithms including Dijkstra, A*,
BFS, and DFS between a specified start and end. The analysis process is sped up
by the immediate display of intermediate results, which enables early query
improvement.
With consideration for topology, characteristics, and grouping structures, paths
can be evaluated and graded holistically. With blocks (or nodes) serving as the
fundamental building blocks, we used a two-dimensional graph to demonstrate
Pathfinder. The analysis of networks from other domains, such as social or
computer networks, can, nevertheless, benefit from our technique, and we are sure
in this.
All of the prerequisites are met by our method, with the exception of path
exploration and analysis. Analysts may have a better understanding of the variety
of paths if they group similar paths together and display their fundamental
structure.
This could be a different strategy for ranking the other paths when dealing
with lengthy lists of paths when combined with releasing
facts on demand. Additionally, a user-defined combination of features, such as
topology, attributes, and sets, may be used to drive aggregates. We think that this
will be a useful area of study in the future.
 FUTURE SCOPE:

With consideration for topology, characteristics, and grouping structures, paths

can be evaluated and graded holistically. With blocks (or nodes) serving as the
fundamental building blocks, we used a two-dimensional graph to demonstrate
Pathfinder. The analysis of networks from other domains, such as social or
computer networks, can, nevertheless, benefit from our technique, and we are sure
in this.
All of the prerequisites are met by our method, with the exception of path
exploration and analysis. Analysts may have a better understanding of the variety
of paths if they group similar paths together and display their fundamental
structure.
This could be a different strategy for ranking the other paths when dealing with
lengthy lists of paths when combined with releasing facts on demand. Additionally,
a user-defined combination of features, such as topology, attributes, and sets,
may be used to drive aggregates. We think that this will be a useful area of study in
the future.On top of that we would like to add some additional features as sound
effects . we want to improve our screen size and adjust everything properly as well
we would like to add some other algorithms to our research too.
 REFERENCES:

Websites Referred:
www.google.co.in

www.stackoverflow.com

www.codecademy.com

netwww.data-

flair.training

https://www.crio.do

YouTube Channel Referred:

 Code With Harry

 Codebasics
 CSS-Tricks
 Programming with mosh