mahnoor·fatima

computational creative direction

ATLAS

Voronoi identity for a geospatial infrastructure company

TERRITORY Drag a site to redraw its territory, click open ground to found one

SEED 0X0BDF RENEGOTIATING

ATLAS

Volume VII — A geospatial infrastructure company

Computational Creative Direction — Voronoi Tessellation

The research question

What if a brand behaved according to one computational law — the rule that divides all of space by nearest allegiance, the way crystals pack and tectonic plates meet?

ATLAS builds the infrastructure that assigns the world to its nearest resource: which server, which warehouse, which cell tower, which grid serves any given point on the map. That is, at its heart, one geometric operation — Voronoi tessellation. So the identity doesn’t decorate that idea; it is that idea. Every ATLAS surface is a partition of space into territories, and the territories redraw themselves whenever the seeds move.

The computational principle

A Voronoi diagram takes a set of seed points and divides a plane into cells — one per seed — where every location belongs to the cell of its nearest seed. It is how nature packs soap bubbles, crystal grains, giraffe patches, and cracked mud; it is how cartographers draw service areas; it is how tectonic plates tile the Earth. Move one seed and the whole mosaic renegotiates its borders. Boundaries are never drawn — they are the emergent consequence of where the seeds sit.

The behavior engine

One seed set drives the mark, the type, the maps, and the motion. Borders are computed, never authored.

// Voronoi via nearest-seed assignment — the ATLAS engine
class Atlas {
  constructor(seeds) { this.seeds = seeds; }   // [{x, y, vx, vy, id}]

  // which cell does a point belong to? (nearest seed) + edge detection
  cellAt(x, y) {
    let best = -1, bestD = Infinity, second = Infinity;
    for (const s of this.seeds) {
      const d = (x - s.x) ** 2 + (y - s.y) ** 2;
      if (d < bestD) { second = bestD; bestD = d; best = s.id; }
      else if (d < second) { second = d; }
    }
    // near-equal nearest + second nearest => we are on a border
    const onEdge = Math.abs(Math.sqrt(bestD) - Math.sqrt(second)) < 1.5;
    return { cell: best, edge: onEdge };
  }

  // Lloyd relaxation: move each seed toward its cell's centroid.
  // Repeated, this settles the tessellation into calm, even territories.
  relax(w, h, step = 8) {
    const sum = this.seeds.map(() => ({ x: 0, y: 0, n: 0 }));
    for (let y = 0; y < h; y += step)
      for (let x = 0; x < w; x += step) {
        const { cell } = this.cellAt(x, y);
        const acc = sum[cell]; acc.x += x; acc.y += y; acc.n++;
      }
    this.seeds.forEach((s, i) => {
      if (sum[i].n) {
        s.x += ((sum[i].x / sum[i].n) - s.x) * 0.1;
        s.y += ((sum[i].y / sum[i].n) - s.y) * 0.1;
      }
    });
  }

  drift() { for (const s of this.seeds) { s.x += s.vx; s.y += s.vy; } }
}

Lloyd relaxation is the conceptual heart: left alone, ATLAS’s territories settle into a calm, crystalline balance — the visual of infrastructure that has found its equilibrium.

The visual language

Every ATLAS surface is a tessellation — space cleanly divided into cells with computed borders. The aesthetic is geological and precise: faceted, angular, mineral. The mark is a small constellation of seeds and the crystal lattice they generate; because the seeds carry position, the exact facets differ every time, but the packing always reads as ATLAS — dense, structural, load-bearing.

Living typography

Letters are built from cells. Each glyph is a region of the tessellation, its silhouette formed by the borders between cells that fall inside and outside the letterform. As seeds drift, the facets shift — type looks carved from crystal that is slowly recrystallizing. Push the seed count up and letters sharpen into fine mosaic; pull it down and they read as bold, blocky plates.

Motion rules

  • Seeds drift, borders renegotiate. Nothing else moves; all motion is a consequence of seeds relocating and cells redrawing.
  • Relaxation on rest. When idle, the tessellation runs Lloyd relaxation and visibly settles into even, calm territory.
  • Load fractures. Live infrastructure load data adds seeds to busy regions, so heavily-used territories subdivide into finer cells — the map shows strain as detail.
  • Hover claims territory. The cursor becomes a temporary seed; its cell blooms open and pushes neighbors aside.

Interactive website

The site is a map you resolve. Content lives inside cells; navigating means a seed gliding to a new position and the tessellation reflowing around it, borders sweeping across the screen. Because seeds carry velocity, the layout is always mid-negotiation — the same crystalline logic whether you’re looking at the logo or a live coverage map of the network.

Physical applications

  • Data-center and network maps: real coverage rendered as live Voronoi regions — the brand and the product diagram are identical.
  • Wayfinding: facility signage tessellated to its actual service territory.
  • Print & reports: each captured at a unique relaxation state, stamped with its seed configuration.
  • Interactive floor maps: visitors add seeds by standing on sensor tiles, watching the territory redraw beneath them.

The brand system

Guidelines define tessellation states: named packings (Plate, Crystal, Fracture, Mosaic, Relaxed) each specifying seed density, drift, border weight, and legibility. “On-brand” means the tessellation sits in a valid state for context — a stable-status page runs Relaxed; an incident dashboard runs Fracture (dense, subdividing, urgent).

Color: basalt, slate, quartz white, copper ore, sulfur, deep magma. Cell area maps to hue — the smallest, most-loaded cells glow toward magma and sulfur; the largest calm cells stay slate.

Open-source behavioral library

Shipped as atlas.js, an eight-verb API over the tessellation:

const map = new Atlas(canvas, { seeds: 24 });

map.Seed(point);          // add a site — a new territory appears
map.Claim(point);         // move a seed — borders renegotiate
map.Relax(iterations);    // Lloyd relaxation — settle to even, calm cells
map.Fracture(region);     // inject seeds — subdivide into finer facets
map.Merge(a, b);          // remove a seed — neighbors absorb its territory
map.Drift(field);         // give seeds velocity along a vector field
map.Border(weight);       // emphasize or soften the computed edges
map.Crystallize();        // freeze the current tessellation to a fixed lattice

Reflection

ATLAS was about making structure feel inevitable rather than imposed. The power of Voronoi is that no one draws the borders — they fall out of where the seeds are — so the map always feels correct, like it couldn’t have been divided any other way. The design work was almost entirely in seed placement and relaxation tempo; the borders take care of themselves, which is exactly the story an infrastructure company wants to tell.

The idea I’d keep: when a product’s job is to partition the world, let the identity perform that partition live. ATLAS’s mark isn’t a picture of coverage — it’s the same computation the network runs, shown at brand scale.