Marble Butterflies

a data-drive generative art piece based on butterfly species’ data

Scroll down for information


Marble Butterflies


February 2017


data sketches’ February month


Excel (data prep) & HTML5 Canvas


Raw data from Gardens with Wings


Driven by butterfly data, let these generative butterflies free across your screen to evolve & develop and be mesmerized as your screen fills up with colorful paths.


The data sketches 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. Furthermore, I found butterflies to be the perfect analogy for having random lines “flitter” 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 different butterfly species. The color of the butterfly path is defined by the main color of the butterfly. To get more diversity I used Tinycolor.js to pick randomly between 5 very similar colors. The opacity and thickness of the path and the amount the path is “jittered” is governed by the size of the butterfly; large butterflies have thicker paths.

Finding interesting path forms, that swirl a bit, but not too much, was not trivial and took a decent amount of 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 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.

You can read a more elaborate account of the creation process on data sketches’ February write-up.

Final image of the Marbe Butterflies project