Interface Digital Labs

Delaunay triangle vectorization

We have been working on vectorisation tool based on a network or irregular triangles.

The technique I adapted was to create a random set of initial points, and then use a Delaunay triangulation algorithm to create a set of triangle Shape objects, which are then stored in an array.

Each triangle is then coloured using the setPixel method based on the colour value of the pixel in the underlying image in the centre of the triangle. The simplest technique for calculating the co-ordinates of the centre point of the triangle is to take the sum of the horizontal positions of the 3 vertices and divide by 3 to find the x co-ordinate, and the sum of the vertical positions of the 3 vertices and divide by 3 to find the y co-ordinate. This tells us the Centroid of the triangle.

(It turns out there are 3612 ways of calculating the center of a triangle, see the Encyclopedia of Triangle Centers).

More detail can be added by setting the number of initial points.

In the second iteration, you can add detail to a particular area, by clicking on it. This adds additional control points to the area around the mouse click, and generates more triangles.

When run as a projector, select Print and then Save As a PDF to create a vector image which can be edited in Illustrator.
It’s an intriguing effect to remove some of the triangles to reveal the image beneath.

Try it out

To use, click the load image button to load an image from your hard drive. Click on the image to add extra triangle points. Click reset to revert to the original number of triangles.

Further research

For more work with Delauney triangles, see the work of Jonathan Puckey – Flickr set here