let num = 50;

​

​

function setup() {

  createCanvas(400, 400);

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

    drops.push(new Droplet(random(width), random(height)));

  }

  noFill();

  strokeWeight(3);

  stroke(0, 50, 255, 50);

}

​

function draw() {

  background(220);

  for(let i = drops.length - 1; i >= 0; i --) {

    drops[i].draw();

    let alive = drops[i].update();

    if(!alive ) {

      drops.splice(i, 1);

    }

  }

  if(drops.length < num) {

    drops.push(new Droplet(random(width), random(height)));

  }

}

​

class Droplet {

  constructor(x, y) {

    this.startX = x;

    this.y = y;

    this.x = this.getX();

    this.trail = [];

    this.trailing = false;

    this.spd = 3;

    this.h = random(50, 100);

  }

  update() {

    if(!this.trailing) {

      let c = random();

      this.trailing = c > 0.9991;

    } else {

      if(this.y <= height) {

        this.trail.push(createVector(this.x, this.y));

        this.y += this.spd;

        let n = noise(this.y * 0.01, this.startX);

        this.x = this.getX();

      }

      if(this.trail.length >= this.h || this.y > height) {

        let d = this.trail.shift();

        let c = random();

        if(c >= 0.99) {

          drops.push(new Droplet(d.x, d.y));          

        }  

      }

      if(this.trail.length == 0) {

        return false;

      }

    }

    return true;

  }

  getX() {

    let n = noise(this.y * 0.01, this.startX);

    return this.startX + map(n, 0, 1, -10, 10);

  }

  draw() {

    if(this.trailing) {

      beginShape();

      for(let i = 0; i < this.trail.length; i ++) {

        let v = this.trail[i];

        vertex(v.x, v.y);

      }

      vertex(this.x, this.y);

      endShape();

    } else {

      point(this.x, this.y);

    }

  }

}