P5.js 中的定时计数器

Question

我正在尝试在 P5.js 中设置一个计数器。计数器应按顺序打印数字 1 到 10，并且每次打印之间应有 3 秒的暂停（此过程总共需要 30 秒）。

我正在尝试计算 timeElapsed，但由于某种原因它正在返回 NaN。

var startTime;

function setup() {
  createCanvas(windowWidth, windowHeight); //set canvas to window width and window height
  background("#dc3787"); //background of pink
  var startTime = millis();
  console.log(startTime);
}

//print i every 3 seconds from 0 - 10

function draw() {
  var timeElapsed = (startTime - millis()); //NaN ?
  console.log(timeElapsed);

  for (let i = 0; i <= 10; i++) {
    if (timeElapsed % 3000 === 0) {
      console.log(i);
    }
  }
}

function windowResized() { //P5 window resize function
  resizeCanvas(windowWidth, windowHeight);
}

Answer 1

您在 setup() 中使用 var 第二次创建了 startTime，因此它仅存在于 setup() 范围内。

draw() 每秒被调用 30、60 或 120 次，如果你不使用 frameRate()，所以仍然使用它来更新每一帧只需保存最后一个数字的时间printet(lastPrint) 和当前显示的数字(i) 计算每帧的差值。

当差异为 3000 或更多时，打印数字的最后一帧至少在 3 秒前，因此您可以打印下一帧。

var lastPrint;
var i = 0;

function setup() {
  createCanvas(windowWidth, windowHeight); //set canvas to window width and window height
  background("#dc3787"); //background of pink
  lastPrint = millis() - 3000;
}

//print i every 3 seconds from 0 - 10

function draw() {
  var timeElapsed = millis() - lastPrint;
  //console.log(timeElapsed);

  if (timeElapsed > 3000) {
    i++;
    console.log(i);
    lastPrint = millis();
  }
}

function windowResized() { //P5 window resize function
  resizeCanvas(windowWidth, windowHeight);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>

Answer 2

我没有检查时间的准确性，但您也可以将 frameRate 锁定为 60fps，然后使用以下方法计算等于 3 秒的特定帧：

frameCount%180===0 ? i++ : null;

包括要检查的 millis() 在内的完整代码：

let i = 0;

function setup() {
  createCanvas(400,400);
  frameRate(60);
}

function draw() {
  background(240);
  fill('black');
  textSize(16);

  frameCount%180===0 ? i++ : null;
  text(i + '\n' + '(millis: ' +millis()/1000 +')',20,30);
}

P5.js 中的定时计数器

Timed counter in P5.js

javascript

p5.js