Voronoi Paintings with Toxiclibs

Posted by Jan Vantomme on 28 July 2011.
Tags: , ,

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
(450360);  
    
gfx = new ToxiclibsSupportthis );
    
voronoi = new Voronoi();  
    for ( 
int i 050i++ ) {
        voronoi
.addPoint( new Vec2Drandom(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
.polygon2Dpolygon );

If all goes well, your image should look like the one below. The code for this sketch can be found in the folder voronoi001.

A Voronoi diagram made with Toxiclibs.

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.

A Voronoi diagram made with Toxiclibs, showing the points that make up the diagram.

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.

Mona Lisa, painted with a Voronoi diagram.

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.

Mona Lisa, painted with a Voronoi diagram.

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.

Mona Lisa, painted with a Voronoi diagram.

Download

The examples for this Toxiclibs tutorial are available for download so you can create your own voronoi paintings. Have fun coding!

Tweet this article

Oldskool Comments (3)

Gravatar for Antoni Kaniowski

From: Antoni Kaniowski
Date: 24.08.2011

A nicely narrated tutorial. I never really liked voronoi diagrams but this was an interesting read.

Top · Permanent link to this comment

Gravatar for Ravi Joisher

From: Ravi Joisher
Date: 19.11.2011

I liked the post. It is very informative. I wanted to know if it is possible to re-color any specific Voronoi region.

Top · Permanent link to this comment

Gravatar for Jan Vantomme

From: Jan Vantomme
Date: 20.11.2011

It should be possible to color any region in any color you want. What exactly do you want to do with it?

Top · Permanent link to this comment