Where ideas percolate and thoughts brew

More Information, Worse Decisions

About This Sketch

A visualization of how excessive information gathering obscures the key factors that actually matter in decision-making. The sketch starts with three clear signal points representing the core variables that drive a decision. As more "data" accumulates, these critical factors become progressively harder to identify, buried under a mountain of irrelevant information.

This accompanies the blog post exploring why having more information often leads to worse decisions—past 70% information, you're adding noise that clouds judgment rather than clarity that improves it.

Algorithm

This sketch visualizes the signal-to-noise problem in decision making. It starts with three bright signal points representing the key factors that actually matter in a decision. These are clear and connected, forming an obvious pattern. As time progresses, the sketch simulates "gathering more information" by adding numerous small noise points throughout the canvas. These represent all the additional data, edge cases, conflicting opinions, and tangential factors that accumulate during excessive research. The visualization demonstrates how the original clear signal becomes progressively harder to discern as it's buried under an avalanche of irrelevant information. By the end, the three key factors that matter are completely obscured by dozens of distracting data points. The sketch then resets, showing the cycle again—starting with clarity, descending into information overload, then resetting to demonstrate that less information often leads to better decisions.

Pseudocode

SETUP:
  Create canvas (400x300)
  Define 3 signal points (the key factors that matter)
  Initialize with only signal points visible

DRAW (every frame):
  Get current theme colors
  Clear background

  PHASE 0 (0-3 seconds):
    Display only 3 signal points clearly
    Draw connecting lines between them
    Show "Signal is clear" message

  PHASE 1 (3-8 seconds):
    Gradually add noise points (1 every 3 frames)
    Signal points remain but get harder to see
    Show "Gathering more data..." message

  PHASE 2 (8-10 seconds):
    Maximum noise points (150 total)
    Original signal completely obscured
    Show "Signal lost in noise" message

  After 10 seconds: Reset to PHASE 0

Visual metaphor: Information overload degrades decision quality

Source Code

let sketch = function(p) {
    let dataPoints = [];
    let signal = null;
    let time = 0;
    let phase = 0; // 0: few points (clear), 1: many points (noise)

    class DataPoint {
        constructor(x, y, isSignal) {
            this.x = x;
            this.y = y;
            this.isSignal = isSignal;
            this.alpha = 0;
            this.size = isSignal ? 12 : 6;
            this.fadeInSpeed = p.random(3, 8);
        }

        update() {
            if (this.alpha < 200) {
                this.alpha += this.fadeInSpeed;
            }
        }

        display(colors) {
            p.noStroke();
            if (this.isSignal) {
                // Signal point - bright and clear
                p.fill(...colors.accent2, this.alpha);
                p.circle(this.x, this.y, this.size);
                // Glow effect
                p.fill(...colors.accent2, this.alpha * 0.3);
                p.circle(this.x, this.y, this.size * 2);
            } else {
                // Noise points - dim and distracting
                p.fill(...colors.accent3, this.alpha * 0.6);
                p.circle(this.x, this.y, this.size);
            }
        }
    }

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

        // The true signal - what actually matters (3 key points)
        signal = {
            x: 200,
            y: 150,
            points: [
                {x: 150, y: 120, label: 'key factor 1'},
                {x: 200, y: 100, label: 'key factor 2'},
                {x: 250, y: 120, label: 'key factor 3'}
            ]
        };

        // Start with just the signal - it's clear!
        for (let point of signal.points) {
            dataPoints.push(new DataPoint(point.x, point.y, true));
        }
    };

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

        time++;

        // Phase 1: Clear signal (first 180 frames, 3 seconds)
        if (time < 180) {
            phase = 0;
        }
        // Phase 2: Add noise gradually (180-480 frames)
        else if (time < 480) {
            phase = 1;
            // Add noise points to obscure the signal
            if (time % 3 === 0 && dataPoints.length < 150) {
                let x = p.random(50, 350);
                let y = p.random(50, 250);
                dataPoints.push(new DataPoint(x, y, false));
            }
        }
        // Phase 3: Total overwhelm - signal lost in noise
        else {
            phase = 2;
        }

        // Update and display all points
        for (let point of dataPoints) {
            point.update();
            point.display(colors);
        }

        // Draw lines connecting signal points (only visible in phase 0)
        if (phase === 0) {
            p.stroke(...colors.accent2, 150);
            p.strokeWeight(2);
            for (let i = 0; i < signal.points.length - 1; i++) {
                p.line(
                    signal.points[i].x, signal.points[i].y,
                    signal.points[i + 1].x, signal.points[i + 1].y
                );
            }
            p.line(
                signal.points[signal.points.length - 1].x,
                signal.points[signal.points.length - 1].y,
                signal.points[0].x,
                signal.points[0].y
            );
        }

        // Labels
        p.noStroke();
        p.fill(...colors.accent3, 180);
        p.textAlign(p.CENTER);
        p.textSize(11);

        if (phase === 0) {
            p.text('70% information: Signal is clear', 200, 280);
            p.textSize(9);
            p.text('(3 key factors are obvious)', 200, 20);
        } else if (phase === 1) {
            p.text('Gathering more data...', 200, 280);
            p.textSize(9);
            p.text(`(now processing ${dataPoints.length} variables)`, 200, 20);
        } else {
            p.text('100% information: Signal lost in noise', 200, 280);
            p.textSize(9);
            p.text('(what mattered is now obscured)', 200, 20);
        }

        // Data count
        p.textAlign(p.RIGHT);
        p.textSize(10);
        p.fill(...colors.accent2, 150);
        p.text(`Data points: ${dataPoints.length}`, 390, 290);

        // Reset after full cycle
        if (time > 600) {
            time = 0;
            dataPoints = [];
            for (let point of signal.points) {
                dataPoints.push(new DataPoint(point.x, point.y, true));
            }
        }
    };
};