p5.jsのdraw関数のフレームレートを測定する

はじめに

現在p5.jsを学習しているのですが、draw関数のフレームレートを測定する便利な機能の紹介です。

draw関数に関して、下記の2点を検証したいと思います。

draw関数は、setup実行後1秒間に60回のレートで繰り返し実行される
1秒間に draw() を実行する回数は、frameRate() 関数で制御することができます

FPS meterでframeRateを測定する

1.p5.js Editorを開き、測定するコードを記述する
2.developer toolを開く
3.Ctrl+Shift+P でコマンドメニュを開き、"Show frames per second(FPS) meter" と入力する

4.Show frames per second(FPS) meterがでてきたらクリックする
5.クリックするとrenderingタブの"Frame rendering Stas"のチェックボックスにチェックが入る。

6.p5.js Editorに戻るとFrame Rateと表示されたwindowが表示される。

7.コードを実行する（期待値は60fps）

function setup(){
  createCanvas(100,100);
}
function draw(){
  background(255);
}

59.4fps の値が確認できた。

frameRateを変更してみる

frameRateは0-60の値を指定でき、frameRateが小さくなるにつれ粗いアニメーションになる。

frameRate60で実行した時は、下記の縦線が滑らかに動いていましたが、Rateを１に変更して実行するとｶｸｶｸしていました。

【結果】

draw関数のframeRateは1secに60回実行される -> 59.4fpsが確認でき、約60回実行されることが分かった。

frameRateを変更すると、粗いアニメーションになり1secに実行される回数（60回）が変わるわけではないことが分かった。

関数の処理時間を測定する

Javascrip Profilerで関数の処理時間をを測定する

1.p5.js Editorを開き、測定するコードを記述する

function setup(){
  let start = millis();
  createCanvas(100,100);
  let end = millis();
  let func_count = end - start;
  console.log(func_count);
}
function draw(){
  background(255);
  text(str(frameCount), 30, 50);
  if(frameCount > 59){
    noLoop();
  }
}

2.developer toolを開く
3.Javascrip Profilerタブを開く

4.start ButtonをClickし測定開始する

5.p5.js Editorに戻りプログラムを実行する
6.再度、Javascript profilerに戻りStop ButtonをClickする

7.set関数の処理時間を確認する

8.millis関数と比較する

最後に

setup関数の処理時間には少々ばらつきはありますが、概ね0.2msだという事が確認できました。

【参考記事】

FPS測定

frameRate