AI Firefly Meadow - Peaceful Night Scene - xelsed.ai

function setup() {
  createCanvas(windowWidth, windowHeight); // Create a full-window canvas
  noStroke(); // No outlines for shapes

  // Initialize fireflies
  for (let i = 0; i < NUM_FIREFLIES; i++) {
    fireflies.push(new Firefly(random(width), random(height)));
  }

  // Initialize stars in the upper 60% of the canvas
  for (let i = 0; i < NUM_STARS; i++) {
    stars.push(new Star(random(width), random(height * 0.6)));
  }
}

function draw() {
  // 1. Draw the gradient nighttime background
  drawNightGradient();

  // 2. Draw a slightly transparent rectangle over the canvas
  // This creates the "trailing glow path" effect by making previous frames fade out.
  fill(0, 5); // Very slight opacity (lower number = longer trails)
  rect(0, 0, width, height);

  // 3. Update and display all stars
  for (let star of stars) {
    star.update();
    star.display();
  }

  // 4. Update and display all fireflies
  for (let firefly of fireflies) {
    firefly.update();
    firefly.display();
  }
}

function drawNightGradient() {
  // Deep blue at the top, darker blue-green at the bottom
  let c1 = color(0, 0, 50);   // Top color: Deep night blue
  let c2 = color(0, 30, 40);  // Bottom color: Dark meadow green-blue

  for (let y = 0; y < height; y++) {
    let inter = map(y, 0, height, 0, 1); // Interpolation amount based on y position
    let c = lerpColor(c1, c2, inter);    // Blend the two colors
    stroke(c); // Set stroke to the interpolated color
    line(0, y, width, y); // Draw a horizontal line across the canvas
  }
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight); // Adjust canvas size

  // Re-initialize stars and fireflies to fit the new canvas dimensions
  fireflies = [];
  stars = [];
  for (let i = 0; i < NUM_FIREFLIES; i++) {
    fireflies.push(new Firefly(random(width), random(height)));
  }
  for (let i = 0; i < NUM_STARS; i++) {
    fireflies.push(new Star(random(width), random(height * 0.6)));
  }
}

class Firefly {
  constructor(x, y) {
    // Position, velocity, acceleration vectors
    this.pos = createVector(x, y);
    this.vel = createVector();
    this.acc = createVector();

    this.maxSpeed = 1.0; // Maximum movement speed
    this.maxForce = 0.03; // Maximum force applied for movement

    // Perlin noise offsets for organic "floating" movement
    this.xoff = random(1000); // Random start point for noise in x direction
    this.yoff = random(1000); // Random start point for noise in y direction

    // Glow pulsing properties
    this.glowState = false; // true = glowing, false = off
    this.glowTimer = 0;
    this.glowDuration = random(60, 180); // How long it stays on/off (in frames)
    this.glowColor = color(200, 255, 100); // Yellow-green glow color
    this.glowHaloRadius = 15; // Size of the blur effect for the halo
  }

  update() {
    // --- Noise-based organic movement ---
    // Generate Perlin noise values between -1 and 1
    let noiseX = noise(this.xoff) * 2 - 1;
    let noiseY = noise(this.yoff) * 2 - 1;

    // Create a force vector from the noise values
    let noiseForce = createVector(noiseX, noiseY);
    noiseForce.setMag(this.maxForce * 0.4); // Apply a subtle noise force
    this.acc.add(noiseForce);

    // Increment noise offsets to create continuous movement
    this.xoff += 0.01;
    this.yoff += 0.01;

    // --- Mouse attraction ---
    let mouse = createVector(mouseX, mouseY); // Get mouse position
    let dir = p5.Vector.sub(mouse, this.pos); // Calculate direction vector from firefly to mouse
    dir.normalize(); // Normalize to get only direction (unit vector)
    dir.mult(this.maxForce * 0.15); // Apply a very subtle attraction force towards the mouse
    this.acc.add(dir);

    // --- Apply movement ---
    this.vel.add(this.acc); // Add acceleration to velocity
    this.vel.limit(this.maxSpeed); // Limit velocity to maxSpeed
    this.pos.add(this.vel); // Add velocity to position
    this.acc.mult(0); // Reset acceleration for the next frame

    // --- Wrap around edges ---
    // If firefly goes off one side, it reappears on the opposite side
    if (this.pos.x < 0) this.pos.x = width;
    if (this.pos.x > width) this.pos.x = 0;
    if (this.pos.y < 0) this.pos.y = height;
    if (this.pos.y > height) this.pos.y = 0;

    // --- Glow pulsing logic ---
    this.glowTimer++;
    if (this.glowTimer > this.glowDuration) {
      this.glowState = !this.glowState; // Toggle glow state (on/off)
      this.glowTimer = 0; // Reset timer
      this.glowDuration = random(60, 180); // Set a new random duration for the next state
    }
  }

  display() {
    if (this.glowState) {
      // Create the soft glow halo using CSS blur filter
      // drawingContext is the raw WebGL/Canvas2D context
      drawingContext.filter = `blur(${this.glowHaloRadius}px)`;
      fill(this.glowColor);
      circle(this.pos.x, this.pos.y, 8); // Draw the small core firefly body

      // Reset the filter immediately after drawing the blurred circle
      drawingContext.filter = 'none';

      // Draw a slightly larger, more transparent circle for an even softer outer glow
      // This adds depth to the glow effect
      fill(red(this.glowColor), green(this.glowColor), blue(this.glowColor), 100);
      circle(this.pos.x, this.pos.y, 16);
    }
  }

class Star {
  constructor(x, y) {
    this.pos = createVector(x, y);
    this.size = random(1, 3); // Random size for the star

    // Perlin noise offset for organic twinkling
    this.twinkleOffset = random(1000);
  }

  update() {
    // Map noise value to alpha for twinkling effect
    this.alpha = map(noise(this.twinkleOffset), 0, 1, 100, 255); // Alpha varies from 100 to 255
    this.twinkleOffset += 0.02; // Increment offset for continuous twinkling motion
  }

  display() {
    fill(255, this.alpha); // White color with varying transparency
    circle(this.pos.x, this.pos.y, this.size); // Draw the star as a small circle
  }