MYCELIA

Volume I — A regenerative materials laboratory

Computational Creative Direction — Reaction-Diffusion

The research question

What if a brand behaved according to one computational law — the same law that grows a leopard’s spots?

Most identities are drawn. A designer decides where a line goes and the line stays there forever. MYCELIA asked the opposite question: what would an identity look like if no one drew it — if it grew? Not “organic-looking” graphics, but a system that is actually alive on the surface, colonizing, aging, and occasionally becoming unreadable. The brief was to build a brand that behaves like the material the company sells: fungal, self-propagating, never finished.

The computational principle

The whole system runs on reaction-diffusion, the mechanism Alan Turing proposed in 1952 to explain how a featureless embryo decides where to put stripes and spots. Two virtual chemicals diffuse across a grid at different speeds and react where they meet. That single rule — with no artist, no intent — generates zebra stripes, coral, bacterial colonies, and the branching front of a mycelial network. It is the closest thing biology has to a design tool.

MYCELIA uses the Gray-Scott model, the most controllable member of the reaction-diffusion family. Two parameters — feed rate and kill rate — move the entire visual language from clean spots to nervous labyrinths to spreading rot. Those two numbers are the brand’s dial.

The behavior engine

Everything renders from one simulation loop. Chemical A is fed into the grid; chemical B consumes A to reproduce, then decays. Where B accumulates, the surface is “colonized” and turns to pigment.

// Gray-Scott reaction-diffusion — the entire MYCELIA engine
class ReactionDiffusion {
  constructor(w, h, { feed = 0.037, kill = 0.06, dA = 1.0, dB = 0.5 } = {}) {
    this.w = w; this.h = h; this.feed = feed; this.kill = kill;
    this.dA = dA; this.dB = dB;
    this.a = new Float32Array(w * h).fill(1);   // chemical A everywhere
    this.b = new Float32Array(w * h).fill(0);   // chemical B nowhere yet
    this.a2 = new Float32Array(w * h);
    this.b2 = new Float32Array(w * h);
  }

  // 3x3 Laplacian — how much a cell differs from its neighbors
  laplace(grid, x, y, self) {
    const w = this.w, i = x + y * w;
    let sum = -self;
    sum += (grid[i - 1] + grid[i + 1] + grid[i - w] + grid[i + w]) * 0.2;
    sum += (grid[i-1-w] + grid[i+1-w] + grid[i-1+w] + grid[i+1+w]) * 0.05;
    return sum;
  }

  step() {
    const { w, h, a, b, a2, b2, feed, kill, dA, dB } = this;
    for (let y = 1; y < h - 1; y++) {
      for (let x = 1; x < w - 1; x++) {
        const i = x + y * w;
        const abb = a[i] * b[i] * b[i];              // A + 2B -> 3B
        a2[i] = a[i] + (dA * this.laplace(a, x, y, a[i]) - abb + feed * (1 - a[i]));
        b2[i] = b[i] + (dB * this.laplace(b, x, y, b[i]) + abb - (kill + feed) * b[i]);
      }
    }
    this.a.set(a2); this.b.set(b2);
  }

  seed(x, y, r = 4) {                                // introduce a spore
    for (let dy = -r; dy <= r; dy++)
      for (let dx = -r; dx <= r; dx++)
        this.b[(x + dx) + (y + dy) * this.w] = 1;
  }
}

That is not a decorative snippet — it is the actual generator behind every logo lockup, poster, and letterform in the system. Change feed and kill and you move through the entire brand.

The visual language

The identity has no fixed marks, only states. A “healthy” MYCELIA surface sits at feed 0.037 / kill 0.060 — soft, branching filaments. Push the kill rate up and the network starves into isolated cells; push feed up and it blooms into overlapping colonies. The design system is delivered not as a logo file but as a parameter map: coordinates in the Gray-Scott plane, each one a mood.

Nothing repeats. Because every render starts from a different spore placement and runs a different number of steps, no two exports are identical — a constraint the brand treats as the point, not a bug.

Living typography

Every letter begins as a skeleton — a thin vector stroke — which is seeded into the simulation as chemical B. Reaction-diffusion then grows outward from the stroke. Early in the run the letters are crisp; left longer, filaments bridge the counters, serifs sprout, and adjacent letters merge into one colony. A headline set at 11pm and re-rendered at 6am is legibly the same word but visibly older.

The type has a lifespan. Some weights are defined as “young” (few steps), some as “mature,” some as “decaying” — the last deliberately crossing into partial illegibility, used only where atmosphere matters more than reading.

Motion rules

Hover grows. Cursor proximity increases local feed rate, so letters visibly colonize toward the pointer.
Idle sporulates. After inactivity, the system seeds new spores at random and the page slowly overgrows itself.
Dark mode accelerates. Night raises the growth rate — the brand is more alive after hours.
Cursor is nutrient. Distance from the pointer maps to feed availability; you are literally feeding the organism as you move.

Interactive website

The site is a single full-viewport canvas running the engine at 60fps. Navigation labels are grown, not typeset. Scrolling doesn’t move a page — it moves through time, aging the colony. Returning visitors never see the same homepage twice, because the simulation persists its final state between sessions and resumes from where it had grown to.

Physical applications

Packaging is inoculated per unit: each box runs the simulation with a serial-seeded spore, so every package carries a genuinely unique texture — provably one of a kind.
Retail walls use slow e-ink panels stepping the simulation once an hour; the store is visibly more overgrown by end of quarter.
Business cards are printed from individual runs — a stack of 500 is 500 different colonies.
Signage ages on a screen-print gradient tuned to the same feed/kill values, so physical and digital share one genome.

The brand system

MYCELIA’s guidelines are not a PDF of do’s and don’ts. They are the engine plus a parameter atlas: eight named regions of the Gray-Scott plane, a color-mapping spec, and rules for how long a given asset is allowed to grow. “On-brand” is defined as anything the engine produces within these bounds — an unusually permissive but rigorously bounded system.

Color maps chemical concentration to a palette drawn from the forest floor: deep soil, lichen, bone, mushroom white, spore yellow. High B-concentration reads as spore yellow; the substrate reads as deep soil.

Open-source behavioral library

The system ships as mycelia.js, an eight-verb API over the engine — the vocabulary the whole brand speaks:

const colony = new Mycelia(canvas);

colony.Grow(region, rate);      // raise feed locally — extend filaments
colony.Colonize(seedPoints);    // introduce spores at given coordinates
colony.Decay(region);           // raise kill locally — starve back to substrate
colony.Merge(a, b);             // let two colonies bridge and fuse
colony.Split(region);           // carve a diffusion barrier; one colony becomes two
colony.Mutate(deltaFeed, deltaKill); // shift the parameter point — new phenotype
colony.Dormant();               // freeze the simulation, preserve exact state
colony.Bloom(region);           // burst of feed — rapid overlapping growth

Releasing the library is a positioning move: MYCELIA doesn’t own a logo, it stewards a living system, and invites others to grow their own instances of it.

Reflection

The hard part of MYCELIA was not the mathematics — Gray-Scott is a well-worn model — but giving up authorship. A brand system normally exists to eliminate variance. This one exists to cultivate it, and the discipline moved from drawing marks to tuning conditions: setting feed and kill rates precise enough that the organism stays recognizable while never repeating.

What I’d carry forward: legibility and life are in direct tension, and the interesting work lives at the exact boundary where a letter is old enough to feel grown but young enough to still be read. MYCELIA is an argument that an identity can be a habitat rather than an object — something you maintain, not something you finish.