p5.jsで雪を降らせる

⇒実際の動作ページはこちら

<div id="P5Canvas"></div>

<script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/p5.js"></script>

<script>
var canvas;
var NUM_OF_BUBBLES = 50;
var MIN_SIZE = 1;
var MAX_SIZE = 4;
var bubbles = [];

function setup() {
  canvas=createCanvas(640, 480);
  canvas.parent("P5Canvas");

  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);
    this.y = height;
    this.r = random(MIN_SIZE, MAX_SIZE);
    this.speedY = random(-2, -1);
    this.lightX = random([-1, 1]);
    this.lightY = random([-1, 1]);
  }

  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;
  }
}
  </script>