🔮 🔈 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.

VisualSorting-QuickSort.mp4

🚀 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

• 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

🔍 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