SOURCE

// https://www.youtube.com/embed/HXOD_XDA-KU?autoplay=1

const ctxWidth = 600;
const ctxHeight = 400;

const bubble = [];

function setup() {
  createCanvas(ctxWidth, ctxHeight);
}

function mouseClicked() {
  bubble.push(new Bubble(mouseX, mouseY));
}

function draw() {
  background(0);

  for (let i = bubble.length - 1; i >= 0; i--) {
    const el = bubble[i];
    el.run();

    // 透明后删除
    if (el.isFinished) {
      bubble.splice(i, 1);
    }
  }
}

class Bubble {
  constructor(x, y) {
    const r = 40; // 半径
    const alpha = 255; // alpha
    Object.assign(this, {
      x,
      y,
      r,
      alpha,
    });
  }

  run() {
    this.show();
    this.update();
  }

  show() {
    noStroke();
    fill(255, this.alpha);
    ellipse(this.x, this.y, this.r);
  }

  update() {
    this.x += random(1, -1);
    this.y += random(1, -1);
    this.alpha -= 1;
  }

  // 是否透明
  get isFinished() {
    return !this.alpha;
  }
}