from beneath

let air;
let radiance = 3;
let nBubbles = 1000;
function setup() {
  c = max(800, min(windowWidth, windowHeight)) * 0.9;
  createCanvas(c, c);
  background(0);
  ctr = createVector(
    random(-width / 5, width / 5),
    random(-height / 5, -height / 3)
  );
  hues = {
    r1: random(0, 50),
    g1: random(100, 150),
    b1: random(140, 200)
  };
  noStroke();
  air = [];
  for (let i = 0; i < nBubbles; i++) {
    air.push(new Air());
  }
}

function draw() {
  translate(width / 2, height / 2);
  t = frameCount;
  push();
  rotate(-t / 2000);
  for (let i = c * 2.5; i > 0; i -= 4) {
    fill(
      hues.r1 + 180 - i / radiance,
      hues.g1 + 180 - i / radiance,
      hues.b1 + 180 - i / radiance,
      80
    );
    circle(ctr.x, ctr.y, i);
  }
  for (let i = 0; i < air.length; i++) {
    air[i].move();
    air[i].display();
  }
  pop();
}

class Air {
  constructor() {
    this.r = random(0, c);
    this.theta = random(0, TWO_PI);
    this.s = random(1, 5);
    this.speed1 = random(0.05, 0.1);
    this.speed2 = random(0.0001, 0.0005);
  }
  display() {
    push();
    fill(255, 255, 255, 20);
    stroke(255, 255, 255, 50);
    circle(
      ctr.x + this.r * cos(this.theta),
      ctr.y + this.r * sin(this.theta),
      this.s
    );
    stroke(255);
    strokeWeight(1);
    noFill();
    arc(
      ctr.x + this.r * cos(this.theta),
      ctr.y + this.r * sin(this.theta),
      this.s,
      this.s,
      this.theta,
      this.theta + PI / 4
    );
    pop();
  }
  move() {
    if (this.r > 0) {
      this.r -= this.speed1;
      this.theta += this.speed2;
      this.s = this.s * 0.9999;
    } else {
      this.r = random(c, c * 1.5);
      this.s = random(1, 6);
    }
  }
}

function mousePressed() {
  setup();
  draw();
}