MINOR PROJECT SYNOPSIS

SORTING AND PATH ALGORITHM

VISUALIZER

Submitted by:
Kunal (02955202719)
Gaurav Chamoli (04555202719)
Kartik Gupta (04955202719)

BACHELOR OF TECHNOLOGY
IN
COMPUTER SCIENCE AND ENGINEERING

At
BHAGWAN MAHAVEER COLLEGE OF ENGINEERING AND
MANAGEMENT
JAGDISHPUR, SONEPAT
AFFILIATED TO GGSIPU DWARKA, DELHI
 Declaration

We Kunal(02955202719), Gaurav Chamoli(04555202719) and

Kartik Gupta(04955202719), of Fourth Year B.Tech., in the
Department of Computer Science and Engineering from BMCEM
hereby declare that the work presented in this report entitled “Path
Finding and Sorting Algorithm Visualizer”, in fulfilment of the
requirement for the award of the degree Bachelor of Technology
in Computer Science Engineering submitted in CSE Department,
Bhagwan Mahavir College of Engineering and Management
affiliated to Guru Gobind Singh Indraprastha University, New
Delhi, during the academic year 2019-2023 is an authentic record
of our Work carried out during my degree under the guidance
of MS. SHRUTI MAM. The work reported in this has not been
submitted by me for the award of any other degree or diploma.

Kunal (02955202719)

Gaurav Chamoli (024555202719)

Kartik Gupta (024955202719)

 Acknowledgement

We would like to express our deep gratitude to our guide Ms.

SHRUTI for her valuable guidance, faculty of computer science
and engineering, BMCEM and timely suggestions during the
entire duration of our dissertation work, without which this work
would not have been possible. We would also like to convey our
deep regards to all other faculty members of BMCEM, who have
bestowed their great effort and guidance at appropriate times
without which it would have been very difficult on our part to
finish this work. Finally, we would also like to thank our friends
for their advice and pointing out our mistakes, parents, and
classmates for their encouragement throughout our project
period. And last but not least, we thank everyone for
supporting us directly or indirectly in completing this project
successfully.
 Abstract

This project is quite useful as it makes the learning process quite

easy and attractive which makes learning fun. Hence this project
has a good scope. The purpose of this project is to help the other
students as well as teachers to have a better understanding of how
different algorithm works and which algorithm takes more time
and which takes less time to complete the given task. While
learning some new skills, if you visualize its working and approach
then you will have a better understanding of that particular skill
and it will also have a long-lasting impact and stays in your one’s
mind for quite a long time.
 CONTENTS
Declaration
Acknowledgement
Abstract
Content
Chapters:-
Chapter 1: INTRODUCTION
1.1 Purpose
1.2 Objective
1.3 Project Scope
1.4 Technology to be Used

Chapter 2: LITERATURE SURVEY

2.1 Existing System
2.2 Proposed System
2.3 Feasibility study

Chapter 3: METHODOLOGY AND PLANNING OF PROJECT

3.1 Process Flow Chart
3.2 ER Diagram
3.3 Data Flow Diagram

Chapter 4: SYSTEM REQUIREMENTS

4.1 Installation
4.2 User Interface
Chapter 5: Experimental Analysis
5.1 Dijkstra’s Algorithm
5.2 A* Algorithm
5.3 Breadth First Algorithm
5.4 Depth First Algorithm
5.5 Merge Sort Algorithm
5.6 Quick Sort Algorithm
5.7 Bubble Sort Algorithm
5.8 Heap Sort Algorithm

Chapter 6: FUTURE ENHANCEMENT

Chapter 7: BIBLIOGRAPHY
 INTRODUCTION

 Purpose
o The purpose of this project is to help the other students as well as
teachers to have a better understanding of how different algorithm
works and which algorithm takes more time and which takes less time
to complete the given task. While learning some new skills, if you
visualize its working and approach then you will have a better
understanding of that particular skill and it will also have a long-
lasting impact and stays in your one’s mind for quite a long time.

 Objective
o The objective of this project is to improve my knowledge of different
algorithms, learn to implement them in real-world problems and
create a project where I can keep all algorithms in one place for easy
access.

 Project Scope
o This project is quite useful as it makes the learning process quite easy
and attractive which makes learning fun. Hence this project has a
good scope
 Technologies Used

o LANGUAGES
 JavaScript
 HTML
 CSS

o FRAMEWORK
 React JS

o OPERATING SYSTEM
 Windows 10

o IDE
 Visual Studio Code
 LITERATURE SURVEY

 Existing System
o There are existing systems which are similar to my project but some
do not have many algorithms in one place, others do not have a user-
friendly interface and most importantly most of them do not have
visually appealing graphics and layouts.

 Propose System
o In this project I added many paths to finding algorithms as well as
sorting algorithms in one place so that the user does not have to visit
the different websites to learn different algorithms as I will provide all
of them in one place with a user-friendly interface and visually
appealing graphics and layout.

 Feasibility Study
o As in this project, I am combining multiple algorithms in one place
and visualizing the working of the algorithm with quite a simple and
interactive interface. So, this is a unique and useful project, hence this
project is feasible.
 METHODOLOGY & PLANNING

 Process Flow Chart

 ER Diagram
Data Flow Diagram
 SYSTEM REQUIREMENTS

The application software is based on Visualizer. The application software is

developed in JavaScript. The system can be accessed over the System.

Installation
o The application installation scripts have to be generated from the current
server where the application source code is saved and installed in the main
server from where the application to be run. This was done using special
code, which generate all to insert preliminary data at server and the
operational modules of the application made available to the end users
successfully

User Interface
o User interface design creates an effective communication medium between a
human and a computer. Following asset of interface design principles,
design identifies objects and actions and then creates a screen layout that
forms the bases for a user interface prototype.
o Interface design of Path Finding and Sorting Algorithm Visualizer is based
on the following three principles
 Place the user in control
 Reduce the User memory load
 Make the interface consistent
Minimum Requirement

o Computer with a 2.27 GHz or faster processor (core i3)

o 3GB RAM or more

o 220 GB of available memory hard-disk space

o 5400 RPM hard drive

o 1024 x 768 or higher resolution display

o DVD-ROM Drive

o Windows 7 or above
 Experimental Analysis

Dijkstra’s Algorithm

o It is used to find the shortest path between nodes in a graph, it Maintain two
sets, one set contains vertices included in the shortest-path tree, other set
includes vertices not yet included in the shortest-path tree. At every step of
the algorithm, find a vertex that is in the other set (set not yet included)
and has a minimum distance from the source.
o It Create a set sptSet (shortest path tree set) that keeps track of vertices
included in the shortest-path tree, i.e., whose minimum distance from the
source is calculated and finalized. Initially, this set is empty.
o Assign a distance value to all vertices in the input graph. Initialize all
distance values as INFINITE. Assign the distance value as 0 for the source
vertex so that it is picked first.
o While sptSet doesn’t include all vertices
 Pick a vertex u which is not there in sptSet and has a minimum distance
value.
 Include u to sptSet.

o Then update distance value of all adjacent vertices of u.

 To update the distance values, iterate through all adjacent
vertices.
 For every adjacent vertex v, if the sum of the distance value of
u (from source) and weight of edge u-v, is less than the distance
value of v, then update the distance value of v.

Note: We use a boolean array sptSet[] to represent the set of vertices included in
SPT. If a value sptSet[v] is true, then vertex v is included in SPT, otherwise not.
Array dist[] is used to store the shortest distance values of all vertices
Code

#include <iostream>
using namespace std;
#include <limits.h>

// Number of vertices in the graph

#define V 9

// A utility function to find the vertex with minimum

// distance value, from the set of vertices not yet included
// in shortest path tree
int minDistance(int dist[], bool sptSet[])
{

// Initialize min value

int min = INT_MAX, min_index;

for (int v = 0; v < V; v++)

if (sptSet[v] == false && dist[v] <= min)
min = dist[v], min_index = v;

return min_index;
}

// A utility function to print the constructed distance

// array
void printSolution(int dist[])
{
cout << "Vertex \t Distance from Source" << endl;
for (int i = 0; i < V; i++)
cout << i << " \t\t\t\t" << dist[i] << endl;
}

// Function that implements Dijkstra's single source

// shortest path algorithm for a graph represented using
// adjacency matrix representation
void dijkstra(int graph[V][V], int src)
{
int dist[V]; // The output array. dist[i] will hold the
// shortest
// distance from src to i

bool sptSet[V]; // sptSet[i] will be true if vertex i is

// included in shortest
// path tree or shortest distance from src to i is
// finalized

// Initialize all distances as INFINITE and stpSet[] as

// false
for (int i = 0; i < V; i++)
dist[i] = INT_MAX, sptSet[i] = false;

// Distance of source vertex from itself is always 0

dist[src] = 0;

// Find shortest path for all vertices

for (int count = 0; count < V - 1; count++) {
// Pick the minimum distance vertex from the set of
// vertices not yet processed. u is always equal to
// src in the first iteration.
int u = minDistance(dist, sptSet);

// Mark the picked vertex as processed

sptSet[u] = true;

// Update dist value of the adjacent vertices of the

// picked vertex.
for (int v = 0; v < V; v++)

// Update dist[v] only if is not in sptSet,

// there is an edge from u to v, and total
// weight of path from src to v through u is
// smaller than current value of dist[v]
if (!sptSet[v] && graph[u][v]
&& dist[u] != INT_MAX
&& dist[u] + graph[u][v] < dist[v])
dist[v] = dist[u] + graph[u][v];
}
 // print the constructed distance array
printSolution(dist);
}

Before Execution:

Processing
Result
A* Algorithm

o A* Search algorithm is one of the best and popular technique used in path-
finding and graph traversals. Informally speaking, A* Search algorithms,
unlike other traversal techniques, it has “brains”. What it means is that it is
really a smart algorithm which separates it from the other conventional
algorithms. This fact is cleared in detail in below sections.
And it is also worth mentioning that many games and web-based maps use
this algorithm to find the shortest path very efficiently (approximation).
o Consider a square grid having many obstacles and we are given a starting
cell and a target cell. We want to reach the target cell (if possible) from the
starting cell as quickly as possible. Here A* Search Algorithm comes to the
rescue.
What A* Search Algorithm does is that at each step it picks the node
according to a value-‘f’ which is a parameter equal to the sum of two other
parameters – ‘g’ and ‘h’. At each step it picks the node/cell having the
lowest ‘f’, and process that node/cell.
We define ‘g’ and ‘h’ as simply as possible below
g = the movement cost to move from the starting point to a given square on
the grid, following the path generated to get there.
h = the estimated movement cost to move from that given square on the grid
to the final destination. This is often referred to as the heuristic, which is
nothing but a kind of smart guess. We really don’t know the actual distance
until we find the path, because all sorts of things can be in the way (walls,
water, etc.). There can be many ways to calculate this ‘h’ which are
discussed in the later sections.
 Code
 function astar(nodes, start, target, nodesToAnimate, boardArray, name,
heuristic) {
 if (!start || !target || start === target) {
 return false;
 }
 nodes[start].distance = 0;
 nodes[start].totalDistance = 0;
 nodes[start].direction = "up";
 let unvisitedNodes = Object.keys(nodes);
 while (unvisitedNodes.length) {
 let currentNode = closestNode(nodes, unvisitedNodes);
 while (currentNode.status === "wall" && unvisitedNodes.length) {
 currentNode = closestNode(nodes, unvisitedNodes)
 }
 if (currentNode.distance === Infinity) return false;
 nodesToAnimate.push(currentNode);
 currentNode.status = "visited";
 if (currentNode.id === target) {
 return "success!";
 }
 updateNeighbors(nodes, currentNode, boardArray, target, name, start,
heuristic);
 }
 }

 function closestNode(nodes, unvisitedNodes) {
 let currentClosest, index;
 for (let i = 0; i < unvisitedNodes.length; i++) {
 if (!currentClosest || currentClosest.totalDistance >
nodes[unvisitedNodes[i]].totalDistance) {
 currentClosest = nodes[unvisitedNodes[i]];
 index = i;
 } else if (currentClosest.totalDistance ===
nodes[unvisitedNodes[i]].totalDistance) {
 if (currentClosest.heuristicDistance >
nodes[unvisitedNodes[i]].heuristicDistance) {
 currentClosest = nodes[unvisitedNodes[i]];
 index = i;
 }
 }
 }
 unvisitedNodes.splice(index, 1);
 return currentClosest;
 }

 function updateNeighbors(nodes, node, boardArray, target, name, start,
heuristic) {
 let neighbors = getNeighbors(node.id, nodes, boardArray);
 for (let neighbor of neighbors) {
 if (target) {
 updateNode(node, nodes[neighbor], nodes[target], name, nodes,
nodes[start], heuristic, boardArray);
 } else {
 updateNode(node, nodes[neighbor]);
 }
 }
 }

 function updateNode(currentNode, targetNode, actualTargetNode, name, nodes,
actualStartNode, heuristic, boardArray) {
 let distance = getDistance(currentNode, targetNode);
 if (!targetNode.heuristicDistance) targetNode.heuristicDistance =
manhattanDistance(targetNode, actualTargetNode);
 let distanceToCompare = currentNode.distance + targetNode.weight +
distance[0];
 if (distanceToCompare < targetNode.distance) {
 targetNode.distance = distanceToCompare;
 targetNode.totalDistance = targetNode.distance +
targetNode.heuristicDistance;
 targetNode.previousNode = currentNode.id;
 targetNode.path = distance[1];
 targetNode.direction = distance[2];
 }
 }

 function getNeighbors(id, nodes, boardArray) {
 let coordinates = id.split("-");
 let x = parseInt(coordinates[0]);
 let y = parseInt(coordinates[1]);
 let neighbors = [];
 let potentialNeighbor;
 if (boardArray[x - 1] && boardArray[x - 1][y]) {
 potentialNeighbor = `${(x - 1).toString()}-${y.toString()}`
 if (nodes[potentialNeighbor].status !== "wall")
neighbors.push(potentialNeighbor);
 }
 if (boardArray[x + 1] && boardArray[x + 1][y]) {
 potentialNeighbor = `${(x + 1).toString()}-${y.toString()}`
 if (nodes[potentialNeighbor].status !== "wall")
neighbors.push(potentialNeighbor);
 }
 if (boardArray[x][y - 1]) {
 potentialNeighbor = `${x.toString()}-${(y - 1).toString()}`
 if (nodes[potentialNeighbor].status !== "wall")
neighbors.push(potentialNeighbor);
 }
 if (boardArray[x][y + 1]) {
 potentialNeighbor = `${x.toString()}-${(y + 1).toString()}`
 if (nodes[potentialNeighbor].status !== "wall")
neighbors.push(potentialNeighbor);
 }
 return neighbors;
 }

 function getDistance(nodeOne, nodeTwo) {
 let currentCoordinates = nodeOne.id.split("-");
 let targetCoordinates = nodeTwo.id.split("-");
 let x1 = parseInt(currentCoordinates[0]);
 let y1 = parseInt(currentCoordinates[1]);
 let x2 = parseInt(targetCoordinates[0]);
 let y2 = parseInt(targetCoordinates[1]);
 if (x2 < x1 && y1 === y2) {
 if (nodeOne.direction === "up") {
 return [1, ["f"], "up"];
 } else if (nodeOne.direction === "right") {
 return [2, ["l", "f"], "up"];
 } else if (nodeOne.direction === "left") {
 return [2, ["r", "f"], "up"];
 } else if (nodeOne.direction === "down") {
 return [3, ["r", "r", "f"], "up"];
 } else if (nodeOne.direction === "up-right") {
 return [1.5, null, "up"];
 } else if (nodeOne.direction === "down-right") {
 return [2.5, null, "up"];
 } else if (nodeOne.direction === "up-left") {
 return [1.5, null, "up"];
 } else if (nodeOne.direction === "down-left") {
 return [2.5, null, "up"];
 }
 } else if (x2 > x1 && y1 === y2) {
 if (nodeOne.direction === "up") {
 return [3, ["r", "r", "f"], "down"];
 } else if (nodeOne.direction === "right") {
 return [2, ["r", "f"], "down"];
 } else if (nodeOne.direction === "left") {
 return [2, ["l", "f"], "down"];
 } else if (nodeOne.direction === "down") {
 return [1, ["f"], "down"];
 } else if (nodeOne.direction === "up-right") {
 return [2.5, null, "down"];
 } else if (nodeOne.direction === "down-right") {
 return [1.5, null, "down"];
 } else if (nodeOne.direction === "up-left") {
 return [2.5, null, "down"];
 } else if (nodeOne.direction === "down-left") {
 return [1.5, null, "down"];
 }
 }
 if (y2 < y1 && x1 === x2) {
 if (nodeOne.direction === "up") {
 return [2, ["l", "f"], "left"];
 } else if (nodeOne.direction === "right") {
 return [3, ["l", "l", "f"], "left"];
 } else if (nodeOne.direction === "left") {
 return [1, ["f"], "left"];
 } else if (nodeOne.direction === "down") {
 return [2, ["r", "f"], "left"];
 } else if (nodeOne.direction === "up-right") {
 return [2.5, null, "left"];
 } else if (nodeOne.direction === "down-right") {
 return [2.5, null, "left"];
 } else if (nodeOne.direction === "up-left") {
 return [1.5, null, "left"];
 } else if (nodeOne.direction === "down-left") {
 return [1.5, null, "left"];
 }
 } else if (y2 > y1 && x1 === x2) {
 if (nodeOne.direction === "up") {
 return [2, ["r", "f"], "right"];
 } else if (nodeOne.direction === "right") {
 return [1, ["f"], "right"];
 } else if (nodeOne.direction === "left") {
 return [3, ["r", "r", "f"], "right"];
 } else if (nodeOne.direction === "down") {
 return [2, ["l", "f"], "right"];
 } else if (nodeOne.direction === "up-right") {
 return [1.5, null, "right"];
 } else if (nodeOne.direction === "down-right") {
 return [1.5, null, "right"];
 } else if (nodeOne.direction === "up-left") {
 return [2.5, null, "right"];
 } else if (nodeOne.direction === "down-left") {
 return [2.5, null, "right"];
 }
 }
 function manhattanDistance(nodeOne, nodeTwo) {
 let nodeOneCoordinates = nodeOne.id.split("-").map(ele => parseInt(ele));
 let nodeTwoCoordinates = nodeTwo.id.split("-").map(ele => parseInt(ele));
 let xOne = nodeOneCoordinates[0];
 let xTwo = nodeTwoCoordinates[0];
 let yOne = nodeOneCoordinates[1];
 let yTwo = nodeTwoCoordinates[1];

 let xChange = Math.abs(xOne - xTwo);
 let yChange = Math.abs(yOne - yTwo);

 return (xChange + yChange);
 }


 module.exports = astar;

Before Execution
Processing

Result
Breadth First Search

o The breadth-first search (BFS) algorithm is used to search a tree or graph

data structure for a node that meets a set of criteria. It starts at the tree’s root
or graph and searches/visits all nodes at the current depth level before
moving on to the nodes at the next depth level. Breadth-first search can be
used to solve many problems in graph theory.
o Breadth-First Traversal (or Search) for a graph is similar to the Breadth-First
Traversal of a tree (See method 2 of this post).
o The only catch here is, that, unlike trees, graphs may contain cycles, so we
may come to the same node again. To avoid processing a node more than
once, we divide the vertices into two categories
 Visited and
 Not visited.
o A boolean visited array is used to mark the visited vertices. For simplicity, it
is assumed that all vertices are reachable from the starting vertex. BFS uses
a queue data structure for traversal.
Code
#include <bits/stdc++.h>
using namespace std;

// This class represents a directed graph using

// adjacency list representation
class Graph {
int V; // No. of vertices

// Pointer to an array containing adjacency

// lists
vector<list<int> > adj;

public:
Graph(int V); // Constructor

// function to add an edge to graph

void addEdge(int v, int w);

// prints BFS traversal from a given source s

void BFS(int s);
};

Graph::Graph(int V)
{
this->V = V;
adj.resize(V);
}

void Graph::addEdge(int v, int w)

{
adj[v].push_back(w); // Add w to v’s list.
}

void Graph::BFS(int s)
{
// Mark all the vertices as not visited
vector<bool> visited;
visited.resize(V, false);
 // Create a queue for BFS
list<int> queue;

// Mark the current node as visited and enqueue it

visited[s] = true;
queue.push_back(s);

while (!queue.empty()) {
// Dequeue a vertex from queue and print it
s = queue.front();
cout << s << " ";
queue.pop_front();

for (auto adjecent : adj[s]) {

if (!visited[adjecent]) {
visited[adjecent] = true;
queue.push_back(adjecent);
}
}
}
}

Before Execution
Processing

Result
Depth First Search

o Depth-first search is an algorithm for traversing or searching tree or graph

data structures. The algorithm starts at the root node (selecting some
arbitrary node as the root node in the case of a graph) and explores as far as
possible along each branch before backtracking.
o So the basic idea is to start from the root or any arbitrary node and mark the
node and move to the adjacent unmarked node and continue this loop until
there is no unmarked adjacent node. Then backtrack and check for other
unmarked nodes and traverse them. Finally, print the nodes in the path.
 Create a recursive function that takes the index of the node and a visited
array.
 Mark the current node as visited and print the node.
 Traverse all the adjacent and unmarked nodes and call the recursive
function with the index of the adjacent node.
Code

#include <bits/stdc++.h>
using namespace std;

// Graph class represents a directed graph

// using adjacency list representation
class Graph {
public:
map<int, bool> visited;
map<int, list<int> > adj;

// function to add an edge to graph

void addEdge(int v, int w);

// DFS traversal of the vertices

// reachable from v
void DFS(int v);
};

void Graph::addEdge(int v, int w)

{
adj[v].push_back(w); // Add w to v’s list.
}

void Graph::DFS(int v)
{
// Mark the current node as visited and
// print it
visited[v] = true;
cout << v << " ";

// Recur for all the vertices adjacent

// to this vertex
list<int>::iterator i;
for (i = adj[v].begin(); i != adj[v].end(); ++i)
if (!visited[*i])
DFS(*i);
}
Before Execution

Processing
Result
Merge Sort

o The Merge Sort algorithm is a sorting algorithm that is based on the Divide
and Conquer paradigm. In this algorithm, the array is initially divided into
two equal halves and then they are combined in a sorted manner.

o Think of it as a recursive algorithm continuously splits the array in half until

it cannot be further divided. This means that if the array becomes empty or
has only one element left, the dividing will stop, i.e. it is the base case to
stop the recursion. If the array has multiple elements, split the array into
halves and recursively invoke the merge sort on each of the halves. Finally,
when both halves are sorted, the merge operation is applied. Merge
operation is the process of taking two smaller sorted arrays and combining
them to eventually make a larger one.
Code

void merge(int input[], int left, int right){

int mid = (left + right)/2;
int n1 = mid-left+1;
int n2 = right - mid;
int leftarr[n1];
int rightarr[n2];
for(int i = 0; i<n1; i++){
leftarr[i] = input[left+i];
}
for(int j = 0; j<n2; j++){
rightarr[j] = input[mid+1+j];
}
int i =0, j=0, k=left;
while(i<n1 && j<n2){
if(leftarr[i]<=rightarr[j]){
input[k] = leftarr[i];
i++;
}
else{
input[k] = rightarr[j];
j++;
}
k++;
}
while(i<n1){
input[k] = leftarr[i];
i++;
k++;
}
while(j<n2){
input[k] = rightarr[j];
j++;
k++;
}
}
void mergeSort2(int input[], int left, int right){
if(left<right){
int mid = (left + right)/2;
mergeSort2(input, left, mid);
mergeSort2(input, mid + 1, right);
merge(input, left, right);
 }
 }

 void mergeSort(int input[], int size){
 // Write your code here
 mergeSort2(input, 0, size-1);
 }

Before Execution
Processing

Result
Quick Sort

o Like Merge Sort, QuickSort is a Divide and Conquer algorithm. It picks an

element as a pivot and partitions the given array around the picked pivot.
There are many different versions of quickSort that pick pivot in different
ways.
 Always pick the first element as a pivot.
 Always pick the last element as a pivot (implemented below)
 Pick a random element as a pivot.
 Pick median as the pivot.
o The key process in quickSort is a partition(). The target of partitions is,
given an array and an element x of an array as the pivot, put x at its correct
position in a sorted array and put all smaller elements (smaller than x) before
x, and put all greater elements (greater than x) after x. All this should be
done in linear time.
Code
int partition(int input[], int start, int end){
int pivot = input[end];
int i = (start-1);
for(int j = start; j<= end; j++){
if(input[j]<pivot){
i++;
int temp = input[i];
input[i]=input[j];
input[j] = temp;
}
}
int temp = input[i+1];
input[i+1] = input[end];
input[end] = temp;
return (i+1);
}
void QS(int input[], int start, int end){
if(start>=end){
return;
}
int c = partition(input, start, end);
QS(input, start, c-1);
QS(input, c+1, end);
}

void quickSort(int input[], int size) {

QS(input, 0, size-1);
}
Before Execution

Procession
Result
 Bubble Sort

o Bubble Sort is the simplest sorting algorithm that works by repeatedly

swapping the adjacent elements if they are in the wrong order. This
algorithm is not suitable for large data sets as its average and worst-case
time complexity is quite high.

Code
using namespace std;

// A function to implement bubble sort

void bubbleSort(int arr[], int n)
{
int i, j;
for (i = 0; i < n - 1; i++)

// Last i elements are already

// in place
for (j = 0; j < n - i - 1; j++)
if (arr[j] > arr[j + 1])
swap(arr[j], arr[j + 1]);
}

// Function to print an array

void printArray(int arr[], int size)
{
int i;
for (i = 0; i < size; i++)
cout << arr[i] << " ";
cout << endl;
}
Before Execution

Processing
Result
Heap Sort
o Heap sort is a comparison-based sorting technique based on Binary Heap
data structure. It is similar to the selection sort where we first find the
minimum element and place the minimum element at the beginning. Repeat
the same process for the remaining elements.
 Heap sort is an in-place algorithm.
 Its typical implementation is not stable, but can be made stable (See this)
 Typically 2-3 times slower than well-implemented QuickSort. The
reason for slowness is a lack of locality of reference.

Code
#include <iostream>
using namespace std;

// To heapify a subtree rooted with node i

// which is an index in arr[].
// n is size of heap
void heapify(int arr[], int N, int i)
{

// Initialize largest as root

int largest = i;

// left = 2*i + 1
int l = 2 * i + 1;

// right = 2*i + 2
int r = 2 * i + 2;

// If left child is larger than root

if (l < N && arr[l] > arr[largest])
largest = l;

// If right child is larger than largest

// so far
if (r < N && arr[r] > arr[largest])
largest = r;
 // If largest is not root
if (largest != i) {
swap(arr[i], arr[largest]);

// Recursively heapify the affected

// sub-tree
heapify(arr, N, largest);
}
}

// Main function to do heap sort

void heapSort(int arr[], int N)
{

// Build heap (rearrange array)

for (int i = N / 2 - 1; i >= 0; i--)
heapify(arr, N, i);

// One by one extract an element

// from heap
for (int i = N - 1; i > 0; i--) {

// Move current root to end

swap(arr[0], arr[i]);

// call max heapify on the reduced heap

heapify(arr, i, 0);
}
}

// A utility function to print array of size n

void printArray(int arr[], int N)
{
for (int i = 0; i < N; ++i)
cout << arr[i] << " ";
cout << "\n";
}
Before Execution

Processing
Result
FUTURE ENHANCEMENT

 Future Enhancement

o For future enhancement I have a few thoughts in mind such as,

 I will introduce some more algorithms to this project

 I will also improve the interface and will make it more interactive.

 A short term use case would definitely be, explaining what happens in a
video, frame by frame.

 I will also try to make this project dynamic where we can take inputs
from users and outputs its visualization for a better understanding of the
user
 BIBLIOGRAPHY

 Bibliography
o React Documentation: https://reactjs.org/docs/getting-started.html
o JavaScript Documentation MDN: https://developer.mozilla.org/en-
US/docs/Web/JavaScript
o CSS Documentation MDN: https://developer.mozilla.org/en-
US/docs/Web/CSS
o Clement Mihailescu: https://www.youtube.com/watch?v=n4t_-
NjY_Sg&list=PLuKxoRxTXB7i6iBOBIAlS97peMPrViIL5&index=8&t=92
8s
o Path Finding Algorithms:
 Dijkstra’s Algorithm: https://www.geeksforgeeks.org/dijkstras-shortest-
path-algorithm-greedy-algo-7/
 A* Algorithm: https://neo4j.com/docs/graph-data-
science/current/algorithms/astar/
 DFS: https://www.hackerearth.com/practice/algorithms/graphs/depth-
first-search/tutorial/
 BFS: https://www.freecodecamp.org/news/exploring-the-applications-
and-limits-of-breadth-first-search-to-the-shortest-paths-in-a-weighted-
1e7b28b3307/
 All Algorithms: https://medium.com/omarelgabrys-blog/path-finding-
algorithms-f65a8902eb40
o Sorting Algorithms:
 Merge Sort: https://www.geeksforgeeks.org/merge-sort/
 Bubble Sort: https://www.geeksforgeeks.org/bubble-sort/
 Quick Sort: https://www.geeksforgeeks.org/quick-sort/
 Heap Sort: https://www.geeksforgeeks.org/heap-sort/