The Intelligence Illusion
About This Sketch
Visualizing the intelligence illusion One small brilliant spark (intelligence) vs multiple steady flames (character traits) The small spark is bright but inconsistent and fades quickly The steady flames are less dramatic but persistent and grow over time Shows that sustained effort beats sporadic brilliance
This sketch accompanies the blog post "The Intelligence Illusion" and visualizes its core concepts through generative art.
Algorithm
Visualizing the intelligence illusion One small brilliant spark (intelligence) vs multiple steady flames (character traits) The small spark is bright but inconsistent and fades quickly The steady flames are less dramatic but persistent and grow over time Shows that sustained effort beats sporadic brilliance
This sketch was originally created as a visual companion to the blog post "The Intelligence Illusion" 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) {
// Visualizing the intelligence illusion
// One small brilliant spark (intelligence) vs multiple steady flames (character traits)
// The small spark is bright but inconsistent and fades quickly
// The steady flames are less dramatic but persistent and grow over time
// Shows that sustained effort beats sporadic brilliance
let time = 0;
let intelligenceSpark;
let characterFlames = [];
class IntelligenceSpark {
constructor() {
this.x = 100;
this.y = 150;
this.baseSize = 20;
this.currentSize = 0;
this.brightness = 0;
this.active = false;
this.cooldown = 0;
this.particles = [];
}
update() {
// Sporadic bursts - brilliant but inconsistent
if (this.cooldown > 0) {
this.cooldown--;
this.currentSize *= 0.95;
this.brightness *= 0.9;
} else if (p.random() < 0.02) {
// Rare brilliant flash
this.active = true;
this.currentSize = this.baseSize * 3;
this.brightness = 255;
this.cooldown = 120;
// Spark particles
for (let i = 0; i < 8; i++) {
this.particles.push({
x: this.x,
y: this.y,
vx: p.random(-2, 2),
vy: p.random(-2, 2),
life: 60,
maxLife: 60
});
}
}
// Update particles
for (let i = this.particles.length - 1; i >= 0; i--) {
let part = this.particles[i];
part.x += part.vx;
part.y += part.vy;
part.life--;
part.vy += 0.1; // Gravity
if (part.life <= 0) {
this.particles.splice(i, 1);
}
}
}
display(colors) {
// Draw particles
for (let part of this.particles) {
let alpha = p.map(part.life, 0, part.maxLife, 0, 200);
p.noStroke();
p.fill(...colors.accent2, alpha);
p.circle(part.x, part.y, 4);
}
// Main spark
if (this.brightness > 10) {
// Glow
for (let i = 3; i > 0; i--) {
p.noStroke();
p.fill(...colors.accent2, this.brightness / (i * 2));
p.circle(this.x, this.y, this.currentSize * (1 + i * 0.3));
}
// Core
p.fill(...colors.accent2, this.brightness);
p.circle(this.x, this.y, this.currentSize);
} else {
// Dim when inactive
p.fill(...colors.accent3, 80);
p.circle(this.x, this.y, this.baseSize * 0.5);
}
// Label
p.fill(...colors.accent3, 160);
p.textAlign(p.CENTER, p.TOP);
p.textSize(9);
p.text("Intelligence", this.x, this.y + 40);
p.textSize(7);
p.text("(brilliant but sporadic)", this.x, this.y + 53);
}
}
class CharacterFlame {
constructor(x, y, label) {
this.x = x;
this.y = y;
this.label = label;
this.baseSize = 12;
this.currentSize = this.baseSize;
this.growth = 0;
this.flicker = 0;
this.particles = [];
}
update() {
// Steady, consistent growth
this.growth += 0.002;
this.currentSize = this.baseSize + this.growth;
this.flicker = p.sin(time * 0.1 + this.x) * 2;
// Consistent upward particles (smoke/heat)
if (p.random() < 0.15) {
this.particles.push({
x: this.x + p.random(-5, 5),
y: this.y,
vx: p.random(-0.3, 0.3),
vy: p.random(-1.5, -0.5),
life: 80,
maxLife: 80,
size: p.random(3, 6)
});
}
// Update particles
for (let i = this.particles.length - 1; i >= 0; i--) {
let part = this.particles[i];
part.x += part.vx;
part.y += part.vy;
part.life--;
if (part.life <= 0) {
this.particles.splice(i, 1);
}
}
}
display(colors) {
// Draw rising particles
for (let part of this.particles) {
let alpha = p.map(part.life, 0, part.maxLife, 0, 120);
p.noStroke();
p.fill(...colors.accent1, alpha);
p.circle(part.x, part.y, part.size);
}
// Flame body - teardrop shape
p.push();
p.translate(this.x, this.y);
// Glow
p.noStroke();
p.fill(...colors.accent1, 60);
p.ellipse(0, 0, this.currentSize * 2, this.currentSize * 2.5);
// Main flame
p.fill(...colors.accent1, 180);
p.beginShape();
p.vertex(0, this.currentSize / 2);
p.bezierVertex(
this.currentSize / 2, this.currentSize / 4,
this.currentSize / 2 + this.flicker, -this.currentSize / 2,
0, -this.currentSize + this.flicker
);
p.bezierVertex(
-this.currentSize / 2 - this.flicker, -this.currentSize / 2,
-this.currentSize / 2, this.currentSize / 4,
0, this.currentSize / 2
);
p.endShape(p.CLOSE);
// Inner core
p.fill(...colors.accent2, 160);
p.ellipse(0, 0, this.currentSize * 0.5, this.currentSize * 0.7);
p.pop();
// Label
p.fill(...colors.accent3, 160);
p.textAlign(p.CENTER, p.TOP);
p.textSize(7);
p.text(this.label, this.x, this.y + 25);
}
}
p.setup = function() {
p.createCanvas(400, 300);
p.colorMode(p.RGB);
intelligenceSpark = new IntelligenceSpark();
// Four character traits - steady flames
characterFlames.push(new CharacterFlame(220, 120, "Conscientiousness"));
characterFlames.push(new CharacterFlame(280, 120, "Emotional\nRegulation"));
characterFlames.push(new CharacterFlame(220, 180, "Frustration\nTolerance"));
characterFlames.push(new CharacterFlame(280, 180, "Boredom\nTolerance"));
};
p.draw = function() {
const colors = getThemeColors();
p.background(...colors.bg);
// Title
p.noStroke();
p.fill(...colors.accent3, 180);
p.textAlign(p.CENTER, p.TOP);
p.textSize(11);
p.text("The Intelligence Illusion", 200, 15);
// Subtitle
if (time > 30) {
let subtitleAlpha = Math.min((time - 30) * 2, 140);
p.textSize(7);
p.fill(...colors.accent3, subtitleAlpha);
p.text("Brilliant but sporadic vs. Steady and persistent", 200, 30);
}
// Update and display
intelligenceSpark.update();
intelligenceSpark.display(colors);
for (let flame of characterFlames) {
flame.update();
flame.display(colors);
}
// Dividing line
p.stroke(...colors.accent3, 60);
p.strokeWeight(1);
p.line(160, 60, 160, 240);
// Comparison over time
if (time > 120) {
let compAlpha = Math.min((time - 120) * 1.5, 150);
// Calculate total "output" (cumulative size)
let sparkOutput = intelligenceSpark.particles.length * 2;
let flameOutput = characterFlames.reduce((sum, f) => sum + f.growth * 100, 0);
p.textAlign(p.LEFT, p.TOP);
p.textSize(7);
p.noStroke();
p.fill(...colors.accent2, compAlpha);
p.text(`Intelligence burst: ${sparkOutput.toFixed(0)}`, 15, 250);
p.fill(...colors.accent1, compAlpha);
p.text(`Character growth: ${flameOutput.toFixed(0)}`, 15, 265);
}
// Show the winner over time
if (time > 300) {
let msgAlpha = Math.min((time - 300) * 1.5, 170);
p.textAlign(p.CENTER, p.BOTTOM);
p.textSize(8);
p.fill(...colors.accent1, msgAlpha);
p.text("Steady persistence beats sporadic brilliance", 200, 280);
}
// Final insight
if (time > 420) {
let insightAlpha = Math.min((time - 420) * 2, 160);
p.textAlign(p.CENTER, p.BOTTOM);
p.textSize(9);
p.fill(...colors.accent2, insightAlpha);
p.text("Character compounds. Intelligence flashes.", 200, 295);
}
// Show accumulation pattern
if (time > 540 && time < 660) {
let accumAlpha = p.map(p.sin((time - 540) / 30), -1, 1, 100, 180);
// Draw growth curves
p.push();
p.stroke(...colors.accent2, accumAlpha);
p.strokeWeight(2);
p.noFill();
// Intelligence: spiky
p.beginShape();
for (let x = 15; x < 145; x += 3) {
let y = 70 - (p.noise(x * 0.05, time * 0.01) * 30);
p.vertex(x, y);
}
p.endShape();
// Character: smooth upward
p.stroke(...colors.accent1, accumAlpha);
p.beginShape();
for (let x = 165; x < 385; x += 3) {
let y = 220 - ((x - 165) * 0.3);
y += p.sin(x * 0.1) * 2; // Small variation
p.vertex(x, y);
}
p.endShape();
p.pop();
}
time++;
// Loop
if (time > 800) {
time = 0;
// Reset growth
for (let flame of characterFlames) {
flame.growth = 0;
}
}
};
};