🔮 🔈 Visual Sorting aka The Sound Of Sorting
Visual Sorting is a tool that provides a visualization of sorting algorithms, accompanied by an auditory experience. It allows users to witness how various sorting algorithms work through dynamic horizontal bars.
https://github.com/user-attachments/assets/2b9674c5-c705-4a22-ba6a-474cfc11cddd
🚀 Play with it
https://mszula.github.io/visual-sorting/
🌟 Features
- Dynamic Visualization: Vertical bars present the sorting process in real-time.
- Step-by-Step Exploration: Go through each step of the algorithm, and analyze what going on.
- Sound Experience: Each vertical bar represents a value in the sorting array. As the algorithm works on a bar, a sound is produced based on its height. There are 24 different sound oscillator options to choose from.
- Input Array Options: Customize the array to sort by shuffling, reversing, or arranging in a mountain and valley form. Choose array sizes ranging from 2 to 1024 elements.
- Adjustable Speed: Control the pace by dynamically changing the delay, to speed up or slow down the process, with precision up to 500 ms.
- Themes: Various themes from DaisyUI so that everyone can find something for themselves.
🤖 Supported Sorting Algorithms
🆕 Recently Added Algorithms
- Counting Sort - Non-comparison sorting algorithm that counts occurrences of each value
- Comb Sort - Improved Bubble Sort variant that uses gap-based comparisons
- Intro Sort - Hybrid algorithm combining Quick Sort, Heap Sort, and Insertion Sort
🔍 Rationale
Visual Sorting was created to explore and learn Svelte, a modern JavaScript framework. Inspired by Timo Bingmann's captivating video "The Sound of Sorting" (https://www.youtube.com/watch?v=kPRA0W1kECg), which combines sorting algorithm visualizations with sound, I wanted to develop a tool that offers a similar educational and engaging experience. Visual Sorting aims to make learning sorting algorithms both enjoyable and insightful through dynamic visuals and sounds.
🙌 Contribution
If you have suggestions for how Visual Sorting could be improved, or want to report a bug, open an issue! We'd love all and any contributions. If you can, leave a star as well 🌟
💻 Setup
Built with ☕️ and ❤️ using Svelte, SvelteKit, Vite, Tailwind, and DaisyUI.
Install dependencies:
npm install
Start the project:
npm run dev
And that's it 😄
⭐ Star History

📄 License
ISC © 2024 Mateusz Szuła