Kubist

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:

  1. Points that are randomly placed
  2. Points sampled using best candidate algorithm
  3. Feature points detection on the original image using JSFeat library
  4. Manually moving the points.

Colors

By mapping the points’ positions to original image’s pixels, we can extract the colors and apply them to paint our triangles. For example, you can take the color from a triangle’s incenter, or an average color from the 3 points of a triangle, or a gradient with multiple stops based on the interpolated points of a bisector line.

Abstraction

More triangles furnish an image with extra details, though make it more apathetic also. Gradients add ornaments and softness to the image, while solid colors feel more direct and confident. Adding auxiliary graphic elements, such as circles and borders, flattens the image and renders it graphical.

One of the most fascinating aspects in digital arts is the interplay between imaginations and algorithms, the unending surprises derived from tweaking your ideas and tweaking your code, back and forth. I encourage you to try out Kubist, as well as getting the source code and putting your imaginative forces to work!