P5.js 日本語リファレンス(deltaTime)

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

deltaTime

説明文

システム変数 deltaTime には、前のフレームの開始と現在のフレームの開始の間の時間差がミリ秒単位で格納されています。

この変数は, フレームレートに関係なく一定に保つ必要がある時間依存のアニメーションや物理計算を作成するのに役立ちます。

構文

deltaTime

例

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) に従います。