Habito
Sorting Algorithms
An animimated short film of sorting algorithms for mortgage startup Habito.
For Habito’s first TV campaign we collaborated with Nicolas Ménard from Nexus Studios on a set of 6 web-based tools for designing and exploring bespoke algorithm visualizations.
Client
- Habito
2017 / London, UK
Algorithms
"A series of elegant sorting algorithms that turn graphical chaos into satisfying order; a metaphorical visualization of the brand's powerful mortgage matching algorithm." - Nexus Studios
Process
We started out with exploring different designs by Nicolas, usually by programming rule-based ideas, exploring and iterating possiblities in an interactive web-app and converging on the final designs. Our apps provided for a quick iteration of not only for the visual design, but the speed, timing and feel of the algorithms, as well as real-time audio playback which helped David quickly swap and replay sounds. This means that every tweak to the algorithm instantly generates a new sound composition based on the rules and parameters.
![Initial sketches of the algorithms by Nicolas Ménard](img/process1.jpeg)
Experiments
![](img/gif2.gif)
![](img/gif3.gif)
![](img/gif1.gif)
Tech
This project was powered by the HTML Canvas API for all 2D drawings, the Web Audio API for all audio playback, Tweenr for animating states and Settings-Panel for the GUI.