Scribd
Upload
2 views

Sorting Algorithm Visualizer Detailed

The Sorting Algorithm Visualizer is an interactive web-based tool designed to help users understand various sorting algorithms through animations. It supports five algorithms, allows users to generate random arrays, select sorting methods, and adjust sorting speed while displaying time complexity information. The project includes HTML, CSS, and JavaScript code to create a user-friendly interface and smooth visualizations of the sorting process.

Uploaded by

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

Sorting Algorithm Visualizer Detailed

The Sorting Algorithm Visualizer is an interactive web-based tool designed to help users understand various sorting algorithms through animations. It supports five algorithms, allows users to generate random arrays, select sorting methods, and adjust sorting speed while displaying time complexity information. The project includes HTML, CSS, and JavaScript code to create a user-friendly interface and smooth visualizations of the sorting process.

Uploaded by

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

Sorting Algorithm Visualizer Project

Project Overview
Sorting Algorithm Visualizer is an interactive web-based tool that allows users to understand
various sorting algorithms through animations. It provides an intuitive way to see how each algorithm

sorts an array of numbers step by step, making learning easier and more engaging.

Features
- Supports five popular sorting algorithms: Bubble Sort, Selection Sort, Insertion Sort, Merge Sort, and Quic
- Each sorting algorithm is visualized using color-coded bars representing numbers.
- Users can generate a new array of random numbers before sorting.
- A dropdown menu allows users to select the sorting algorithm.
- Sorting speed can be adjusted using a slider, ranging from fast to slow.
- Each sorting algorithm displays its time complexity (Best, Average, and Worst case).
- Smooth animations help visualize how elements are being sorted step by step.
- User-friendly UI with minimal design, focusing on educational value.

User Controls
- Generate New Array: Creates a fresh set of random numbers to be sorted.
- Select Algorithm: Choose from Bubble Sort, Selection Sort, Insertion Sort, Merge Sort, or Quick Sort.
- Sort Button: Starts the sorting process for the selected algorithm.
- Speed Slider: Adjusts the speed of the sorting animation (lower values mean faster sorting).
- Time Complexity Display: Shows the best, average, and worst-case time complexity for the chosen algori

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;

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";
}
}

function startSorting() {
let algorithm = document.getElementById("algorithm").value;
if (algorithm === "bubble") bubbleSort();
}

You might also like