Sketch 2026-03-10 19:26

function preload() {
  // Load the GIF from the provided URL
  // loadImage() can handle GIFs and will play them automatically
  gif = loadImage('https://images.steamusercontent.com/ugc/1688248122333193690/E203434B4344D6B9AEF48513F5F682656647EE83/?imw=512&&ima=fit&impolicy=Letterbox&imcolor=%23000000&letterbox=false');
}

function setup() {
  createCanvas(windowWidth, windowHeight);
  // Tip: Use windowWidth/windowHeight for responsive canvas

  // Set image drawing mode to CENTER so we can position the GIF by its center
  imageMode(CENTER);

  // Switch to HSB color mode for easier rainbow gradients
  // Hue: 0-360 (rainbow spectrum)
  // Saturation: 0-100 (how vibrant the color is)
  // Brightness: 0-100 (how light/dark the color is)
  // Alpha: 0-100 (transparency)
  colorMode(HSB, 360, 100, 100, 100);
}

function draw() {
  background(0, 0, 100); // White background in HSB (Hue 0, Saturation 0, Brightness 100)

  // --- Rainbow Ring Pulses ---
  // Add new rainbow pulses periodically
  if (frameCount % 60 === 0) { // Create a new pulse every 60 frames (approx. 1 second)
    let p = new RainbowPulse(width / 2, height / 2);
    rainbowPulses.push(p);
  }

  // Update and display all existing rainbow pulses
  // Loop backwards to safely remove pulses when they "die"
  for (let i = rainbowPulses.length - 1; i >= 0; i--) {
    rainbowPulses[i].update();
    rainbowPulses[i].display();
    if (rainbowPulses[i].isDead()) {
      rainbowPulses.splice(i, 1);
    }
  }

  // Calculate GIF position and size (centered and slightly scaled down)
  let gifX = width / 2;
  let gifY = height / 2;
  let gifWidth = gif.width * 0.7; // Scale down to 70%
  let gifHeight = gif.height * 0.7;

  // Display the GIF centered on the canvas
  image(gif, gifX, gifY, gifWidth, gifHeight);

  // --- Particle System ---
  // Add new particles periodically
  // We'll add one new particle every 5 frames
  if (frameCount % 5 === 0) {
    let p = new Particle(gifX, gifY); // Create a new particle at the GIF's center
    particles.push(p); // Add it to our particles array
  }

  // Update and display all existing particles
  // Loop backwards to safely remove particles when they "die"
  for (let i = particles.length - 1; i >= 0; i--) {
    particles[i].update(); // Move the particle
    particles[i].display(); // Draw the particle

    // If a particle has lived its full lifespan, remove it from the array
    if (particles[i].isDead()) {
      particles.splice(i, 1); // Remove one element at index i
    }
  }
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  // Called when preview panel is resized
}

class Particle {
  constructor(x, y) {
    this.pos = createVector(x, y); // Position of the particle
    this.vel = p5.Vector.random2D(); // Random direction for initial movement
    this.vel.mult(random(1, 3)); // Random speed (1 to 3 pixels per frame)
    this.acc = createVector(0, 0); // Acceleration (not used in this simple example, but good practice)
    this.lifespan = 255; // Lifespan of the particle (used for alpha/fading)
    this.size = random(5, 15); // Random size for the particle
    // Random bright color for each particle in HSB mode (full saturation, full brightness)
    this.color = color(random(360), 100, 100);
  }

  update() {
    this.vel.add(this.acc); // Apply acceleration to velocity
    this.pos.add(this.vel); // Apply velocity to position
    this.acc.mult(0); // Reset acceleration

    // Decrease lifespan, causing the particle to fade out
    this.lifespan -= random(1, 5); // Decrease lifespan by a random amount each frame
  }

  display() {
    noStroke(); // No border for the particles
    // Set the fill color, using the current lifespan as the alpha (transparency) value
    // Since lifespan is 0-255, we need to map it to 0-100 for HSB alpha
    this.color.setAlpha(map(this.lifespan, 0, 255, 0, 100));
    fill(this.color);
    ellipse(this.pos.x, this.pos.y, this.size); // Draw the particle as a circle
  }

  // Check if the particle's lifespan is over
  isDead() {
    return this.lifespan < 0;
  }
}

class RainbowPulse {
  constructor(x, y) {
    this.pos = createVector(x, y); // Center of the pulse
    this.lifespan = 120; // How long the pulse lives (frames)
    this.maxRadius = min(width, height) * 0.9; // Max radius for the outermost ring
    this.startHue = frameCount % 360; // Starting hue for the first ring, cycling through the rainbow
    this.numRings = 15; // Number of concentric rings in this pulse
    this.ringThickness = random(5, 15); // Random thickness for the rings
  }

  update() {
    this.lifespan--; // Decrease lifespan each frame
  }

  display() {
    noFill(); // Rings should not be filled
    strokeWeight(this.ringThickness); // Set the thickness for all rings

    // Calculate the current expansion factor based on lifespan
    let expansionFactor = map(this.lifespan, 120, 0, 0, 1); // 0 to 1 as it expands

    // Loop through each ring
    for (let i = 0; i < this.numRings; i++) {
      // Calculate hue for this specific ring, cycling through the rainbow
      let ringHue = (this.startHue + i * (360 / this.numRings)) % 360;

      // Calculate the radius for this ring, expanding from the center
      // The outermost ring will reach maxRadius when lifespan is 0
      let ringRadius = this.maxRadius * expansionFactor;
      // Add a slight offset for concentric spacing
      ringRadius += i * (this.ringThickness + 5); // Spacing adjusted by thickness

      // Calculate alpha (transparency) for fading out
      // Fade from 100 to 0 over its lifespan
      let alpha = map(this.lifespan, 120, 0, 100, 0);

      // Set the stroke color (hue, saturation 100, brightness 100, alpha)
      stroke(ringHue, 100, 100, alpha);

      // Draw the ellipse as a ring (ellipse() uses diameter, so radius * 2)
      ellipse(this.pos.x, this.pos.y, ringRadius * 2);
    }
  }

  // Check if the pulse's lifespan is over
  isDead() {
    return this.lifespan < 0;
  }
}