Skip to content

Commit 0e82858

Browse files
PBJIPBJI
authored
Merge pull request #754 from AbhineshJha/sortingvisualizer
Sorting Visualizer
2 parents e02189a + 1be6123 commit 0e82858

File tree

4 files changed

+207
-0
lines changed

4 files changed

+207
-0
lines changed

‎SortingVisualizer/Abhineshjha/README.md‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
# Sorting Visualizer Project Readme
2+
3+
## Overview
4+
5+
This Sorting Visualizer project is a JavaScript-based web application that allows users to visualize various sorting algorithms in action. Sorting algorithms are fundamental in computer science and understanding how they work can be both educational and fun. This project provides a visual representation of sorting algorithms, helping users grasp their inner workings through interactive animations.
6+
7+
![Sorting Visualizer Demo](demo.gif)
8+
9+
## Table of Contents
10+
11+
- [Features](#features)
12+
- [Demo](#demo)
13+
- [Getting Started](#getting-started)
14+
- [Usage](#usage)
15+
- [Available Sorting Algorithms](#available-sorting-algorithms)
16+
- [Contributing](#contributing)
17+
- [License](#license)
18+
19+
## Features
20+
21+
- Visualize sorting algorithms such as Bubble Sort, Merge Sort, Quick Sort, and more.
22+
- Adjustable array size to demonstrate sorting with different data sets.
23+
- Customizable sorting speed for better visualization.
24+
- Clear visualization of the sorting process with color-coded bars.
25+
- Step-by-step animation of the sorting algorithms.
26+
- Easy-to-use interface for users to interact with the visualization.
27+
28+
## Demo
29+
30+
Check out the live demo of the Sorting Visualizer: [Sorting Visualizer Demo](https://example.com)
31+
32+
## Getting Started
33+
34+
To get started with this Sorting Visualizer project on your local machine, follow these steps:
35+
36+
1. Clone the repository:
37+
38+
```bash
39+
git clone https://github.com/your-username/sorting-visualizer.git

‎SortingVisualizer/Abhineshjha/index.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<link rel="stylesheet" href="./style.css" />
9+
<title>Sorting Visualizer</title>
10+
</head>
11+
12+
<body>
13+
<div class="main_container">
14+
<button class="title_btn">🌟 Sorting Visualizer 🌟</button>
15+
<div id="container"></div>
16+
<div>
17+
<button class="btn" onClick="init()">Generate Array ✨</button>
18+
<button class="btn" onClick="play()">Sort 🔥</button>
19+
</div>
20+
</div>
21+
<script src="./script.js"></script>
22+
</body>
23+
24+
</html>

‎SortingVisualizer/Abhineshjha/script.js‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
const n = 9; //number of bars to sort
2+
const array = [];
3+
init();
4+
5+
//generate random numbers
6+
function init() {
7+
for (let i = 0; i < n; i++) {
8+
array[i] = Math.floor(Math.random() * (11 - 1) + 1);
9+
}
10+
showBars();
11+
}
12+
13+
function play() {
14+
const copy = [...array];
15+
const moves = bubbleSort(copy);
16+
animate(moves);
17+
}
18+
19+
//function for animating the bars
20+
function animate(moves) {
21+
if (moves.length == 0) {
22+
showBars();
23+
return;
24+
}
25+
const move = moves.shift();
26+
const [i, j] = move.indices;
27+
if (move.type == 'swap') {
28+
[array[i], array[j]] = [array[j], array[i]];
29+
}
30+
showBars(move);
31+
setTimeout(function () {
32+
animate(moves);
33+
}, 200);
34+
}
35+
36+
//implement the bubble sort function
37+
function bubbleSort(array) {
38+
const moves = [];
39+
do {
40+
var swapped = false;
41+
for (let i = 1; i < array.length; i++) {
42+
moves.push({ indices: [i - 1, i], type: 'comp' }); //we require type swap because we need to differentiate when we are comparing and when we are swapping to show respective move color.
43+
if (array[i - 1] > array[i]) {
44+
swapped = true;
45+
moves.push({ indices: [i - 1, i], type: 'swap' }); //we require type swap because we need to differentiate when we are comparing and when we are swapping to show respective move color.
46+
[array[i - 1], array[i]] = [array[i], array[i - 1]];
47+
}
48+
}
49+
} while (swapped);
50+
return moves;
51+
}
52+
53+
//render the bars dynamically in the index html file
54+
function showBars(move) {
55+
container.innerHTML = '';
56+
for (let i = 0; i < array.length; i++) {
57+
const bar = document.createElement('div');
58+
bar.style.height = array[i] * 10 + '%';
59+
bar.classList.add('bar');
60+
bar.innerHTML = Math.floor(array[i] * 10);
61+
if (move && move.indices.includes(i)) {
62+
bar.style.backgroundColor = move.type == 'swap' ? 'red' : 'green'; //red if swapping green if comparing
63+
}
64+
container.appendChild(bar);
65+
}
66+
}

‎SortingVisualizer/Abhineshjha/style.css‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
.bar {
2+
padding: 10px 12px;
3+
display: flex;
4+
justify-content: center;
5+
width: 25px;
6+
background: rgb(224, 81, 172);
7+
margin: 3px;
8+
border: 3.5px solid rgb(23, 23, 24);
9+
color: whitesmoke;
10+
}
11+
12+
* {
13+
margin: 0;
14+
padding: 0;
15+
box-sizing: border-box;
16+
}
17+
18+
body {
19+
background-color: rgb(70, 68, 68);
20+
font-family: 'Montserrat', sans-serif;
21+
}
22+
body .main_container {
23+
padding: 3rem;
24+
height: 100vh;
25+
width: 100%;
26+
display: flex;
27+
align-items: center;
28+
flex-direction: column;
29+
}
30+
body .main_container #container {
31+
padding: 5rem 0rem;
32+
height: 80%;
33+
display: flex;
34+
align-items: flex-end;
35+
justify-content: center;
36+
}
37+
38+
.btn {
39+
border-radius: 30px;
40+
font-size: 17px;
41+
font-weight: 400;
42+
padding: 1rem;
43+
margin: 0rem 1rem;
44+
border: 0;
45+
cursor: pointer;
46+
transition: ease-in 0.2s;
47+
box-shadow: 0.3rem 0.35rem 0 rgb(23, 23, 24);
48+
border: 3.5px solid rgb(23, 23, 24);
49+
}
50+
51+
.btn:hover {
52+
font-size: 15px;
53+
color: whitesmoke;
54+
background-color: rgb(224, 81, 172);
55+
padding: 1rem;
56+
box-shadow: 0rem 0rem 0 rgb(23, 23, 24);
57+
border: 3.5px solid rgb(23, 23, 24);
58+
}
59+
60+
.title_btn {
61+
border-radius: 30px;
62+
font-size: 25px;
63+
font-weight: 700;
64+
padding: 1rem 4rem;
65+
margin: 0rem 1rem;
66+
border: 0;
67+
transition: ease-in 0.2s;
68+
box-shadow: 0.3rem 0.35rem 0 rgb(23, 23, 24);
69+
border: 3.5px solid rgb(23, 23, 24);
70+
background-color: white;
71+
}
72+
73+
@media screen and (width <= 400px) {
74+
.title_btn {
75+
padding: 0.6rem 2rem;
76+
font-size: 18px;
77+
}
78+
}

0 commit comments

Comments
 (0)