mahnoor·fatima

computational creative direction

SOLIS

Particle-system identity for a renewable-energy company

EMISSION Move to steer the emitter, hold to flare it

SEED 0X95F6 PHOTONS LIVE

SOLIS

Volume IV — A renewable-energy company

Computational Creative Direction — Particle Systems

The research question

What if a brand behaved according to one computational law — the physics by which millions of independent photons add up to light?

SOLIS sells energy from the sun. A logo made of solid shapes would be the wrong medium for a company whose entire product is radiance. So SOLIS has no solid forms at all. Everything is built from particles — points of light that emit, reflect, absorb, and radiate — and the identity’s brightness is literally a function of energy. The brand glows in proportion to the power behind it.

The computational principle

The engine is a particle system: thousands of independent points, each carrying position, velocity, and a lifespan, born from emitters and shaped by forces. It is the standard model for anything diffuse and luminous — fire, smoke, sparks, starlight. SOLIS treats each particle as a photon and the identity as an emission: the mark is not a shape you draw but a quantity of light you release.

The behavior engine

One emitter system renders the logo, the type, the motion, and the data. Particle density encodes energy; the brighter the brand, the more power it represents.

// Photon particle system — the entire SOLIS engine
class Photon {
  constructor(x, y, energy = 1) {
    this.pos = { x, y };
    const a = Math.random() * Math.PI * 2, s = Math.random() * 2;
    this.vel = { x: Math.cos(a) * s, y: Math.sin(a) * s };
    this.energy = energy;          // brightness + size
    this.life = 1;                 // 1 -> 0
    this.decay = 0.005 + Math.random() * 0.01;
  }
  update(forces = []) {
    for (const f of forces) { this.vel.x += f.x; this.vel.y += f.y; }
    this.pos.x += this.vel.x; this.pos.y += this.vel.y;
    this.life -= this.decay;       // photons fade
    return this.life > 0;
  }
}

class SolisField {
  constructor() { this.particles = []; this.forces = []; }

  Emit(x, y, count, energy) {      // release light from a point
    for (let i = 0; i < count; i++) this.particles.push(new Photon(x, y, energy));
  }

  radiate(power) {                 // tie output to real energy generation
    this.emitRate = Math.floor(power * 200);   // watts -> particles/frame
  }

  step() {
    this.particles = this.particles.filter(p => p.update(this.forces));
  }

  draw(ctx) {
    ctx.globalCompositeOperation = "lighter";  // additive light — photons sum
    for (const p of this.particles) {
      const r = p.energy * p.life * 3;
      ctx.globalAlpha = p.life;
      ctx.beginPath();
      ctx.arc(p.pos.x, p.pos.y, r, 0, Math.PI * 2);
      ctx.fill();
    }
    ctx.globalAlpha = 1;
    ctx.globalCompositeOperation = "source-over";
  }
}

Additive blending ("lighter") is doing the conceptual work: like real light, overlapping particles sum into brightness. The radiate() method is the hook that ties the identity to actual generation data.

The visual language

The SOLIS mark is an emission, not a shape. Emitters are placed along the skeleton of the wordmark; photons stream from them and dissipate, so the logo is brightest at its source and dissolves into glow at its edges. There is no hard outline anywhere in the system — only density gradients. Brightness is the brand’s primary variable, and brightness means energy.

Living typography

Letters are fields of emitters. At low energy a headline is a faint constellation of points you can barely resolve; at high energy the emitters saturate and the word becomes a solid bar of light. Type has an exposure, not a weight — the same headline can read as a whisper of dawn or the full blaze of noon depending on the energy value feeding it.

Motion rules

  • Morning: minimal. At dawn the emission rate is low; the brand is a sparse, cool scattering of points.
  • Midday: maximum. At solar noon the system runs at full output — dense, hot, radiant.
  • Night: constellations. After dark, emitters slow to a trickle and the remaining particles hold like stars.
  • Consumption changes complexity. Live generation or usage data drives the emit rate, so the identity’s intensity is a real-time readout of energy.

Interactive website

The homepage brightens as you use it. Cursor movement adds kinetic energy to nearby photons; the longer you stay, the more charged the field becomes. Sections don’t transition by sliding — they dawn and set, emitters fading up and down like a day passing. The site’s overall luminance is pinned to the time of day at the visitor’s location.

Physical applications

  • Solar installations: the panel arrays themselves become emitter maps; a live dashboard renders each panel’s output as a cluster of photons.
  • Building façades: programmable LED media walls run the particle field, brightening with the building’s own generation.
  • Wearables: e-ink-to-OLED badges that charge visibly through the day and hold constellations at night.
  • AR: point a phone at a SOLIS panel and watch its real output pour off it as light.

The brand system

Guidelines define an exposure scale rather than fixed assets: named energy states (Dawn, Morning, Noon, Dusk, Night) each specifying emit rate, particle lifespan, and legibility. “On-brand” means the field is running at an energy state appropriate to context and, ideally, to real data. A press release at Morning; a product hero at Noon; a memorial or downtime notice at Night.

Color: sun, gold, white, infrared orange, deep violet. Particle energy maps to temperature — the hottest photons burn white-gold, the coolest fade to violet.

Open-source behavioral library

Shipped as solis.js, an eight-verb API over the field:

const light = new Solis(canvas);

light.Emit(source, rate);   // release photons from a point or shape
light.Reflect(surface);     // bounce particles off a boundary
light.Absorb(region);       // a sink — light entering here is consumed
light.Radiate(power);       // set global output from real energy data
light.Pulse(bpm);           // rhythmic emission surges
light.Condense(point);      // gravity well — gather scattered light into form
light.Diffuse(amount);      // scatter — soften the mark toward glow
light.Recharge();           // ramp emitters back to full over a day cycle

Reflection

SOLIS was an exercise in designing with brightness as the only structural element. Removing every hard edge from the system was uncomfortable — there is no “logo file,” only an emission you switch on — but it forced an honesty: the mark can’t fake energy it doesn’t have, because its intensity is bound to real output. A dark SOLIS is a SOLIS with no sun, and that’s the correct message.

The idea I’d keep: when a company’s product is a physical quantity, let the identity be a live gauge of that quantity. SOLIS stops being a picture of energy and becomes an instrument that reads it.