Mini Project

(Subject Code: KCS-554)

Project on:

Sor ng Visualizer
A Project Report Submitted
In Partial Fullfilment of the
Requirements for the Degree of

BACHELOR OF TECHNOLOGY
In

COMPUTER SCIENCE AND ENGINEERING

Under the guidance of:

Er. Sharad Yadav

(Honorable Faculty Member) BIET
Jhansi-UP
Submitted By:
Himanshu Saini (2100430100022)
Chandan Verma (2100430100015)
Kriyanshu (2100430100030)
Pratham Kakkar (2100430100037)

Report Submitted to:

Department of Computer Science and Engineering

BUNDELKHAND INSTITUTE OF ENGINEERING &
TECHNOLOGY
JHANSI

1
 Acknowledgement
It is our whole hearted pleasure to be indebted to various people, who
directly or indirectly contributed to the development of this work and who
influenced our thinking, behavior and acts during study.

First and foremost, we are very much thankful to Almighty God for making
us capable and confident. We are also very thankful to our parents for
supporting and motivating us at every stage of our life.

We are thankful to our honorable faculty member of the subject “Mini

Project”, Er. Sharad Yadav, for his support, cooperation, and motivation
provided to us during the making of this project.

Himanshu Saini (2100430100022)

Chandan Verma (2100430100015)
Kriyanshu (2100430100030)
Pratham Kakkar (2100430100037)

2
 INDEX

1. Introduction………………………………………………………………3
2. Visualization using Sorting techniques……………………………… …5
3. Code………………………………………………………………………7
4. Terminal Output…………………………………………………………11
5. Conclusion ………………………………………………………………13
6. References ………………………………………………………………14

3
 INTRODUCTION

A Sorting Algorithm is used to rearrange a given array or list of elements

according to a comparison operator on the elements. The comparison operator is
used to decide the new order of elements in the respective data structure.

For Example: The below list of characters is sorted in increasing order of their
ASCII values. That is, the character with a lesser ASCII value will be placed first
than the character with a higher ASCII value.

Why Sorting Algorithms are Important Since they can often reduce the
complexity of a problem, sorting algorithms are very important in computer
science. These algorithms have direct applications in searching algorithms,
database algorithms, divide and conquer methods, data structure algorithms, and
many more.

-: The Sorting Visualization :-

4
 Visualization using Sorting techniques

All the sorting technique using sorting visualizer can be display very well in the
Sorting format, There are various sorting algorithms that can be used to complete
this operation. And, we can use any algorithm based on the requirement.

5
1- Size

At first we decided to choose the desired size of the array that we want sort
using different - different sorting algorithm.

2- Speed
Now after selecting size of the array we will going select speed of running
sorting algorithm on our sorting visualizer ,or we can say performing sorting
on desired size of the array.

6
 3- Choose Desired Sorting Technique
Now after selecting size of array and speed of performing sorting technique
on array , we will going to choose our desired sorting technique that are
mention in our sorting visualizer.

4- Tap on any of Sorting Technique

It will start performing sorting technique that we will choosing and also
produce sound during sorting operation that sound clearly tells you about the
Which sorting technique is faster and doing sorting faster than others. Finally it
will looks like :

7
5- Generate New Array :

In case you want to generate New array with different pattern ,you can
choose generate new array option and it will show you different – different
pattern of array’s on Sorting Visualizer.

8
// 1
// SELECTION SORT

// SelectionSort() : Implementation of selection sort algorithm. O(n^2)

async function SelectionSort() {
let delay = Disable_The_Input();

let container = document.getElementById("container");

for (let i = 0; i < bars.length; i++) {
let mn_ind = i;
let curr_id = bars[i].split('id="')[1].split('"')[0];
document.getElementById(curr_id).style.backgroundColor = selected;
let sound =
MapRange(document.getElementById(curr_id).style.height.split('%')[0], 2, 100,
500, 1000);
beep(100, sound, delay)
for (let j = i + 1; j < bars.length; j++) {
let nxt_ele = bars[j].split('id="')[1].split('"')[0];
document.getElementById(nxt_ele).style.backgroundColor = chng;
let a = parseInt(bars[mn_ind].split(/[:%]/)[1]);
let b = parseInt(bars[j].split(/[:%]/)[1]);
if (a > b) mn_ind = j;
await Sleep(delay / 5.0);
document.getElementById(nxt_ele).style.backgroundColor = def;
}

let nxt_ele = bars[mn_ind].split('id="')[1].split('"')[0];

document.getElementById(nxt_ele).style.backgroundColor = selected;
await Sleep(2 * delay / 5.0);

let tmp = bars[mn_ind];

bars[mn_ind] = bars[i];
bars[i] = tmp;

container.innerHTML = bars.join('');
await Sleep(2 * delay / 5.0);
document.getElementById(curr_id).style.backgroundColor = def;
document.getElementById(nxt_ele).style.backgroundColor = def;
}
Finished_Sorting();
}

// 2
// BUBBLE SORT

// BubbleSort() : Implementation of bubble sort algorithm. O(n^2)

async function BubbleSort() {
let delay = Disable_The_Input();
let container = document.getElementById("container");
 for (let i = 0; i < bars.length - 1; i++) {
let has_swap = false;
for (let j = 0; j < bars.length - i - 1; j++) {
let curr_id = bars[j].split('id="')[1].split('"')[0];
let nxt_ele = bars[j + 1].split('id="')[1].split('"')[0];

document.getElementById(curr_id).style.backgroundColor = selected;
let sound =
MapRange(document.getElementById(curr_id).style.height.split('%')[0], 2, 100,
500, 1000);
beep(100, sound, delay)
document.getElementById(nxt_ele).style.backgroundColor = chng;
await Sleep(delay / 2);
let a = parseInt(bars[j].split(/[:%]/)[1]);
let b = parseInt(bars[j + 1].split(/[:%]/)[1]);
if (a > b) {
has_swap = true;

let t = bars[j];
bars[j] = bars[j + 1];
bars[j + 1] = t;

container.innerHTML = bars.join('');
}
document.getElementById(curr_id).style.backgroundColor = selected;
document.getElementById(nxt_ele).style.backgroundColor = chng;
await Sleep(delay / 2.0);
document.getElementById(curr_id).style.backgroundColor = def;
document.getElementById(nxt_ele).style.backgroundColor = def;
}
if (has_swap == false) break;
}
Finished_Sorting();
}

// 3
// INSERTION SORT

// InsertionSort() : Implementation of inserion sort algorithm. O(n^2)

async function InsertionSort() {
let delay = Disable_The_Input();
let container = document.getElementById("container");
for (let i = 1; i < bars.length; i++) {
let j = i - 1;
let key = bars[i];
let curr_id = key.split('id="')[1].split('"')[0];
let nxt_ele = bars[j].split('id="')[1].split('"')[0];
document.getElementById(curr_id).style.backgroundColor = selected;
 let sound =
MapRange(document.getElementById(curr_id).style.height.split('%')[0], 2, 100,
500, 1000);
beep(100, sound, delay)
while (j >= 0 && parseInt(bars[j].split(/[:%]/)[1]) >
parseInt(key.split(/[:%]/)[1])) {
document.getElementById(nxt_ele).style.backgroundColor = def;
nxt_ele = bars[j].split('id="')[1].split('"')[0];
document.getElementById(nxt_ele).style.backgroundColor = chng;
await Sleep(delay);
bars[j + 1] = bars[j];
j--;
}

bars[j + 1] = key;
container.innerHTML = bars.join('');
document.getElementById(curr_id).style.backgroundColor = selected;
document.getElementById(nxt_ele).style.backgroundColor = chng;
await Sleep(delay * 3.0 / 5);
document.getElementById(curr_id).style.backgroundColor = def;
document.getElementById(nxt_ele).style.backgroundColor = def;
}
Finished_Sorting();
}

// 4
// MERGE SORT
// Slide_down() : Places bars[r] at lth position by sliding other bars to the
right.
function Slide_down(l, r) {
let temp = bars[r];
for (let i = r - 1; i >= l; i--) {
bars[i + 1] = bars[i];
}
bars[l] = temp;
}

async function merge(l, m, r, d) {

let y = l;
let i = l;
let j = m + 1;

while (i < j && j <= r) {

let curr_id = bars[j].split('id="')[1].split('"')[0];
let nxt_ele = bars[i].split('id="')[1].split('"')[0];
document.getElementById(curr_id).style.backgroundColor = selected;
document.getElementById(nxt_ele).style.backgroundColor = chng;
let a = parseInt(bars[j].split(/[:%]/)[1]);
 let b = parseInt(bars[i].split(/[:%]/)[1]);

if (a > b) i++;
else {
Slide_down(i, j);
i++; j++;
}
await Sleep(d / 2.0);
container.innerHTML = bars.join('');
document.getElementById(curr_id).style.backgroundColor = selected;
document.getElementById(nxt_ele).style.backgroundColor = chng;
let sound =
MapRange(document.getElementById(curr_id).style.height.split('%')[0], 2, 100,
500, 1000);
beep(100, sound, d)
await Sleep(d / 2.0);
document.getElementById(curr_id).style.backgroundColor = def;
document.getElementById(nxt_ele).style.backgroundColor = def;
sound =
MapRange(document.getElementById(curr_id).style.height.split('%')[0], 2, 100,
500, 1000);
beep(100, sound, d)
}
}

async function mergeSort(l, r, d) {

if (l < r) {
let m = parseInt(l + (r - l) / 2);
await mergeSort(l, m, d);
await mergeSort(m + 1, r, d);
await merge(l, m, r, d);
}
}

async function MergeSort() {

let delay = Disable_The_Input();
await mergeSort(0, bars.length - 1, delay);
Finished_Sorting();
}

// 5
// QUICK SORT
// Partition(): Places the (r)th bar at the correct position
async function Partition(l, r, d) {
let i = l - 1;
let j = l;
 let id = bars[r].split('id="')[1].split('"')[0];
document.getElementById(id).style.backgroundColor = selected;
for (j = l; j < r; j++) {
let a = parseInt(bars[j].split(/[:%]/)[1]);
let b = parseInt(bars[r].split(/[:%]/)[1]);
if (a < b) {
i++;
let curr_id = bars[i].split('id="')[1].split('"')[0];
let nxt_ele = bars[j].split('id="')[1].split('"')[0];
document.getElementById(curr_id).style.backgroundColor = chng;
document.getElementById(nxt_ele).style.backgroundColor = chng;

let temp = bars[i];

bars[i] = bars[j];
bars[j] = temp;

await Sleep(d / 3.0);

container.innerHTML = bars.join('');
document.getElementById(curr_id).style.backgroundColor = chng;
document.getElementById(nxt_ele).style.backgroundColor = chng;
document.getElementById(id).style.backgroundColor = selected;
let sound =
MapRange(document.getElementById(curr_id).style.height.split('%')[0], 2, 100,
500, 1000);
beep(100, sound, d)
await Sleep(d / 3.0)
document.getElementById(curr_id).style.backgroundColor = def;
document.getElementById(nxt_ele).style.backgroundColor = def;
}
}

let temp = bars[i + 1];

bars[i + 1] = bars[r];
bars[r] = temp;

container.innerHTML = bars.join(' ');

document.getElementById(id).style.backgroundColor = selected;
await Sleep(d / 3.0);
document.getElementById(id).style.backgroundColor = def;
return i + 1;
}

async function quickSort(l, r, d) {

if (l < r) {
let p = await Partition(l, r, d);
await quickSort(l, p - 1, d);
await quickSort(p + 1, r, d);
}
}
async function QuickSort() {
let delay = Disable_The_Input();
await quickSort(0, bars.length - 1, delay);
Finished_Sorting();
}

// 6
// HEAP SORT
// Heapfiy(): Creates a max heap.
async function Heapfiy(n, i, d) {
let largest = i;
let l = 2 * i + 1; // lft
let r = 2 * i + 2; // rgt
let curr_id = bars[i].split('id="')[1].split('"')[0];
let nxt_ele;
let id3;

document.getElementById(curr_id).style.backgroundColor = selected;
if (r < n) {
id3 = bars[r].split('id="')[1].split('"')[0];
document.getElementById(id3).style.backgroundColor = chng;
}
if (l < n) {
nxt_ele = bars[l].split('id="')[1].split('"')[0];
document.getElementById(nxt_ele).style.backgroundColor = chng;
}
await Sleep(d / 3.0)
if (l < n && parseInt(bars[l].split(/[:%]/)[1]) >
parseInt(bars[largest].split(/[:%]/)[1]))
largest = l;
if (r < n && parseInt(bars[r].split(/[:%]/)[1]) >
parseInt(bars[largest].split(/[:%]/)[1]))
largest = r;

if (largest != i) {
let t = bars[i]; bars[i] = bars[largest]; bars[largest] = t;
container.innerHTML = bars.join(' ');
document.getElementById(curr_id).style.backgroundColor = selected;
let sound =
MapRange(document.getElementById(curr_id).style.height.split('%')[0], 2, 100,
500, 1000);
beep(100, sound, d)
if (r < n) document.getElementById(id3).style.backgroundColor = chng;
if (l < n) document.getElementById(nxt_ele).style.backgroundColor =
chng;
await Sleep(d / 3.0)
 container.innerHTML = bars.join(' ');
await Heapfiy(n, largest, d);
}
container.innerHTML = bars.join(' ');
}

async function HeapSort() {

let delay = Disable_The_Input();
let n = bars.length;
for (let i = n / 2 - 1; i >= 0; i--) // Build the heap
await Heapfiy(n, i, delay);

for (let i = n - 1; i >= 0; i--) {

let t = bars[0]; // Swaping
bars[0] = bars[i];
bars[i] = t;

container.innerHTML = bars.join(' ');

await Heapfiy(i, 0, delay);
}
Finished_Sorting();
}

BEEP.JS
a = new AudioContext() // browsers limit the number of concurrent audio
contexts, so you better re-use'em

function beep(vol, freq, duration) {

console.log({ vol, freq, duration })
v = a.createOscillator()
u = a.createGain()
v.connect(u)
v.frequency.value = freq
v.type = "square"
u.connect(a.destination)
u.gain.value = vol * 0.01
v.start(a.currentTime)
v.stop(a.currentTime + duration * 0.001)
}

Index.HTML
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Sorting Visualization</title>
 <link rel="stylesheet" type="text/css" href="style/index.css">
</head>

<body>
<div class="header">
<h1>HamDola Visualizer</h1>
<div class="vars">
<div class="range">
<div class="slide"><label for="bars">ِ
Array Size</label> : <input
id="bars" type="range" name="bars"
min="1" max="100" value="50" oninput="setup()"
onchange="setup()">
<span id="b"> </span></div>
<div class="slide"><label for="delay">Speed</label> : <input
id="delay" type="range" name="delay"
min="0" max="1000" value="25" oninput="setup()"
onchange="setup()">
<span id="d"></span></div>
</div>
<div class="sorts">
<input type="button" onclick="SelectionSort()" value="Selection
Sort">
<input type="button" onclick="BubbleSort()" value="Bubble Sort">
<input type="button" onclick="InsertionSort()" value="Insertion
Sort">
<input type="button" onclick="MergeSort()" value="Merge Sort">
<input type="button" onclick="QuickSort()" value="Quick Sort">
<input type="button" onclick="HeapSort()" value="Heap
Sort"><br><br>
</div>
<button onclick="reset()">Generate New Array</button>
</div>
</div>
<div id="container">
</div>
<script src="App/beep.js"></script>
<script src="App/script.js"></script>
</body>

</html>

Index.CSS
*{
margin: 0;
}
@font-face {
font-family: "Pacifico";
src: url("Fonts/Pacifico-Regular.woff2") format('woff2');
}
#container{
display: flex;
margin: 0 auto;
width: intrinsic;
width: -moz-max-content;
width: -webkit-max-content;
height: 60%;
}

#b{
display: inline-block;
margin-left: 1vw;
width: 1vw;
}

#d{
display: inline-block;
margin-left: 1vw;
width: 1vw;
}
#bars, #delay{
vertical-align: middle;
}

.header{
display: flex;
flex-wrap: wrap;
font-weight: bold;
background-color: #fd0081;
margin: 0;
color: white;
padding: 1vw 1vw 2vw 1vw;
margin-bottom: 2vw;
}
h1{
font-size: 3vw;
font-family: Pacifico, cursive;
font-weight: lighter;
width: 25%
text-align: center;
}
.range{
justify-content: space-evenly;
display: flex;
flex-wrap: wrap;
flex-flow: wrap;
}
.slide{
margin: 0vw 1vw;
}
.bar{
border: 0.05vw solid black;
width:0.6vw;
margin:0.1vw;
background-color: #fd0081;
}
.sorts{
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.vars{
width: 60%;
align-self: flex-start;
text-align: center;
font-size: 1.3vw;
font-family: sans-serif;
}
input[type="button"] {
margin: 1.5vw 0.5vw;
}
input[type="button"]:hover, button:hover{
background-color: #f8a7a7;
cursor: pointer;
color: #1200a4;
}
input[type="button"]:disabled, input[type="range"]:disabled{
background-color: #ffffff;
cursor: not-allowed;
color: blue;
}
input[type="button"], button{
background: white;
border: none;
padding: 1.3vh;
border-radius: 9vw;
min-width: 8vw;
color: rgb(6, 6, 223);
font-size: 1.2vw;
}
 Terminal Output

Generating new array:

Searching Data :

21
Final Result :

22
 Conclusion

This paper discusses comparison based sorting algorithms. It analyses the

performance of these algorithms for the same number of elements. It then concludes
that selection sort shows better performance than Quick sort but being the simple
structure selection sort is more preferred and widely used. It is clear that both sorting
techniques are not that popular for the large arrays because as the arrays size
increases both timing is slower for integer and string, but generally the study
indicate that integer array have faster CPU time than string arrays. Both have the
upper bound running time O (n2). Bubble Sort is a very simple algorithm that is
only suitable for small lists. There are lots of alternative sorting algorithms that are
more performant than Bubble Sort. Bubble Sort is widely considered to be the least
performant of all the established sorting algorithms.

23
 References

➢ https://www.geeksforgeeks.org
➢ Select-sort with Gypsy folk dance YouTube video, created at Sapientia
University, Tirgu Mures (Marosvásárhely), Romania
➢ https://tutorialspoint.dev/data-structure/advanced-data-
structures/sortingtechnique
➢ https://www.javatpoint.com/sorting-data-structure
➢ https://www.scaler.com/topics/data-structures/sorting-data-structure

24