AlgorhythmicSorting WEB application

AlgorhythmicSorting is an open source program and learning tool for people, who want to learn and analyze the diversity of sorting algorithms by hearing the different rhythmic and pattern generating behaviour of different sorting algorithms like bubble sort, merge sort, quick sort or heap sort and others. It shall be used by students, sound artists, researchers and hobbyists to learn the rhythmic basics of algorithms.

Based on the work of Shintaro Miyazaki this web applications shows the behaviour of different sorting algorithms on a random list of numbers. The web application has been written in p5.js, a JavaScript library similar to Processing.

To the WEB app

Sorting Algorithms

• Bubble Sort
• Selection Sort
• Insertion Sort
• Merge Sort
• Quick Sort
• Shell Sort
• Radix Sort
• ...more to come

How it works

For each sorting algorithm I created a class that takes an array of numbers as argument, with a show() and update() function. The show() function displays the array as it is sorted by the algorithm. The update() function executes step by step the algorithm. The algorithm have been broken down from being loops and recursion to step by step actions.
Every sorting alghoritm class has a show(array, index1, index2) function, the two arguments index1 index2 define with cyan the the element to check and with magenta the swap. The show(array, index1, index2) also calles the playSound(array[index2]) function, that maps the value of the array in position index2 to a a midi tone.

function playSound(num){
let midiValue = map(num, 0, range, 60, 100);
var freqValue = midiToFreq(midiValue);
osc.freq(freqValue);
env.play(osc, 0, 0.1);
}

References

Really useful explanation and JavaScript codes can be found at the following blogs and websites

• JS: Interview Questions Sort related interview questions for intermediate JavaScript developers by That JS Dude
• Sorting algorithms in JavaScript, all the code by Benoit Vallon
• sorting.js another sorting web application made by Justin Johnson
• JavaSript Sorting Algorithm - Radix Sort and Bucket SortUseful for understanding radix sort, made by taoalpha
• Sorting Algorithms Visualized a nice Processing based visualiztion of different sorting algorithm, made by Tim Grohmann

BUGS

• shell sort needs to be fixed, it does not sort completely
• some problems with safari, the play button does not work properly. It works on any other browser

TO DO

• Use class prototypes
• Add new sorting algorithms
• Improve the show function