Scribd
Upload
2 views

Sorting Algorithm Visualizer Full Code

The Sorting Algorithm Visualizer project provides a visual demonstration of various sorting algorithms, including Bubble Sort, Selection Sort, Insertion Sort, Merge Sort, and Quick Sort. Users can select an algorithm, adjust the sorting speed, and generate a new random array while observing real-time animations and time complexity information. The project is implemented using HTML, CSS, and JavaScript, allowing for interactive learning about sorting processes.

Uploaded by

weare18pluss
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

Sorting Algorithm Visualizer Full Code

The Sorting Algorithm Visualizer project provides a visual demonstration of various sorting algorithms, including Bubble Sort, Selection Sort, Insertion Sort, Merge Sort, and Quick Sort. Users can select an algorithm, adjust the sorting speed, and generate a new random array while observing real-time animations and time complexity information. The project is implemented using HTML, CSS, and JavaScript, allowing for interactive learning about sorting processes.

Uploaded by

weare18pluss
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Sorting Algorithm Visualizer Project

Project Overview
This project visually demonstrates different sorting algorithms by animating the sorting process.
It helps users understand how each algorithm works in real-time.

Features:
- Includes Bubble Sort, Selection Sort, Insertion Sort, Merge Sort, and Quick Sort.
- User can select sorting algorithm.
- Adjust sorting speed with a slider.
- Generate a new random array.
- Real-time visualization with animations.
- Shows time complexity for each algorithm.

Full Code:

HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sorting Algorithm Visualizer</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Sorting Algorithm Visualizer</h1>
<div class="controls">
<button onclick="generateArray()">Generate New Array</button>
<select id="algorithm">
<option value="bubble">Bubble Sort</option>
<option value="selection">Selection Sort</option>
<option value="insertion">Insertion Sort</option>
<option value="merge">Merge Sort</option>
<option value="quick">Quick Sort</option>
</select>
<button onclick="startSorting()">Sort</button>
<input type="range" id="speedSlider" min="10" max="500" value="200">
<label>Speed: <span id="speedValue">200</span> ms</label>
</div>
<div id="complexity">
<strong>Time Complexity:</strong>
<p id="best">Best Case: -</p>
<p id="avg">Average Case: -</p>
<p id="worst">Worst Case: -</p>
</div>
<div id="array-container"></div>
<script src="script.js"></script>
</body>
</html>

CSS Code
body {
text-align: center;
font-family: Arial, sans-serif;
}
.controls {
margin: 20px;
}
#array-container {
display: flex;
justify-content: center;
align-items: flex-end;
height: 300px;
}
.bar {
width: 20px;
margin: 2px;
background-color: blue;
display: inline-block;
}
#complexity {
margin: 10px;
}

JavaScript Code
let array = [];
let delay = 200; // Default speed

document.getElementById("speedSlider").addEventListener("input", function() {
delay = this.value;
document.getElementById("speedValue").innerText = this.value;
});

function generateArray() {
array = [];
document.getElementById("array-container").innerHTML = "";
for (let i = 0; i < 20; i++) {
let value = Math.floor(Math.random() * 100) + 10;
array.push(value);
let bar = document.createElement("div");
bar.style.height = value + "px";
bar.classList.add("bar");
document.getElementById("array-container").appendChild(bar);
}
}
generateArray();

async function swap(i, j) {


let bars = document.querySelectorAll(".bar");
bars[i].style.backgroundColor = "red";
bars[j].style.backgroundColor = "red";
await new Promise(resolve => setTimeout(resolve, delay));
[array[i], array[j]] = [array[j], array[i]];
bars[i].style.height = array[i] + "px";
bars[j].style.height = array[j] + "px";
bars[i].style.backgroundColor = "blue";
bars[j].style.backgroundColor = "blue";
}

// Bubble Sort
async function bubbleSort() {
let bars = document.querySelectorAll(".bar");
for (let i = 0; i < bars.length - 1; i++) {
for (let j = 0; j < bars.length - i - 1; j++) {
if (array[j] > array[j + 1]) {
await swap(j, j + 1);
}
}
bars[bars.length - i - 1].style.backgroundColor = "green";
}
}

// Selection Sort
async function selectionSort() {
let bars = document.querySelectorAll(".bar");
for (let i = 0; i < bars.length; i++) {
let minIdx = i;
for (let j = i + 1; j < bars.length; j++) {
if (array[j] < array[minIdx]) minIdx = j;
}
await swap(i, minIdx);
bars[i].style.backgroundColor = "green";
}
}

// Insertion Sort
async function insertionSort() {
let bars = document.querySelectorAll(".bar");
for (let i = 1; i < bars.length; i++) {
let key = array[i];
let j = i - 1;
while (j >= 0 && array[j] > key) {
array[j + 1] = array[j];
bars[j + 1].style.height = array[j] + "px";
j--;
await new Promise(resolve => setTimeout(resolve, delay));
}
array[j + 1] = key;
bars[j + 1].style.height = key + "px";
}
}

// Merge Sort
async function mergeSort(start, end) {
if (start >= end) return;
let mid = Math.floor((start + end) / 2);
await mergeSort(start, mid);
await mergeSort(mid + 1, end);
await merge(start, mid, end);
}

async function merge(start, mid, end) {


let bars = document.querySelectorAll(".bar");
let left = array.slice(start, mid + 1);
let right = array.slice(mid + 1, end + 1);
let i = start, l = 0, r = 0;
while (l < left.length && r < right.length) {
if (left[l] <= right[r]) {
array[i] = left[l++];
} else {
array[i] = right[r++];
}
bars[i].style.height = array[i] + "px";
i++;
await new Promise(resolve => setTimeout(resolve, delay));
}
}

function startSorting() {
let algorithm = document.getElementById("algorithm").value;
if (algorithm === "bubble") bubbleSort();
else if (algorithm === "selection") selectionSort();
else if (algorithm === "insertion") insertionSort();
else if (algorithm === "merge") mergeSort(0, array.length - 1);
}

You might also like