🔮 🔈 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.
• Side-by-Side Compare Mode: Race two algorithms on the same array — toggle the compare icon in the header, pick algorithms per panel, switch between horizontal and vertical layout.
• Live Metrics: Comparisons, swaps and array accesses counted in real time and displayed in the header. Non-comparison sorts (Counting, Radix) clearly show Cmp = 0.
• Keyboard Shortcuts: Space start/stop, → step, R shuffle, ↑/↓ faster/slower, [/] previous/next algorithm, M mute, ? opens the full reference.
• Input Array Options: Shuffle, Reverse, Valley, Mountain, Wave, Nearly Sorted and Pipe Organ patterns. Array sizes from 2 to 1024 elements. The selected pattern persists when you resize.
• Adjustable Speed: Control the pace by dynamically changing the delay, to speed up or slow down the process, with precision up to 500 ms.
• Persistent Preferences: Array size, delay, sound type and selected pattern survive page reloads.
• Themes: Various themes from DaisyUI so that everyone can find something for themselves.

🤖 Supported Sorting Algorithms

• Bubble Sort
• Quick Sort
• Shell Sort
• Merge Sort
• Insertion Sort
• Selection Sort
• Radix LSD Sort
• Radix MSD Sort
• Heap Sort
• Bitonic Sort
• Tim Sort
• Gnome Sort
• Cycle Sort
• Cocktail Sort
• Pancake Sort
• Stooge Sort
• Bogo Sort
• Exchange Sort
• Odd-Even Sort

🆕 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

🌊 Recently Added Patterns

• Wave - Permutation of 1..n where bar heights trace a single sine period
• Nearly Sorted - Sorted array with ~5% random swaps — adaptive sorts (Insertion, Tim) shine here
• Pipe Organ - Three ascending mini-mountain peaks evoking organ pipes

🔍 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