Art, design & a little curiosity
Creative coding ↗

Packing circles for generative art

Grow a field of nonoverlapping circles with explicit boundary checks and a stopping budget, then use the gaps as an active part of the artwork.

An original type poster study exploring circle packing generative art.
Type poster / Original digital study

Growth around meaningful empty space

Circle packing begins with a deceptively simple promise: circles should occupy available room without crossing one another. The gaps are just as important as the discs. A lively packing can contain several scales of empty space instead of becoming an indiscriminate field of tiny dots.

Reject collisions before growing circles

Place a candidate circle with a small starting radius. Reject it if it intersects an existing circle or a border. Grow accepted circles until another growth step would create a collision. Compare center distance with the sum of radii, including any intended gap.

Make minimum circle radius explicit in the working notes before building the full piece. Work from a rough thumbnail or a small physical mockup. Mark the feature that must remain stable and the feature that is allowed to change. Those marks provide a reference when several plausible variations begin competing for attention. A useful acceptance check is whether the largest gaps feel intentional rather than unfinished. Judge that at the intended viewing size or working distance, where tiny construction mistakes and exaggerated effects can have very different consequences.

Limit unsuccessful placement attempts

A candidate search can run for a very long time when the field is nearly full. Set a maximum number of failed attempts and stop gracefully. If circles overlap only slightly, verify whether the gap is included in both placement and growth checks.

When the result becomes confusing, return minimum circle radius to its recorded starting point. Temporarily show construction points and intermediate values. Reduce repeated elements to a handful and pause anything that changes over time.

Reserve a crescent of empty space

Reserve a simple empty region before adding circles. Compare the resulting flow with an unrestricted packing. Then change the minimum radius. This demonstrates how an exclusion area and a scale limit can create direction without drawing a literal path.

Make three comparison versions using 3, 8, and 16 pixels. Choose one visible feature to compare before starting. Inspect it across the entire set rather than letting the most dramatic result dictate the criterion afterward. Keep both a preferred version and a useful failed version, with a short note describing the difference between their behavior.

Separate touching from overlapping

Write the collision rule as a comparison of center distance with radius A plus radius B plus the desired gap. Decide whether exact equality counts as permitted contact. Use that decision consistently for candidate placement and later growth. When you change the gap, regenerate the packing instead of merely shrinking the finished discs; those operations can leave very different distributions of available space around the reserved corridor. Inspect the largest circles first, because a small overlap there can distort the corridor's intended outline.

A worked example

Discs around a crescent corridor

Pack discs around an invisible crescent-shaped corridor. Use large circles first and allow only a modest number of smaller ones afterward. Leave the corridor unoutlined; the neighboring circles should make its shape apparent through their arrangement.

References & further reading

Examples and exercises in this guide are original teaching scenarios.

Keep following the thread.

More creative coding ↗