mahnoor·fatima

computational creative direction

AETHER

Boids / swarm intelligence identity for an atmospheric technology company

FLOCK Move to gather the flock, hold to scatter it

SEED 0X30A4 NEGOTIATING

AETHER

Volume II — An atmospheric technology company

Computational Creative Direction — Boids / Swarm Intelligence

The research question

What if a brand behaved according to one computational law — the flocking rule that lets a thousand birds move as one body with no leader?

AETHER builds urban air-quality technology: invisible systems with visible impact. An identity made of fixed objects would contradict the product. So nothing in AETHER is an object. Every visual element is an agent in a flock, and the logo is not a shape but a temporary agreement between hundreds of particles that are constantly negotiating equilibrium and never quite settling.

The computational principle

The engine is Boids, Craig Reynolds’ 1986 model of coordinated animal motion. Each agent follows three local rules — separation, alignment, cohesion — using only its nearest neighbors. No agent can see the whole flock; no agent is in charge. Global order emerges from local courtesy. That is exactly the story AETHER tells about air: individually invisible molecules, collectively a system you can measure and steer.

The behavior engine

Every particle is a boid. The mark, the type, the motion graphics, and the data dashboards all read from one flock.

// Reynolds boids — the entire AETHER engine
class Boid {
  constructor(x, y) {
    this.pos = { x, y };
    const a = Math.random() * Math.PI * 2;
    this.vel = { x: Math.cos(a), y: Math.sin(a) };
    this.acc = { x: 0, y: 0 };
    this.maxSpeed = 3; this.maxForce = 0.05;
  }

  flock(boids, { sep = 1.5, ali = 1.0, coh = 1.0, range = 50 } = {}) {
    let s = { x: 0, y: 0 }, a = { x: 0, y: 0 }, c = { x: 0, y: 0 }, n = 0;
    for (const o of boids) {
      if (o === this) continue;
      const dx = this.pos.x - o.pos.x, dy = this.pos.y - o.pos.y;
      const d = Math.hypot(dx, dy);
      if (d > 0 && d < range) {
        s.x += dx / d; s.y += dy / d;          // separation: steer away
        a.x += o.vel.x; a.y += o.vel.y;        // alignment: match heading
        c.x += o.pos.x; c.y += o.pos.y;        // cohesion: seek center
        n++;
      }
    }
    if (n > 0) {
      this.applySteer(s, sep);
      this.applySteer({ x: a.x / n, y: a.y / n }, ali);
      this.applySteer({ x: c.x / n - this.pos.x, y: c.y / n - this.pos.y }, coh);
    }
  }

  applySteer(vec, weight) {
    const m = Math.hypot(vec.x, vec.y);
    if (m === 0) return;
    const desiredX = (vec.x / m) * this.maxSpeed;
    const desiredY = (vec.y / m) * this.maxSpeed;
    let fx = desiredX - this.vel.x, fy = desiredY - this.vel.y;
    const fm = Math.hypot(fx, fy);
    if (fm > this.maxForce) { fx = fx / fm * this.maxForce; fy = fy / fm * this.maxForce; }
    this.acc.x += fx * weight; this.acc.y += fy * weight;
  }

  update() {
    this.vel.x += this.acc.x; this.vel.y += this.acc.y;
    const sp = Math.hypot(this.vel.x, this.vel.y);
    if (sp > this.maxSpeed) { this.vel.x = this.vel.x / sp * this.maxSpeed; this.vel.y = this.vel.y / sp * this.maxSpeed; }
    this.pos.x += this.vel.x; this.pos.y += this.vel.y;
    this.acc.x = 0; this.acc.y = 0;
  }
}

The three weights — separation, alignment, cohesion — are AETHER’s tuning knobs, the same role feed/kill play for MYCELIA.

The visual language

AETHER’s mark is an attractor pattern: the flock is given an invisible target field shaped like the wordmark, and the boids swarm toward it without ever locking to it. From two feet away you read “AETHER”; up close you see hundreds of independent particles jittering around the letters. The identity is legible and unstable at the same time — the visual signature of a well-run system holding a soft equilibrium.

Living typography

Letters are not glyphs but target densities. Each character is a cloud of attraction points; boids fill it, spill from it, and reform. Type “breathes”: cohesion rises and the word tightens, separation rises and it dissolves toward particles. Set a headline and it never sits still — it constantly re-negotiates its own shape, exactly like an air mass.

Motion rules

  • Mouse repels. The pointer is a predator; letters scatter away from it and slowly re-cohere behind it.
  • Gyroscope is wind. On mobile, device tilt injects a directional force — you pour the flock across the screen.
  • Migration. Across breakpoints and page transitions, the flock physically travels from old layout to new rather than cutting.
  • Data is turbulence. Live air-quality readings modulate separation: cleaner air, calmer flock; pollution spikes make the identity agitated.

Interactive website

The homepage is one continuous flock spanning every section. Scrolling changes the attractor field, so the same particles that spelled the logo migrate down to form a chart, then a headline, then a footer — a single organism carrying you through the site. Nothing loads or unloads; it all flows.

Physical applications

  • Airport installations: ceiling-scale LED swarms driven by the terminal’s real sensor feed — travelers watch the building’s air breathe.
  • Environmental dashboards: the flock is the data visualization; density and agitation encode particulate levels without a single axis label.
  • Projection mapping on building façades, the boids responding to wind sensors on the roof.
  • Drone formations for launch events — the same three rules, executed by real aircraft.

The brand system

Guidelines define three regimes of the weight-space: Calm (high cohesion, for trust-building contexts), Alert (high separation, for warnings and data spikes), and Migrate (aligned, directional, for transitions). “On-brand” means the flock is running live within these regimes — a static export is treated as a still frame of something that should be moving.

Color: morning fog, air white, silver, electric cyan, storm blue. Velocity maps to hue — fast agents run cyan, settled agents cool to fog.

Open-source behavioral library

Shipped as aether.js, an eight-verb API over the flock:

const flock = new Aether(canvas, { count: 800 });

flock.Separate(weight);     // increase personal space — identity disperses
flock.Align(weight);        // match headings — identity streams
flock.Cohere(weight);       // pull to local center — identity condenses
flock.Avoid(point, force);  // add a repulsor (cursor, predator, obstacle)
flock.Swarm(targetField);   // supply an attractor shape (a letter, a logo)
flock.Orbit(center, radius);// circulate around a point
flock.Scatter();            // spike separation — full dispersal
flock.Reassemble(shape);    // ramp cohesion toward a target form

Reflection

AETHER’s discipline was holding a shape without freezing it. The temptation is to over-weight cohesion until the flock snaps into a clean logo — at which point the whole argument collapses and you’ve just built an expensive way to draw a wordmark. The identity only works while it’s still slightly wrong, still adjusting.

The lasting lesson: for a company whose product is invisible, the most honest mark is one you can never fully pin down. AETHER made instability into a trust signal — a system visibly, continuously keeping itself in balance.