The Consumption Delusion
About This Sketch
A split-screen visualization contrasting content consumption with genuine learning. The left side shows a constant rain of information—articles, books, podcasts—falling and quickly fading into obscurity. The right side depicts true learning as an organic, branching network where each new concept connects meaningfully to previous understanding, growing slowly but creating lasting capability.
This generative sketch explores the uncomfortable truth that most of our "learning" is actually consumption theater: we're optimizing for the feeling of progress rather than actual behavioral change and integrated understanding.
Algorithm
This sketch visualizes the fundamental difference between consuming content and actually learning.
The left side shows consumption: a constant stream of items (books, articles, podcasts) flowing downward like rain. They accumulate briefly at the bottom before fading away—forgotten and unintegrated. The volume counter increases rapidly, but nothing persists or connects.
The right side shows learning: starting with a single concept, nodes grow slowly and branch organically. Each new node connects to previous ones, forming a network of integrated understanding. Growth is slower but creates lasting, interconnected capability.
This sketch accompanies the blog post "The Consumption Delusion" and explores how we mistake the feeling of consuming information for the work of integrating it into capability.
Pseudocode
SETUP:
Initialize canvas (400x300)
Create first learning node at center-right
Initialize empty consumption items array
DRAW (every frame):
Get current theme colors
Clear background
CONSUMPTION SIDE (left):
Randomly spawn new items falling from top
Update all items:
- Move downward at varying speeds
- When hitting bottom, start fading
- Remove when fully transparent
Display count of items consumed
Show "Forgotten" label at bottom
LEARNING SIDE (right):
For each learning node:
- Gradually grow in size
- Fade in to full opacity
- Age increment
- Randomly spawn connected child nodes
- New nodes branch at random angles
- Keep within right half of canvas
Draw all connection lines between nodes
Display count of integrated concepts
Display dynamic message about volume vs depth
VISUAL METAPHOR:
Left (Consumption): Rain → Brief accumulation → Fade to nothing
Right (Learning): Seed → Organic growth → Branching network
Consumption optimizes for volume and speed
Learning optimizes for depth and connection
Source Code
let sketch = function(p) {
// Visualization: Two paths to knowledge
// Left side: Consumption - many shallow dots (books/articles) flowing in, very few solid connections
// Right side: Learning - fewer inputs but deep, branching neural-like connections forming
// Shows consumption as accumulation without integration vs learning as transformation
let consumptionItems = [];
let learningNodes = [];
let connections = [];
let time = 0;
class ConsumptionItem {
constructor() {
this.x = p.random(20, 170);
this.y = -10;
this.speed = p.random(1, 3);
this.size = p.random(3, 6);
this.alpha = 255;
this.landed = false;
}
update() {
if (!this.landed) {
this.y += this.speed;
if (this.y > 280) {
this.landed = true;
}
} else {
// Fade out at bottom (forgotten)
this.alpha -= 2;
}
}
isDead() {
return this.alpha <= 0;
}
display(colors) {
p.noStroke();
p.fill(...colors.accent3, this.alpha * 0.5);
p.circle(this.x, this.y, this.size);
}
}
class LearningNode {
constructor(x, y, generation) {
this.x = x;
this.y = y;
this.generation = generation;
this.size = 0;
this.maxSize = 8 - generation;
this.alpha = 0;
this.connections = [];
this.age = 0;
}
grow() {
if (this.size < this.maxSize) {
this.size += 0.15;
}
if (this.alpha < 255) {
this.alpha += 5;
}
this.age++;
}
canSpawn() {
return this.age > 60 && this.generation < 4 && p.random() < 0.02;
}
display(colors) {
p.noStroke();
p.fill(...colors.accent2, this.alpha);
p.circle(this.x, this.y, this.size);
// Draw connections
for (let connection of this.connections) {
p.stroke(...colors.accent2, this.alpha * 0.4);
p.strokeWeight(1);
p.line(this.x, this.y, connection.x, connection.y);
}
}
}
p.setup = function() {
p.createCanvas(400, 300);
// Start with one learning node (first concept actually learned)
learningNodes.push(new LearningNode(300, 150, 0));
};
p.draw = function() {
const colors = getThemeColors();
p.background(...colors.bg);
time++;
// Title
p.fill(...colors.accent3, 200);
p.noStroke();
p.textAlign(p.CENTER);
p.textSize(11);
p.text('The Consumption Delusion', 200, 20);
// Section divider
p.stroke(...colors.accent3, 100);
p.strokeWeight(2);
p.line(200, 30, 200, 285);
// Labels
p.noStroke();
p.fill(...colors.accent3, 180);
p.textSize(9);
p.textAlign(p.CENTER);
p.text('Consumption', 95, 45);
p.text('(Volume, No Integration)', 95, 56);
p.text('Learning', 305, 45);
p.text('(Depth, Connection)', 305, 56);
// LEFT SIDE: Consumption - rain of items that pile up and fade
if (p.random() < 0.3) {
consumptionItems.push(new ConsumptionItem());
}
for (let i = consumptionItems.length - 1; i >= 0; i--) {
consumptionItems[i].update();
consumptionItems[i].display(colors);
if (consumptionItems[i].isDead()) {
consumptionItems.splice(i, 1);
}
}
// Show pile at bottom (forgotten content)
p.noStroke();
p.fill(...colors.accent3, 60);
p.textSize(7);
p.textAlign(p.CENTER);
p.text('Forgotten', 95, 270);
// Counter
p.fill(...colors.accent3, 140);
p.textSize(8);
p.text(`${Math.floor(time / 3)} items consumed`, 95, 285);
// RIGHT SIDE: Learning - organic growth, branching connections
for (let node of learningNodes) {
node.grow();
// Spawn new connected nodes (learning branches out)
if (node.canSpawn()) {
let angle = p.random(p.TWO_PI);
let distance = p.random(20, 40);
let newX = node.x + p.cos(angle) * distance;
let newY = node.y + p.sin(angle) * distance;
// Keep in right half
if (newX > 210 && newX < 390 && newY > 70 && newY < 260) {
let newNode = new LearningNode(newX, newY, node.generation + 1);
newNode.connections.push(node);
learningNodes.push(newNode);
}
}
}
for (let node of learningNodes) {
node.display(colors);
}
// Counter
p.fill(...colors.accent3, 140);
p.textSize(8);
p.textAlign(p.CENTER);
p.text(`${learningNodes.length} concepts integrated`, 305, 285);
// Bottom insight
p.fill(...colors.accent3, 160);
p.textSize(7);
p.textAlign(p.CENTER);
if (time < 200) {
p.text('Consumption accumulates without connecting. Learning integrates and branches.', 200, 295);
} else {
p.text('Volume vs. depth. Collection vs. capability. Feeling smart vs. being capable.', 200, 295);
}
};
};