Insight Collection Is Procrastination
About This Sketch
A visual contrast between those who collect insights and those who act on them. The collectors on the left accumulate growing piles of knowledge while remaining stationary. The doers on the right move steadily toward completion, leaving trails of actual work. Only one group makes real progress—and it's not the one with the bigger pile.
Algorithm
This sketch visualizes the fundamental difference between collecting insights and taking action. On the left side, "collectors" remain stationary while accumulating growing piles of items (representing saved articles, highlights, notes). On the right side, "doers" move steadily toward their goals, leaving trails of completed work behind them.
The collectors appear weighed down by their accumulation—they bob slightly but make no real progress. The doers move with varying speeds (representing different paces of work) but all move forward, eventually completing their journey with a satisfying glow effect.
This visual metaphor accompanies the blog post's thesis: consumption and organization feel like progress, but only action creates actual outcomes.
Pseudocode
SETUP:
Create 3 Collectors positioned on the left
- Each starts with 8-15 random items
- Items vary in size and opacity
Create 5 Doers starting from left, targeting right
- Each has random speed
- Each maintains a trail of progress
DRAW (every frame):
Get current theme colors
Clear background
Update Collectors:
- Occasionally add new items (slow accumulation)
- Bob slightly in place (no real progress)
- Draw stacked items above collector
Update Doers:
- Move toward target at individual speed
- Leave trail of progress
- Small random wobble (uncertainty of action)
- When reaching target, show completion glow
Draw dividing line between collectors and doers
Display labels: "Collecting" vs "Doing"
Source Code
let sketch = function(p) {
let collectors = [];
let doers = [];
let time = 0;
class Collector {
constructor(x, startY) {
this.x = x;
this.y = startY;
this.targetY = startY;
this.items = [];
this.collecting = true;
// Add initial collection of items
for (let i = 0; i < p.random(8, 15); i++) {
this.items.push({
offset: p.random(-15, 15),
size: p.random(3, 8),
opacity: p.random(100, 200)
});
}
}
update() {
// Slowly accumulate more items (representing saved articles, notes, etc.)
if (this.items.length < 20 && p.random() < 0.02) {
this.items.push({
offset: p.random(-15, 15),
size: p.random(3, 8),
opacity: p.random(100, 200)
});
}
// Slight bobbing motion
this.y = this.targetY + p.sin(time * 0.03 + this.x) * 3;
}
display(colors) {
// Draw all collected items
p.noStroke();
for (let i = 0; i < this.items.length; i++) {
let item = this.items[i];
let yPos = this.y - (i * 3); // Stack them
p.fill(...colors.accent3, item.opacity);
p.circle(this.x + item.offset, yPos, item.size);
}
// Draw the collector (passive, weighed down)
p.fill(...colors.accent3, 150);
p.circle(this.x, this.y, 12);
}
}
class Doer {
constructor(x, y, targetX) {
this.x = x;
this.y = y;
this.targetX = targetX;
this.progress = 0;
this.speed = p.random(0.5, 1.5);
this.completed = false;
this.trail = [];
}
update() {
if (!this.completed) {
// Move toward target (taking action)
this.x += this.speed;
this.progress = (this.x - 50) / (this.targetX - 50);
// Add to trail
if (p.frameCount % 3 === 0) {
this.trail.push({x: this.x, y: this.y});
if (this.trail.length > 20) {
this.trail.shift();
}
}
// Small wobble (uncertainty of action)
this.y += p.random(-0.5, 0.5);
if (this.x >= this.targetX) {
this.completed = true;
}
}
}
display(colors) {
// Draw trail (progress made)
p.noStroke();
for (let i = 0; i < this.trail.length; i++) {
let t = this.trail[i];
let alpha = p.map(i, 0, this.trail.length, 50, 150);
p.fill(...colors.accent2, alpha);
p.circle(t.x, t.y, 3);
}
// Draw the doer (active, moving forward)
if (this.completed) {
p.fill(...colors.accent2, 255);
p.circle(this.x, this.y, 14);
// Glow effect for completion
p.fill(...colors.accent2, 50);
p.circle(this.x, this.y, 20);
} else {
p.fill(...colors.accent2, 200);
p.circle(this.x, this.y, 10);
}
}
}
p.setup = function() {
p.createCanvas(400, 300);
p.colorMode(p.RGB);
// Create collectors on left (stuck in place)
for (let i = 0; i < 3; i++) {
collectors.push(new Collector(60, 80 + i * 70));
}
// Create doers moving from left to right
for (let i = 0; i < 5; i++) {
let startX = 50;
let startY = 60 + i * 45;
let targetX = 350;
doers.push(new Doer(startX, startY, targetX));
}
};
p.draw = function() {
const colors = getThemeColors();
p.background(...colors.bg);
time++;
// Labels
p.fill(...colors.accent3, 180);
p.textAlign(p.LEFT);
p.textSize(10);
p.text('Collecting', 10, 25);
p.fill(...colors.accent2, 180);
p.textAlign(p.RIGHT);
p.text('Doing', 390, 25);
// Draw vertical divider
p.stroke(...colors.accent1, 50);
p.strokeWeight(1);
p.line(120, 40, 120, 280);
// Update and display collectors
for (let collector of collectors) {
collector.update();
collector.display(colors);
}
// Update and display doers
for (let doer of doers) {
doer.update();
doer.display(colors);
}
// Bottom text
p.noStroke();
p.fill(...colors.accent3, 150);
p.textAlign(p.CENTER);
p.textSize(9);
p.text('One group collects. One group ships.', 200, 290);
};
};