【完走賞ゲット-3】p5.js Web Editor で p5.func を使ったイージング #JavaScript

はじめに

こちらは、完走賞ゲットのため小ネタを毎日投稿しようとチャレンジする Advent Calendar 2022 の 3日目の記事です。

アドベントカレンダー初日・2日目と同様、3日目も 2記事を公開する日になっています（もう一つの記事はまだ完成してない...）。

本編

概要

今回の内容は、p5.js を使ったアニメーションでイージングを扱う話です。
「イージング」については、この「イージング関数チートシート」を見ていただくと、少し具体的な動きを体験することもできます。

p5.js でのイージングという話では、過去に Tweenアニメーションを扱えるライブラリの anime.js で扱ったことがありました（※ 以下の記事や動画が一例）。

●p5.js と anime.js を組み合わせた Tweenアニメーション - Qiita
　https://qiita.com/youtoy/items/361282f1113d88ff5f05

p5.js でのイージングという話題に関して、p5.funcというライブラリを使う方法もあると知り、今回の内容を試しました。

p5.func を利用したイージング

p5.func を利用したイージングという話を見かけたのは、以下の記事でした。

●p5.jsとProcessingでとにかくサクッとイージングをかけたい！ : だらっと学習帳
　http://blog.livedoor.jp/reona396/archives/55793526.html

上記の記事で、実例なども書かれています。

p5.func の仕様

p5.func の公式ページで、仕様の詳細を確認してみます。
イージングに関しては、公式ページに書かれた「p5.Ease()」を使います。

そして、さらに公式の情報を見ていくと、「p5.Ease()」で利用できるメソッドの種類がたくさんあります。

また、1つ以上の引数をとり（※ 2つ目以降はオプション）、0 から 1 の値をとるようです。

実際に p5.Ease() を試す

それでは、実際に p5.js Web Editor で、p5.func の p5.Ease() を組み合わせます。

デフォルトでは p5.func は読み込まれないため、index.html でライブラリをロードする必要があります。読み込むライブラリは、p5.func の公式ページの以下からダウンロードしてください（以下は、Minimized library をダウンロードして利用している例です）。

そして、p5.js Web Editor にライブラリをアップロードします。その上で、index.html でライブラリをロードしている部分に p5.func の読み込みをする行を追加してください。

あとは、以下のようなブログラムを書いて試してみます。

sketch.js

let ease;

function setup() {
  createCanvas(400, 400);
  ease = new p5.Ease();
}

function draw() {
  background(100);

  const ratio = map(frameCount % 100, 0, 100, 0, 1);
  const linearX = ease.linear(ratio);
  circle(linearX * width, height * 0.3, 50);
  const circularInX = ease.circularIn(ratio);
  circle(circularInX * width, height * 0.7, 50);
}

実行してみると、以下のような結果が得られます。
（GIFアニメ化したパラメータの関係で、少しぎこちない動きになっていますが...）

引数は同じ値でも、p5.Ease() のメソッドを変更することで、単位時間あたりに動く量を変化させられることが分かります。

おわりに

これで無事、p5.js Web Editor で p5.func を使ったイージングを使えるようになりました。