color pattern animation detected - xelsed.ai

function setup() {
  createCanvas(windowWidth, windowHeight);
  colorMode(HSB, 360, 100, 100, 100); // Use HSB for vibrant colors and easy hue manipulation
  noFill(); // Particles are drawn with stroke

  cols = floor(width / resolution);
  rows = floor(height / resolution);
  flowfield = new Array(cols * rows);

  // Initialize particles with random positions
  for (let i = 0; i < particleCount; i++) {
    particles[i] = new Particle(random(width), random(height));
  }

  background(0); // Initial black background
}

function draw() {
  // Use ADD blend mode for glowing trails
  // A semi-transparent black background fades old trails slowly
  blendMode(ADD);
  background(0, 0, 0, 10); // Alpha value controls trail length (lower = longer)

  // Update base hue for dynamic color changes
  baseHue = (frameCount * 0.1) % 360;

  // Generate the flow field for this frame
  let yoff = 0;
  for (let y = 0; y < rows; y++) {
    let xoff = 0;
    for (let x = 0; x < cols; x++) {
      let index = x + y * cols;
      // Map Perlin noise value (0-1) to an angle (0 to TWO_PI * 4 for more variation)
      let angle = noise(xoff, yoff, zoff) * TWO_PI * 4;
      let v = p5.Vector.fromAngle(angle);
      v.setMag(1); // Normalize force vector
      flowfield[index] = v;
      xoff += noiseScale;
    }
    yoff += noiseScale;
  }
  zoff += 0.005; // Increment zoff to evolve the noise pattern over time

  // Update and display all particles
  for (let i = 0; i < particles.length; i++) {
    particles[i].follow(flowfield);
    particles[i].update();
    particles[i].edges();
    particles[i].show();
  }
}

class Particle {
  constructor(x, y) {
    this.pos = createVector(x, y);
    this.vel = createVector(0, 0);
    this.acc = createVector(0, 0);
    this.maxSpeed = maxSpeed;
    // Initial color based on baseHue with noise offset and low alpha for trails
    this.color = {
      h: (baseHue + noise(x * noiseScale, y * noiseScale, zoff) * 60) % 360,
      s: 100,
      b: 100,
      a: 10,
    };
  }

  // Apply a force vector to the particle's acceleration
  applyForce(force) {
    this.acc.add(force);
  }

  // Follow the flow field
  follow(vectors) {
    let x = floor(this.pos.x / resolution);
    let y = floor(this.pos.y / resolution);
    let index = x + y * cols;
    if (index >= 0 && index < vectors.length) { // Ensure index is within bounds
      let force = vectors[index];
      this.applyForce(force);
    }
  }

  // Update particle's position and velocity
  update() {
    this.vel.add(this.acc);
    this.vel.limit(this.maxSpeed); // Limit velocity to prevent particles from moving too fast
    this.pos.add(this.vel);
    this.acc.mult(0); // Reset acceleration each frame

    // Update particle hue dynamically based on baseHue and a noise offset
    this.color.h = (baseHue + noise(this.pos.x * noiseScale, this.pos.y * noiseScale, zoff) * 60) % 360;
  }

  // Display the particle
  show() {
    strokeWeight(particleSize);
    stroke(this.color.h, this.color.s, this.color.b, this.color.a);
    circle(this.pos.x, this.pos.y, particleSize);
  }

  // Wrap particle around the screen edges
  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;
  }
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  cols = floor(width / resolution);
  rows = floor(height / resolution);
  flowfield = new Array(cols * rows); // Reinitialize flowfield

  // Reinitialize particles with new random positions
  particles = [];
  for (let i = 0; i < particleCount; i++) {
    particles[i] = new Particle(random(width), random(height));
  }
  background(0); // Clear background on resize
}