p5.js で弾む系のイージングを試したり複数のイージングを変な混ぜ方で使ったりなど【完走賞ゲット-20】

※ Qiita の完走賞をゲットするための条件は「単一／複数のカレンダーに投稿した記事が合計25」です

この記事は、「完走賞ゲットのため小ネタ 25記事を投稿しようとチャレンジ v2 Advent Calendar 2023」の 20日目の記事です。

今回の内容

今回の内容は、以下の記事の続きとなるような内容です。
「イージング関数チートシートの関数」「p5.js の lerp()、frameCount」を組み合わせるという点では、同じです。

●「イージング関数チートシートの関数」「p5.js の lerp()、frameCount」を組み合わせたイージングの繰り返しの実装【完走賞ゲット-18】 #JavaScript - Qiita
　https://qiita.com/youtoy/items/06d4ef113175463ed4d7

上記の記事との違いは、弾む系のイージングを試したことと、今回試したイージングと上記の記事で使ったイージングの合計4つを、変な混ぜ方をして使ってみた点です。

動作時の様子

描画処理を動かした時の様子は、以下のとおりです。

実装した内容

まずは、実装した内容を掲載してみます。

function setup() {
  createCanvas(600, 400);

  fill(100, 150, 200);
}

function draw() {
  background(20);

  const t = (frameCount % 120) / 120;

  const x1 = lerp(20, width - 20, easing(t, 3)),
    x2 = lerp(50, width - 50, easing(t, 4)),
    x3 = lerp(50, width - 50, easing(t, random([1, 2, 3, 4])));

  circle(x1, height * 0.25, 60);
  circle(x2, height * 0.5, 60);
  circle(x3, height * 0.75, 60);
}

function easing(t, num) {
  // https://easings.net/ja#easeOutQuart
  if (num === 1) return 1 - pow(1 - t, 4);
  // https://easings.net/ja#easeInOutQuint
  if (num === 2)
    return t < 0.5 ? 16 * t * t * t * t * t : 1 - pow(-2 * t + 2, 5) / 2;
  // https://easings.net/ja#easeInBounce
  if (num === 3) return 1 - easeOutBounce(1 - t);
  // https://easings.net/ja#easeOutBounce
  if (num === 4) return easeOutBounce(t);
}

function easeOutBounce(t) {
  const n1 = 7.5625;
  const d1 = 2.75;

  if (t < 1 / d1) {
    return n1 * t * t;
  } else if (t < 2 / d1) {
    return n1 * (t -= 1.5 / d1) * t + 0.75;
  } else if (t < 2.5 / d1) {
    return n1 * (t -= 2.25 / d1) * t + 0.9375;
  } else {
    return n1 * (t -= 2.625 / d1) * t + 0.984375;
  }
}

イージングは、以下の 4つを用いており、関数はイージング関数チートシートに掲載されたものを使いました。

1. easeOutQuart
2. easeInOutQuint
3. easeInBounce
4. easeOutBounce

動画では、円が 3つ動いていたと思います。
その 3つに適用した動きは、以下のとおりです。

1. easeInBounce
2. easeOutBounce
3. easing() が呼び出されるたびに、4つのイージングをランダムに選択

3つ目は、とびとびになる座標をランダムに選ぶような形になるので、残像が残りつつ動くような見た目になります。

今回の内容を試した背景

今回の内容を試そうと思ったきっかけは、1週間くらい前に記事に書いた、以下のイージングのブレンドが関係しています。
以下の記事のブレンドは、異なるイージングを順につないだようなブレンドをしているようでした。

●p5.js と Tween24.js を組み合わせたお試し：イージングのブレンド【完走賞ゲット-13】 #JavaScript - Qiita
　https://qiita.com/youtoy/items/24dae2f6c946b41d9c82

複数のイージングがブレンドされたものを使う、というのはこの時に初めて試しました。
それで、この異なるイージングのブレンド、という方向で、何か違った動きが作れないかと思って試したのが今回の内容でした。

おわりに

今回、弾む系のイージングを 2つ試したり、その2つと別の 2つのイージングを変な混ぜ方をした処理を試してみました。

これまでは、たくさんあるイージングの中のいくつかを個別に適用するという形が主でしたが、複数のものを混ぜるという方向も試していければと思います。混ぜ方については、動きを制御するのに複数を混ぜ込むだけでなく、例えばある 1つのオブジェクトに関して色・形・動きなどといった複数の要素を変化させる際に、それぞれ異なるイージングで変化させるというようなこともできればと思っています。