const grav = 0.2;

​

let particles = [];

let numDrops = 200;

​

​

function setup() {

  createCanvas(400, 400);

  wind = random(-0.1, 0.1);

  for(let i = 0; i < numDrops; i ++) {

    particles.push(new Drop(random(width), random(-height)));

  }

}

​

function draw() {

  background(80);

  particles = particles.flatMap(p => {

    p.update();

    p.show();

    if(!p.isActive()) {

      if(p.isSplash) {

        return [];

      }

      const newP = [];

      if(random() < 0.5) {

        const a = random(-3 * PI/4, -PI/4);

        p.y = height;

        p.vx = cos(a) * p.vy/4;

        p.vy = sin(a) * p.vy/4;

        p.isSplash = true;

        newP.push(p);

      }

      newP.push(new Drop(random(width), -20));

      return newP;

    }

    return p;

  });

}

​

class Drop {

  constructor(x, y, vx, vy) {

    this.x = x;

    this.y = y;

    this.px = x;

    this.py = y;

    this.z = random(10);

    if(vx !== undefined && vy !== undefined) {

      this.vx = vx;

      this.vy = vy;

      this.isSplash = true;

    } else {

      this.vx = wind;

      this.vy = 2;

      this.isSplash = false;

    }

  }

  isActive() {

    return this.y <= height;

  }

  update() {

    const distScale = map(this.z, 0, 10, 1, 0.1)

    this.vy += grav * distScale;

    this.px = this.x;

    this.py = this.y;

    this.x += this.vx;

    this.y += this.vy;

  }

  show() {

    strokeWeight(map(this.z, 0, 10, 3, 0));

    stroke(100, 150, 255);

    line(this.px, this.py, this.x, this.y);

  }  

}