Quadrant-based composition is a simple yet powerful way to introduce structure into generative graphics. You divide the canvas into four regions—top-left, top-right, bottom-left, bottom-right—and treat each as a separate zone with its own rules. This gives you a consistent spatial scaffold while still allowing variation within each zone.
Imagine a poster-sized canvas. You split it vertically at 40% and horizontally at 60%. Now the top-left quadrant is small and intimate, while the bottom-right quadrant is large and dominant. You can let the vector decide these splits so the overall balance shifts across outputs, but the concept of four zones remains constant.
Why Quadrants Work
Quadrants provide contrast by default. The human eye expects balance and symmetry, but it also enjoys asymmetry. Quadrants give you a system that can do both. You can make the splits perfectly centered for symmetry, or skew them to create tension.
They also allow thematic separation. Each quadrant can carry a distinct identity—different shape types, densities, or color palettes—while still feeling part of a single composition.
Splits as Core Parameters
Quadrant systems are defined by two values:
- Vertical split (x-axis)
- Horizontal split (y-axis)
These values determine the proportions of the four regions. By mapping the first two values of a vector to these splits, you let the vector shape the entire canvas layout.
If the vertical split is 30%, the left quadrants are narrow and the right quadrants are wide. If the horizontal split is 70%, the top quadrants are tall and the bottom quadrants are short. Small changes in these values lead to significant shifts in composition.
Assigning Identities to Quadrants
Once you have the quadrants, you can assign rules to each:
- Top-left: circles only
- Top-right: rectangles only
- Bottom-left: grids
- Bottom-right: radial patterns
The vector can control these assignments. For instance, indices 14–17 might select shape types for each quadrant.
You can also vary density per quadrant. One quadrant might hold 2 shapes, another 15. This creates a sense of rhythm and contrast.
Constraining Placement
One of the challenges in generative systems is keeping elements contained. In quadrant systems, you restrict shape placement to the boundaries of the quadrant. This maintains the visual separation between regions and prevents overlap.
You can implement placement by:
- Scaling offsets to quadrant width and height
- Clamping positions to quadrant boundaries
- Adjusting patterns to fit within each region
These constraints give the composition cohesion.
Color Strategies
A common approach is to assign each quadrant a background color based on the vector. Then, you generate shapes in a contrasting color so they remain legible. This can be done by selecting the most readable color from a palette or using a contrast function.
This ensures that each quadrant has a distinct atmosphere but that the shapes remain visible.
Multi-Quadrant Coherence
The challenge is maintaining unity across quadrants. If each quadrant has entirely different rules, the image can feel fragmented. You can preserve coherence by:
- Sharing a color palette across quadrants
- Using consistent shape sizes
- Keeping one global pattern motif
The vector can control these global parameters while still allowing each quadrant to vary locally.
Applications
Quadrant systems are especially useful for:
- UI background generation
- Poster or album art experiments
- Personalization systems that need fast variation
- Visual identity systems with consistent structure
They allow you to produce outputs that feel designed rather than arbitrary.
Quadrant-based composition is the simplest structured generator that can produce rich, varied images. It provides a stable skeleton for your generative system, making it an excellent foundation for more complex visual grammars.