different depths

let drops = [];
function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
  setAttributes("alpha", true);
}
function draw() {
  t = frameCount / 400 + 2;
  background(255, 255, 255, 255 * abs(cos(t / 2)));
  orbitControl();
  rotateX(t / 2);
  rotateY(t / 3);
  rotateZ(t / 4);

  if (drops.length < 50) {
    drops.push(new Drops());
  }

  for (let i = 0; i < drops.length; i++) {
    drops[i].display();
    if (drops[i].r > 255) {
      drops.splice(i, 1);
    }
  }
}

class Drops {
  constructor() {
    this.x = random(-width / 2, width / 2);
    this.y = random(-height * 2, -height / 2);
    this.z = random(-height / 2, height / 2);
    this.s = random(1, 10);
    this.stop = random(100, height / 2);
    this.c = random(5, 10);
    this.fall = true;
    this.r = 0;
  }
  display() {
    if (this.y < this.stop) {
      this.fall = true;
    } else {
      this.fall = false;
    }
    if (this.fall) {
      this.y += this.s * 1;
      push();
      noStroke();
      fill(150 + this.c, 150 + this.c * 2, 150 + this.c * 4);
      translate(this.x, this.y, this.z);
      sphere(3, 20, 20);
      pop();
    } else {
      push();
      fill(200 + this.c, 200 + this.c * 2, 200 + this.c * 4, 255 - this.r);
      translate(this.x, this.stop, this.z);
      rotateX(PI / 2);
      this.r += 2;
      torus(this.r, 0.5, 50, 50);
      pop();
    }
  }
}
function keyPressed() {
  if (keyCode === 32) {
    drops = [];
    setup();
    draw();
  }
}