このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の frameRate関数を説明します。

frameRate()

説明文

毎秒表示するフレーム数を指定します。たとえば、frameRate(30) は1秒あたり30回のリフレッシュを試みます。プロセッサが指定されたレートを維持するのに十分な速度が出ない場合、フレームレートは達成されません。 setup() 内でフレームレートを設定することをお勧めします。デフォルトのフレームレートは、ディスプレイのフレームレート(ここでは「リフレッシュレート」とも呼ばれます)に基づいており、ほとんどのコンピューターでは60フレーム/秒に設定されています。 1秒あたり24フレーム(通常は映画の場合)以上のフレームレートで, スムーズなアニメーションを作成できます。これは setFrameRate(val) と同じです。

引数なしで frameRate() を呼び出すと、現在のフレームレートが返されます。描画関数は値を返す前に少なくとも1回実行する必要があります。これはgetFrameRate() と同じです。

基本型数ではない、または正でない引数で frameRate() を呼び出すと, 現在のフレームレートが返されます。

構文

frameRate(fps)

frameRate()

パラメタ

fps
Number：1秒ごとに表示されるフレームの数

例

let rectX = 0;
let fr = 30 // FPSを開始する
let clr;

let rectX = 0; // 矩形のx座標
let fr = 30 // frameRate数
let clr;

function setup() {
  background(200);
  frameRate(fr);
  clr = color(255, 0, 0); // 赤色
}

function draw() {
  background(200);
  // 長方形をx方向に移動します
  // frameRate数が小さいほどdeltaTimeは大きくなり、rectXの増加値も大きくなります。
  rectX = rectX + 1 *(deltaTime / 50);

  if(rectX >= width){
    //画面から外れた場合。
    if(fr === 30){
      clr = color(0, 0, 255); // 青色
      fr = 10;
      frameRate(fr); // frameRate数を10にします
    } else {
      clr = color(255, 0, 0); // 赤色
      fr = 30;
      frameRate(fr); // frameRate数を30にします
    }
    rectX = 0;
  }
  fill(clr);
  rect(rectX, 40, 20, 20);
}

実行結果

著作権

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.

ライセンス

Creative Commons(CC BY-NC-SA 4.0) に従います。