William Ngan
Apr 20, 2015 · 3 min read

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

Image for post
Image for post

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?

Image for post
Image for post
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:


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.
Image for post
Image for post


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.

Image for post
Image for post


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.

Image for post
Image for post

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!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store