The Growth Mindset Trap

Source Code

let sketch = function(p) {

    // Visualizing the growth mindset trap
    // Two paths: one person faces real wall (structural constraints)
    // Another person faces mental barrier (actual mindset issue)
    // Growth mindset ideology treats them the same - both get told "just believe harder"
    // Shows how real constraints get dismissed as mindset problems

    let time = 0;
    let figure1 = { x: 80, y: 180, facing: 1 }; // Person facing real wall
    let figure2 = { x: 80, y: 240, facing: 1 }; // Person facing mental barrier
    let wall1Opacity = 255; // Real wall stays solid
    let wall2Opacity = 255; // Mental barrier can fade

    class Figure {
        constructor(x, y, facing) {
            this.x = x;
            this.y = y;
            this.facing = facing;
            this.armAngle = 0;
        }

        update() {
            this.armAngle = p.sin(time * 0.05) * 0.3;
        }

        display(colors, pushing) {
            p.noFill();
            p.stroke(...colors.accent1);
            p.strokeWeight(2);

            // Head
            p.circle(this.x, this.y - 15, 10);

            // Body
            p.line(this.x, this.y - 10, this.x, this.y + 5);

            // Arms - pushing if specified
            if (pushing) {
                p.line(this.x, this.y - 5, this.x + 15 * this.facing, this.y - 5 + this.armAngle * 10);
                p.line(this.x, this.y - 2, this.x + 15 * this.facing, this.y - 2 - this.armAngle * 10);
            } else {
                p.line(this.x, this.y - 5, this.x - 10, this.y);
                p.line(this.x, this.y - 5, this.x + 10, this.y);
            }

            // Legs
            p.line(this.x, this.y + 5, this.x - 5, this.y + 15);
            p.line(this.x, this.y + 5, this.x + 5, this.y + 15);
        }
    }

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

    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 Growth Mindset Trap", 200, 15);

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

        // Scenario labels
        p.textAlign(p.LEFT, p.TOP);
        p.textSize(9);
        p.noStroke();
        p.fill(...colors.accent3, 160);
        p.text("Real Structural Constraint", 15, 45);
        p.text("Actual Mindset Issue", 15, 105);

        // Top scenario: Real wall (structural constraint)
        // This wall doesn't move because it's real
        p.stroke(...colors.accent2, wall1Opacity);
        p.strokeWeight(4);
        p.line(200, 140, 200, 200);

        // Brick pattern to show it's solid
        if (wall1Opacity > 0) {
            p.strokeWeight(1);
            for (let y = 140; y < 200; y += 10) {
                let offset = (y / 10) % 2 === 0 ? 0 : 10;
                for (let x = 170 + offset; x < 230; x += 20) {
                    p.stroke(...colors.accent2, wall1Opacity * 0.6);
                    p.noFill();
                    p.rect(x, y, 20, 10);
                }
            }
        }

        // Label for real wall
        p.noStroke();
        p.fill(...colors.accent2, 180);
        p.textAlign(p.CENTER, p.CENTER);
        p.textSize(7);
        p.text("REAL\nWALL", 200, 167);

        // Figure 1 trying to push through real wall
        figure1.update();
        figure1.display(colors, time > 60 && time < 180);

        // Bottom scenario: Mental barrier
        // This barrier fades when approached with right mindset
        if (time > 240) {
            wall2Opacity = p.max(0, wall2Opacity - 2);
        }

        // Draw mental barrier (dotted, translucent)
        p.stroke(...colors.accent1, wall2Opacity);
        p.strokeWeight(3);
        p.drawingContext.setLineDash([8, 8]);
        p.line(200, 200, 200, 260);
        p.drawingContext.setLineDash([]);

        // Label for mental barrier
        p.noStroke();
        p.fill(...colors.accent1, wall2Opacity);
        p.textAlign(p.CENTER, p.CENTER);
        p.textSize(7);
        p.text("mental\nbarrier", 200, 227);

        // Figure 2 facing mental barrier
        figure2.update();
        figure2.display(colors, time > 240);

        // If mental barrier faded, figure 2 can move forward
        if (wall2Opacity <= 0 && figure2.x < 250) {
            figure2.x += 0.5;
        }

        // The "advice" that comes to both
        if (time > 60 && time < 300) {
            let adviceAlpha = Math.min((time - 60) * 2, 180);

            // Same advice for both scenarios
            p.textAlign(p.RIGHT, p.CENTER);
            p.textSize(8);
            p.fill(...colors.accent3, adviceAlpha);
            p.text("\"Just change\nyour mindset!\"", 380, 170);
            p.text("\"Just change\nyour mindset!\"", 380, 230);

            // Arrow pointing to advice
            p.stroke(...colors.accent3, adviceAlpha);
            p.strokeWeight(1);
            p.line(320, 170, 360, 170);
            p.line(320, 230, 360, 230);
        }

        // Results text
        if (time > 180 && time < 360) {
            let resultAlpha = Math.min((time - 180) * 2, 160);

            // Top scenario result
            p.textAlign(p.LEFT, p.TOP);
            p.textSize(8);
            p.fill(...colors.accent2, resultAlpha);
            p.noStroke();
            p.text("Wall doesn't move\n(it's actually real)", 220, 155);

            // Figure 1 stress lines
            if (time % 20 < 10) {
                p.stroke(...colors.accent2, resultAlpha);
                p.strokeWeight(1);
                p.line(70, 160, 60, 155);
                p.line(75, 158, 68, 150);
            }
        }

        if (time > 240 && time < 420) {
            let resultAlpha = Math.min((time - 240) * 2, 160);

            // Bottom scenario result
            p.textAlign(p.LEFT, p.TOP);
            p.textSize(8);
            p.fill(...colors.accent1, resultAlpha);
            p.noStroke();
            p.text("Barrier fades\n(it was mental)", 220, 215);
        }

        // Final message
        if (time > 300) {
            let msgAlpha = Math.min((time - 300) * 1.5, 170);

            p.textAlign(p.CENTER, p.BOTTOM);
            p.textSize(9);
            p.fill(...colors.accent3, msgAlpha);
            p.text("Growth mindset ideology treats both the same", 200, 275);

            p.textSize(8);
            p.fill(...colors.accent2, msgAlpha);
            p.text("Real constraints aren't just limiting beliefs", 200, 293);
        }

        // Annotations showing the difference
        if (time > 360) {
            let annotationAlpha = Math.min((time - 360) * 2, 140);

            // Top annotation
            p.textAlign(p.LEFT, p.TOP);
            p.textSize(7);
            p.fill(...colors.accent3, annotationAlpha);
            p.text("Economic barriers, physical\nlimitations, systemic obstacles", 240, 145);

            // Bottom annotation
            p.text("Self-doubt, fear,\nlimiting beliefs", 240, 205);
        }

        time++;

        // Loop the animation
        if (time > 550) {
            time = 0;
            figure1 = { x: 80, y: 180, facing: 1 };
            figure2 = { x: 80, y: 240, facing: 1 };
            wall1Opacity = 255;
            wall2Opacity = 255;
        }
    };
};