Status Illegibility
About This Sketch
A visualization contrasting legible status (large, visible, isolated nodes) with illegible status (small, connected, hidden networks). The sketch shows how real power and influence often operate through invisible channels that only insiders can see, while public visibility markers may indicate lower actual status.
Algorithm
This sketch visualizes the concept of status illegibility through two contrasting network types.
The left side shows "legible status" - large, obvious nodes with radiating visibility rings but no connections. These represent people with high public visibility (followers, credentials) but little real influence.
The right side shows "illegible status" - small, subtle nodes densely interconnected with flowing information particles. These represent the hidden network of insiders who actually hold power and influence.
The contrast illustrates the central thesis: real status is often invisible to outsiders, operating through private networks rather than public displays.
This sketch accompanies the blog post "Status Illegibility" exploring how the highest-status people in any field are often invisible to outsiders.
Pseudocode
SETUP:
Initialize canvas (400x300)
Create public nodes:
- Large size (30-50px)
- Left side placement
- High visibility (radiating rings)
- No connections
Create hidden nodes:
- Small size (6-12px)
- Right side placement
- Low visibility
- Dense connections based on proximity
Calculate connections between hidden nodes
DRAW (every frame):
Get current theme colors
Clear background
Draw connections between hidden nodes:
- Show as lines with varying strength
- Animate flowing particles along connections
Update and draw public nodes:
- Pulse animation
- Radiating visibility rings
- Large and obvious
Update and draw hidden nodes:
- Subtle pulse
- Faint glow
- Small but connected
Draw labels and dividing line
Increment time counter
Source Code
let sketch = function(p) {
let publicNodes = [];
let hiddenNodes = [];
let connections = [];
let time = 0;
class Node {
constructor(x, y, size, isPublic) {
this.x = x;
this.y = y;
this.size = size;
this.isPublic = isPublic;
this.alpha = isPublic ? 200 : 80;
this.pulseOffset = p.random(p.TWO_PI);
this.connections = [];
}
update() {
// Subtle pulse
let pulse = p.sin(time * 0.03 + this.pulseOffset) * 0.2 + 1;
this.displaySize = this.size * pulse;
}
draw(colors) {
if (this.isPublic) {
// Large, obvious public nodes
p.fill(...colors.accent2, this.alpha);
p.noStroke();
p.circle(this.x, this.y, this.displaySize);
// Radiating rings to show visibility
for (let i = 1; i <= 2; i++) {
p.noFill();
p.stroke(...colors.accent2, 40 / i);
p.strokeWeight(2);
p.circle(this.x, this.y, this.displaySize + i * 10);
}
} else {
// Small, subtle hidden nodes (high real status)
p.fill(...colors.accent1, this.alpha);
p.noStroke();
p.circle(this.x, this.y, this.displaySize);
// Faint glow only visible to "insiders"
p.fill(...colors.accent1, 20);
p.circle(this.x, this.y, this.displaySize * 1.5);
}
}
}
class Connection {
constructor(node1, node2, strength) {
this.node1 = node1;
this.node2 = node2;
this.strength = strength;
this.flowOffset = p.random(100);
}
draw(colors) {
// Only draw connections between hidden nodes
if (!this.node1.isPublic && !this.node2.isPublic) {
let alpha = this.strength * 100;
p.stroke(...colors.accent1, alpha);
p.strokeWeight(this.strength * 2);
p.line(this.node1.x, this.node1.y, this.node2.x, this.node2.y);
// Flowing particles showing information exchange
let flowPos = ((time + this.flowOffset) % 100) / 100;
let x = p.lerp(this.node1.x, this.node2.x, flowPos);
let y = p.lerp(this.node1.y, this.node2.y, flowPos);
p.noStroke();
p.fill(...colors.accent1, 150);
p.circle(x, y, 3);
}
}
}
p.setup = function() {
p.createCanvas(400, 300);
p.colorMode(p.RGB);
// Create public nodes (left side) - large, visible, isolated
for (let i = 0; i < 5; i++) {
let x = p.random(40, 150);
let y = p.random(80, 220);
let size = p.random(30, 50);
publicNodes.push(new Node(x, y, size, true));
}
// Create hidden network (right side) - small but densely connected
for (let i = 0; i < 12; i++) {
let x = p.random(250, 360);
let y = p.random(80, 220);
let size = p.random(6, 12);
hiddenNodes.push(new Node(x, y, size, false));
}
// Create connections between hidden nodes
for (let i = 0; i < hiddenNodes.length; i++) {
for (let j = i + 1; j < hiddenNodes.length; j++) {
let dist = p.dist(hiddenNodes[i].x, hiddenNodes[i].y,
hiddenNodes[j].x, hiddenNodes[j].y);
if (dist < 100) {
let strength = p.map(dist, 0, 100, 1, 0.2);
connections.push(new Connection(hiddenNodes[i], hiddenNodes[j], strength));
}
}
}
};
p.draw = function() {
const colors = getThemeColors();
p.background(...colors.bg);
time++;
// Draw connections first
for (let conn of connections) {
conn.draw(colors);
}
// Update and draw nodes
for (let node of publicNodes) {
node.update();
node.draw(colors);
}
for (let node of hiddenNodes) {
node.update();
node.draw(colors);
}
// Draw labels
p.fill(...colors.accent3);
p.noStroke();
p.textAlign(p.CENTER, p.TOP);
p.textSize(10);
p.text("Legible Status", 95, 20);
p.textSize(8);
p.text("(Large, visible, isolated)", 95, 33);
p.textSize(10);
p.text("Illegible Status", 305, 20);
p.textSize(8);
p.text("(Small, connected, hidden)", 305, 33);
// Dividing line
p.stroke(...colors.accent3, 100);
p.strokeWeight(1);
p.line(200, 50, 200, 270);
// Bottom label
p.fill(...colors.accent2);
p.noStroke();
p.textAlign(p.CENTER, p.TOP);
p.textSize(9);
p.text("Real power flows in invisible networks", p.width / 2, 260);
};
};