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

Change the parameters and replay the animation by clicking 'restart'
Change the parameters and replay the animation by clicking 'restart'
Change the parameters and replay the animation by clicking 'restart'

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

Experiments

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.