Glowing Bouncing Ball with Fading Trail - xelsed.ai

function setup() {
  // Create a canvas that fills the entire window
  createCanvas(windowWidth, windowHeight);

  // Initialize gradient colors
  gradientColor1 = color(224, 255, 255); // Azure (very light blue)
  gradientColor2 = color(173, 216, 230); // Light Blue

  // Generate initial bubbles
  for (let i = 0; i < 15; i++) {
    bubbles.push(new Bubble());
  }
}

function draw() {
  // Draw the background gradient
  drawGradientBackground();

  // Update and display bubbles
  for (let i = bubbles.length - 1; i >= 0; i--) {
    let bubble = bubbles[i];
    bubble.update();
    bubble.display();

    // If bubble has popped, create burst particles and remove it
    if (bubble.isPopped()) {
      // Create burst particles
      for (let j = 0; j < 10; j++) {
        burstParticles.push(new BurstParticle(bubble.x, bubble.y, bubble.color));
      }
      bubbles.splice(i, 1); // Remove the popped bubble
    }
  }

  // Update and display burst particles
  for (let i = burstParticles.length - 1; i >= 0; i--) {
    let particle = burstParticles[i];
    particle.update();
    particle.display();

    // Remove dead particles
    if (particle.isDead()) {
      burstParticles.splice(i, 1);
    }
  }

  // Periodically add new bubbles
  if (frameCount % 60 === 0) { // Add a new bubble every 60 frames (approx 1 second)
    bubbles.push(new Bubble());
  }
}

function drawGradientBackground() {
  noFill();
  for (let y = 0; y <= height; y++) {
    // Interpolate colors based on y position
    let inter = map(y, 0, height, 0, 1);
    let c = lerpColor(gradientColor1, gradientColor2, inter);
    stroke(c);
    line(0, y, width, y);
  }
}

class Bubble {
  constructor() {
    this.radius = random(20, 60); // Random size
    this.x = random(this.radius, width - this.radius); // Random horizontal position
    this.y = height + this.radius; // Start from bottom of screen
    this.speed = random(0.5, 2.5); // Random rising speed
    this.color = random(pastelColors); // Random pastel color
    this.alpha = 180; // Translucency (0-255)

    // Perlin noise offsets for wobble and shine animation
    this.wobbleOffset = random(1000);
    this.shineOffset = random(2000);

    this.popped = false; // Flag to check if bubble has popped
  }

  update() {
    this.y -= this.speed; // Move bubble up

    // Wobble horizontally using Perlin noise
    let wobbleMagnitude = this.radius * 0.2; // Wobble up to 20% of its radius
    let wobbleSpeed = 0.02;
    this.x += map(noise(this.wobbleOffset), 0, 1, -wobbleMagnitude, wobbleMagnitude);
    this.wobbleOffset += wobbleSpeed;

    // Update shine offset for animation
    this.shineOffset += 0.03;

    // Check if bubble has gone off the top of the screen
    if (this.y < -this.radius) {
      this.popped = true;
    }
  }

  display() {
    noStroke();
    fill(this.color.r, this.color.g, this.color.b, this.alpha);
    circle(this.x, this.y, this.radius * 2); // Draw the main bubble

    // Draw subtle shine highlight
    // Position the shine slightly offset from the center
    let shineSizeFactor = 0.6; // Shine size relative to bubble radius
    let shineOffsetFactor = 0.5; // Offset distance from bubble center

    // Animate shine position slightly
    let shineAngle = map(noise(this.shineOffset), 0, 1, 0, TWO_PI);
    let shineX = this.x + cos(shineAngle) * shineOffsetFactor * this.radius;
    let shineY = this.y + sin(shineAngle) * shineOffsetFactor * this.radius;

    fill(255, 255, 255, 180); // White, semi-transparent for shine
    ellipse(shineX, shineY, this.radius * shineSizeFactor, this.radius * shineSizeFactor * 0.6); // Elongated ellipse for shine
  }

  // Check if the bubble has popped
  isPopped() {
    return this.popped;
  }
}

class BurstParticle {
  constructor(x, y, color) {
    this.x = x;
    this.y = y;
    this.color = color;
    this.radius = random(2, 8); // Initial size of particle
    this.life = random(30, 60); // Lifespan in frames (approx 0.5 to 1 second)

    // Random velocity to spread particles out
    this.vx = random(-2, 2);
    this.vy = random(-2, 2);
  }

  update() {
    this.x += this.vx;
    this.y += this.vy;
    this.life--; // Decrease lifespan
  }

  display() {
    noStroke();
    // Fade particle as its life decreases
    let particleAlpha = map(this.life, 0, 60, 0, 200);
    fill(this.color.r, this.color.g, this.color.b, particleAlpha);
    circle(this.x, this.y, this.radius * 2);
  }

  // Check if particle has died
  isDead() {
    return this.life <= 0;
  }
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  // Re-initialize gradient colors in case dimensions change significantly
  gradientColor1 = color(224, 255, 255);
  gradientColor2 = color(173, 216, 230);
}