Start: Particles

let particles = [];

class Particle {
  constructor(x, y) {
    this.pos = createVector(x, y);
    this.vel = p5.Vector.random2D().mult(random(0.6, 2.2));
    this.life = 255;
  }
  update() {
    this.vel.mult(0.99);
    this.pos.add(this.vel);
    this.life -= 4;
  }
  draw() {
    noStroke();
    fill(255, 45, 140, this.life);
    circle(this.pos.x, this.pos.y, 10);
  }
  dead() {
    return this.life <= 0;
  }
}

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(20, 22, 30, 30);
  for (let i = 0; i < 5; i++) particles.push(new Particle(mouseX, mouseY));
  for (let i = particles.length - 1; i >= 0; i--) {
    particles[i].update();
    particles[i].draw();
    if (particles[i].dead()) particles.splice(i, 1);
  }
}

let drops = [];

class Drop {
  constructor() {
    this.pos = createVector(width / 2, height - 30);
    this.vel = createVector(random(-1.8, 1.8), random(-6, -2));
    this.life = 220;
  }
  update() {
    this.vel.y += 0.12;
    this.pos.add(this.vel);
    this.life -= 3;
  }
  draw() {
    stroke(255, 70, 150, this.life);
    line(this.pos.x, this.pos.y, this.pos.x - this.vel.x * 2, this.pos.y - this.vel.y * 2);
  }
  dead() {
    return this.life <= 0;
  }
}

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(252);
  for (let i = 0; i < 6; i++) drops.push(new Drop());
  for (let i = drops.length - 1; i >= 0; i--) {
    drops[i].update();
    drops[i].draw();
    if (drops[i].dead()) drops.splice(i, 1);
  }
}