Voronoi Paintings with Toxiclibs
Posted on 2011-07-28 by Jan Vantomme
Tags:
processing, tutorial
Every generative artist has probably created a work using Voronoi diagrams. I already wrote a tutorial on how to create them with Hemesh. Today, we'll take a look at how you can create 2D voronoi diagrams with the popular Toxiclibs library for Processing. You can start by downloading and installing the library if you haven't done that already. Import the library to your sketch and declare these two variables:
ToxiclibsSupport gfx;
Voronoi voronoi;The next thing you'll need to do is creating the ToxiclibsSupport object, which will be used to easily draw the voronoi regions to the screen and the Voronoi object that will hold the points. The full code for setup() will look like this:
void setup()
{
size(450, 360);
gfx = new ToxiclibsSupport( this );
voronoi = new Voronoi();
for ( int i = 0; i < 50; i++ ) {
voronoi.addPoint( new Vec2D( random(width), random(height) ) );
}
}To draw the voronoi diagram to the screen, you'll need to use the getRegions() method on the voronoi object. This returns an ArrayList of Polygon2D objects. If you iterate through this ArrayList, you can draw each polygon to the screen using the Polygon2D() method on the ToxiclibsSupport object. This piece of code goes inside draw().
for ( Polygon2D polygon : voronoi.getRegions() ) {
gfx.polygon2D( polygon );
}If all goes well, your image should look like the one below. The code for this sketch can be found in the folder voronoi001.
Drawing Points
The easiest way to draw the points that make up the voronoi diagram is to use the getSites() method of the Voronoi class. This method returns an ArrayList of Vec2D objects that hold the location of each point. I've used green to render these points to the screen in the image below. The red points are rendered using the getCentroid() method of the Polygon2D class, which returns the polygon's centre of mass. You can find the code for this example in the folder voronoi002.
Creating a Painting
The next thing I did was stealing the image of Mona Lisa from Wikipedia so I could use it as a reference image to create the voronoi painting. The technique I used for picking the colors to fill the voronoi regions is the same as I've used in my tutorial on Painting with Processing. The code for this sketch can be found in the folder voronoi_monalisa_001.
In the image above, I've used the getCentroid() method of the Polygon2D class to pick the color. This is the fastest way to create the painting, but it doesn't use the points that make up the voronoi diagram. The centre of mass of the polygon is usually close to the voronoi point, as you can see in the image with the red and green dots, but they are not the same.
The first thing I tried to use the colors below the real points is collecting them in an array using voronoi.getSites() before drawing the polygons to the screen using voronoi.getRegions(). The result wasn't quite what I expected. The getSites() and getRegions() don't return the voronoi regions and points in the same order. You can see the result in the image below, the code is available in the folder voronoi_monalisa_002. The second method I've tried was somewhat similar an can be found in the folder voronoi_monalisa_003.
The only way to use the real voronoi points is to use a nested loop that iterates over all regions and checks all points if they are inside the polygon. This might be ok if you only have 50 points, but the function gets really expensive if you use a few thousand points. But you get the best possible result, as you can see in the image below. The code for the final image can be found in the folder voronoi_monalisa_004.
Download
The examples for this Toxiclibs tutorial are available for download so you can create your own voronoi paintings. Have fun coding!
