let quant = 20

let bubbleX = [];

let bubbleY = [];

​

function setup() {

  createCanvas(400, 400);

  pixelDensity(1);

  noiseSeed(2);

  //bubble arrays 

  for (var i = 0; i<quant; i+=1) {

    bubbleX[i]=random(width);

    bubbleY[i] = random(height);

  }  

}

​

​

function draw() {

  //background

  let yoff = 0.05;

  loadPixels();

  for (let y = 0; y < height; y++) {

    let xoff = 3;

    for (let x = 0; x < width; x++) {

      let index = (x + y * width) * 4;

      let r = noise(xoff, yoff) * 255;

      pixels[index + 0] = 40;

      pixels[index + 1] = 151;

      pixels[index + 2] = 164;

      pixels[index + 3] = r;

      xoff += inc;

    }

    yoff += inc;

  }

    updatePixels();

  //bubbles

  randomSeed(80);

  for (var i = 0; i<quant; i+=1) {

    diameter = random(20, 80);

    let x = bubbleX[i];

    let y = bubbleY[i];

    bubble(x, y, diameter);

    bubbleY[i]-=30-diameter/4

    if (bubbleY[i]<-diameter) {

      bubbleY[i] = height+diameter;

    }

  }

}

​

function bubble(x, y, d) {

  push(); 

  translate(x, y); 

  fill(255, 255, 255, 20);

  strokeWeight(1);

  stroke(255, 255, 255, 180);

  ellipse(0, 0, d, d);

  strokeWeight(2);

  noFill();

  arc(0, 0, d-10, d-10, 5*PI/3, TWO_PI);

  pop();

}