body {
  background-color: black;
  display: flex;
  height: 100vh;
  overflow: hidden;
  align-items: center;
  justify-content: center;
}
//a coded poem
let air; //there is this substance
let radiance = 3; //that drifts towards a light
let nBubbles = 1000; //encapsulated
function setup() {
  c = max(800, min(windowWidth, windowHeight)) * 0.9; //in which you witness
  createCanvas(c, c); //through your senses
  background(0); //from nothing
  ctr = createVector(
    random(-width / 5, width / 5),
    random(-height / 5, -height / 3)
  ); //to a single point
  hues = {
    r1: random(0, 50),
    g1: random(100, 150),
    b1: random(140, 200)
  }; //it is from the depths
  noStroke(); //without definition
  air = [];
  for (let i = 0; i < nBubbles; i++) {
    air.push(new Air());
  } //you can see what catches the light
}

function draw() {
  translate(width / 2, height / 2); //your position
  t = frameCount; //in time
  push(); //is relative
  rotate(-t / 2000); //to the rotation of everything
  for (let i = c * 2.5; i > 0; i -= 4) {
    //that is focused - here
    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(); //change
    air[i].display(); //is what makes you aware of life
  }
  pop();
  //here you are - now you are -  from beneath
}

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();
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.min.js