Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
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
We take content rights seriously. If you suspect this is your content, claim it here.
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
We take content rights seriously. If you suspect this is your content, claim it here.
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