​

// Count of rain droplets

let count = 367;

​

// should a droplet go back up? or be replaced (its faster but less realistic)

let doLoop = false;

​

// The speed at which the bucket should fill (it would make sense to increase this with count)

let fillSpeed = 18;

​

// The speed at which the bucket should empty (it would make sense to make this greater than the fillSpeed)

// let emptySpeed = 18;

​

// The delay between the bucket filling and emptying (can be 0)

let delayBetweenFillAndEmpty = 10;

​

// </Customization>

​

let a = 0;

let empty = 1;

let fillAmount = -100;

​

let droplets = [];

​

function setup() {

  createCanvas(367*2, 367*2);

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

    droplets.push(new Droplet(random(width), random(-height * 3.67), -1, doLoop));

  }

}

​

function draw() {

  background(0, 0, 0);

    fill(138, 43, 226);

  rect(0, height - fillAmount, width, height + delayBetweenFillAndEmpty * 3.67)

  fillAmount += 0.0367 * random(2, 3.67 * 2) * fillSpeed * empty;

  if (fillAmount >= height + 3.67 * delayBetweenFillAndEmpty) {

    // noLoop();

    empty = -3;

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

      droplets[i] = new Droplet(random(width), random(-height * 3.67), -1, true);

    }

  } 

  if (empty == 1) {

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

      droplets[i].tick();

      if (!doLoop) {

        if (droplets[i].endOfLife) {

          droplets[i] = new Droplet(random(width), random(-height * 3.67), -1, doLoop);

        }

      }

    }

  } else {

    if (fillAmount < -delayBetweenFillAndEmpty) empty = 1;

    // fill(0)

    // ellipse(width/2, height , 200, 50)

  }

}