The Authenticity Performance
About This Sketch
A generative visualization exploring the paradox of authenticity in the age of personal branding. The sketch depicts concentric layers of self-presentation: a small, solid core representing the authentic self, surrounded by increasingly large, fragmented outer layers representing performed authenticity. As the layers move outward (becoming more visible and public), they become more fragmented, reactive, and disconnected from the stable center. The outer layers pulse and reach outward, seeking audience validation, while the inner core remains small, hidden, and consistent. This visual metaphor captures how the mandate to "be authentic" has created elaborate performances of authenticity—large, visible, optimized for reception—that obscure the small, private truth at the center.
Algorithm
The sketch visualizes the concept of performed authenticity through concentric layers representing different levels of self-presentation.
The innermost layer represents the authentic self—small, solid, consistent, and largely hidden from view. As we move outward, each layer represents increasing levels of performance: the personas we adopt, the curated selves we present to audiences, the optimized versions of authenticity we perform for social validation.
The visualization reveals the paradox: the more visible and large the outer layers become, the more fragmented and reactive they are. They pulse in response to imagined audiences, rotate at different speeds (showing lack of consistency), and become increasingly broken into segments (representing the fragmentation of performed identity).
The outer layers also show "reaching" behavior—thin lines extending outward, seeking validation and audience response. The innermost core has no such extensions; it simply is.
This sketch accompanies the blog post "The Authenticity Performance" and explores how the cultural obsession with being authentic has created a new form of inauthenticity: the performance of authenticity.
Pseudocode
SETUP:
Initialize canvas (400x300)
Create 7 concentric layers, each representing a level of self-presentation
Inner layer: small radius, solid, slow rotation (authentic self)
Outer layers: larger radius, fragmented, faster rotation, more reactive (performed authenticity)
EACH LAYER has properties:
- rotation speed (slower for inner/authentic, faster for outer/performed)
- segmentation level (solid core, increasingly fragmented outward)
- pulse speed (inner is stable, outer is reactive to audience)
- opacity (inner is more visible conceptually, though physically smaller)
- color transition (warm authentic core to cooler performed exterior)
DRAW (every frame):
Clear background with theme colors
For each layer from outside to inside:
Update rotation angle
Calculate pulse (outer layers pulse more, showing audience-reactivity)
Draw layer segments:
- Inner core: solid circle (authentic self)
- Outer layers: fragmented arcs with gaps (performed authenticity)
- Add reaching lines on outermost layers (seeking validation)
Add labels and annotations
Periodically show subtle radiating lines from center (moments of actual authenticity)
VISUAL METAPHOR:
Small authentic core vs. large performed exterior
Solid coherence vs. fragmented performance
Stable presence vs. reactive seeking
Hidden truth vs. visible performance
Source Code
let sketch = function(p) {
// The Authenticity Performance
// Visualization: Layers of masks/personas
// Inner core (authentic self) is small and hidden
// Outer layers (performed authenticity) are large and visible
// Layers pulse and rotate at different speeds
// The more visible (outer), the more performed
let layers = [];
let numLayers = 7;
let time = 0;
class Layer {
constructor(index) {
this.index = index;
this.radius = 30 + index * 25;
this.angle = p.random(p.TWO_PI);
this.rotationSpeed = p.map(index, 0, numLayers, 0.02, 0.003);
this.segments = 6 + index * 2;
this.opacity = p.map(index, 0, numLayers-1, 200, 80);
this.pulseSpeed = p.map(index, 0, numLayers, 0.05, 0.02);
this.pulsePhase = p.random(p.TWO_PI);
// Inner layers are more authentic (solid), outer are more performed (fragmented)
this.fragmentationLevel = p.map(index, 0, numLayers-1, 0, 1);
}
update() {
this.angle += this.rotationSpeed;
}
display(colors) {
p.push();
p.translate(200, 150);
p.rotate(this.angle);
// Pulse effect - outer layers pulse more (more performed = more reactive to audience)
let pulseAmount = p.sin(time * this.pulseSpeed + this.pulsePhase) * 0.15 + 1;
let displayRadius = this.radius * pulseAmount;
if (this.index === 0) {
// Inner core - authentic self (small, solid, consistent)
p.fill(...colors.accent1, this.opacity);
p.noStroke();
p.circle(0, 0, displayRadius * 2);
// Very subtle inner light
p.fill(...colors.accent1, this.opacity * 0.3);
p.circle(0, 0, displayRadius * 2.5);
} else {
// Outer layers - performed authenticity (fragmented, seeking)
let gapSize = this.fragmentationLevel * 0.3;
for (let i = 0; i < this.segments; i++) {
let startAngle = (i / this.segments) * p.TWO_PI + gapSize;
let endAngle = ((i + 1) / this.segments) * p.TWO_PI - gapSize;
// More fragmentation in outer layers
if (p.random() > this.fragmentationLevel * 0.3) {
p.noFill();
// Color shifts outward - from authentic (accent1) to performed (accent2/accent3)
let colorMix = this.index / (numLayers - 1);
if (colorMix < 0.5) {
p.stroke(...colors.accent1, this.opacity);
} else {
p.stroke(...colors.accent2, this.opacity);
}
p.strokeWeight(p.map(this.index, 0, numLayers-1, 3, 1.5));
p.arc(0, 0, displayRadius * 2, displayRadius * 2, startAngle, endAngle);
// Add connecting lines for outer layers (showing performance/connection to audience)
if (this.index > 3 && i % 2 === 0) {
let innerRadius = displayRadius * 0.8;
let outerRadius = displayRadius * 1.1;
let angle = (startAngle + endAngle) / 2;
p.strokeWeight(1);
p.stroke(...colors.accent3, this.opacity * 0.5);
p.line(
p.cos(angle) * innerRadius,
p.sin(angle) * innerRadius,
p.cos(angle) * outerRadius,
p.sin(angle) * outerRadius
);
}
}
}
}
p.pop();
}
}
p.setup = function() {
p.createCanvas(400, 300);
p.colorMode(p.RGB);
// Create layers from inside (authentic) to outside (performed)
for (let i = 0; i < numLayers; i++) {
layers.push(new Layer(i));
}
};
p.draw = function() {
const colors = getThemeColors();
p.background(...colors.bg);
time += 0.01;
// Update and draw all layers
for (let i = layers.length - 1; i >= 0; i--) {
layers[i].update();
layers[i].display(colors);
}
// Labels
p.fill(...colors.accent3, 180);
p.noStroke();
p.textFont('Georgia');
p.textSize(9);
p.textAlign(p.CENTER);
// Title
p.fill(...colors.accent2, 200);
p.textSize(10);
p.text('Layers of performed authenticity', 200, 25);
// Annotations
p.textSize(8);
p.fill(...colors.accent1, 180);
p.textAlign(p.LEFT);
p.text('Core: small, hidden,', 15, 145);
p.text('actually authentic', 15, 157);
p.fill(...colors.accent2, 180);
p.textAlign(p.RIGHT);
p.text('Outer: large, visible,', 385, 145);
p.text('performed authenticity', 385, 157);
// Subtle pulsing guide lines from center
if (p.frameCount % 120 < 60) {
let alpha = p.map(p.frameCount % 60, 0, 60, 40, 0);
p.stroke(...colors.accent3, alpha);
p.strokeWeight(1);
p.noFill();
for (let i = 0; i < 4; i++) {
let angle = (i / 4) * p.TWO_PI + time;
let x1 = 200 + p.cos(angle) * 30;
let y1 = 150 + p.sin(angle) * 30;
let x2 = 200 + p.cos(angle) * 180;
let y2 = 150 + p.sin(angle) * 180;
p.line(x1, y1, x2, y2);
}
}
};
};