Circle Packing Study
Crafting an image involves major pillars:
Form = Layout (macro) + Detail and Texture (micro)
Color
Concept
This essay is a collection of my notes from studying the circle packing algorithm as a grid for arranging objects in an image.
Circle Packing Algorithm Overview
My introduction to circle packing came from a tutorial by generative artistry: https://generativeartistry.com/tutorials/circle-packing/
Circle packing is a simple algorithm that is good for teaching generative art. Briefly, the circle packing algorithm tries to place as many circles as possible in a space as possible without overlapping the circles. Reference Figure 1 for a circle packing example.
The pseudocode for circle packing looks something like this:
The following inputs are specified:
Boundaries of the image/space
Maximum number of circles to pack in the space
Smallest and largest diameter circle that are allowed
Pick a random point within the image to be the midpoint of a circle.
Check if that point is inside any existing circles.
If the attempted midpoint is inside an existing circle, try a new midpoint.
Find the largest diameter possible for the circle without colliding into another existing circle.
Repeat until the maximum number of circles has been generated.
Figure 1
Sample circle packing image.
The following sections of this essay examines 3 ratios that drive the look and feel of a circle packing grid:
Min-Max Diameter Ratio
Max Diameter Ratio
Min Diameter Ratio
Min-Max Diameter Ratio
The first ratio to examine is the min-max diameter ratio, which looks at the difference between the largest and smallest circles in the circle packing grid. This is perhaps the most important ratio to think about in designing a circle packing grid, because ratio alone can make a grid look like the pores in a section of foam (Figure 2a) to looking like soap bubbles (Figure 2d).
Figure 2a
maxDiam = 2x minDiam
On a relative basis, there is nearly no difference in size between the smallest and largest circles in the grid. When the circles are small, this yields a very uniform look. There is very little perceptual variety at this scale (i.e. if 100 circle packing grids at this scale, all 100 appear nearly identical to each other).
Figure 2b
maxDiam = 10x minDiam
At this min-max diameter ratio, the larger circles start to look visually different, and voids start appearing in contrast to the denser regions of the grid.
Figure 2c
maxDiam = 100x minDiam
At this min-max diameter ratio, the larger circles look very visually different from the smallest circles. There are many large voids within the grid. Perceptual variety increases substantially at this scale.
Figure 2d
maxDiam = 1000x minDiam
This extreme min-max diameter ratio illustrates the types of abstract compositions enabled by circle packing. Over 50% of the image is empty at this scale, and perceptual variety is very, very high (i.e. if 100 circle packing grids at this scale, all 100 appear very different from each other).
Max Diameter Size
The second ratio to examine is the max diameter size relative to the short side of image. In terms of perceptual impact and variety, this ratio is just as important as the min-max diameter ratio.
Figure 3a
maxDiam = 0.5x shortSide
This max diameter size ratio will serve as a baseline for comparison. Note the bubble-like appearance.
Figure 3b
maxDiam = 1x shortSide
As the max diameter increases, the amount of negative space increases. If the diameters of each circle are analyzed, they will likely follow a power law distribution.
Figure 3c
maxDiam = 4x shortSide
At extreme max diameter ratios, the extent of negative space caused by the large circles creates compositions that start looking less like a circle packing grid. This image for example, could look like a stack of things piled over a hill. Also note that perceptual variety is very high in at these max diameter size ratios.
Min Diameter Size
The last ratio to examine is the min diameter size relative to the short side of image. This ratio largely drives the density of the circle packing. As the min diameter gets smaller, the circle packing grid becomes denser, and vice versa.
Figure 4a
minDiam = 0.01x shortSide
This min diameter size ratio will serve as a baseline for comparison. Note the packing density.
Figure 4b
minDiam = 0.001x shortSide
This image uses a min diameter ration that is 10x smaller than Figure 4a, which yielded a far tigher packing density. There is nearly no negative space between neighboring circles.
Lessons for Composition / TL;DR
Grids are a fundamental tool for controlling an image’s layout and composition. The circle packing algorithm is a non-traditional way of creating a grid for an image.
Circle packing is a basic algorithm that can be used to create “grids” for arranging objects on an image. This essay examined 3 circle packing ratios:
Min-Max Diameter Ratio
Max Diameter Size Ratio
Min Diameter Size Ratio
Varying the above 3 ratios will control the feel of the circle packing grid. The grid can range from just being many uniform looking circles to looking like abstract landscapes.
In additional to yielding visually different images, the above 3 ratios has a large impact of perceptual variety, which is an important factor to consider for long-form generative algorithms.
As the min-max diameter ratio increases, the diameter distribution gets increasingly fat tailed (i.e. power law). This means the circle packing grid can be used as a power law layout tool.