Back to posts
#coding #generative-art

Building a Cellular Automata Background

There’s something mesmerizing about watching patterns emerge from simple rules. When I set out to build the background for this site, I wanted something that felt alive—computed, not drawn.

The Vision

I wanted a background that:

  • Feels technical and modern without being gimmicky
  • Evolves slowly and tastefully
  • Stays secondary to the content
  • Works in grayscale

Reaction-Diffusion

The Gray-Scott model is a classic reaction-diffusion system. It simulates the interaction between two chemical substances—an activator and an inhibitor. The patterns that emerge look organic, like coral growth or animal markings.

// Simplified Gray-Scott reaction
const reaction = a * b * b;
a += diffusionA * laplacianA - reaction + feed * (1 - a);
b += diffusionB * laplacianB + reaction - (kill + feed) * b;

Diffusion-Limited Aggregation

DLA creates branching, tree-like structures. Particles wander randomly until they hit an existing aggregate and stick. The result looks like frost on a window or lightning bolts.

Combining Both

By layering these two systems—using reaction-diffusion for the organic blob patterns and DLA for the branching structures—I get a background that feels both computed and natural.

The ASCII characters provide a nice constraint. Instead of smooth gradients, I map intensity to a curated palette of dots and circles. This gives it that “terminal modern” aesthetic.

Performance Considerations

Running cellular automata in the browser requires some care:

  1. Frame skipping: Only update every 60ms instead of every frame
  2. Visibility detection: Pause when tab is hidden
  3. Reduced motion: Respect prefers-reduced-motion
  4. Mobile optimization: Static render for low-power devices

The result is a background that feels alive without draining your battery.