⚡ Sorting Algorithm Visualizer

A visually stunning, interactive web-based sorting algorithm visualizer with a cyberpunk neon aesthetic. Watch algorithms dance, race them head-to-head, and hear them sort.

✨ Features

🎨 Visual Design

• Cyberpunk dark theme with neon gradients, glow effects, and smooth animations
• Bars with rounded tops, shine highlights, and active-bar glow effects
• Color-coded states: comparing (pink), swapping (red), sorted (green), pivot (gold)
• Celebration cascade animation when sorting completes

🧮 8 Sorting Algorithms

Algorithm	Time (Avg)	Time (Worst)	Space	Stable
Bubble Sort	O(n²)	O(n²)	O(1)	✅
Insertion Sort	O(n²)	O(n²)	O(1)	✅
Selection Sort	O(n²)	O(n²)	O(1)	❌
Merge Sort	O(n log n)	O(n log n)	O(n)	✅
Quick Sort	O(n log n)	O(n²)	O(log n)	❌
Heap Sort	O(n log n)	O(n log n)	O(1)	❌
Radix Sort	O(nk)	O(nk)	O(n+k)	✅
Shell Sort	O(n log²n)	O(n log²n)	O(1)	❌

🎮 Controls

• Play / Pause — Start and stop the visualization
• Step — Advance one operation at a time for detailed inspection
• Reset — Restart with the same array
• Shuffle — Generate a new random array
• Speed Slider — From slow (50ms) to instant (0ms) per operation
• Size Slider — Array size from 10 to 200 elements
• Distribution Presets — Random, Nearly Sorted, Reversed, Few Unique

⚔ Race Mode

Split the canvas in half and watch two algorithms sort the same array simultaneously. Each side has its own stats — see which algorithm finishes first!

🔊 Sound Engine

Toggle sound to hear the sorting process:

• Clicks on comparisons with pitch mapped to bar value
• Sweeps on swaps
• Celebration chimes on completion

📊 Real-time Stats

• Comparisons counter
• Swaps counter
• Array accesses
• Elapsed time

⌨ Keyboard Shortcuts

Key	Action
Space	Play / Pause
R	Reset
S	Step (advance one operation)
N	New random array

📱 Responsive

Works on desktop and mobile — canvas resizes with the window.

🚀 How to Use

1. Open index.html in any modern web browser
2. Select an algorithm from the dropdown
3. Adjust speed and array size with the sliders
4. Choose a distribution preset (Random, Nearly Sorted, etc.)
5. Click ▶ Play to start, or ⏭ Step to advance one operation at a time
6. Toggle ⚔ Race Mode to compare two algorithms side-by-side
7. Toggle 🔊 Sound to hear the sorting process

🏗 Tech Stack

• p5.js (v1.9.0) — Canvas rendering and animation
• Web Audio API — Sound effects
• Vanilla JS — No frameworks, no build step
• Single HTML file — Fully self-contained, works offline

🧬 Architecture

All algorithms are implemented as JavaScript generator functions that yield operations:

function* bubbleSort(arr) {
  for (let i = 0; i < arr.length - 1; i++) {
    for (let j = 0; j < arr.length - i - 1; j++) {
      yield { type: 'compare', indices: [j, j + 1] };
      if (arr[j] > arr[j + 1]) {
        yield { type: 'swap', indices: [j, j + 1] };
        [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
      }
    }
    yield { type: 'sorted', index: arr.length - 1 - i };
  }
}

This gives perfect step control — the visualizer can advance one operation at a time, or batch multiple operations per frame for speed.

📂 File Structure

sorting-visualizer/
├── index.html    ← Single self-contained file (HTML + CSS + JS)
└── README.md     ← This file

🎯 Color Palette

Role	Color	Hex
Background	Deep Navy Black	#0a0a1a
Bar Start	Periwinkle	#667eea
Bar End	Purple	#764ba2
Comparing	Pink Glow	#f093fb
Swapping	Red Pulse	#ff6b6b
Sorted	Neon Green	#05ffa1
Pivot	Gold	#ffd000
Accent	Cyan	#00d4ff

---

Built with p5.js • Cyberpunk meets data art • Sorting has never looked this good ⚡