AlgoViz
Abdullah Chaudary··Updated
Project Name: Sorting, searching and pathfinding visualised in React, with an audio toggle that lets you hear the algorithm work.
Technologies: React
Project Links: Live Repository Available for similar engagements
The sound is the array, literally
Every sorting visualiser shows you bars changing height. AlgoViz can also play them, and the implementation is more direct than you would expect: the value being compared is used as the frequency, in hertz, with no scaling in between.
```js
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 is generated with values from 5 to 1000, so the audible range maps onto the data in a way nobody designed and I rather like. Human hearing starts around 20Hz. Every value below that is played and heard by no one. Sorting a fresh array is not an even wash of sound: the small values are silent, and the tone rises into hearing only as larger elements get compared. You are listening to the top of the array while watching all of it.
Square wave, 100ms, no envelope, so it is harsh. That is the correct choice for something you are meant to read rather than enjoy.
Three visualisers, one control surface
Three modes ship: SortingViz, SearchViz and PathFinderViz. Sorting covers Bubble, Selection, Insertion, Merge and Quick Sort. The controls are Size (defaulting to 50 items), Delay (100ms), and the Audio toggle, and an Info panel carries a plain-language explanation of each algorithm rather than assuming you arrived already knowing them.
Delay is the one doing quiet work. An algorithm that sorts fifty numbers finishes far faster than a person can watch, so the visualisation is only legible because it is deliberately slowed down. Making that a control rather than a constant lets you push it toward real speed once you know what you are looking at.
The defect on the front
The live app's <title> is "React App", the Create React App default, untouched since January
- The browser tab, the search result and every share preview say nothing about what this is. It is the single easiest fix on this page and it has been wrong for years, which is a better argument than I could make for shipping metadata on day one instead of last.
Links
Live: algoviz.abchaudary.me. Source: github.com/abdullahchaudary/algoviz.
next up
abchaudary.me