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.
VisualSorting-QuickSort.mp4
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.
- 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.
- 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
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 installStart the project:
npm run devAnd that's it 😄
ISC © 2024 Mateusz Szuła