The Curiosity Performance
About This Sketch
A visual exploration of the difference between performed curiosity (quick, showy, surface-level) and genuine curiosity (slow, persistent, deep). Performance particles move rapidly across the surface while real curiosity particles persist longer, go deeper, and form connections representing actual learning.
Algorithm
This sketch visualizes the difference between performance curiosity and real curiosity through particle systems.
Performance curiosity particles (large, light-colored) move quickly across the surface, spawning frequently but dying quickly. They're showy with glowing halos, representing the social display aspect of performed curiosity.
Real curiosity particles (small, darker) move slowly and persistently, living much longer. They leave depth trails showing penetration into a topic, and form connections with other real curiosity particles to represent how genuine investigation builds knowledge networks.
The visualization accompanies the blog post "The Curiosity Performance" exploring how we often perform intellectual curiosity as social signaling rather than engaging in genuine investigation.
Pseudocode
SETUP:
Initialize canvas (400x300)
Create empty particle array
DRAW (every frame):
Get current theme colors
Clear background
Every 10 frames:
Spawn performance curiosity particle (large, short-lived)
Every 40 frames:
Spawn real curiosity particle (small, long-lived)
For each particle:
Update position based on type:
Performance: random, fast, surface-level
Real: persistent, slow, with depth tracking
Display particle:
Performance: large with glow halo
Real: small with depth trail
Remove if lifespan exceeded
Draw connections between real curiosity particles:
If two real particles are close, draw connecting line
Represents knowledge network formation
Display legend explaining particle types
Source Code
let sketch = function(p) {
let particles = [];
let questions = [];
let time = 0;
class Particle {
constructor(x, y, isReal) {
this.x = x;
this.y = y;
this.isReal = isReal;
this.vx = p.random(-1, 1);
this.vy = p.random(-1, 1);
this.age = 0;
this.maxAge = isReal ? 300 : 100;
this.size = isReal ? 3 : 6;
this.connections = [];
this.depth = isReal ? p.random(50, 150) : 0;
}
update() {
// Real curiosity moves slowly and persistently
if (this.isReal) {
this.vx += p.random(-0.1, 0.1);
this.vy += p.random(-0.1, 0.1);
this.vx *= 0.95;
this.vy *= 0.95;
this.depth += p.random(-2, 3);
} else {
// Performance curiosity moves quickly across surface
this.vx = p.random(-2, 2);
this.vy = p.random(-2, 2);
}
this.x += this.vx;
this.y += this.vy;
this.age++;
// Wrap around edges
if (this.x < 0) this.x = 400;
if (this.x > 400) this.x = 0;
if (this.y < 0) this.y = 300;
if (this.y > 300) this.y = 0;
}
display(colors) {
let alpha = p.map(this.age, 0, this.maxAge, 255, 0);
if (this.isReal) {
// Real curiosity: goes deep, creates connections
p.noStroke();
p.fill(colors.accent2[0], colors.accent2[1], colors.accent2[2], alpha);
p.circle(this.x, this.y, this.size);
// Draw depth trail
for (let i = 0; i < 5; i++) {
let trailAlpha = alpha * (1 - i / 5);
p.fill(colors.accent2[0], colors.accent2[1], colors.accent2[2], trailAlpha * 0.3);
p.circle(this.x, this.y + i * 3, this.size * (1 - i / 5));
}
} else {
// Performance curiosity: stays on surface, showy
p.noStroke();
p.fill(colors.accent1[0], colors.accent1[1], colors.accent1[2], alpha * 0.6);
p.circle(this.x, this.y, this.size);
// Draw performative glow
p.fill(colors.accent1[0], colors.accent1[1], colors.accent1[2], alpha * 0.2);
p.circle(this.x, this.y, this.size * 2);
}
}
isDead() {
return this.age > this.maxAge;
}
}
p.setup = function() {
p.createCanvas(400, 300);
p.colorMode(p.RGB);
};
p.draw = function() {
const colors = getThemeColors();
p.background(...colors.bg);
time++;
// Spawn new particles
if (p.frameCount % 10 === 0) {
// More performance particles (shallow curiosity)
particles.push(new Particle(p.random(400), p.random(100), false));
}
if (p.frameCount % 40 === 0) {
// Fewer real curiosity particles (deep investigation)
particles.push(new Particle(p.random(400), p.random(100), true));
}
// Update and display particles
for (let i = particles.length - 1; i >= 0; i--) {
particles[i].update();
particles[i].display(colors);
if (particles[i].isDead()) {
particles.splice(i, 1);
}
}
// Draw connections between real curiosity particles (learning)
p.stroke(colors.accent2[0], colors.accent2[1], colors.accent2[2], 30);
p.strokeWeight(1);
for (let i = 0; i < particles.length; i++) {
if (!particles[i].isReal) continue;
for (let j = i + 1; j < particles.length; j++) {
if (!particles[j].isReal) continue;
let d = p.dist(particles[i].x, particles[i].y, particles[j].x, particles[j].y);
if (d < 80) {
let alpha = p.map(d, 0, 80, 50, 0);
p.stroke(colors.accent2[0], colors.accent2[1], colors.accent2[2], alpha);
p.line(particles[i].x, particles[i].y, particles[j].x, particles[j].y);
}
}
}
// Draw legend
p.noStroke();
p.textSize(10);
p.textAlign(p.LEFT);
p.fill(colors.accent1[0], colors.accent1[1], colors.accent1[2], 180);
p.text("Large, fast = Performance curiosity", 10, 280);
p.fill(colors.accent2[0], colors.accent2[1], colors.accent2[2], 180);
p.text("Small, persistent = Real curiosity", 10, 293);
};
};