Editor’s note: With the new edition to our editorial team we’re thrilled to bring you our first post from Salih Abdul-Karim.
At first glance, “Habito” looks like a cleverly simple animation about the power of data. It’s only after learning about what’s under the hood that you see the brilliance between the visuals, the approach, and the tools that were used to make it.
Habito was created as a collaboration between Nicolas Ménard at Nexus Studios and a talented group of creative coders at Variable.io. Most of the piece was created with instructions and algorithms with no use of animation software.
In this interview we spoke with Nicolas about his curiosity for data visualization, how he balanced that with the need to present a strong narrative, as well as the pros and cons of creating animations with data instead of keyframes.
Q&A with Nicolas Ménard
Most of us know you from your award winning short films such as “Loop Ring Chop Drink” and “Wednesday with Goddard.” You’ve also extended your beautiful illustration / animation style into commercial projects like California Inspires me: Jack Black and the Facebook Groups Campaign. Now with Habito you’ve taken on a different kind of commercial project that involved coding and generative artwork. How did this kind of project land in your lap?
I was trained as a graphic designer, so even though a lot of my work is character based, or story driven, I also enjoy undertaking slightly more conceptual projects. In 2012, I made a book called Colorimetry that was published at La chose imprimée. It used the data of colour and very simple algorithms to transform colour into shapes.
When Nexus proposed me to pitch for this Habito job — knowing it was dealing with visualising algorithms — I thought it was a great way of getting back into that sideline of mine.
Looking at Colorimetry, where did that idea come from? Were there any early influences that made you interested in data, color and algorithms?
I stumbled on data visualisation by accident; initially it was a means to an end. At the time, I was taking a course in book design with Judith Poirier at Université du Québec à Montréal. The final project of her class was to make a book, from content to binding! Quite a big undertaking. We had to find ways to fill the book with something interesting.
I knew I wanted to make a book on the subject of colour, but I had to think of a way to generate a lot of visual content. The moment of inspiration came while procrastinating in Photoshop. By browsing through the colour palette, I would see all the colour data changing. I started to think something could be done with those numbers if I used them as the coordinates of points on a grid. Then by linking those points, I would obtain shapes. Another teacher, Jean-Philippe Fauteux, had mentioned Processing in his class so I started to look into that. I ended up collaborating with a British coder, Sal Spring, whom I found on a blog!
Can you tell us a little about your process while making Habito? What came first, the artwork or the algorithms?
The agency Who Wot Why proposed to show sorting algorithms as a metaphor for Habito’s powerful mortgage matching algorithm. Therefore it was mostly about coming up with designs of compositions that start in a chaotic state, and progressively sort themselves.
I started with sketches to get my head around an initial look. To make sure they work, I would polish the algorithms by writing the series of steps they would follow to sort a series of elements. Each of them had its own set of problems to solve to ensure they were logical and rhythmically satisfying.
In the description for Habito you say you “designed a series of instructions…” What’s an example of an instruction? And were you able to think about how those instructions would be translated visually?
The instructions were simple series of steps of how a visual would work.
For the algorithm sorting sticks, for example, we have 4 independent columns. Each column counts 15 sticks. Each stick has a random angle. Using a Quicksort, pivots are highlighted and sticks are sorted by angle. At the end of each algorithm, a completion animation occurs for maximum computer satisfaction.
Other algorithms were not necessarily using standard sorting techniques, but were simply playful mechanisms. Here’s an example of a visual breakdown I would share with Nick Nokolov from Variable.io, who coded the web apps we used to record the visuals:
Did you find that you needed to be technically savvy in order to write the instructions? Or was it something more intuitive?
It probably has more to do with problem solving and logic than anything else, like designing the rules of your own game. I’m not a very good coder, but I know the basics. It was important to have crystal clear communication with Nick, who made sure these ideas translated well into code.
Since you didn’t use any animation software to create the animations, what was the iteration process like since you seemingly had little control over the end result?
We had less control over certain things, but more over others. We were able to play with the amount of units to sort per algorithm, and to adjust their appearance and speed on the go. These settings were all fabulously useful. If you want to play with some of the apps, we put three of them on the Nexus Studios website.
What I love about Habito is that even though it’s backed with data it still tells a clear narrative from end to end. How did you balance the ability to tell a clear story with the sometimes unexpected results of how data is visualized?
Yes, the narrative was very important to the project. The initial script from the agency was playful, and I proposed a storyboard which brought some rhythm into it. Then we did tons of animatics. For the first two weeks of the project, we worked really hard with the guys at Who Wot Why to make sure the film’s structure was functional. We tried tons of alternative scripts and exported countless versions of the film before feeling satisfied. 30s is an odd format. You really want to make sure you don’t squeeze too much content in there because it quickly becomes overwhelming.
When I look at your work and the work of Variable.io, the company you collaborated with, I see two totally different styles and approaches. What was it like collaborating with their team?
Variable.io is made of Marcin Ignac and Nick Nikolov. I worked mostly with Nick, and it was a wonderful experience. Looking at their extensive portfolio, I knew they’d be perfect collaborators. Since I was in charge of the design part of the project, the look is indeed different from their previous work. What they brought to the film though — on top of their fantastic coding skills — was precision and attention to detail.
Did you find there were any barriers between your usual visual medium and their code based method?
Not really in this case since I tried to keep the visual rendering rather straightforward. I’m also convinced you could do anything with code; it’s more a matter of how much time and hands you have!
This generative kind of work reminds me a little bit of pieces from artists like Joshua Davis that call themselves this combination of designer / technologist / creative coder. Is that an avenue you see yourself pursuing more in the future?
I’d certainly love to be doing more of that kind of work. I’d also like to go back to Colorimetry at some point and actually finish the project. The film “Colorimétrie en mouvement” is incomplete: the soundtrack is only a placeholder, and the edit rather rough around the edges. I’ve been looking for a link between colour and audio that could generate the sound of these amalgams of shapes.
You’ve brought a visual style to a very technical thing. Have you thought at all about how to flip it and bring some of that data and code based thinking back to some of your more narrative illustrative works?
I haven’t had any good ideas I thought worth pursuing in that realm yet, but it’s certainly working at the back of my head. I would love to merge both approaches more. I’m also well into creating systems to generate film structures, whether narrative or non-narrative. So many things to try, yet we are only mortal beings!
Lastly, do you have any advice or resources for other graphic artists out there looking to dabble in the world of algorithms or creative coding?
What really inspires me when it comes to working with code is to explore the possibilities. It sounds rather basic, but I love going on the Examples page of the Processing website, or even the Paper.js one. It’s like looking at a set of lego blocks and you can start imagining all the things you could build with them.
Learning the basics is much more approachable than it looks. But if you have an idea you want to code, and all you’re good at is drawing, well an image is worth a thousand words. There are a lot of coders out there who have the opposite problem, and are keen to collaborate with artists.