Skip to content

Commit 2277b03

Browse files
PBJIPBJI
authored
Merge pull request #762 from ayan-joshi/Sorting-Visualizer-
Sorting Visualizer
2 parents 0e82858 + aff940a commit 2277b03

File tree

4 files changed

+207
-0
lines changed

4 files changed

+207
-0
lines changed

‎SortingVisualizer/ayan-joshi/Readme.md‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
# Sorting-Visualizer
2+
The Sorting Visualizer is a basic web application that allows you to visualize the process of sorting on a set of randomly generated bars.
3+
4+
You can have a look , how it's working !
5+
6+
https://ayan-joshi.github.io/Sorting-Visualizer/
7+
# Technologies Used
8+
9+
HTML
10+
11+
CSS
12+
13+
JavaScript
14+
15+
# How to Use
16+
Clone this repository to your local machine.
17+
18+
Open index.html in your web browser.
19+
20+
Click the "Randomize" button to generate a random set of bars.
21+
22+
Select a sorting algorithm from the dropdown menu and click the "Sort" button to visualize the sorting process.
23+
24+
# Screenshots
25+
26+
![Screenshot 2023-08-03 203608](https://github.com/ayan-joshi/Sorting-Visualizer/assets/96243602/7ca1ebc1-42e7-47d7-a43f-4110fb769cce)
27+
28+
![Screenshot 2023-08-03 203535](https://github.com/ayan-joshi/Sorting-Visualizer/assets/96243602/67209be1-5044-4cfa-beac-fb5ee129431d)

‎SortingVisualizer/ayan-joshi/index.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>Sorting Visualizer</title>
5+
<link rel="stylesheet" href="style.css"/>
6+
</head>
7+
<body>
8+
<h1>Sorting Visualizer</h1>
9+
<div id="container"></div>
10+
11+
<hr>
12+
13+
<div class="button-container">
14+
<button class="sort-btn" onclick="play()">Sort</button>
15+
<button class="randomize-btn" onclick="init()">Randomize</button>
16+
</div>
17+
<script src="script.js"></script>
18+
</body>
19+
</html>

‎SortingVisualizer/ayan-joshi/script.js‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
const n = 20
2+
const array=[];
3+
4+
init();
5+
6+
let audioCtx=null;
7+
8+
function playNote(freq){
9+
if(audioCtx==null){
10+
audioCtx=new(
11+
AudioContext ||
12+
webkitAudioContext ||
13+
window.webkitAudioContext
14+
)();
15+
}
16+
const dur = 0.1;
17+
const osc = audioCtx.createOscillator();
18+
osc.frequency.value=freq;
19+
osc.start();
20+
osc.stop(audioCtx.currentTime+dur);
21+
const node=audioCtx.createGain();
22+
node.gain.value=0.1;
23+
node.gain.linearRampToValueAtTime(
24+
0, audioCtx.currentTime+dur
25+
);
26+
osc.connect(node);
27+
node.connect(audioCtx.destination);
28+
}
29+
30+
31+
function init(){
32+
for(let i=0;i<n;i++){
33+
array[i] = Math.random();
34+
}
35+
showBars();
36+
}
37+
38+
function play(){
39+
const copy=[...array];
40+
const moves = bubbleSort(copy);
41+
animate(moves);
42+
}
43+
44+
function animate(moves){
45+
if(moves.length == 0){
46+
showBars();
47+
return;
48+
}
49+
const move = moves.shift();
50+
const [i,j] = move.indices;
51+
52+
if(move.type=="swap"){
53+
[array[i],array[j]] = [array[j],array[i]];
54+
}
55+
56+
playNote(250+array[i]*500);
57+
playNote(300+array[j]*500);
58+
59+
showBars(move);
60+
setTimeout(function(){
61+
animate(moves);
62+
},75);
63+
}
64+
65+
function bubbleSort(array){
66+
const moves=[]
67+
do{
68+
var swapped = false;
69+
for(let i=1;i<array.length;i++){
70+
// moves.push({indices:[i-1,i],type:"comp"});
71+
if(array[i-1] > array[i]){
72+
swapped = true;
73+
moves.push({indices:[i-1,i],type:"swap"});
74+
[array[i-1],array[i]] = [array[i],array[i-1]];
75+
}
76+
}
77+
}while(swapped);
78+
return moves;
79+
}
80+
81+
function showBars(move){
82+
container.innerHTML="";
83+
for(let i=0;i<array.length;i++){
84+
const bar = document.createElement("div");
85+
bar.style.height=array[i]*100+"%";
86+
bar.classList.add("bar");
87+
88+
if(move && move.indices.includes(i)){
89+
bar.style.backgroundColor=
90+
move.type=="swap"?"purple":"blue";
91+
}
92+
container.appendChild(bar);
93+
}
94+
}

‎SortingVisualizer/ayan-joshi/style.css‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
body {
2+
display: flex;
3+
align-items: center;
4+
justify-content: center;
5+
flex-direction: column;
6+
background: rgb(238, 174, 202);
7+
background: radial-gradient(circle, rgba(238, 174, 202, 1) 0%, rgba(148, 187, 233, 1) 100%);
8+
margin: 0;
9+
padding: 0;
10+
height: 100vh;
11+
font-family: Arial, sans-serif;
12+
}
13+
14+
h1 {
15+
font-size: 32px;
16+
margin-top: 20px;
17+
color: #fff;
18+
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
19+
}
20+
21+
#container {
22+
display: flex;
23+
justify-content: center;
24+
align-items: flex-end;
25+
height: 500px;
26+
width: 500px;
27+
background: rgb(238, 174, 202);
28+
background: radial-gradient(circle, rgba(238, 174, 202, 1) 0%, rgba(148, 187, 233, 1) 100%);
29+
padding: 10px;
30+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
31+
}
32+
33+
.bar {
34+
width: 10px;
35+
background-color: #03a9f4; /* Green color for bars */
36+
margin: 1px;
37+
transition: height 0.2s;
38+
}
39+
40+
.bar.voilet {
41+
background-color: #673ab7; /* Red color for comparison bars */
42+
}
43+
44+
.bar.blue {
45+
background-color: #2196f3; /* Blue color for swapped bars */
46+
}
47+
48+
/* Buttons */
49+
button {
50+
padding: 10px 20px;
51+
font-size: 16px;
52+
border: none;
53+
border-radius: 5px;
54+
cursor: pointer;
55+
color: #fff;
56+
margin: 10px;
57+
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
58+
}
59+
60+
button.sort-btn {
61+
background-color: #673ab7; /* Purple color for Sort button */
62+
}
63+
64+
button.randomize-btn {
65+
background-color: #03a9f4; /* Light blue color for Randomize button */
66+
}

0 commit comments

Comments
 (0)