Neon Pulse Rings - xelsed.ai

function setup() {
  createCanvas(windowWidth, windowHeight); // Create a canvas that fills the window
  pixelDensity(1); // Set pixel density to 1 for consistent appearance across devices

  // Add the neon colors to the palette
  neonColors.push(color(0, 255, 255)); // Cyan
  neonColors.push(color(255, 0, 255)); // Magenta
  neonColors.push(color(255, 105, 180)); // Pink

  // Determine the maximum radius a ring can reach, scaling with the window size
  maxRadius = max(width, height) * 0.7;
}

function draw() {
  background(0); // Dark background

  // Set the blend mode to ADD for a glowing effect.
  // When colors are added together, they become brighter, simulating neon glow.
  blendMode(ADD); // https://p5js.org/reference/#/p5/blendMode

  // Periodically create a new ring
  if (frameCount % frameInterval === 0) {
    let initialRadius = 5; // Rings start small
    // Pick a random color from the neon palette
    let colorIndex = floor(random(neonColors.length));
    rings.push(new Ring(width / 2, height / 2, initialRadius, neonColors[colorIndex]));
  }

  // Iterate through the rings array from back to front
  // This allows safe removal of rings without affecting the loop index
  for (let i = rings.length - 1; i >= 0; i--) {
    rings[i].update(); // Update the ring's size and fade
    rings[i].show(); // Draw the ring
    if (rings[i].isDead()) {
      rings.splice(i, 1); // Remove the ring if it's faded out or too large
      // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice
    }
  }

  // Reset the blend mode to default (BLEND) for any other drawing operations
  // This is good practice if you plan to draw other elements later in draw()
  blendMode(BLEND); // https://p5js.org/reference/#/p5/blendMode
}

class Ring {
  constructor(x, y, initialRadius, color) {
    this.x = x; // X-coordinate of the ring's center
    this.y = y; // Y-coordinate of the ring's center
    this.initialRadius = initialRadius; // Radius when the ring is created
    this.color = color; // Color of the ring
    this.birthFrame = frameCount; // Frame count when this ring was born
    this.currentRadius = initialRadius; // Current radius of the ring
    this.alpha = 255; // Current alpha (transparency) of the ring
  }

  update() {
    this.currentRadius = this.initialRadius + (frameCount - this.birthFrame) * ringSpeed;
    this.alpha = map(this.currentRadius, this.initialRadius, maxRadius, 255, 0);
    this.alpha = max(0, this.alpha);
  }

  show() {
    this.color.setAlpha(this.alpha);
    noFill();
    stroke(this.color);
    strokeWeight(3);
    circle(this.x, this.y, this.currentRadius * 2);
  }

  isDead() {
    return this.alpha <= 0 || this.currentRadius > maxRadius;
  }
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight); // https://p5js.org/reference/#/p5/resizeCanvas
  // Recalculate maxRadius based on new window size
  maxRadius = max(width, height) * 0.7;
  // Clear all existing rings for simplicity, so they restart from the new center
  rings = [];
}