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

Made with Svelte, Vite and DaisyUI.

Install dependencies:

npm install

Start the project:

npm run dev

And that's it 😄

mszula/visual-sorting