Whispering Currents

let particles = [];
const NUM = 500;
const SCL = 18;
let cols, rows;
let zOff = 0;
let hueShift = 0;

function setup() {
  createCanvas(windowWidth, windowHeight);
  colorMode(HSB, 360, 100, 100, 100);
  cols = floor(width / SCL) + 1;
  rows = floor(height / SCL) + 1;
  background(230, 40, 8);
  for (let i = 0; i < NUM; i++) {
    particles.push(new Particle());
  }
  noStroke();
}

function draw() {
  noStroke();
  fill(230, 45, 6, 6);
  rect(0, 0, width, height);

  zOff += 0.0018;
  hueShift += 0.05;

  const mPressed = mouseIsPressed;
  const mx = mouseX;
  const my = mouseY;
  const repelR = 200;
  const repelR2 = repelR * repelR;

  for (let i = 0; i < particles.length; i++) {
    const p = particles[i];

    const nx = p.pos.x * 0.005;
    const ny = p.pos.y * 0.005;
    const angle = noise(nx, ny, zOff) * TAU * 2;
    p.acc.set(cos(angle), sin(angle));
    p.acc.mult(0.18);

    if (mPressed) {
      const dx = p.pos.x - mx;
      const dy = p.pos.y - my;
      const d2 = dx * dx + dy * dy;
      if (d2 < repelR2 && d2 > 0.01) {
        const d = sqrt(d2);
        const strength = (1 - d / repelR) * 1.4;
        p.acc.x += (dx / d) * strength;
        p.acc.y += (dy / d) * strength;
      }
    }

    p.vel.add(p.acc);
    p.vel.limit(2.6);
    p.pos.add(p.vel);
    p.vel.mult(0.96);

    if (p.pos.x < 0) { p.pos.x += width; p.prev.x = p.pos.x; }
    if (p.pos.x > width) { p.pos.x -= width; p.prev.x = p.pos.x; }
    if (p.pos.y < 0) { p.pos.y += height; p.prev.y = p.pos.y; }
    if (p.pos.y > height) { p.pos.y -= height; p.prev.y = p.pos.y; }

    const hue = (p.pos.x / width) * 120 + (p.pos.y / height) * 80 + hueShift + 180;
    const sat = 70 + (p.pos.y / height) * 25;
    const bri = 85 + sin((p.pos.x + p.pos.y) * 0.01 + hueShift * 0.02) * 10;

    stroke(hue % 360, sat, bri, 55);
    strokeWeight(1.2);
    line(p.prev.x, p.prev.y, p.pos.x, p.pos.y);

    p.prev.set(p.pos.x, p.pos.y);
  }
}

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

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  background(230, 40, 8);
}