リニューアルされたばかりの以下の p5.js のサイトで、関連ライブラリの一覧を見ていた時に気になった「p5.animS」というライブラリに関する記事です。

●p5.js
　https://p5js.org/

このライブラリを使うと、例えば円や線などを描画する際に、その輪郭の軌跡を徐々に描画するアニメーションなどといったものを簡単に実現できるようでした。

それが楽しそうだったのと、現時点で Web検索しても公式以外の解説が出てこないようだったので、まずは「p5.animS」を軽く試してみて内容を記事化したというのが、この記事です。

p5.animS

p5.animS の公式サイト

以下が p5.animS の公式サイトです。

●p5.animS - animates p5.js shapes
　https://wixette.github.io/p5.animS/

公式サンプル

p5.animS の公式サイトを見ていくと、最初に以下の公式サンプルが示されています。

これは、円の輪郭を描画する軌跡のアニメーションです。

公式サンプルに少しだけ手を加えてみる。

上記の公式サンプルに手を加えてみます。

p5.animS の circle() の仕様を確認

その前に、p5.animS の circle() の仕様を確認してみます。

以下のリファレンスを見ると、5つの引数の意味が書いてあります。

●p5.animS - animates p5.js shapes
　https://wixette.github.io/p5.animS/#reference

書き出してみると、以下となるようです。

id：それぞれを識別するためのユニークな文字列の ID
アニメーションの描画時間（ここで指定する数字はフレーム数）
円の中心の x座標
円の中心の y座標
円の半径

通常の円の描画に、ID とアニメーションの描画時間を付け加えたような形です。

手を加えたものを作って動作確認

それでは、公式サンプルに手を加えたものを作ってみます。

以下が実装した内容です。

function setup() {
  createCanvas(550, 450);
  colorMode(HSB, 360, 100, 100, 1);
}

function draw() {
  background(190, 30, 100);
  noFill();

  stroke(0, 0, 100);
  strokeWeight(5);
  animS.circle("c1", 60, width * 0.4, height * 0.5, width * 0.5);

  stroke(320, 0, 100);
  strokeWeight(5);
  animS.circle("c2", 100, width * 0.7, height * 0.5, width * 0.3);
}

function mouseClicked() {
  animS.reset();
}

これを動作させたところ、以下のように想定通りのアニメーションが行われるのを確認できました。

このようなアニメーションを手軽に実現できて良い感じでした！

自由な形状を作る仕組み

今回、とりあえず円の描画を試しましたが、他に線や三角形、矩形などの図形も簡単に扱えるようです。

それ以外にも以下を見ると、配列の配列（入れ子になった配列）を用いることで、より自由な形状の軌跡を扱えるようです。
（x座標・y座標の組を配列にする以外に、6つの要素を持つ配列を使うことでベジエ曲線も指定できるようです）