The Mediocrity Mandate
About This Sketch
A visualization of strategic effort allocation across life domains. Watch as a few chosen areas of excellence compound and grow tall over time, while the majority of domains quickly reach "good enough" and stabilize—functional but not optimized. This illustrates the core principle: you can't be excellent at everything, so choose deliberately where to invest your limited energy for excellence, and grant yourself permission to be strategically mediocre everywhere else.
Algorithm
This sketch visualizes the strategic allocation of effort across multiple life domains, demonstrating how excellence in a few areas compounds over time while strategic mediocrity in most areas maintains functionality without draining resources.
The visualization shows 15 bars representing different life domains. Three bars are designated as "excellence domains" (highlighted in bright accent color) while the remaining twelve represent "strategically mediocre" domains (shown in muted gray).
Excellence domains start low but grow continuously, demonstrating compound growth. Even after reaching their initial maximum height, they continue growing slowly, illustrating how mastery deepens over time. Mediocre domains quickly reach a "good enough" threshold and stabilize there—functional but not optimized.
A dashed line marks the "good enough" baseline, showing that strategic mediocrity isn't failure—it's maintaining adequate performance while conserving energy for what matters. The visual contrast between the tall, glowing excellence bars and the stable, muted mediocrity bars illustrates the core thesis: you can't be excellent at everything, so choose deliberately.
Pseudocode
SETUP:
Create 15 domain objects
Designate 3 as excellence domains (indices 4, 8, 11)
Designate remaining 12 as strategic mediocrity domains
For excellence domains:
- Set slow growth rate (compounds over time)
- Set high maximum potential (150-200 units)
- Enable continuous growth beyond initial max
For mediocrity domains:
- Set fast initial growth (quickly reaches "good enough")
- Set moderate maximum (40-60 units)
- Stabilize at target without further growth
DRAW (every frame):
Get current theme colors
Draw background
Draw title and legend
Draw "good enough" threshold line
For each domain:
Update growth:
If excellence domain:
- Grow toward max at slow rate
- If at max, occasionally increase max (compound growth)
If mediocrity domain:
- Quickly approach "good enough" threshold
- Stop growing once reached
Display bar:
If excellence: bright color, tall, glowing halo
If mediocrity: muted color, stable height
Display dynamic message based on average excellence height
Show legend explaining the two strategies
Source Code
let sketch = function(p) {
// Visualization: Multiple bars representing different life domains
// Most stay at "good enough" (middle height) - gray/muted
// 2-3 grow tall representing excellence - bright/highlighted
// The excellent ones compound and grow taller over time
// The mediocre ones stay flat but stable
let domains = [];
let maxDomains = 15;
let excellenceBudget = 100;
let budgetSpent = 0;
class Domain {
constructor(x, isExcellence) {
this.x = x;
this.y = 270;
this.width = 20;
this.isExcellence = isExcellence;
if (isExcellence) {
this.targetHeight = 0; // Starts low, grows tall
this.maxHeight = p.random(150, 200);
this.growthRate = p.random(0.3, 0.8);
this.currentHeight = 10;
} else {
this.targetHeight = p.random(40, 60); // Good enough zone
this.maxHeight = this.targetHeight;
this.growthRate = 2; // Reaches "good enough" quickly
this.currentHeight = 0;
}
this.age = 0;
}
update() {
this.age++;
if (this.isExcellence) {
// Excellence compounds over time - gets taller continuously
if (this.currentHeight < this.maxHeight) {
this.currentHeight += this.growthRate;
}
// Continue growing slowly even after max
if (this.age % 10 === 0 && this.currentHeight >= this.maxHeight) {
this.maxHeight += 1;
}
} else {
// Mediocre domains quickly reach "good enough" and stay there
this.currentHeight = p.lerp(this.currentHeight, this.targetHeight, 0.05);
}
}
display(colors) {
// Draw bar
if (this.isExcellence) {
// Excellence - bright, tall, growing
p.fill(...colors.accent2, 220);
p.stroke(...colors.accent2, 100);
} else {
// Strategic mediocrity - muted, stable
p.fill(...colors.accent3, 120);
p.stroke(...colors.accent3, 80);
}
p.strokeWeight(1);
p.rect(this.x, this.y - this.currentHeight, this.width, this.currentHeight);
// Excellence indicator glow
if (this.isExcellence && this.currentHeight > 100) {
p.noStroke();
p.fill(...colors.accent2, 20);
p.rect(this.x - 5, this.y - this.currentHeight - 10, this.width + 10, this.currentHeight + 10);
}
}
}
p.setup = function() {
p.createCanvas(400, 300);
// Create domains
let spacing = 25;
let startX = 30;
let excellenceIndices = [4, 8, 11]; // 3 excellence domains among 15
for (let i = 0; i < maxDomains; i++) {
let isExcellence = excellenceIndices.includes(i);
domains.push(new Domain(startX + (i * spacing), isExcellence));
}
};
p.draw = function() {
const colors = getThemeColors();
p.background(...colors.bg);
// Title
p.fill(...colors.accent3);
p.noStroke();
p.textAlign(p.CENTER);
p.textSize(12);
p.text('The Mediocrity Mandate', 200, 20);
// Draw "good enough" line
p.stroke(...colors.accent3, 80);
p.strokeWeight(1);
p.setLineDash([5, 5]);
p.line(20, 220, 380, 220);
p.setLineDash([]);
p.fill(...colors.accent3, 120);
p.noStroke();
p.textSize(7);
p.textAlign(p.LEFT);
p.text('Good Enough', 25, 215);
// Update and display all domains
for (let domain of domains) {
domain.update();
domain.display(colors);
}
// Labels
p.textAlign(p.CENTER);
p.textSize(7);
p.fill(...colors.accent3, 150);
// Bottom axis labels
p.text('Life Domains', 200, 290);
// Legend
p.textAlign(p.LEFT);
p.textSize(7);
// Excellence indicator
p.fill(...colors.accent2, 220);
p.rect(25, 40, 10, 15);
p.fill(...colors.accent3, 180);
p.text('Excellence (2-3 domains)', 40, 50);
// Mediocrity indicator
p.fill(...colors.accent3, 120);
p.rect(25, 60, 10, 15);
p.fill(...colors.accent3, 180);
p.text('Strategic Mediocrity (rest)', 40, 70);
// Dynamic message
let excellentDomains = domains.filter(d => d.isExcellence);
let avgExcellence = excellentDomains.reduce((sum, d) => sum + d.currentHeight, 0) / excellentDomains.length;
p.textAlign(p.CENTER);
p.textSize(7);
p.fill(...colors.accent3, 150);
if (avgExcellence < 50) {
p.text('Early stage: Everything starts low. Excellence takes time to compound.', 200, 105);
} else if (avgExcellence < 120) {
p.text('Excellence domains pull ahead. Mediocre domains stay functional.', 200, 105);
} else {
p.text('Excellence compounds continuously. Mediocrity stays stable. This is the strategy.', 200, 105);
}
};
};