🎟p5.jsのdrawはタイマーで呼び出しているのか？

Drawがフレームレートに従って動いているのはわかって、javascriptで動いている限りはsetintervalに違いない。

download | p5.js

p5.jsのコードはuncompressで全長は９３０４０行。framefactoryというエイリアスでsetintervalが設定されている。

            var frameFactory = setInterval(function() {
             frames.push(makeFrame(fName + count, ext, cnv));
             count++;
           }, 1000 / fps); 

saveFramesという関数だが、注意書き見るとフレームの保存をするということで、いまいち本当にそうか確証が持てない。

setTimeoutで検索するとところどころ使われているよう。一回こっきりのメソッドの呼び出しは全部timeoutを使っているのかという感じ。useSetTimeoutという関数でpromiseとの干渉を避けているようだ。

Promise - JavaScript | MDN

P5.jsのdrawコールバックのしくみはタイマーを使っていますか？

P5.jsの`draw`コールバックはタイマーを直接使用していません。代わりに、P5.jsはブラウザの`requestAnimationFrame`を使用してアニメーションループを実装しています。`requestAnimationFrame`は、ブラウザが最適なタイミングで次の再描画を行うようにスケジュールするため、タイマーよりも効率的でスムーズなアニメーションを実現できます。

具体的には、P5.jsは以下のような流れで`draw`コールバックを呼び出します：

1. P5.jsは最初のフレームを描画するために`requestAnimationFrame`を呼び出します。

2. ブラウザが次の再描画タイミングに達すると、`draw`コールバックが呼び出されます。

3. `draw`コールバック内のコードが実行され、描画が更新されます。

4. 再度`requestAnimationFrame`が呼び出され、次のフレームのために同じプロセスが繰り返されます。

この方法により、P5.jsは一定のフレームレートを維持し、ブラウザの描画パフォーマンスを最大限に活用することができます。

Window.requestAnimationFrame() - Web API | MDN

アニメーションを行う際に、requestAnimationFrame を使うと、setInterval や setTimeout よりも滑らかで効率的なアニメーションを作成できます。requestAnimationFrame は、ブラウザの描画タイミングに合わせて最適化されているため、フレームレートの管理が自動で行われ、アニメーションがよりスムーズになります。

requestAnimationFrame の使い方

requestAnimationFrame はアニメーションのフレームごとに指定したコールバック関数を呼び出します。p5.js の draw() 関数のように、アニメーションループを作ることができます。

let x = 0;

function draw() {
  // キャンバスをクリア
  context.clearRect(0, 0, canvas.width, canvas.height);

  // オブジェクトを描画
  context.fillRect(x, 50, 50, 50);

  // オブジェクトを移動
  x += 2;
  if (x > canvas.width) x = 0;

  // 次のフレームをリクエスト
  requestAnimationFrame(draw);
}

// キャンバスとコンテキストを準備
const canvas = document.getElementById("myCanvas");
const context = canvas.getContext("2d");

// アニメーション開始
draw();

performance.now():

• Date.now() よりも高精度なタイムスタンプを取得できるため、アニメーションのタイミング計算に使用するのが一般的です。