This Sorting Algorithm Visualizer is a dynamic and interactive tool that helps you understand and observe the working of various sorting algorithms. It visually demonstrates how elements of an array are compared, swapped, and ultimately sorted. Whether you’re a student, developer, or algorithm enthusiast, this project offers a clear insight into sorting mechanics.
- Real-time Visualization: Watch as the array elements move and change based on sorting operations.
- Color-Coded Operations:
- 🟥 Red: Swapping elements.
- 🟦 Blue: Comparing elements.
- 🟩 Green: Element in its correct, sorted position.
- Time Analysis: Compare the time taken by different algorithms to sort the same data set.
- Multiple Sorting Algorithms: Explore and switch between a variety of sorting techniques.
- Responsive Design: Works on various screen sizes for a smooth experience.
- HTML – For structuring the visualizer.
- CSS – For styling and responsive design.
- JavaScript (p5.js) – For creating animations and handling the algorithm logic.
This project visualizes the following algorithms:
- Bubble Sort: A simple comparison-based algorithm.
- Selection Sort: Picks the smallest element and swaps it to the front.
- Merge Sort: A divide-and-conquer algorithm, splitting the array and merging sorted parts.
- Quick Sort: An efficient algorithm that selects a pivot and partitions the array.
- Select the sorting algorithm you want to visualize from the menu.
- Set the speed of visualization to your preference.
- Click "Start" to watch the algorithm in action.
- Observe the color-coded steps to understand the algorithm's flow.
| Algorithm | Best Case | Average Case | Worst Case |
|---|---|---|---|
| Bubble Sort | O(n) | O(n²) | O(n²) |
| Selection Sort | O(n²) | O(n²) | O(n²) |
| Merge Sort | O(n log n) | O(n log n) | O(n log n) |
| Quick Sort | O(n log n) | O(n log n) | O(n²) |
If you want to dive deeper into sorting algorithms, here are some helpful links: