mahnoor·fatima

computational creative direction

RHIZOME

Network-theory identity for a knowledge platform

NETWORK Drag a node to re-tension the network

SEED 0X4A7D AT EQUILIBRIUM

RHIZOME

Volume V — A knowledge platform

Computational Creative Direction — Network Theory

The research question

What if a brand behaved according to one computational law — the graph, where meaning lives in relationships and nothing has a fixed place?

RHIZOME is a knowledge platform built on a philosophy borrowed from Deleuze: no hierarchy, no root, only connections. A conventional identity — a fixed logo at the top of a page — would betray that idea on sight. So RHIZOME’s identity is a graph. Every node is a concept, every edge a relationship, and the mark reorganizes itself as knowledge is added. The logo you see is a snapshot of a network that never stops rewiring.

The computational principle

The engine is a force-directed graph, the workhorse of network theory. Nodes repel each other like charged particles; edges pull connected nodes together like springs. The layout is never designed — it’s relaxed into by the physics, finding equilibrium from the relationships alone. Add a node or an edge and the whole structure shifts to accommodate it. Structure emerges from connection, exactly as the platform’s content does.

The behavior engine

One graph simulation renders the mark, the navigation, the type, and the article-to-article relationships. The same physics lays out a logo and a knowledge map.

// Force-directed graph — the entire RHIZOME engine
class Rhizome {
  constructor() { this.nodes = []; this.edges = []; }

  addNode(id, x, y) {
    const n = { id, x, y, vx: 0, vy: 0, mass: 1 };
    this.nodes.push(n); return n;
  }
  addEdge(a, b, rest = 80) { this.edges.push({ a, b, rest }); }

  step({ repel = 2000, spring = 0.02, damping = 0.85 } = {}) {
    // repulsion: every node pushes every other (Coulomb-like)
    for (let i = 0; i < this.nodes.length; i++) {
      for (let j = i + 1; j < this.nodes.length; j++) {
        const a = this.nodes[i], b = this.nodes[j];
        let dx = a.x - b.x, dy = a.y - b.y;
        let d2 = dx * dx + dy * dy || 0.01;
        const f = repel / d2, d = Math.sqrt(d2);
        const fx = (dx / d) * f, fy = (dy / d) * f;
        a.vx += fx; a.vy += fy; b.vx -= fx; b.vy -= fy;
      }
    }
    // attraction: springs along edges (Hooke-like)
    for (const e of this.edges) {
      let dx = e.b.x - e.a.x, dy = e.b.y - e.a.y;
      const d = Math.hypot(dx, dy) || 0.01;
      const f = (d - e.rest) * spring;
      const fx = (dx / d) * f, fy = (dy / d) * f;
      e.a.vx += fx; e.a.vy += fy; e.b.vx -= fx; e.b.vy -= fy;
    }
    // integrate + damp toward equilibrium
    for (const n of this.nodes) {
      n.x += (n.vx *= damping); n.y += (n.vy *= damping);
    }
  }
}

Every act of reading or connecting on the platform adds nodes and edges to this graph — so the identity is a direct visualization of the platform’s own knowledge.

The visual language

The RHIZOME mark is a live subgraph — a cluster of labeled nodes held in tension by the physics. It has a recognizable “resting” topology (the way a face is recognizable across expressions) but never an identical layout, because the equilibrium depends on which concepts are currently connected. The aesthetic is spare and diagrammatic: thin edges, small nodes, generous space, the clarity of a good map.

Living typography

Letters are nodes joined by edges. Each glyph is a small graph; words are graphs of graphs. As relationships form on the platform, the springs retune and letters drift, cluster, and bridge — so a headline about a topic is physically pulled toward the shape of that topic’s knowledge. Every article subtly reshapes the logo, because reading writes new edges into the same graph the mark is drawn from.

Motion rules

  • Reading creates pathways. Following a link adds an edge; the graph visibly tightens along the path you took.
  • Users reshape the identity. Each visitor’s navigation history is a distinct edge set, so the network relaxes into a different layout for everyone.
  • Every visitor sees a different network. There is no canonical layout — only the equilibrium your own reading produced.
  • Hover reveals neighbors. Pointing at a node lights its edges and pulls its cluster forward, the rest receding.

Interactive website

The entire site is the graph. There are no pages in the traditional sense — articles are nodes, and navigating means traversing edges, the camera easing from cluster to cluster as the physics reflows around your position. The homepage is simply the current global equilibrium of everything the community has read and connected today. Return tomorrow and the map has rewired.

Physical applications

  • Museum: a wall-scale projected graph of the collection, visitors’ movements adding edges between the works they view in sequence.
  • Learning platform: each learner’s knowledge graph rendered as their personal map — progress you can see as a growing network.
  • Physical exhibitions: printed at a captured equilibrium, each poster a unique snapshot of the network at a moment.
  • Touch tables & interactive maps: drag a node and watch the whole structure renegotiate its balance under your hand.

The brand system

Guidelines describe topological states, not fixed art: named configurations (Cluster, Bridge, Constellation, Web, Path) each with rules for density, edge weight, and label legibility. “On-brand” means the graph is at a valid equilibrium for the context — a focused landing page runs as a tight Cluster; an exploratory index runs as a sprawling Web.

Color: graphite, paper, copper, indigo, sage, signal orange. Node degree maps to hue — highly connected hubs warm to copper and signal orange; leaf nodes stay graphite.

Open-source behavioral library

Shipped as rhizome.js, an eight-verb API over the graph:

const net = new Rhizome(canvas);

net.Connect(a, b);        // add an edge — springs pull the nodes together
net.Disconnect(a, b);     // remove an edge — repulsion drives them apart
net.Cluster(seed);        // strengthen local springs — pull a neighborhood tight
net.Bridge(a, b);         // insert a shortest-path edge between distant nodes
net.Expand(node);         // spawn connected children — the network grows
net.Discover(node);       // surface a weakly-connected node toward the center
net.Traverse(path);       // animate the camera along a sequence of edges
net.Echo(node);           // ripple a highlight outward through the neighborhood

Open-sourcing the graph engine is the truest expression of the brand: a knowledge platform whose identity is, itself, a shared and editable network.

Reflection

RHIZOME’s challenge was recognizability without fixity. A logo’s job is usually to be the same everywhere; this one is different for every visitor by design. The resolution was topological — the network keeps a stable shape of relationships even as every coordinate changes, the way you recognize a constellation regardless of where it sits in the sky. Consistency moved from geometry to structure.

The takeaway: for a platform whose value is connection, the most faithful identity is one the users co-author simply by reading. RHIZOME isn’t a logo applied to a product — it’s a portrait the community draws of itself, redrawn every day.