WILL KOEPPEN

multimedia storytelling with data and imagery


Pointillate: An Art and Animation Sandbox

Transform your image or video into pointillated art.

139 black circles on an orange wall in Ljubljana, Slovenia. Artist unknown.

Artists have used distributed dots (stippling) to create images since at least 1510 AD, when intaglio printers used awls and hammers to create small depressions in metal that would fill with ink and be transferred to paper. It was the continuation of a longer history of using the density of full-tone ink marks on a no-tone canvas to represent something in between — a half-tone. Four centuries later, the Pointillism movement of the 1800s shed lines altogether and used only daubs of paint to create forms, though they allowed themselves to use multiple colors.

Computer scientists like Deussen et al. (2000), Secord (2002), and others explored and published algorithms to apply stippling to digital images. They noted the widespread use of stipple drawings in certain scientific fields, especially archaeology, and their goal was to use math and CPU power to arrange dots that would imitate the stippling of scientific artists. Their work, called "weighted Voronoi stippling," has been ported into various languages, and now largely serves as a coding exercise.

As a lover of art and animation, my goals are different. I'm interested in the idea of visual sufficiency: how little of something can you show and have people recognize what it is? I'm also interested in movement in general and the emotions it can evoke, and the iterative steps that drive weighted Voronoi stippling is a way to add movement to a static image.

I developed a web app called Pointillate. It implements the weighted Voronoi stippling by Deussen and Secord, but it allows us to adapt the technique to a wider variety of images and mess with things a bit. Pointillate was used to create all of the following images and animations in the article.

How it works

The typical pathway of weighted Voronoi stippling. Upper left: the reference image. Upper right: seeds placed using randomized exclusion sampling. Lower left: initial Voronoi diagram calculation. Lower right: seeds and Voronoi cells after thousands of relaxation iterations.

Start with Seeds

You might have already created a mosaic using physical seeds in an art class. If you have, you applied glue to a canvas only in areas where you wanted the seeds to stick, and then you placed them, one by one.

In Pointillate, the "glue" is a probability function based on the reference image. If you value dark areas, then those parts of the image can be set to more readily let seeds stick. We count out a few thousand seeds and throw them all at the canvas. Some stick, but we'll pick up the seeds that didn't and throw them, again and again, until all the seeds are hanging on. This process is called randomized exclusion sampling.

Relax

Since we didn't carefully place the seeds, some will be close together, and some areas that had glue will still have gaps. We need them to spread out a little and fill in any gaps.

If you've ever been in a packed subway car when half of the people get off at a popular stop, you've approximated the movement described by Lloyd's Algorithm. There's a collective sigh of relief from the remaining riders, and we all take a few steps away from the squished person next to us until we reach a new, more comfortable equilibrium.

Mathematically, the algorithm starts by calculating the Voronoi diagrams for the seeds, which is a fancy way of describing the polygons that are formed when we draw a line half-way between every seed on the canvas. We then move each seed towards the center of its polygonal cell. We iteratively recalculate the Voronoi diagram and move the seeds to make them appear to drift across the canvas.

Gravitate

Following the original version of Lloyd's Algorithm to its relaxed ending would lead all of our seeds to be equidistant from each other. Well ordered, but not very interesting if they should be representing an image. Instead, we want seeds to be relaxed, but still grouped (weighted) towards certain areas of the canvas.

What has weight? For humans, we might gravitate towards the fireplace in a cold room or the kitchen at a party. Pointillate has our reference image, and we can choose if the dark or the light pixels should provide some light attraction to our seeds.

Play

The goal of the “Weighted Voronoi Stippling” of Secord (2002) was to quickly render an image with regularly-sized black dots. Pointillate can do that, but it can also do more.

We can set the size of the stipples to reflect values in the reference image. We can seed the canvas in light areas, but then give dark areas of the image gravity, or vice versa. Instead of the seeds, we can show the Voronoi cells or color them by the reference. We can use a video as a reference. "Swim far out if you want to."

This process is non-deterministic, so whatever you create will be different every time. Try it out.