7_1：フレーム p5.js JavaScript

p5.jsでは、滑らかなモーションを生み出すために、draw()関数内のコードを毎秒60フレームで実行しようとします。フレームとはdraw()関数を通り抜ける一瞬で、フレームレートは毎秒何フレーム描画されるかを表します。したがって、毎秒60フレームを描画するプログラムは、draw()内の全部のコードを毎秒60回実行していることになります。

フレームレートの確認

次のコードは、コンソールに現在のフレームレートを出力します。

function draw() {
    const fr = frameRate();
    print(fr);
}

フレームレートの設定

次のコードは、フレームレートを設定し、コンソールに現在のフレームレートを出力します。

function setup() {
    const fr = 30; // 毎秒30フレームを描画
    // const fr = 12;  // 毎秒12フレームを描画
    // const fr = 2;  // 毎秒2フレームを描画
    // const fr = 0.5;  // 毎秒30フレームを描画
    frameRate(fr);
}

function draw() {
    const fr = frameRate();
    print(fr);
}

p5.jsはコードを毎秒60フレームで実行しようとしますが、draw()内の１回の実行に1/60秒以上かかる場合には、フレームレートを低下させます(時間がかかってもdraw()内のコードを全部実行してから、次のdraw()に進む)。frameRate()関数が指定するのは最大フレームレートで、プログラムの実際のフレームレートは、そのコードを実行するコンピュータに依存します。

frameRate()

説明

毎秒表示されるフレーム数を指定する。たとえば関数呼び出しframeRate(30)は、1秒間に30回、画面をリフレッシュ(描画のし直し)しようとする。プロセッサが指定された頻度を維持できるほど速くない場合、そのフレームレートは実現しない。フレームレートの設定はsetup()内が推奨される。デフォルトのフレームレートはディスプレイのフレームレートに依る(リフレッシュレート、ほとんどのコンピュータでは毎秒60フレーム)。1秒当たり24フレームのフレームレート(映画がこれに当たる)かそれ以上のフレームレートなら、滑らかに見えるアニメーションには十分。

引数なしのframeRate()呼び出しは現在のフレームレートを返す。引数が数値でないか、正数でないときにも現在のフレームレートを返す。

シンタックス

frameRate(fps)
frameRate()