AI Flow Field - Perlin Noise Particle Trails Mesmerizing generative art using Perlin noise flow fie

function setup() {
  createCanvas(windowWidth, windowHeight); // Create a canvas that fills the browser window
  colorMode(HSB, 255);                     // Use HSB color mode for easier hue manipulation
  background(0);                           // Initial dark background

  // Optional: Adjust noise detail for different patterns
  // noiseDetail(4); // Default is 8, lower values are smoother, higher values are more detailed

  // Initialize particles
  for (let i = 0; i < numParticles; i++) {
    particles.push(new Particle());
  }

  // Set an initial random noise seed for a unique pattern
  noiseSeed(random(10000));
}

function draw() {
  // Draw a semi-transparent dark background to create fading trails
  // The alpha value (10) controls the length of the trails
  background(0, 10);

  // Update noiseOffset to make the flow field gradually change over time
  noiseOffset += noiseStep;

  // Update and display each particle
  for (let particle of particles) {
    particle.update();
    particle.show();
  }
}

class Particle {
  constructor() {
    // Random initial position within the canvas
    this.pos = createVector(random(width), random(height));
    this.vel = createVector(0, 0); // Initial velocity
    this.acc = createVector(0, 0); // Initial acceleration
    this.maxSpeed = 4;             // Maximum speed of the particle
  }

  update() {
    // Calculate the noise value at the particle's current position
    // We add noiseOffset to the x and y coordinates to make the noise field evolve
    let angle = noise(
      this.pos.x * noiseScale + noiseOffset,
      this.pos.y * noiseScale + noiseOffset
    );

    // Map the noise value (0 to 1) to a full circle (0 to 2π radians)
    angle = map(angle, 0, 1, 0, TWO_PI);

    // Create a force vector based on the angle
    let force = p5.Vector.fromAngle(angle);

    // Scale the force by the flowStrength
    force.mult(flowStrength);

    // Apply the force to the particle's acceleration
    this.acc.add(force);

    // Update velocity and position
    this.vel.add(this.acc);
    this.vel.limit(this.maxSpeed); // Limit the velocity to prevent particles from moving too fast
    this.pos.add(this.vel);

    // Reset acceleration for the next frame
    this.acc.mult(0);

    // Wrap particles around the canvas edges
    if (this.pos.x > width) this.pos.x = 0;
    if (this.pos.x < 0) this.pos.x = width;
    if (this.pos.y > height) this.pos.y = 0;
    if (this.pos.y < 0) this.pos.y = height;
  }

  show() {
    // Set stroke weight and color
    strokeWeight(1);
    noFill();

    // Map the particle's x position to a hue value (0-255)
    // This creates the colorful trails
    let hue = map(this.pos.x, 0, width, 0, 255);
    // Set stroke color with hue, high saturation, high brightness, and semi-transparent alpha
    stroke(hue, 200, 255, 100);

    // Draw a short line segment in the direction of the particle's velocity
    // This creates a more visible trail than just a point
    line(this.pos.x, this.pos.y, this.pos.x - this.vel.x, this.pos.y - this.vel.y);
  }
}

function mousePressed() {
  // Generate a new random seed for the Perlin noise function
  noiseSeed(random(10000));
  noiseOffset = 0; // Reset noise offset so the new pattern starts fresh
  background(0);   // Clear the canvas to start new trails

  // Reinitialize particles with random positions for a completely new start
  particles = [];
  for (let i = 0; i < numParticles; i++) {
    particles.push(new Particle());
  }
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  background(0); // Clear canvas on resize
  noiseOffset = 0; // Reset noise offset
  // Optionally reinitialize particles or let them adapt
  particles = [];
  for (let i = 0; i < numParticles; i++) {
    particles.push(new Particle());
  }
}