A comprehensive, interactive web application for visualizing and learning sorting algorithms. Built with vanilla HTML, CSS, and JavaScript.
Visualize 16 different sorting algorithms with real-time animations:
| Algorithm | Time Complexity (Best) | Time Complexity (Avg) | Time Complexity (Worst) | Space |
|---|---|---|---|---|
| Bubble Sort | O(n) | O(n²) | O(n²) | O(1) |
| Selection Sort | O(n²) | O(n²) | O(n²) | O(1) |
| Insertion Sort | O(n) | O(n²) | O(n²) | O(1) |
| Merge Sort | O(n log n) | O(n log n) | O(n log n) | O(n) |
| Quick Sort | O(n log n) | O(n log n) | O(n²) | O(log n) |
| Heap Sort | O(n log n) | O(n log n) | O(n log n) | O(1) |
| Shell Sort | O(n log n) | O(n^1.3) | O(n²) | O(1) |
| Radix Sort | O(nk) | O(nk) | O(nk) | O(n+k) |
| Comb Sort | O(n log n) | O(n²) | O(n²) | O(1) |
| Cocktail Sort | O(n) | O(n²) | O(n²) | O(1) |
| Gnome Sort | O(n) | O(n²) | O(n²) | O(1) |
| Cycle Sort | O(n²) | O(n²) | O(n²) | O(1) |
| Pancake Sort | O(n) | O(n²) | O(n²) | O(1) |
| Tim Sort | O(n) | O(n log n) | O(n log n) | O(n) |
| Intro Sort | O(n log n) | O(n log n) | O(n log n) | O(log n) |
| Bitonic Sort | O(log²n) | O(log²n) | O(log²n) | O(n log²n) |
- Visualize one algorithm at a time
- Adjustable array size (10-500 elements)
- Variable speed control
- Multiple visualization shapes (Triangle, Circle, Bar, Line, Dot, Diamond)
- Side-by-side comparison of two algorithms
- Synchronized array data
- Real-time statistics (comparisons, swaps, time)
- Race all algorithms simultaneously
- Performance leaderboard
- Time and comparison metrics
- Interactive Learning: Step through algorithms one operation at a time
- Code Examples: View implementation code for each algorithm
- Complexity Analysis: Understand time and space complexity
- Visual Explanations: Color-coded array elements show:
- 🟡 Yellow: Elements being compared
- 🔴 Red: Elements being swapped
- 🟢 Green: Sorted elements
- 8 Color Themes: Dark, Light, Ocean, Forest, Sunset, Midnight, Lavender, Cyberpunk
- Sound Effects: 8 different sound types with volume control
- Array Patterns: Shuffle, Reverse, Valley, Mountain
- Custom Arrays: Input your own values
- Keyboard Shortcuts: Quick controls for power users
- Responsive Design: Works on desktop and tablet
- Modern web browser (Chrome, Firefox, Safari, Edge)
- No server or build tools required
- Clone the repository:
git clone https://github.com/yourusername/visual-sorting-algorithm.git- Navigate to the project folder:
cd visual-sorting-algorithm- Open
index.htmlin your browser:
# On Windows
start index.html
# On macOS
open index.html
# On Linux
xdg-open index.htmlOr use a local development server like Live Server in VS Code.
| Action | Control |
|---|---|
| Start Sorting | Click "Start" button or press Space |
| Stop Sorting | Click "Stop" button |
| Step Through | Click "Step" button |
| Shuffle Array | Click "Shuffle" button |
| Change Algorithm | Click algorithm buttons at bottom |
| Key | Action |
|---|---|
Space |
Start/Stop sorting |
R |
Shuffle array |
+ / - |
Increase/Decrease speed |
↑ / ↓ |
Increase/Decrease array size |
- Click "Study Mode" button
- Select an algorithm from the sidebar
- Use Play for automatic visualization or Step for manual control
- Switch between Overview, Code, and Complexity tabs
- Watch the "Current Step" panel for explanations
visual-sorting-algorithm/
├── index.html # Main HTML structure
├── styles.css # All styling and themes
├── script.js # JavaScript logic and algorithms
└── README.md # Documentation
- Pure Vanilla JS: No frameworks or libraries
- Canvas API: Used for main visualization rendering
- Web Audio API: For sound generation
- CSS Custom Properties: For theming system
- LocalStorage: For saving user preferences
- Optimized rendering with requestAnimationFrame
- Efficient array operations
- Throttled UI updates during sorting
Contributions are welcome! Here's how you can help:
- Fork the repository
- Create a feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
- Add more sorting algorithms
- Improve mobile responsiveness
- Add more visualization styles
- Create algorithm tutorials
- Add unit tests
This project is licensed under the MIT License - see the LICENSE file for details.
- Inspired by various sorting visualizers
- Sound design using Web Audio API oscillators
- Color themes designed for accessibility
For questions or feedback, please open an issue on GitHub.
BLUETOID © 2025