AMERICAAAAAAAAA

function preload() {
  myFont = loadFont('https://cdn.jsdelivr.net/fontsource/fonts/roboto@latest/latin-400-normal.woff');
}

function setup() {
  createCanvas(windowWidth, windowHeight);
  background(0); // Set initial background to black

  // Create an off-screen graphics buffer to draw the text
  let graphics = createGraphics(width, height);
  graphics.textFont(myFont); // Set the font
  graphics.textSize(min(width, height) / 8); // Adjust text size based on canvas size
  graphics.textAlign(CENTER, CENTER); // Center the text
  graphics.fill(255); // White color for the text

  // ⇨ This is the key change: draw "AMERICA 250" instead of "AMERICA"
  graphics.text("AMERICA 250", width / 2, height / 2);

  // Load pixels from the off-screen buffer to find text points
  graphics.loadPixels();
  for (let x = 0; x < graphics.width; x += 2) { // Reduced sampling step for denser text
    for (let y = 0; y < graphics.height; y += 2) { // Reduced sampling step for denser text
      let index = (x + y * graphics.width) * 4;
      let alpha = graphics.pixels[index + 3]; // Get the alpha value
      if (alpha > 0) { // If the pixel is part of the text
        textPoints.push(createVector(x, y));
      }
    }
  }

  // Sample textPoints if there are too many for performance
  const desiredFireworkCount = 2000; // Desired number of sparks to form the text
  if (textPoints.length > desiredFireworkCount) {
    const sampledPoints = [];
    while (sampledPoints.length < desiredFireworkCount) {
      const randomIndex = floor(random(textPoints.length));
      sampledPoints.push(textPoints[randomIndex]);
      textPoints.splice(randomIndex, 1); // Remove to avoid duplicates
    }
    textPoints = sampledPoints;
  }

  // Create a FireworkRocket for each text point, launching from the bottom
  for (let i = 0; i < textPoints.length; i++) {
    fireworks.push(new FireworkRocket(random(width), height, textPoints[i].x, textPoints[i].y));
  }
}

function draw() {
  // Create a semi-transparent background to create trail effects
  colorMode(RGB);
  background(0, 0, 0, 25); // Dark background with some transparency

  // Update and show FireworkRockets
  for (let i = fireworks.length - 1; i >= 0; i--) {
    fireworks[i].update();
    fireworks[i].show();

    // If a rocket is "finished" (transformed into an explosion particle), remove it
    if (fireworks[i].finished()) {
      fireworks.splice(i, 1);
    }
  }

  // Update and show ExplosionParticles
  for (let i = explosionParticles.length - 1; i >= 0; i--) {
    explosionParticles[i].update();
    explosionParticles[i].show();

    // If an explosion particle has dissolved completely, remove it
    if (explosionParticles[i].finished()) {
      explosionParticles.splice(i, 1);
    }
  }
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  background(0); // Clear the canvas and reset background
  // For this sketch, we keep existing particles; regenerating text would be more complex.
}

class FireworkRocket {
  constructor(x, y, targetX, targetY) {
    this.pos = createVector(x, y);
    this.vel = createVector(0, random(-10, -15)); // Launch upwards
    this.acc = createVector(0, 0);
    this.targetPos = createVector(targetX, targetY);
    this.color = this.getRandomColor(); // Get a patriotic color
    this.finishedMoving = false; // Flag to indicate it's done moving and ready to transform
    this.size = 2; // Size of the rocket particle
  }

  // Get a random patriotic color (red, white, blue, or gold)
  getRandomColor() {
    let colors = [
      color(255, 0, 0), // Red
      color(255),       // White
      color(0, 0, 255), // Blue
      color(255, 204, 0) // Gold
    ];
    return random(colors);
  }

  // Apply a force to the particle
  applyForce(force) {
    this.acc.add(force);
  }

  // Update the rocket's position
  update() {
    if (!this.finishedMoving) {
      this.applyForce(createVector(0, -0.2)); // Apply force upwards to simulate launch
      this.vel.add(this.acc);
      this.pos.add(this.vel);
      this.acc.mult(0); // Reset acceleration

      // Check if rocket has reached its peak or passed its target height
      if (this.vel.y >= 0 || this.pos.y < this.targetPos.y) {
        // Transform into an ExplosionParticle at its current position
        explosionParticles.push(
          new ExplosionParticle(this.pos.x, this.pos.y, this.targetPos.x, this.targetPos.y, this.color)
        );
        this.finishedMoving = true;
      }
    }
  }

  // Show the rocket
  show() {
    if (!this.finishedMoving) {
      strokeWeight(2); // Keep stroke for the rocket trail
      stroke(this.color);
      point(this.pos.x, this.pos.y);
    }
  }

  // Check if the rocket has finished its movement and transformed
  finished() {
    return this.finishedMoving;
  }
}

class ExplosionParticle {
  constructor(x, y, targetX, targetY, col) {
    this.pos = createVector(x, y);
    this.vel = p5.Vector.random2D(); // Initial random explosion direction
    this.vel.mult(random(2, 8)); // Initial explosion speed
    this.acc = createVector(0, 0);
    this.targetPos = createVector(targetX, targetY);
    this.color = col;
    this.initialLifespan = 255; // Max lifespan
    this.lifespan = this.initialLifespan; // Current lifespan

    this.settled = false; // Flag to indicate it has reached its target
    this.settleTime = 0; // Time when the particle settled
    this.dissolving = false; // Flag to indicate it's currently dissolving

    this.initialParticleSize = random(2, 6); // Size during explosion phase
    this.settledParticleSize = 2; // Size when forming the text
    this.currentSize = this.initialParticleSize; // Dynamic size
  }

  // Apply a force to the particle
  applyForce(force) {
    this.acc.add(force);
  }

  // Update the particle's position and move towards target
  update() {
    if (!this.settled) {
      // Add a small gravity effect
      this.applyForce(createVector(0, 0.05));

      // Calculate force towards target position
      let steer = p5.Vector.sub(this.targetPos, this.pos);
      steer.setMag(0.1); // Adjust steering force
      this.applyForce(steer);

      this.vel.add(this.acc);
      this.pos.add(this.vel);
      this.acc.mult(0); // Reset acceleration

      // Reduce lifespan for initial fading
      this.lifespan -= 2;
      // Map lifespan to current size during explosion phase
      this.currentSize = map(this.lifespan, 0, this.initialLifespan, 0.5, this.initialParticleSize);

      // Stop moving and settle if close enough to target
      if (this.pos.dist(this.targetPos) < 1) {
        this.pos.set(this.targetPos); // Snap to target
        this.vel.mult(0); // Stop movement
        this.acc.mult(0);
        this.settled = true;
        this.lifespan = this.initialLifespan; // Reset lifespan to full visibility for the text
        this.currentSize = this.settledParticleSize; // Fixed size for text particles
        this.settleTime = millis(); // Record the time it settled
      }
    } else if (this.settled && !this.dissolving) {
      // Particle is settled, check if it's time to dissolve
      if (millis() - this.settleTime > DISSOLVE_DELAY) {
        this.dissolving = true;
      }
    } else if (this.dissolving) {
      // Particle is dissolving
      this.lifespan -= 1; // Reduce lifespan to fade it out
      // Map lifespan to current size during dissolving phase
      this.currentSize = map(this.lifespan, 0, this.initialLifespan, 0, this.settledParticleSize);
    }
  }

  // Show the particle
  show() {
    noStroke(); // No stroke for a solid, fluffy look
    fill(this.color.levels[0], this.color.levels[1], this.color.levels[2], this.lifespan);
    circle(this.pos.x, this.pos.y, this.currentSize); // Draw as a circle
  }

  // Text particles are finished if they have dissolved completely
  finished() {
    return this.dissolving && this.lifespan < 0;
  }
}