p5.js での往復する動きのループアニメーションを frameCount と色の透明度の設定で作る

この記事の内容

p5.js で往復する動きを使ったループアニメーションを作るのに、「frameCount と剰余演算を使う方法」と「frameCount と三角関数を使う方法」のそれぞれを試し、その話を以下の記事に書きました。

●p5.js でのループアニメーションで「frameCount」と「剰余演算 or 三角関数」を使う ：2D・3D のそれぞれで x方向に往復する動きを例に ＋α #JavaScript - Qiita
　https://qiita.com/youtoy/items/47cf23bb16af9f22ced3

今回の記事で扱うのは、それら 2つとは別の方法を試してみた話です。

実装した内容

描画する内容は、キャンバスの真ん中の高さのところを円が左右に往復するというものです。
まずは実装した内容全体を示します。

const c = [190, 160, 250];
let a = 255;

function setup() {
  createCanvas(450, 350);

  noStroke();
}

function draw() {
  background(30);

  const maxCount = width;
  const f = frameCount % maxCount;
  a = f === 0 ? 255 - a : a;

  fill(...c, a);
  circle(f, height / 2, 20);
  fill(...c, 255 - a);
  circle(width - f, height / 2, 20);
}

今回使った方法を箇条書きで書くと、以下の通りです。

• frameCount を使った処理で「左から右に動く円」と「右から左に動く円」を描画する
• 上記の 2つの動く円のうち、片方は透明にする
• 2つの円のどちらを透明にするかを特定のタイミングで切り替える

これで見た目上は、単一の円が画面上を左右に往復している見た目になります。

移動スピードを速くする

上記の実装では、円の動きが遅く感じるかもしれません。
そこで、移動スピードを速めたものも以下に掲載します。

変更点は2つあり、1つは f を計算する部分で frameCount にある係数を乗算している部分です。そしてもう 1つは、透明度を扱うための変数 a の値を切り替える条件（三項演算子での条件設定）を変更した部分です。

const c = [190, 160, 250];
let a = 255;

function setup() {
  createCanvas(450, 350);

  noStroke();
}

function draw() {
  background(30);

  const maxCount = width;
  const f = (6 * frameCount) % maxCount;
  a = f < 6 ? 255 - a : a;

  fill(...c, a);
  circle(f, height / 2, 20);
  fill(...c, 255 - a);
  circle(width - f, height / 2, 20);
}

三項演算子での条件設定を、 f === 0 から f < 6 に変更しています。
この 6 というすす時は、その前の f を計算する部分で frameCount に乗算した係数です。

frameCount に 6 を乗算したことで、 1, 2, 3, ... と増えていく frameCount の値が 6, 12, 18, ..., と増えることになります。また、剰余演算の除数の値によっては、元の条件式で f === 0 と判定していた部分は 0 から　5 の間の値になります。

そこで、条件式を f < 6 にしています。