Marble Butterflies


Project description

February 2017


data sketch|es


Excel (data prep) & HTML5 Canvas


Raw data from Gardens with Wings

The data sketch|es topic for February was Nature, which in the end was a way for me to combine my love for generative art with data visualization. To me Nature is guided by randomness; mutations that happen without reason are the existence of evolution, and what is generative art if not driven (in part) by randomness. And butterflies are the perfect analygo for having random lines “filtter” across the screen to create a blanket of colors. It wasn’t the most obvious place, but eventually I found some butterfly identification data that I could use to define the lines.

These are the rules that define how the butterfly data is being used; Each frame a few butterflies are created, they are picked from the dataset of ±50 butterflies (I filtered out the browns, that’s just an ugly color). The color of the butterfly path is then defined by the main color of the butterfly. However, to get more diversity I used Tinycolor.js to pick randomly between 5 very similar colors (so for blue, it might go a bit more dark blue or a bit more aqua). The opacity and thickness of the path and the amount the path is “jittered” is governed by the size of the butterfly (I have small, medium and large). Naturally, large butterflies have thicker paths.

Finding interesting path forms, that swirl a bit, but not too much, took a lot of time tweaking the formulas that govern the path, but it was all good fun. In the end I couldn’t choose between either letting the butterflies start from the center, or right outside the screen, so now it randomly (again ;) ) chooses between the two on each refresh.

I quite like the idea that each refresh will create a result that is unique and will never be seen again :)

Final image of the Marbe Butterflies project