let letters = [];

let state = "stable"; // "stable", "quantum_explosion", "tear_shape"

let centerX, centerY;

​

function setup() {

    createCanvas(600, 600);

    textSize(12);

    textAlign(CENTER, CENTER);

    centerX = width / 2;

    centerY = height / 2;

    let startX = centerX - textWidth(textString) / 2;

    for (let i = 0; i < textString.length; i++) {

        letters.push({

            char: textString[i],

            x: startX + textWidth(textString.charAt(i)) / 2,

            y: centerY,

            targetX: startX + textWidth(textString.charAt(i)) / 2,

            targetY: centerY,

            speedX: 0,

            speedY: 0

        });

        startX += textWidth(textString.charAt(i));

    }

    setTimeout(() => {

        if (state === "stable") {

            state = "quantum_explosion";

            for (let letter of letters) {

                letter.speedX = random(-3, 3);

                letter.speedY = random(-3, 3);

            }

        }

    }, 1500);

    setTimeout(() => {

        if (state === "quantum_explosion") {

            state = "tear_shape";

            formTearShape();

        }

    }, 4000);

}

​

function formTearShape() {

    // Create a proper tear shape using parametric equations

    const tearSize = 120;

    const tearOffset = -30; // Move tear up a bit

    for (let i = 0; i < letters.length; i++) {

        // Normalize position around the shape (0 to 1)

        let t = i / (letters.length - 1);

        // Calculate tear shape coordinates

        // This creates a teardrop that's pointed at the top and rounded at the bottom

        let x = tearSize * sin(PI * t);

        let y = (tearSize * (1 - cos(PI * t)) / 2) + tearOffset;

        letters[i].targetX = centerX + x;

        letters[i].targetY = centerY + y;

    }

}

​

function draw() {

    background(0);

    fill(255);

    if (state === "quantum_explosion") {

        for (let letter of letters) {

            letter.x += letter.speedX;

            letter.y += letter.speedY;

            // Bounce off edges with dampening

            if (letter.x < 0 || letter.x > width) {

                letter.speedX *= -0.9;

            }

            if (letter.y < 0 || letter.y > height) {

                letter.speedY *= -0.9;

            }

        }

    } else if (state === "tear_shape") {

        let allInPosition = true;

        for (let letter of letters) {

            // Smoothly transition to target position

            letter.x = lerp(letter.x, letter.targetX, 0.05);

            letter.y = lerp(letter.y, letter.targetY, 0.05);

            // Check if letters are still moving

            if (dist(letter.x, letter.y, letter.targetX, letter.targetY) > 0.5) {

                allInPosition = false;

            }

        }

        // Optional: Add a subtle animation once in position

        if (allInPosition) {

            let time = millis() / 1000;

            for (let i = 0; i < letters.length; i++) {

                // Small pulsing effect

                let pulseFactor = sin(time * 2 + i * 0.9) * 3;

                letters[i].x = letters[i].targetX + sin(i / 5);

                letters[i].y = letters[i].targetY + cos(i / 5);

            }

        }

    }

    // Draw letters

    for (let letter of letters) {

        text(letter.char, letter.x, letter.y);

    }

}