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

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

如果你不使用draw()，

frameRate()被称为每秒30,60或120次，所以仍然使用它来更新每一帧只需保存最后一个数字为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中的计时计数器

2 个答案: