AlgoViz

The sound is the array, literally

AlgoViz is a React app that turns sorting and search algorithms into something you can watch and hear at once. Every sorting visualiser shows bars changing height. This one also plays them, and the implementation is more direct than it looks: the value being compared is used as the frequency, in hertz, with no scaling in between.

makeSound = (freq) => {
    let oscillator = this.audioCtx.createOscillator();
    oscillator.type = 'square';
    oscillator.frequency.setValueAtTime(freq, this.audioCtx.currentTime);
    ...
    oscillator.stop(this.audioCtx.currentTime + 0.1);
}

Two of those fire per comparison, one for each bar, as square waves lasting 100ms. The array runs from 5 to 1000, so the audible range maps onto the data in a way nobody designed: anything below roughly 20Hz plays and is heard by no one. Sorting a fresh array isn't an even wash of sound, the small values are silent, and the tone only rises into hearing range as larger elements get compared. You're listening to the top of the array while watching all of it.

Two visualisers, and a third still to come

Sorting is complete: Bubble, Selection, Insertion, Merge and Quick Sort, each animated and sonified the same way, with Size and Delay as live, adjustable controls. Search covers Linear and Binary search, the latter running an insertion sort first since binary search needs an ordered array to work against. A pathfinding visualiser is next on the list, already named in the nav for when it ships.

Stack

React on Create React App, react-router-dom for routing, Tailwind for styling, Testing Library for component tests.

Links

Live: algoviz.abchaudary.me. Source: github.com/abdullahchaudary/algoviz.