p5.jsで背景アニメーションを実装してみた

こんにちは！パン君です。

クリエイティブコーディングの世界で有名な p5.js を使ってみることにしました。

p5.js とは？

Processing というアート向けプログラミング言語をWeb (JavaScript) で動くようにしたライブラリです。
「キャンバスに絵を描く」「動かす」といったことが、驚くほど簡単なコードで書けます。

導入は超簡単

npm でインストールする方法もありますが、今回は手軽に CDN で導入しました。
HTMLに1行足すだけです。

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>

これだけで準備完了。

さっそく書いてみる

まずは「画面全体にキャンバスを作って、円を表示する」ところから始めました。

function setup() {
  // 画面いっぱいのキャンバスを作る
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  // 背景をクリア
  clear();
  
  // 円を描く (x, y, size)
  circle(100, 100, 50);
}

たったこれだけで描画できました。
setup() が最初に1回だけ呼ばれて、draw() が毎フレーム呼ばれる仕組みです。

パーティクルを飛ばしてみる

円をクラス化して配列に入れ、座標を更新するようにすれば無数のパーティクルが動くアニメーションになります。

class Particle {
  constructor() {
    this.x = random(width);
    this.y = random(height);
  }
  
  update() {
    this.y -= 1; // 上に昇る
  }
  
  display() {
    circle(this.x, this.y, 5);
  }
}

これを draw() の中でループさせれば、泡のように昇るアニメーションの完成です。
ベクトルや三角関数を使えば、もっと複雑な動きも作れます。

調子に乗って10パターン作った

楽しくなってきたので、いろいろなパターンを実装してみました。

1. Network: 粒子同士を線でつなぐ（ニューラルネットワーク風）
2. Cosmos: 星がキラキラ瞬く
3. Rain: デジタルな雨（マトリックス風）
4. Circuit: 回路図のようなパルスが走る

...などなど、合計10種類！

ページを開くたびにランダムで切り替わるようにしたので、
リロードするたびに違う雰囲気が楽しめます。

スマホ対策の罠

実装中に一つハマったのが、 スマホでの横スクロール発生 です。
createCanvas(windowWidth, windowHeight)
と書くと、PCでは問題ないのですが、スマホだとスクロールバーの幅が含まれたりして、微妙に画面幅を超えてしまうことがありました。

最終的には、

let w = document.documentElement.clientWidth;

のように、スクロールバーを除いた正確な幅を取得することで解決しました。

まとめ

初めて p5.js を触ってみましたが、 「コードで絵を描く」 という体験はとても新鮮で楽しかったです。

みなさんも、自分のサイトに「ちょっとした遊び心」を足してみてはいかがでしょうか。