A visual and auditory way to view some sorting algorithms, built with SvelteKit. Based on the video by Timo Bingmann.
No followers yet
Once you ship this you can't edit the description of the project, but you'll be able to add more devlogs and re-ship it as you add new features!
Just some small changes. The inputs now become slightly darker when you hover over them (forgot to add; only worked for buttons previously) and the highlighted bars stay highlighted even when it's paused; they used to disappear when you pause it
Added a few more sorting functions and fixed some off-by-one errors in Insertion, Intro, Quick, and Selection Sort. The added sorting algorithms are Bozo, Shell, Comb, and Exchange Sort. Bozo Sort is similar to Bogo Sort, but instead of shuffling the entire array every step, it swaps two random elements and then checks if it's sorted.
Added the ability to change the sound waveform! Before, it was simply hardcoded to be a triangle, but now, there's additional options. These include Sine, Square, and Sawtooth on top of Triangle. Not many, but I don't want to get into the nitty-gritty of custom waveforms
Implemented a bunch more sorting algorithms, some serious, some silly. These include Tim Sort, Smooth Sort, Selection Sort, Pigeonhole Sort, Gnome Sort, Bogo Sort, Stalin Sort, Stooge Sort, and Sisyphus Sort (sorts the array but shuffles it when it's almost done). Honestly, I'm surprised I added so many in under 2 hours.
Added Bubble Sort! It actually only took me 2 minutes to implement this but I initially wanted to implement Tree Sort. However, the visualisation looked terrible so I just scrapped it and moved on to Bubble Sort. Also, I just realised how slow Bubble Sort really is. It's terrible.
Added Intro Sort, Insertion Sort, Heap Sort, and Quick Sort! Intro Sort was particularly tricky to get right, but I managed thanks to the help of some great online resources. Heap, Insertion, and Quick Sort are all used by Intro Sort so I got them for free, which is convenient.
Finally got around to styling the inputs, even if they only look marginally better. But the most important addition was the ability to change the array size and the time between each step. No real complications there. Also took the time to clean up my code a little bit, because my main +page.svelte was becoming a little long. I don't know if I'll make it look much nicer in the future, because I just want to start adding more sorting algorithms
Fixed a bunch of bugs, added Bogo Sort and a system to change between sorting algorithms, and added the ability to change the array size. However, the inputs are still lacking styling because I hate styling things.
Finally added sound! The frequency is determined by a lerp between a minimum and maximum frequency. This wouldn't have taken as long if the Web Audio API were a little easier to use, but it wasn't that hard to get working, luckily. Next up is probably styling the buttons properly and adding some more sorting algorithms.
Fixed a silly bug in my merge sort algorithm and added the classic red sweeping line which follows the sorting algorithm, and the green sweep after it's finished. I'll have to clean up my code first before adding anything else interesting though because it is horrendous right now.
Added merge sort! I also changed the array column colour to white. Honestly, it was a bit of a challenge to get the array to be reactive in Svelte, but I just did a little hack with a store. This is just a prototype right now, so it's unpolished but technically does sort. No sound yet though. I also opted to go for an iterative merge sort instead of recursive to help my code be a little cleaner, since I plan to use generators to step through the sorting algorithm
Got a random array displaying the columns! This was really easy to do with Svelte, since each element of the array is given its own div element with a height proportional to the number's value. I'm not happy with the colour scheme yet though.