stroke(255);

  fill(255);

​

  let d = 100;

  for (let c = 0; c < 7; c += 1) {

    let xPos = 20 + c * 66;

    let yPos = 45 - (c % 3) * 20;

    ellipse(xPos, yPos, d, d);

  }

}

​

let drops = [];

​

let numDrops = 64;

​

function setup() {

  createCanvas(400, 400);

  for (let d = 0; d < numDrops; d += 1) {

    let distFactor = random();

    let aDrop = {

      x: random(width),

      y: random(-50, 50),

      diam: map(distFactor, 0, 1, 30, 15),

      yVel: map(distFactor, 0, 1, 5, 2),

      color: map(distFactor, 0, 1, 255, 200),

      alpha: map(distFactor, 0, 1, 180, 220),

    };

​

    drops.push(aDrop);

  }

​

  // sort by diameter

  drops.sort((a, b) => a.diam - b.diam);

}

​

function draw() {

  background(120);

​

  // for each ellipse:

  for (let d = 0; d < drops.length; d += 1) {

    let aDrop = drops[d];

​

    // draw

    stroke(0, aDrop.alpha);

    fill(aDrop.color, aDrop.alpha);

    ellipse(aDrop.x, aDrop.y, aDrop.diam, aDrop.diam);

​

    // update

    aDrop.y = aDrop.y + aDrop.yVel;

​

    // check

    if (aDrop.y > height) {

      aDrop.x = random(width);

      aDrop.y = random(-50, 50);

    }

  }

​

  // draw some clouds

  drawClouds();

}

​