Tween24.js のイージングと p5.js との組み合わせが楽しくてさらに試す： 振幅や周期などのカスタマイズ【p5.js-2】

この記事は、「p5.js Advent Calendar 2023」の 16日目の記事です。

今回の内容

今回の内容は、以下の 2つの記事の続きにあたるものです。

• p5.js と Tween24.js を組み合わせたアニメーション・イージングのお試し 【完走賞ゲット-12】 - Qiita
• p5.js と Tween24.js を組み合わせたお試し：イージングのブレンド【完走賞ゲット-13】 - Qiita

前々回・前回の記事では、Tween24.js　を使ったシンプルなイージングと、複数のイージングを混ぜて使うブレンドという機能を試しました。まだ他にも試せてない機能があり、また Tween24.js を使っていて楽しくなってきたので、さらにお試しをやってみました。

Tween24.js とは

前々回・前回の記事で描画ライブラリの p5.js と組み合わせた「Tween24.js」は、メソッドチェーンでアニメーションが書けるライブラリです。

他にも、アニメーション用ライブラリで p5.js と組み合わせやすいものはあり、それについては前々回の記事で少し触れていました。

Tween24.js のお試し

Tween24.js で試す機能を選定する

前々回・前回とは別の、今回の記事で試す「Tween24.js」の機能を選定してみます。

今回は、「特殊なイージングの系統で、オーバー具合や振幅の大きさや周期をカスタマイズできる」という「Ease24._Back...With」「Ease24._Elastic...With」を使ってみることにしました。

「Ease24._Back...With」

まずは「Ease24._Back...With」を使った場合の動きの違いを試してみます。
書いたプログラムは、以下の通りです。

let tweenData1, tweenData2, tween1, tween2;

function setup() {
  createCanvas(500, 400);
  noStroke();
  fill(100, 120, 190);

  tweenData1 = { progress: 0 };
  tweenData2 = { progress: 0 };

  tween1 = Tween24.tween(tweenData1, 1, Ease24._BackInOut(), { progress: 1 });
  tween2 = Tween24.tween(tweenData2, 1, Ease24._BackInOutWith(3), {
    progress: 1,
  });
}

function draw() {
  background(220);

  const x1 = tweenData1.progress * width;
  const x2 = tweenData2.progress * width;
  circle(x1, height * 0.3, 100);
  circle(x2, height * 0.7, 100);
}

function mouseClicked() {
  tween1.play();
  tween2.play();
}

「Ease24._Elastic...With」

続いて「Ease24._Elastic...With」を使った場合の動きの違いを試してみます。
書いたプログラムは、以下の通りです。

let tweenData1, tweenData2, tween1, tween2;

function setup() {
  createCanvas(500, 400);
  noStroke();
  fill(100, 120, 190);

  tweenData1 = { progress: 0 };
  tweenData2 = { progress: 0 };

  tween1 = Tween24.tween(tweenData1, 1, Ease24._ElasticInOut(), {
    progress: 1,
  });
  tween2 = Tween24.tween(tweenData2, 1, Ease24._ElasticInOutWith(3, 0.0015), {
    progress: 1,
  });
}

function draw() {
  background(220);

  const x1 = tweenData1.progress * width;
  const x2 = tweenData2.progress * width;
  circle(x1, height * 0.3, 100);
  circle(x2, height * 0.7, 100);
}

function mouseClicked() {
  tween1.play();
  tween2.play();
}

どちらも、パラメータを指定することで、動きに変化が生じることが確認できました。

おわりに

今回、Tween24.js を使ったイージングで、「特殊なイージングの系統で、オーバー具合や振幅の大きさや周期をカスタマイズできる」という「Ease24._Back...With」「Ease24._Elastic...With」を使ってみました。

パラメータを指定するだけで、動きを簡単に変えられるのは、すごく便利でした！