createCanvas(600, 600);

  frameRate(30)

  colorMode(HSB, 1, 1, 1, 1)

  background(0)

  strokeWeight(0.1)

  // noLoop()

  numBubbles = 25

  bubbles = []

  for (let i = 0; i < numBubbles; i++) {

    bubble = new Bubble(

      Math.random() * width, 

      Math.random() * height, 

      Math.random() * 200 + 30

    )

    bubbles.push(bubble)

  }

}

​

function draw() {

  background(0, 0.3)

  fill(1, 0.01)

  stroke(1)

  for (let bubble of bubbles) {

    bubble.draw()

    bubble.offset += 0.003

    bubble.move()

  }

​

  // spread += inc

}

​

function blob(N, spread, offset = 0) {

  let angle = 0

  noFill()

  beginShape()

  while (angle <= TWO_PI) {

    let xoff = map(cos(angle), -1, 1, offset, offset + spread)

    let yoff = map(sin(angle), -1, 1, offset, offset + spread)

    let r = noise(xoff, yoff) * width/2

    let x = r * cos(angle)

    let y = r * sin(angle)

    vertex(x, y)

​

    angle += TWO_PI / N 

  }

  endShape()

}

​

class Bubble {

  constructor(cx, cy, r) {

    this.cx = cx

    this.cy = cy

    this.r = r

    this.offset = Math.random() * 2000

    this.spread = 0.7 // Math.random() * 0.5 + 0.8

    this.N = 40

    this.dx = (Math.random() + 0.01) * (Math.random() > 0.5 ? -1 : 1)

    this.dy = (Math.random() + 0.01) * (Math.random() > 0.5 ? -1 : 1)

  }

  draw() {

    let angle = 0

    // noFill()

    beginShape()

    while (angle <= TWO_PI) {

      let xoff = map(cos(angle), -1, 1, this.offset, this.offset + this.spread)

      let yoff = map(sin(angle), -1, 1, this.offset, this.offset + this.spread)

      let r = noise(xoff, yoff) * this.r

      let x = this.cx + r * cos(angle)

      let y = this.cy + r * sin(angle)

      vertex(x, y)

​

      angle += TWO_PI / this.N

    }

    endShape()

  }

  move() {

    this.cx += this.dx

    this.cy += this.dy

    if (this.cx <= -this.r/2 && this.dx < 0) {

      this.cx = width + this.r/2

    } 

    if (this.cx >= width + this.r/2 && this.dx > 0)  {

      this.cx = -this.r/2

    }

    if (this.cy <= -this.r/2 && this.dy < 0) {

      this.cy = height + this.r/2

    }

    if (this.cy >= height + this.r/2 && this.dy > 0) {

      this.cy = -this.r/2

    }

  }

}

​