let cols = ["#d8f3dc","#b7e4c7","#95d5b2","#74c69d","#52b788","#40916c","#2d6a4f","#1b4332","#081c15"];

​

function setup() {

  createCanvas(400, 400);

  for(i = 0; i < 300; i ++){

   bubbles[i] = new Bubble(i,i,i) ;    

  }

}

​

function draw() {

  background(220);

  noFill();

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

      bubbles[i].move();

      bubbles[i].show();

  }

}

​

class Bubble {

  constructor(x, y, r) {

    this.x = x;

    this.y = y;

    this.r = r * 2;

    this.xoff = 0.01;

    this.yoff = 0.1;

    this.c = 0

    this.col = color(cols[floor(random(cols.length))])

  }

​

  move() {

    this.xoff = this.xoff + 0.01;

    this.yoff = this.yoff + 0.001;

    if(this.c > -50) this.c++;

    this.x = this.x + (noise(this.xoff) * this.c) * (noise(this.yoff)) + random(-4, 4);

    this.y = this.y + (noise(this.yoff) * this.c) * (noise(this.xoff)) + random(-4, 4);

    if(this.x - this.r > width) this.x = 0 + this.r;

    if(this.x + this.r < 0) this.x = width - this.r;

    if(this.y - this.r > height) this.y = 0 + this.r;

    if(this.y + this.r < 0) this.y = height - this.r;

  }

  show() {

    stroke(this.col);

    ellipse(this.x, this.y, this.r);

  }

​

}