let letters = [];

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

let centerX, centerY;

let myFont;

function preload(){

   fonty = loadFont('Bootzy TM.ttf');

}

function setup() {

    createCanvas(600, 600);

    textSize(25);

    textAlign(CENTER, CENTER);

    textFont(fonty);

    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[i]) / 1.2,

            y: centerY,

            speedX: 0,

            speedY: 0

        });

        startX += textWidth(textString[i]);

    }

    setTimeout(() => {

        if (state === "stable") {

            state = "quantum_explosion";

            for (let letter of letters) {

                letter.speedX = random(-0.1, 0.1); // Slower explosion

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

            }

        }

    }, 1600); // Slightly longer delay before explosion

}

function draw() {

    background(255);

    fill('#FF13F0');

    // Draw connecting lines under the letters

    stroke(0); // Semi-transparent white lines

    strokeWeight(1);

    noFill();

    beginShape();

    for (let letter of letters) {

        // Position the line slightly below the letters

        vertex(letter.x, letter.y +10);

    }

    endShape();

    if (state === "quantum_explosion") {

        for (let letter of letters) {

            letter.x += letter.speedX * 2;

            letter.y += letter.speedY * 2;

        }

    }

    // Draw the letters

    noStroke();

    fill(0);

    for (let letter of letters) {

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

    }

}