mahnoor·fatima

computational creative direction

TIDE

Cellular automata identity for a luxury ocean-conservation foundation

COAST Drag to raise new land

SEED 0XD54F TIDE 50%

TIDE

Volume III — A luxury ocean-conservation foundation

Computational Creative Direction — Cellular Automata

The research question

What if a brand behaved according to one computational law — the rule by which each cell knows only its neighbors, yet a whole coastline emerges?

TIDE is a conservation foundation that has to feel both luxurious and enormous — patient, oceanic, older than any campaign. The insight: the ocean has no designer. Its patterns are the sum of billions of purely local exchanges. TIDE’s identity is built the same way — from cells that see only their immediate neighbors, out of which coastlines, tides, and foam emerge on their own.

The computational principle

The engine is cellular automata: a grid where each cell’s next state depends only on the states of the cells touching it. Conway’s Game of Life is the famous case, but TIDE uses a continuous, moisture-based automaton — each cell holds a water level, and simple neighbor rules produce flooding, erosion, sediment, and the fractal edge where sea meets land. Global ocean patterns emerge from local decisions, exactly as Wolfram described.

The behavior engine

One grid drives everything. Cells exchange “water” with neighbors under threshold rules; the emergent boundary is the brand’s coastline.

// Moisture cellular automaton — the entire TIDE engine
class TideGrid {
  constructor(w, h) {
    this.w = w; this.h = h;
    this.cells = new Float32Array(w * h);   // 0 = dry land ... 1 = deep water
    this.next  = new Float32Array(w * h);
  }

  neighbors(x, y) {
    const w = this.w, h = this.h, out = [];
    for (let dy = -1; dy <= 1; dy++)
      for (let dx = -1; dx <= 1; dx++) {
        if (!dx && !dy) continue;
        const nx = x + dx, ny = y + dy;
        if (nx >= 0 && nx < w && ny >= 0 && ny < h) out.push(nx + ny * w);
      }
    return out;
  }

  step(tideLevel = 0.5, erosion = 0.02) {
    const { w, h, cells, next } = this;
    for (let y = 0; y < h; y++) {
      for (let x = 0; x < w; x++) {
        const i = x + y * w;
        const nb = this.neighbors(x, y);
        let wet = 0, sum = 0;
        for (const j of nb) { sum += cells[j]; if (cells[j] > 0.5) wet++; }
        const avg = sum / nb.length;
        // local rule: drift toward neighbor average, pulled by the tide,
        // and eroded where wet meets dry (the coastline)
        let v = cells[i] + (avg - cells[i]) * 0.25;
        v += (tideLevel - 0.5) * 0.1;
        if (wet > 2 && wet < 6) v += erosion;         // active shoreline erodes
        next[i] = Math.max(0, Math.min(1, v));
      }
    }
    this.cells.set(next);
  }

  coastline() {                                       // cells straddling the edge
    const edge = [];
    for (let i = 0; i < this.cells.length; i++)
      if (this.cells[i] > 0.45 && this.cells[i] < 0.55) edge.push(i);
    return edge;
  }
}

tideLevel is TIDE’s master dial — and, crucially, it’s wired to real astronomy.

The visual language

Every TIDE surface has a coastline — the emergent boundary between the automaton’s wet and dry cells — and that line is the brand’s signature gesture. It is never drawn; it is always computed, so it is fractal, specific, and unrepeatable, like a real shore. Luxury here comes from restraint: vast fields of near-empty water, a single precise coast, generous negative space that reads as depth.

Living typography

Letters begin as land — dry cells shaped like glyphs — and the tide comes in. As the automaton runs, water floods the counters and laps the stems; every headline literally becomes a coastline, its edges eroded into foam. At low tide the type is solid and readable; at high tide it dissolves into archipelago. Legibility follows the moon.

Motion rules

  • Time of day changes the coast. The automaton’s tide level is bound to the local clock; the site’s coastline at dawn differs from dusk.
  • Moon phase changes layout. Spring tides (new/full moon) flood more aggressively than neap tides — the identity is quieter mid-month.
  • Weather API affects the surface. Live wind and swell data add turbulence to the cells; a storm offshore roughens the brand.
  • Scroll is a wave. Scrolling sends a pulse of water across the grid that breaks and recedes.

Interactive website

The site is a slow tidal system. Rather than pages, it has states of the tide — content is revealed as water recedes and concealed as it returns, so the same visitor returning six hours later finds a different composition. It rewards patience, which is the entire ethos of conservation.

Physical applications

  • Museum walls: long horizontal e-ink or projection panels running the automaton at real tidal speed — the exhibition’s coastline shifts over the day.
  • Tickets and print: each printed at a captured tide state, stamped with its moon phase and timestamp; no two are alike.
  • Interactive tables: visitors touch the surface to part the water, watching the coast reform under local rules.
  • Water projections: the automaton mapped onto real reflecting pools in the foundation’s spaces.

The brand system

Guidelines are expressed as a tide table, not a style sheet: named tide states (Deep, Ebb, Slack, Flood, Spring, Neap) each with a permitted composition and typographic legibility band. “On-brand” means the automaton is running at a valid tide state for the context — a gala invitation runs at Slack tide (calm, legible); an activist campaign runs at Spring (turbulent, urgent).

Color: deep ocean, kelp, seafoam, sand, coral, storm. Water depth maps to hue — the deepest cells are near-black ocean, the coastline glows seafoam.

Open-source behavioral library

Shipped as tide.js, an eight-verb API over the automaton:

const sea = new Tide(canvas);

sea.Expand(region);     // raise local water — land is claimed
sea.Erode(edge);        // wear down the coastline into foam
sea.Flood(level);       // raise the global tide
sea.Retreat(level);     // lower it — reveal land and type
sea.Merge(a, b);        // let two bodies of water join
sea.Current(dir, force);// bias neighbor exchange in a direction
sea.Sediment(region);   // deposit — dry cells accrete into new land
sea.Foam(edge);         // agitate the coastline band

Reflection

TIDE taught me that slowness can be a design material. The brand’s most distinctive quality is that it changes at the speed of the moon — too slow to watch, impossible to fake, and completely resistant to the “make it pop” reflex. Binding the system to real astronomical and weather data meant giving up frame-by-frame control in exchange for something no amount of art direction can buy: genuine, unrepeatable specificity.

The larger idea: for a cause that operates on geological time, an identity that visibly obeys the tides is more persuasive than any logo. The coastline is never the same twice, and that is precisely why you trust it.