Cellular Noise

Value noise and gradient noise create smooth, flowing patterns. But nature also produces sharp boundaries: the edges of cells in a leaf, cracks in dried mud, the spots on a giraffe. These patterns arise from a different kind of noise entirely.

Cellular noise, also known as Worley noise after its inventor Steven Worley, divides space into irregular cells. Instead of blending random values, we measure distances to scattered points. The result is organic, cell-like structures that appear throughout the natural world.

The Core Idea

Imagine scattering seeds randomly across a surface. Each seed claims the territory closest to it. The boundaries form where two seeds are equidistant. This is a Voronoi diagram: a partition of space into cells, where each cell contains all points nearest to a particular seed.

In shaders, we do not actually store millions of seed positions. Instead, we use a clever trick: divide space into a regular grid, place one random seed per grid cell, and only check neighboring cells when computing distances. This makes the algorithm efficient enough for real-time rendering.

float voronoi(vec2 p) {
  vec2 i = floor(p);
  vec2 f = fract(p);
  float minDist = 1.0;
  
  for (int y = -1; y <= 1; y++) {
    for (int x = -1; x <= 1; x++) {
      vec2 neighbor = vec2(float(x), float(y));
      vec2 point = hash2(i + neighbor);
      float d = length(neighbor + point - f);
      minDist = min(minDist, d);
    }
  }
  return minDist;
}

The function returns the distance to the nearest seed point. This distance creates a smooth gradient within each cell, darkest at the seed and lighter toward the edges.

Notice how each cell has a smooth gradient from dark (near the seed) to light (far from it). The cell boundaries emerge naturally where the gradients from neighboring cells meet.

Distance Metrics

We have been using Euclidean distance: the straight-line distance from point to point. But other distance functions create dramatically different patterns.

Manhattan distance (also called taxicab distance) measures distance as if walking along a grid:

Chebyshev distance takes only the larger of the two axis distances:

Euclidean distance produces organic, rounded cells. Manhattan distance creates diamond-shaped cells with straight edges at 45 degrees. Chebyshev distance produces square cells aligned with the axes.

Each metric suggests different materials: Euclidean for biological cells, Manhattan for crystal structures, Chebyshev for tiled patterns.

F1, F2, and Beyond

The distance to the nearest seed is called F1. But we can also track the distance to the second-nearest seed, F2, and use these values in different ways.

F1 alone gives us the basic cellular pattern: bright centers fading toward edges.

F2 alone creates an inverted pattern: dark at the boundaries, bright in areas equidistant from multiple seeds.

F2 - F1 produces something remarkable: a pattern that highlights only the edges between cells. Where F1 and F2 are nearly equal, we are on a boundary. Where F1 is much smaller than F2, we are deep inside a cell.

The F2 - F1 pattern is especially useful for creating cracks, veins, or cell walls. The width of the bright edge region depends on how close F2 and F1 are, naturally varying with cell density.

Edge Detection

For sharper cell boundaries, we can apply smoothstep to the F2 - F1 value:

float edges = 1.0 - smoothstep(0.0, 0.05, f2 - f1);

This creates crisp lines exactly where cells meet. Adjusting the smoothstep range controls the line thickness.

Combining edge detection with cell coloring produces patterns like stained glass: distinct colored regions separated by dark outlines.

Animation and Time

Adding time to the seed positions creates cells that drift and merge:

vec2 point = hash2(i + neighbor);
point = 0.5 + 0.5 * sin(u_time + 6.28 * point);

The seeds now oscillate smoothly, and the cell boundaries flow organically as seeds approach and retreat from each other.

This creates patterns reminiscent of lava lamp bubbles or microscopic organisms. The motion feels alive because the cell boundaries respond naturally to the changing seed positions.

Natural Patterns

Cellular noise appears throughout nature:

• Giraffe spots: Dark F1 regions with lighter boundaries
• Dried mud cracks: F2 - F1 edges on a tan background
• Foam and bubbles: Bright F1 cells with dark edges
• Reptile scales: Colored cells with outlined boundaries
• Cell membranes: Thin F2 - F1 edges separating regions

The key to realistic results is choosing the right combination of distance metric, output value (F1, F2, or F2-F1), and color mapping. Often a bit of fBm noise mixed in adds the organic imperfection that makes patterns convincing.

Combining with Other Noise

Cellular noise works beautifully with the techniques from earlier chapters. Use fBm to warp the input coordinates for more organic cell shapes. Multiply by value noise to add texture within cells. Layer multiple scales of Voronoi for fractal-like detail.

vec2 warped = uv + fbm(uv * 3.0) * 0.2;
float cells = voronoi(warped * 5.0);
float texture = cells * (0.8 + 0.2 * noise(uv * 20.0));

The possibilities multiply when you combine these building blocks.

Key Takeaways

• Cellular noise divides space into regions based on distance to scattered seed points
• The grid-based algorithm checks only neighboring cells, making it efficient for real-time use
• Distance metrics shape cell geometry: Euclidean for organic, Manhattan for crystalline, Chebyshev for rectangular
• F1 is distance to nearest seed; F2 is distance to second-nearest
• F2 - F1 highlights cell boundaries, perfect for cracks, veins, and outlines
• Animating seed positions creates flowing, organic motion
• Cellular noise combined with value noise and domain warping produces rich, natural patterns