p5.js

let particles = [];
const num = 100;
const noiseScale = 0.01;
let angleOffset = 0;
let mousePressedFlag = false;

function setup() {
  createCanvas(windowWidth, windowHeight);
  // Initialize particles with position vectors and random sizes
  for (let i = 0; i < num; i++) {
    particles.push({
      pos: createVector(random(width), random(height)),
      size: random(5, 40) // Random size between 5 and 40
    });
  }
}

function draw() {
  setGradient(0, 0, width, height, color(0, 0, 20), color(7, 62, 93), 'Y');

  particles.forEach(particle => {
    let particleHue = noise(particle.pos.x * noiseScale, particle.pos.y * noiseScale) * 255;
    stroke(0, particleHue, 255 - particleHue, 95);
    strokeWeight(particle.size);
    point(particle.pos.x, particle.pos.y);
    
    if (mousePressedFlag) {
      let mousePos = createVector(mouseX, mouseY);
      let mouseDir = p5.Vector.sub(mousePos, particle.pos);
      mouseDir.setMag(1); // Adjust speed
      particle.pos.add(mouseDir);
    } else {
      let n = noise(particle.pos.x * noiseScale, particle.pos.y * noiseScale, frameCount * noiseScale);
      let a = TAU * n + angleOffset;
      let v = p5.Vector.fromAngle(a);
      v.mult(1); // Adjust movement speed
      particle.pos.add(v);
    }
    
    // Wrap particles to appear on the opposite 
    if (!onScreen(particle.pos)) {
      particle.pos.x = random(width);
      particle.pos.y = random(height);
    }
  });
}

function mousePressed() {
  mousePressedFlag = true;
}
function mouseReleased() {
  mousePressedFlag = false;
}
function onScreen(v) {
  return v.x >= 0 && v.x <= width && v.y >= 0 && v.y <= height;
}
function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}
function setGradient(x, y, w, h, c1, c2, axis) {
  noFill();
  if (axis === 'Y') {  // Top to bottom gradient
    for (let i = y; i <= y + h; i++) {
      let inter = map(i, y, y + h, 0, 1);
      let c = lerpColor(c1, c2, inter);
      stroke(c);
      line(x, i, x + w, i);
    }
  }
}