sketch.js

let particles = [];
const numParticles = 500;
const noiseScale = 0.01;
let flowField;
let attractor;

function setup() {
  createCanvas(windowWidth, windowHeight);
  background(0);
  flowField = new FlowField(20); 
  attractor = new Attractor(width / 2, height / 2, 100); // Create an attractor at the center
  for (let i = 0; i < numParticles; i++) {
    particles.push(new Particle());
  }
}

function draw() {
  flowField.update();
  particles.forEach(particle => {
    attractor.attract(particle); // Apply attraction force from the attractor
    particle.follow(flowField);
    particle.update();
    particle.edges();
    particle.show();
  });
  attractor.show(); // Display the attractor
}

class FlowField {
  constructor(r) {
    this.resolution = r;
    this.cols = floor(width / this.resolution);
    this.rows = floor(height / this.resolution);
    this.field = new Array(this.cols * this.rows);
    this.zoff = 0;
  }

  update() {
    let xoff = 0;
    for (let i = 0; i < this.cols; i++) {
      let yoff = 0;
      for (let j = 0; j < this.rows; j++) {
        let index = i + j * this.cols;
        let angle = noise(xoff, yoff) * TWO_PI * 2;
        let v = p5.Vector.fromAngle(angle);
        v.setMag(1);
        this.field[index] = v;
        yoff += noiseScale;
      }
      xoff += noiseScale;
    }
  }
}

class Particle {
  constructor() {
    this.pos = createVector(random(width), random(height));
    this.vel = createVector(0, 0);
    this.acc = createVector(0, 0);
    this.maxSpeed = 2;
    this.prevPos = this.pos.copy();
  }

  follow(flow) {
    let x = floor(this.pos.x / flow.resolution);
    let y = floor(this.pos.y / flow.resolution);
    let index = x + y * flow.cols;
    let force = flow.field[index];
    this.applyForce(force);
  }

  applyForce(force) {
    this.acc.add(force);
  }

  update() {
    this.vel.add(this.acc);
    this.vel.limit(this.maxSpeed);
    this.pos.add(this.vel);
    if (this.acc.mag() !== 0 && isFinite(this.acc.mag())) { 
    this.acc.mult(0); // Only multiply if acc is defined and finite
    }
  }

  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;
    this.prevPos = this.pos.copy();
  }

  show() {
    stroke(0, random(150, 200), random(200, 250), 30);
    strokeWeight(1);
    line(this.prevPos.x, this.prevPos.y, this.pos.x, this.pos.y);
    this.updatePrev();
  }

  updatePrev() {
    this.prevPos.x = this.pos.x;
    this.prevPos.y = this.pos.y;
  }
}

class Attractor {
  constructor(x, y, m) {
    this.pos = createVector(x, y);
    this.mass = m;
    this.r = sqrt(this.mass) * 2;
  }

  attract(mover) {
    let force = p5.Vector.sub(this.pos, mover.pos);
    let distanceSq = constrain(force.magSq(), 100, 1000);
    let G = 5;
    let strength = G * (this.mass * mover.mass) / distanceSq;
    force.setMag(strength);
    mover.applyForce(force);
  }

  show() {
    noStroke();
    fill(0, 150, 200,10);
    ellipse(this.pos.x, this.pos.y, this.r * 1.2);
  }
}

function mouseClicked() {
  attractor.pos.x = mouseX;
  attractor.pos.y = mouseY;
}