The Day After
About This Sketch
Events start as chaos—noise particles swirling around a pulsing center. Too much movement. Too much to manage. No clarity possible.
Then the event ends. The noise fades. The movement slows. And five points of clarity emerge from the quiet: Real, Truth, Insight, Pattern, Learning.
This sketch visualizes the core thesis of "The Day After"—that we experience events while performing them and understand them only after they end. During the event, you're drowning in execution demands. The day after, the performance stops and clarity becomes visible.
Watch as events transition from active chaos to settled insight, mirroring how weddings, launches, vacations, and holidays only reveal their truth in the aftermath.
Algorithm
This sketch visualizes the transition from the noise and chaos of events to the clarity that emerges the day after.
Each event begins as a pulsing circle surrounded by chaotic noise particles representing the performance, execution demands, and sensory overload of being "in" the event. During this phase, you can't see clearly—there's too much movement, too much to manage.
After a set duration, the event transitions to the "day after" phase. The noise particles gradually fade and slow down. As they disappear, five clarity points emerge in a radial pattern around the now-settled event circle. These points represent the insights, patterns, and truths that only become visible with distance and quiet.
The sketch runs multiple events in parallel, showing how some are still in their chaotic "during" phase while others have settled into clarity. This mirrors real life: you're always managing current events while processing past ones.
This visualization accompanies the blog post "The Day After" which argues that we optimize for events (weddings, launches, vacations, holidays) but the real learning happens in the quiet aftermath when the performance stops and distance creates perspective.
Pseudocode
SETUP:
Initialize canvas (400x300)
Create empty events array
EVENT CLASS:
CONSTRUCTOR:
Set position and phase ('during' or 'after')
Generate 40 noise particles with random positions and speeds
Generate 5 clarity points in radial pattern (initially invisible)
UPDATE (during phase):
Move noise particles randomly (chaos)
Keep particles bounded around event
Pulse event circle (active, performing)
UPDATE (after phase):
Fade out noise particles gradually
Slow down remaining movement
Reveal clarity points one by one
Settle event circle (quiet, reflective)
DISPLAY:
IF during phase:
Draw pulsing event circle with "EVENT" label
Draw swirling noise particles (chaos of the moment)
IF after phase:
Draw settled circle with "DAY AFTER" label
Draw fading noise particles
Draw emerging clarity points with labels
Connect clarity points to center with lines
DRAW LOOP:
Clear background
Create new event every 90 frames (up to 8 total)
Update and display all events
Track and display count of events in each phase
Show legend explaining the two phases
Source Code
let sketch = function(p) {
let events = [];
let maxEvents = 8;
let currentFrame = 0;
class Event {
constructor(x, y, eventNum) {
this.x = x;
this.y = y;
this.eventNum = eventNum;
this.phase = 'during'; // 'during' or 'after'
this.age = 0;
this.duringDuration = 120; // Event lasts 120 frames
this.afterStart = this.duringDuration;
// Visual elements
this.noise = [];
this.clarity = [];
this.performers = [];
this.truths = [];
// Generate noise particles (what you see during)
for (let i = 0; i < 40; i++) {
this.noise.push({
x: p.random(-30, 30),
y: p.random(-30, 30),
size: p.random(2, 8),
opacity: p.random(150, 255),
speed: p.random(0.5, 2)
});
}
// Generate clarity points (what you see after)
for (let i = 0; i < 5; i++) {
let angle = p.map(i, 0, 5, 0, p.TWO_PI);
this.clarity.push({
x: p.cos(angle) * 15,
y: p.sin(angle) * 15,
size: 4,
opacity: 0,
label: ['Real', 'Truth', 'Insight', 'Pattern', 'Learning'][i]
});
}
}
update() {
this.age++;
if (this.age < this.duringDuration) {
// During event: lots of noise, movement, chaos
this.phase = 'during';
for (let n of this.noise) {
n.x += p.random(-n.speed, n.speed);
n.y += p.random(-n.speed, n.speed);
// Keep bounded
n.x = p.constrain(n.x, -35, 35);
n.y = p.constrain(n.y, -35, 35);
}
} else {
// After event: noise fades, clarity emerges
this.phase = 'after';
let afterAge = this.age - this.afterStart;
// Fade out noise
for (let n of this.noise) {
n.opacity = p.max(0, n.opacity - 3);
n.speed *= 0.95; // Slow down
}
// Reveal clarity points
for (let c of this.clarity) {
if (c.opacity < 255) {
c.opacity = p.min(255, c.opacity + 4);
}
}
}
return this.age < 300; // Event lives for 300 frames total
}
display(colors) {
p.push();
p.translate(this.x, this.y);
// Central event circle
let centralSize = 30;
if (this.phase === 'during') {
// Pulsing, active
let pulse = p.sin(this.age * 0.1) * 3;
p.fill(...colors.accent2, 200);
p.noStroke();
p.circle(0, 0, centralSize + pulse);
// "Performing" indicator
p.fill(...colors.bg);
p.textSize(6);
p.textAlign(p.CENTER, p.CENTER);
p.text('EVENT', 0, 0);
// Noise particles (chaos of during)
for (let n of this.noise) {
p.fill(...colors.accent3, n.opacity * 0.5);
p.noStroke();
p.circle(n.x, n.y, n.size);
}
} else {
// Settled, quiet
p.fill(...colors.accent1, 150);
p.noStroke();
p.circle(0, 0, centralSize);
// "Day After" indicator
p.fill(...colors.bg);
p.textSize(5);
p.textAlign(p.CENTER, p.CENTER);
p.text('DAY', 0, -3);
p.text('AFTER', 0, 3);
// Fading noise
for (let n of this.noise) {
if (n.opacity > 0) {
p.fill(...colors.accent3, n.opacity * 0.3);
p.noStroke();
p.circle(n.x, n.y, n.size);
}
}
// Emerging clarity points
for (let c of this.clarity) {
if (c.opacity > 0) {
// Connection line to center
p.stroke(...colors.accent1, c.opacity * 0.5);
p.strokeWeight(1);
p.line(0, 0, c.x, c.y);
// Clarity dot
p.fill(...colors.accent1, c.opacity);
p.noStroke();
p.circle(c.x, c.y, c.size);
// Label
if (c.opacity > 200) {
p.fill(...colors.accent3, c.opacity);
p.textSize(5);
p.textAlign(p.CENTER, p.CENTER);
let labelX = c.x * 1.8;
let labelY = c.y * 1.8;
p.text(c.label, labelX, labelY);
}
}
}
}
p.pop();
}
}
p.setup = function() {
p.createCanvas(400, 300);
};
p.draw = function() {
const colors = getThemeColors();
p.background(...colors.bg);
currentFrame++;
// Title
p.fill(...colors.accent3);
p.noStroke();
p.textAlign(p.CENTER);
p.textSize(12);
p.text('The Day After', 200, 20);
// Subtitle
p.textSize(7);
p.fill(...colors.accent3, 180);
p.text('Events are noise. The day after is clarity.', 200, 32);
// Generate new events periodically
if (currentFrame % 90 === 0 && events.length < maxEvents) {
let cols = 4;
let rows = 2;
let eventNum = events.length;
let col = eventNum % cols;
let row = Math.floor(eventNum / cols);
let x = 50 + col * 100;
let y = 80 + row * 120;
events.push(new Event(x, y, eventNum));
}
// Update and display events
for (let i = events.length - 1; i >= 0; i--) {
if (!events[i].update()) {
events.splice(i, 1);
} else {
events[i].display(colors);
}
}
// Stats
let duringCount = 0;
let afterCount = 0;
for (let e of events) {
if (e.phase === 'during') duringCount++;
if (e.phase === 'after') afterCount++;
}
// Legend
p.textAlign(p.LEFT);
p.textSize(8);
// During phase
p.fill(...colors.accent2, 200);
p.circle(20, 250, 12);
p.fill(...colors.accent3);
p.text(`During Event: ${duringCount}`, 35, 254);
p.textSize(6);
p.fill(...colors.accent3, 150);
p.text('Noise, chaos, performance, no space for insight', 35, 263);
// After phase
p.fill(...colors.accent1, 200);
p.circle(20, 280, 12);
p.fill(...colors.accent3);
p.textSize(8);
p.text(`Day After: ${afterCount}`, 35, 284);
p.textSize(6);
p.fill(...colors.accent3, 150);
p.text('Quiet, clarity, truth becomes visible', 35, 293);
// Insight text
if (afterCount > 0) {
p.fill(...colors.accent1, 200);
p.textAlign(p.CENTER);
p.textSize(7);
p.text(`${afterCount} event${afterCount === 1 ? '' : 's'} revealing clarity`, 200, 50);
} else {
p.fill(...colors.accent3, 130);
p.textAlign(p.CENTER);
p.textSize(7);
p.text('Watch events transition from chaos to clarity', 200, 50);
}
};
};