Kubist transforms an ordinary image into cubism-like composition. You can play with the web app and get the source code.

A few years ago, I came across a curious image made of colorful triangular tiles. The triangles seemed to be placed randomly, and somehow they looked rhythmic and unified. How does that work?

Delaunay triangulation maximizes the inner angles of a triangle. This is an animated image from Wikipedia’s article.

Then I learned about Delaunay triangulation. Fascinated by the algorithm and its aesthetic quality, I quickly experimented with it in Processing. The resulting tessellations reminded me of Orphic Cubism paintings , with sharp colors and rhythmic mosaic, though perhaps a bit more mechanical. I called it Kubist (old sketch).

Now tessellation style has become popular again, and with d3.js, making Delaunay triangles is as simple as a function call. So here I updated Kubist into a little web app, along with some thoughts:

Composition

Delaunay tessellation is based on a set of points. As the points’ positions change, the resulting image will also change. How do we place these points?Here are 4 studies of Chairman Mao, the destroyer of all the good things in China. From left to right: