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?
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:
- Points that are randomly placed
- Points sampled using best candidate algorithm
- Feature points detection on the original image using JSFeat library
- Manually moving the points.
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.
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!