sketch.js

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

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

function draw() {
   background(0,0,20);
  translate(0, 0, 0);
    particles.forEach(particle => {
    // Update the stroke weight and color of the particle
    let particleHue = noise(particle.pos.x * noiseScale, particle.pos.y * noiseScale, particle.pos.z * noiseScale) * 255;
    stroke(0, particleHue, 255 - particleHue,95);
    strokeWeight(particle.size);
    point(particle.pos.x, particle.pos.y, particle.pos.z);
    
    if (mousePressedFlag) {
      let mousePos = createVector(mouseX - width / 2, mouseY - height / 2, (mouseX + mouseY) / 4 - 100);
      let mouseDir = p5.Vector.sub(mousePos, particle.pos);
      mouseDir.setMag(2); // 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(2); // Adjust movement speed
      particle.pos.add(v);
      
      // Add some upward movement
      particle.pos.z += sin(frameCount * 0.01) * 2;
    }
    
    // Wrap particles to appear on the opposite side if they go off-screen
    if (!onScreen(particle.pos)) {
      particle.pos.x = random(-width / 2, width / 2);
      particle.pos.y = random(-height / 2, height / 2);
      particle.pos.z = random(-200, 200);
    }
  });
}

function mousePressed() {
  mousePressedFlag = true;
}

function mouseReleased() {
  mousePressedFlag = false;
}

// Check if the particle is on the screen
function onScreen(v) {
  return v.x >= -width / 2 && v.x <= width / 2 && v.y >= -height / 2 && v.y <= height / 2 && v.z >= -200 && v.z <= 200;
}

// Adjust the canvas size when the window is resized
function windowResized() {
  resizeCanvas(windowWidth, windowHeight, WEBGL);
}