Once you know what shapes to draw, the next challenge is how to place them. Pattern algorithms are the rules that determine arrangement: grids, circles, scatters, or more complex motifs. They are the choreography of your composition.
Pattern choice changes the visual personality of a system. A grid feels orderly and architectural. A radial pattern feels organic and energetic. A scatter feels chaotic or playful.
Grid Patterns
Grid placement is the simplest and most structured option. You define the number of rows and columns and distribute shapes evenly. This creates a sense of alignment and calm.
Grid placement is especially useful for:
- High density layouts
- Visual uniformity
- Readable, stable patterns
To keep shapes inside a quadrant, you calculate positions relative to its boundaries and ensure spacing (gaps) between shapes.
Circular and Radial Patterns
Circular patterns place shapes on a ring around a center point. They introduce motion and focus. You can control the radius, angle step, and number of elements.
Radial patterns can also be layered, with multiple rings or spirals. These create a sense of depth even in 2D.
Scatter Patterns
Scatter patterns mimic randomness but can still be deterministic. You use vector-derived offsets or a seeded PRNG to place shapes at arbitrary positions.
Scatter is useful for creating texture or noise, but it can quickly become messy. Constraining positions to subregions or using a minimum distance between shapes keeps it readable.
Pattern Selection
A vector can determine which pattern to use. For example:
- 0: grid
- 1: circle
- 2: scatter
You can assign a pattern per quadrant, or choose a global pattern for consistency.
Density and Scale
Patterns are shaped by density. A grid of 4 shapes feels minimal; a grid of 20 feels busy. You can map vector values to shape counts to scale density.
Shape size can scale inversely to density to avoid overlap: more shapes, smaller sizes.
Constraints and Boundaries
Pattern algorithms must respect boundaries. If shapes overflow, the composition becomes noisy or ambiguous. You can enforce boundaries by:
- Clamping positions
- Reducing size near edges
- Skipping shapes that would overflow
This keeps the output clean.
Combining Patterns
You can blend patterns for richness. For example:
- Background uses a grid
- Foreground uses a radial pattern
- Accents use scatter
The key is to ensure these layers share some consistent parameters, such as a palette or a spacing rhythm.
Practical Example
Imagine a quadrant system where each quadrant’s pattern is chosen by the vector:
- Top-left: grid of circles
- Top-right: radial rectangles
- Bottom-left: scatter of triangles
- Bottom-right: sparse grid
Even with different patterns, the shared palette and quadrant structure keep the composition unified.
Pattern algorithms are the movement grammar of generative graphics. They transform static shape definitions into living compositions that feel designed rather than arbitrary.