ANIMALS, PLOTTED BY:
This is an attempt to create the low-poly aesthetic of Pasquale D’Silvia's Trianimals and Bryan James’ Species in Pieces programmatically (in pure code), without Illustrator. Each animal takes about 10 minutes to draw, with code providing more creative flexibility in terms of adjusting vertices and colors. More sources and how I made it here.
The graph is inspired by a discussion at Undercurrent, led by Clay Parker Jones. Intelligence data is roughly based on this Quora post by Andrew Chen. Tastiness is based on informal polling of myself and friends.
I became interested in low-poly animations when this post illustrated several examples using JS and CSS. The challenge was that you needed to design your triangle vertices meticulously in Illustrator. This post details how time-intensive and limiting this process is: once you have your triangle mesh, you're married to the design. And changing color scheme on-the-fly is almost impossible.
I looked at algorithmic verticy programs, and every example started with an image. The problem with this approach: great low-poly art has a well-defined contour. Image recognition tools are great, but have limitations...they're never going to be smart enough to produce something like this. I needed a tool that allowed manual input of vertices (similar to Illustrator), but with some of the parametric benefits of a code-driven tool.
The first thing I programmed was a web-based app that translated user-defined vertices into triangles. Once I defined the vertices, I could use an image's hex values as the triangle fill. Here's an example with Drake:
I drew this example in 2 minutes. I used the poly2tri.js framework to generate contours based on vertices, and then D3 to draw the triangles as paths (and also D3's transition functionality to execute animations between triangle datasets).
For the animal illustrations, I followed the same process: finding an image on Google and defining vertices. Instead of using a hex value from the image, I used Cynthia Brewer's Color Brewer palletes, which are commonly used in D3 visualizations. To get different color effects, I borrowed from Trianglify's clever use of gradient-blending on the X and Y axis, which creates an awesome 3D effect.