The Consistency Myth

Source Code

let sketch = function(p) {

    // Visualizing burst work vs consistent work
    // Top half: consistent daily work (regular small blocks)
    // Bottom half: burst work pattern (intense periods separated by rest)

    let time = 0;
    let consistentBlocks = [];
    let burstPhases = [];
    let burstIntensity = 0;
    let burstCycle = 0;

    class ConsistentBlock {
        constructor(index) {
            this.x = 20 + (index % 15) * 24;
            this.baseY = 60;
            this.width = 20;
            this.height = 30;
            this.index = index;
            this.delay = index * 3; // Stagger the animation
        }

        display(colors) {
            // Each block appears at its scheduled time
            let age = time - this.delay;
            if (age < 0) return;

            let alpha = p.min(age * 10, 150);
            p.fill(...colors.accent3, alpha);
            p.noStroke();

            // All blocks are the same size - representing consistent moderate effort
            p.rect(this.x, this.baseY, this.width, this.height, 2);
        }
    }

    class BurstPhase {
        constructor(startTime, duration, intensity) {
            this.startTime = startTime;
            this.duration = duration;
            this.intensity = intensity;
            this.baseY = 180;
        }

        display(colors) {
            let elapsed = time - this.startTime;
            if (elapsed < 0 || elapsed > this.duration) return;

            // During burst: tall intense bars
            // Height varies with intensity and position in burst
            let progress = elapsed / this.duration;
            let middleBoost = p.sin(progress * p.PI) * 0.3 + 1; // Peak in middle

            // Create multiple bars during the burst period
            for (let i = 0; i < this.duration / 10; i++) {
                let barTime = i * 10;
                if (elapsed >= barTime) {
                    let x = 20 + i * 24;
                    let heightMultiplier = this.intensity * middleBoost;
                    let barHeight = 40 + heightMultiplier * 30;

                    // Color intensity varies with work intensity
                    let colorMix = p.map(heightMultiplier, 1, 2, 0, 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);

                    let alpha = p.min((elapsed - barTime) * 20, 220);
                    p.fill(r, g, b, alpha);
                    p.noStroke();
                    p.rect(x, this.baseY - barHeight + 40, 20, barHeight, 2);

                    // Add glow for intensity
                    if (heightMultiplier > 1.3) {
                        p.fill(r, g, b, alpha * 0.3);
                        p.rect(x - 2, this.baseY - barHeight + 38, 24, barHeight + 4, 3);
                    }
                }
            }
        }
    }

    p.setup = function() {
        p.createCanvas(400, 300);
        p.colorMode(p.RGB);

        // Create consistent daily blocks
        for (let i = 0; i < 60; i++) {
            consistentBlocks.push(new ConsistentBlock(i));
        }

        // Create burst phases with rest periods between
        // Burst 1: medium intensity
        burstPhases.push(new BurstPhase(20, 60, 1.2));
        // Rest period: 60 frames
        // Burst 2: high intensity
        burstPhases.push(new BurstPhase(140, 80, 1.6));
        // Rest period: 40 frames
        // Burst 3: medium intensity
        burstPhases.push(new BurstPhase(260, 50, 1.3));
    };

    p.draw = function() {
        const colors = getThemeColors();
        p.background(...colors.bg);

        // Section divider
        p.stroke(...colors.accent3, 80);
        p.strokeWeight(1);
        p.line(0, 145, 400, 145);

        // Labels
        p.noStroke();
        p.fill(...colors.accent3, 200);
        p.textAlign(p.LEFT, p.TOP);
        p.textSize(11);
        p.text("Consistent Daily Work", 10, 15);
        p.text("Burst Work Pattern", 10, 160);

        // Descriptions
        p.textSize(8);
        p.fill(...colors.accent3, 150);
        p.text("Same effort every day, moderate results", 10, 32);
        p.text("Intense sprints + rest periods, breakthrough results", 10, 177);

        // Work output counter (simplified)
        p.textAlign(p.RIGHT, p.BOTTOM);
        p.textSize(9);

        // Count visible blocks for each pattern
        let consistentOutput = consistentBlocks.filter(b => time - b.delay > 0).length;
        let burstOutput = 0;
        for (let burst of burstPhases) {
            let elapsed = time - burst.startTime;
            if (elapsed > 0 && elapsed < burst.duration) {
                burstOutput += p.floor(elapsed / 10) * burst.intensity;
            } else if (elapsed >= burst.duration) {
                burstOutput += p.floor(burst.duration / 10) * burst.intensity;
            }
        }

        p.fill(...colors.accent3, 180);
        p.text("Units: " + consistentOutput, 390, 135);
        p.text("Impact: " + p.floor(burstOutput * 10), 390, 290);

        // Bottom note
        p.textAlign(p.CENTER, p.BOTTOM);
        p.textSize(8);
        p.fill(...colors.accent3, 130);
        p.text("Optimize for output, not consistency", 200, 290);

        // Display consistent blocks
        for (let block of consistentBlocks) {
            block.display(colors);
        }

        // Display burst phases
        for (let burst of burstPhases) {
            burst.display(colors);
        }

        time++;

        // Loop animation
        if (time > 400) {
            time = 0;
        }
    };
};