The Authenticity Paradox

Source Code

let sketch = function(p) {

    // Visualizing identity as fluid, evolving shapes rather than fixed forms
    let particles = [];
    let time = 0;

    class IdentityParticle {
        constructor() {
            this.reset();
        }

        reset() {
            // Start from left side
            this.x = 0;
            this.y = p.random(p.height);
            this.baseSpeed = p.random(0.5, 1.5);
            this.phase = p.random(p.TWO_PI);
            this.size = p.random(2, 6);
            // Different particles represent different "potential selves"
            this.identity = p.floor(p.random(3));
            this.age = 0;
            this.maxAge = p.random(400, 600);
        }

        update() {
            // Move right (progression through time)
            this.x += this.baseSpeed;

            // Vertical movement represents exploration/adaptation
            // Earlier in life (left side): more exploration, more vertical movement
            // Later in life (right side): less exploration, more settled
            let explorationFactor = p.map(this.x, 0, p.width, 1, 0.2);
            this.y += p.sin(time * 0.05 + this.phase) * explorationFactor;

            // Keep within bounds
            this.y = p.constrain(this.y, 20, p.height - 20);

            this.age++;

            // Reset if off screen or too old
            if (this.x > p.width || this.age > this.maxAge) {
                this.reset();
            }
        }

        display(colors) {
            let alpha = p.map(this.age, 0, this.maxAge, 200, 0);

            // Different identities have different colors
            // Showing that identity is contextual and multiple
            let color;
            if (this.identity === 0) {
                color = colors.accent1;
            } else if (this.identity === 1) {
                color = colors.accent2;
            } else {
                color = colors.accent3;
            }

            p.noStroke();
            p.fill(...color, alpha);

            // Particles get more defined (larger) as they mature
            let displaySize = this.size * p.map(this.age, 0, 100, 0.5, 1);
            p.ellipse(this.x, this.y, displaySize, displaySize);

            // Connect nearby particles of similar identity
            // Representing how similar aspects of self can form coherent patterns
            for (let other of particles) {
                if (other.identity === this.identity) {
                    let d = p.dist(this.x, this.y, other.x, other.y);
                    if (d < 50 && d > 0) {
                        let lineAlpha = p.map(d, 0, 50, 100, 0);
                        p.stroke(...color, lineAlpha);
                        p.strokeWeight(0.5);
                        p.line(this.x, this.y, other.x, other.y);
                    }
                }
            }
        }
    }

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

        // Create particles representing different aspects of identity over time
        for (let i = 0; i < 80; i++) {
            particles.push(new IdentityParticle());
            // Stagger the starting positions
            particles[i].x = p.random(-100, p.width);
            particles[i].age = p.random(particles[i].maxAge);
        }
    };

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

        // Labels
        p.textAlign(p.LEFT, p.TOP);
        p.textSize(10);
        p.fill(...colors.accent3, 180);
        p.noStroke();
        p.text("Fixed Identity →", 10, 10);

        p.textAlign(p.RIGHT, p.TOP);
        p.text("← Evolving Self", p.width - 10, 10);

        // Instructions
        p.textAlign(p.CENTER, p.BOTTOM);
        p.textSize(9);
        p.fill(...colors.accent3, 150);
        p.text("Identity isn't fixed—it's fluid, contextual, and continuously constructed", p.width / 2, p.height - 10);

        time++;

        // Update and display all particles
        for (let particle of particles) {
            particle.update();
            particle.display(colors);
        }
    };
};