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://mszula.github.io/visual-sorting/

• 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.

• 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

• 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

• 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

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.

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 🌟

Built with ☕️ and ❤️ using Svelte, SvelteKit, Vite, Tailwind, and DaisyUI.

Install dependencies:

npm install

Start the project:

npm run dev

And that's it 😄

ISC © 2024 Mateusz Szuła