Sound of Sorting

Sound of Sorting

13 devlogs
13h 41m
•  Ship certified
Created by Draedon

A visual and auditory way to view some sorting algorithms, built with SvelteKit. Based on the video by Timo Bingmann.

Timeline

Ship 1

1 payout of shell 337.0 shells

Draedon

about 1 month ago

Draedon Covers 13 devlogs and 13h 41m

Just a quick README update. Added a tiny description and a screenshot.

Update attachment

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

Update attachment

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.

Update attachment
Earned sticker

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

Update attachment

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.

Update attachment

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.

Update attachment

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.

Update attachment
Earned sticker

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

Update attachment
Earned sticker

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.

Update attachment

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.

Update attachment