let w, h, off;

let particles;

​

class Particle {

  constructor(x, y) {

    this.position = createVector(x, y);

    this.velocity = createVector(0, random(0.5, 2));

    this.targetY = this.position.y + random(height);

    this.targetY = constrain(

      this.targetY,

      height / 2 + random(-50, 10),

      height

    );

    this.w = 20;

    this.h = 5;

    this.startOff = int(random(10, 20));

    this.off = this.startOff;

    this.rain = true;

    this.diam = random(2);

    this.bg = 0;

  }

​

  update() {

    if (this.rain) {

      this.position.y += this.velocity.y;

      if (this.position.y >= this.targetY) {

        this.rain = false;

        this.velocity.y = 0;

      }

    } else {

      this.bg = color(0, 0, 0, map(this.w, 20, 100, 180, 0));

      this.off--;

      if (this.off == 0) {

        this.off = this.startOff;

        this.w += 5;

        this.h += 1;

​

        if (this.w >= random(10, 100)) return false;

      }

    }

    return true;

  }

​

  draw() {

    noFill();

​

    strokeWeight(0.5);

    if (this.rain) {

      stroke(color(255, 255, 255, 150));

      // circle(this.position.x, this.position.y-4, 1);

      // stroke(color(255,255,255,200));

      // circle(this.position.x, this.position.y-2, 1);

      // stroke(color(255,255,255,255));

      circle(this.position.x, this.position.y, this.diam); //1);

    } else {

      stroke(color(255, 255, 255, 150));

      fill(this.bg);

      ellipse(this.position.x, this.position.y, this.w, this.h);

    }

  }

}

​

let startY, endY;

let x1, y1, x2, y2, x3, y3;

let origy1,origy2,origy3;

let linea;

function getShoreY() {

  return height / 2 + random(-50, 10);

}

function setup() {

  particles = [];

​

  createCanvas(600, 600);

  startY = getShoreY() - random(60, 100)+random(-10,10);

  endY = getShoreY() - random(60, 100) + random(-10,10);

​

  w = 20;

  h = 5;

  off = 15;

​

  x1 = width / 4;

  x2 = width / 2;

  x3 = (3 * width) / 4;

  y1 = getShoreY() - random(60, 100);

  y2 = getShoreY() - random(60, 100);

  y3 = getShoreY() - random(60, 100);

  origy1 = y1;

  origy2 = y2;

  origy3 = y3;

  linea = 180;

​

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

    particles.push(new Particle(random(width), 0));

  }

}

​

function draw() {

  background(0);

​

  if (frameCount % 20 == 0) {

    // y1 = getShoreY() - random(60, 100);

    // y2 = getShoreY() - random(60, 100);

    // y3 = getShoreY() - random(60, 100);

    y1 += random(-5,5);

    y2 += random(-5,5);

    y3 += random(-5,5);

    y1 = constrain(y1, y1, origy1);

    y2 = constrain(y2, y2, origy2);

    y3 = constrain(y3, y3, origy3);

    linea += random(-50,50);

    linea = constrain(linea,50,200);

  }

  stroke(color(255, 255, 255, linea));

  noFill();

  beginShape();

  vertex(0, startY);

  bezierVertex(x1, y1, x2, y2, x3, y3);

  vertex(width, endY);

  endShape();

​

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

    let r = particles[i].update();

    particles[i].draw();

​

    if (!r) particles.splice(i, 1);

  }

​

  if (random() > 0.8) {

    for (let i = 0; i < random(10); i++) {

      particles.push(new Particle(random(width), 0));

    }

  }

  if (particles.length == 0) {

    for (let i = 0; i < random(10); i++) {

      particles.push(new Particle(random(width), 0));

    }

    // console.log("done");

    // noLoop();

  }

  //   stroke(255);

  //   strokeWeight(0.5);

  //   noFill();

  //   ellipse(width / 2, height / 2, w, h);

​

  //   if (off == 0) {

  //     w += 5;

  //     h += 1;

  //     off = 15;

  //   }

  //   off--;

}

​