The Understanding Theater
About This Sketch
Deeper layers have fewer, more coherent particles
This sketch accompanies the blog post "The Understanding Theater" and visualizes its core concepts through generative art.
Algorithm
Deeper layers have fewer, more coherent particles
This sketch was originally created as a visual companion to the blog post "The Understanding Theater" and explores its themes through generative art.
Pseudocode
SETUP:
Initialize canvas (400x300)
Set up drawing parameters
DRAW (every frame):
Get current theme colors
Clear background
Draw generative visualization
Update animation state
Source Code
let sketch = function(p) {
let layers = [];
let time = 0;
class UnderstandingLayer {
constructor(depth, opacity) {
this.depth = depth;
this.opacity = opacity;
this.yOffset = depth * 30;
this.particles = [];
// Deeper layers have fewer, more coherent particles
let particleCount = p.floor(30 / (depth + 1));
for (let i = 0; i < particleCount; i++) {
this.particles.push({
x: p.random(400),
baseY: p.random(300),
phase: p.random(p.TWO_PI),
speed: 0.02 + depth * 0.01,
size: 3 + depth * 2
});
}
}
display(colors, t) {
// Surface layers are chaotic, deep layers are coherent
let chaos = 1 / (this.depth + 0.5);
for (let particle of this.particles) {
// Surface: random movement (scripts, performances)
// Depth: coherent patterns (real understanding)
let wobble = chaos * 40 * p.sin(t * particle.speed + particle.phase);
let y = particle.baseY + wobble;
// Color shifts from surface script (accent1) to deep understanding (accent2)
let colorMix = this.depth / (layers.length - 1);
let r = p.lerp(colors.accent1[0], colors.accent2[0], colorMix);
let g = p.lerp(colors.accent1[1], colors.accent2[1], colorMix);
let b = p.lerp(colors.accent1[2], colors.accent2[2], colorMix);
p.noStroke();
p.fill(r, g, b, this.opacity * 255);
// Deeper particles connect (understanding connects concepts)
if (this.depth > 2) {
for (let other of this.particles) {
let otherWobble = chaos * 40 * p.sin(t * other.speed + other.phase);
let otherY = other.baseY + otherWobble;
let d = p.dist(particle.x, y, other.x, otherY);
if (d < 100) {
p.stroke(r, g, b, this.opacity * 100 * (1 - d/100));
p.strokeWeight(1);
p.line(particle.x, y, other.x, otherY);
}
}
}
p.noStroke();
p.ellipse(particle.x, y, particle.size);
}
}
}
p.setup = function() {
p.createCanvas(400, 300);
p.colorMode(p.RGB);
// Create layers: surface (chaotic scripts) to depth (coherent understanding)
for (let i = 0; i < 5; i++) {
layers.push(new UnderstandingLayer(i, 0.3 + i * 0.15));
}
};
p.draw = function() {
const colors = getThemeColors();
p.background(...colors.bg);
// Draw text labels
p.textAlign(p.LEFT, p.TOP);
p.textSize(10);
p.fill(...colors.accent3, 200);
p.noStroke();
p.text("Surface: Scripts & Performance", 10, 10);
p.text("Depth: Real Understanding", 10, 280);
// Draw layers from deep to surface
for (let i = layers.length - 1; i >= 0; i--) {
layers[i].display(colors, time);
}
time += 0.02;
};
};