p5.jsで雪を降らすアニメーション

var NUM_OF_BUBBLES = 50; // 生成するバブルの数
var MIN_SIZE = 1; // バブルの最小半径
var MAX_SIZE = 4; // バブルの最大半径
var bubbles = []; // 生成したバブルを格納する配列

function setup() {
  createCanvas(640, 480);

  for (let i = 0; i < NUM_OF_BUBBLES; i++) {
    bubbles.push(new Bubble());
  }
}

function draw() {
  background(0);
  for (let b of bubbles) {
    b.move(); // 上昇
    b.show(); // 描画
  }
}

class Bubble {
  constructor() {
    this.x = random(width); // x座標の位置はランダムにする
    this.y = height; // バブルの初期位置はキャンバスの一番下とする
    this.r = random(MIN_SIZE, MAX_SIZE); // バブルの半径
    this.speedY = random(-2, -1); // 上昇する速度
    this.lightX = random([-1, 1]); // バブルに描画する光のx座標の位置
    this.lightY = random([-1, 1]); // バブルに描画する光のy座標の位置
  }

  move() {
    this.x += random(-1, 1);
    this.y -= this.speedY;

    if (this.isOffScreen()) {
      this.x = random(width);
      this.y = 0;
      this.r = random(MIN_SIZE, MAX_SIZE);
    }
  }

  show() {
    stroke(255, 255, 255);
    ellipse(this.x, this.y, this.r * 2);
    fill(255)    
  drawingContext.shadowBlur = 20;
  drawingContext.shadowColor = color(255, 255, 255);
  }

  isOffScreen() {
    return this.y > 480;
  }
}

  drawingContext.shadowBlur = 20;
  drawingContext.shadowColor = color(255, 255, 255);