The Experience Trap
About This Sketch
Particles emerge from a pulsing observer at the center, spreading outward in distorted paths. They fade and shrink as they move, representing how experiences arise from consciousness but are transformed by the act of observation itself. The paradox made visible: we need the observer to have experience, but too much observation prevents real experience from happening.
Algorithm
This sketch visualizes the relationship between experience and observation explored in "The Experience Trap."
At the center pulses a circle representing the "observer"—the self-aware consciousness that monitors experience. From this center, particles continuously emerge and spread outward, representing moments of experience radiating from the observing self.
As particles move away from center, they wobble and curve—showing how the act of observation distorts experience. They fade and shrink as they age, representing how moments become memories and lose their immediacy. The color shifts from vibrant present (warm orange) to muted memory (soft beige).
The visual metaphor: experiences emerge from the observing self, but that same observer changes them. The center is both source and obstacle—we need awareness to have experiences, but too much self-monitoring prevents genuine absorption.
This sketch accompanies the blog post "The Experience Trap" which explores how optimizing for better experiences paradoxically destroys the experiences themselves.
Pseudocode
SETUP:
Initialize canvas (400x300)
Create 80 particles with random initial ages (to distribute them)
Set color mode to RGB
PARTICLE CLASS:
Constructor:
- Start at center of canvas
- Random angle for direction
- Random speed and lifetime
Update:
- Move along angle with wobble (sine wave distortion)
- Increment age
- Reset if too old or off canvas
Display:
- Calculate fade (255 to 0 based on age)
- Interpolate color from present to memory
- Draw circle with size decreasing with age
DRAW (every frame):
Get current theme colors
Draw semi-transparent background for trail effect
Draw observer (pulsing circle at center):
- Pulse size based on sine wave
- Semi-transparent accent color
For each particle:
- Update position and age
- Display with current fade/color/size
Increment time counter for animation
Source Code
let sketch = function(p) {
let particles = [];
let time = 0;
class Particle {
constructor() {
this.reset();
// Start with random phase so particles appear distributed
this.age = p.random(200);
}
reset() {
this.x = p.width / 2;
this.y = p.height / 2;
this.angle = p.random(p.TWO_PI);
this.speed = p.random(0.5, 2);
this.age = 0;
this.lifetime = p.random(100, 200);
}
update() {
// Particles emerge from center, spreading outward
// But their path curves and wobbles - representing how experience
// spreads from a moment but gets distorted by observation
let wobble = p.sin(this.age * 0.1) * 0.3;
this.x += p.cos(this.angle + wobble) * this.speed;
this.y += p.sin(this.angle + wobble) * this.speed;
this.age++;
if (this.age > this.lifetime ||
this.x < 0 || this.x > p.width ||
this.y < 0 || this.y > p.height) {
this.reset();
}
}
display(colors) {
// Particles fade as they age (experiences fading into memory)
let alpha = p.map(this.age, 0, this.lifetime, 255, 0);
// Color shifts from present (accent2) to memory (accent3)
let colorMix = this.age / this.lifetime;
let r = p.lerp(colors.accent2[0], colors.accent3[0], colorMix);
let g = p.lerp(colors.accent2[1], colors.accent3[1], colorMix);
let b = p.lerp(colors.accent2[2], colors.accent3[2], colorMix);
p.noStroke();
p.fill(r, g, b, alpha);
// Size diminishes as particles age (moments becoming smaller in memory)
let size = p.map(this.age, 0, this.lifetime, 8, 2);
p.circle(this.x, this.y, size);
}
}
p.setup = function() {
p.createCanvas(400, 300);
p.colorMode(p.RGB);
// Create 80 particles
for (let i = 0; i < 80; i++) {
particles.push(new Particle());
}
};
p.draw = function() {
const colors = getThemeColors();
// Gentle fade for trail effect
p.background(...colors.bg, 25);
// Draw the "observer" - a pulsing circle at the center
// Representing the self that watches experiences
let pulse = p.sin(time * 0.05) * 10 + 20;
p.noFill();
p.stroke(...colors.accent1, 100);
p.strokeWeight(2);
p.circle(p.width / 2, p.height / 2, pulse);
// Update and display all particles
for (let particle of particles) {
particle.update();
particle.display(colors);
}
time++;
};
};