The Shallow Clarity Trap

Source Code

let sketch = function(p) {

    // Visualizing legible vs illegible connections
    // Clear geometric shapes represent "legible" relationships
    // Organic, flowing forms represent "illegible" deep connections

    let legibleNodes = [];
    let illegibleParticles = [];
    let time = 0;

    class LegibleNode {
        constructor(x, y) {
            this.x = x;
            this.y = y;
            this.size = 20;
            this.connections = [];
        }

        display(colors) {
            // Draw as clear geometric shapes - very legible
            p.noFill();
            p.stroke(...colors.accent3, 150);
            p.strokeWeight(1.5);
            p.square(this.x - this.size/2, this.y - this.size/2, this.size);

            // Draw explicit connections as straight lines
            for (let other of this.connections) {
                p.stroke(...colors.accent3, 80);
                p.strokeWeight(1);
                p.line(this.x, this.y, other.x, other.y);
            }
        }
    }

    class IllegalibleParticle {
        constructor() {
            this.x = p.random(p.width);
            this.y = p.random(p.height);
            this.vx = p.random(-0.5, 0.5);
            this.vy = p.random(-0.5, 0.5);
            this.size = p.random(2, 5);
            this.phase = p.random(p.TWO_PI);
            this.connectionRadius = 60;
        }

        update() {
            // Organic, flowing movement
            this.vx += p.noise(this.x * 0.01, this.y * 0.01, time * 0.1) * 0.1 - 0.05;
            this.vy += p.noise(this.y * 0.01, this.x * 0.01, time * 0.1) * 0.1 - 0.05;

            // Damping
            this.vx *= 0.95;
            this.vy *= 0.95;

            this.x += this.vx;
            this.y += this.vy;

            // Wrap around edges
            if (this.x < 0) this.x = p.width;
            if (this.x > p.width) this.x = 0;
            if (this.y < 0) this.y = p.height;
            if (this.y > p.height) this.y = 0;
        }

        display(colors) {
            // Draw illegible connections - flowing, organic, based on proximity
            for (let other of illegibleParticles) {
                if (other === this) continue;
                let d = p.dist(this.x, this.y, other.x, other.y);
                if (d < this.connectionRadius) {
                    let alpha = p.map(d, 0, this.connectionRadius, 150, 0);
                    p.stroke(...colors.accent1, alpha);
                    p.strokeWeight(0.5);

                    // Curved, organic connection lines
                    let midX = (this.x + other.x) / 2;
                    let midY = (this.y + other.y) / 2;
                    let offset = p.sin(time * 0.05 + this.phase) * 10;

                    p.noFill();
                    p.bezier(
                        this.x, this.y,
                        midX + offset, midY - offset,
                        midX - offset, midY + offset,
                        other.x, other.y
                    );
                }
            }

            // Draw particle with subtle glow
            p.noStroke();
            let glowSize = this.size + p.sin(time * 0.1 + this.phase) * 2;
            p.fill(...colors.accent1, 100);
            p.ellipse(this.x, this.y, glowSize * 1.5, glowSize * 1.5);
            p.fill(...colors.accent2, 200);
            p.ellipse(this.x, this.y, this.size, this.size);
        }
    }

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

        // Create legible nodes in left half - rigid grid
        for (let i = 0; i < 3; i++) {
            for (let j = 0; j < 2; j++) {
                let node = new LegibleNode(50 + i * 50, 80 + j * 60);
                legibleNodes.push(node);
            }
        }

        // Connect them in predictable ways
        for (let i = 0; i < legibleNodes.length - 1; i++) {
            legibleNodes[i].connections.push(legibleNodes[i + 1]);
        }

        // Create illegible particles in right half - organic flow
        for (let i = 0; i < 30; i++) {
            let particle = new IllegalibleParticle();
            particle.x = p.random(220, 400);
            particle.y = p.random(0, 300);
            illegibleParticles.push(particle);
        }
    };

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

        // Dividing line
        p.stroke(...colors.accent3, 60);
        p.strokeWeight(1);
        p.line(210, 0, 210, 300);

        // Labels
        p.noStroke();
        p.fill(...colors.accent3, 200);
        p.textAlign(p.CENTER, p.TOP);
        p.textSize(11);
        p.text("Legible", 105, 15);
        p.text("Illegible", 305, 15);

        p.textSize(8);
        p.fill(...colors.accent3, 150);
        p.text("Clear, bounded,", 105, 35);
        p.text("but shallow", 105, 45);

        p.text("Ambiguous, flowing,", 305, 35);
        p.text("but deep", 305, 45);

        // Bottom instruction
        p.textAlign(p.CENTER, p.BOTTOM);
        p.textSize(9);
        p.fill(...colors.accent3, 150);
        p.text("Deep connections form in illegible space", 200, 290);

        // Display legible nodes (static, defined)
        for (let node of legibleNodes) {
            node.display(colors);
        }

        // Update and display illegible particles (dynamic, emergent)
        for (let particle of illegibleParticles) {
            particle.update();
            particle.display(colors);
        }

        time += 0.02;
    };
};