Animals

ANIMALS, PLOTTED BY:

INTELLIGENCE

AND

TASTINESS

INTELLIGENCETASTINESS
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.

MADE BY MATT DANIELS IN THE SCHOOL FOR POETIC COMPUTATION

DOLPHIN
WHALE
CROW
MONKEY
PIG
DOG
CAT
RAT
HORSE
CROCODILE
OCTOPUS
DUCK
RABBIT
Cow
Deer
Sheep
Shark
Chicken
Turkey
Frog
Fish
Shrimp
Scallop
Cricket
Snail
About

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.