代码之家 › 专栏 › 技术社区 › InspectorDanno

P5中的定时计数器。js公司

p5.js javascript

InspectorDanno · 技术社区 · 7 年前

我想在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);
}

2 回复 | 直到 7 年前

Sebastian Speitel 7 年前

您创建了 startTime 第二次使用 var 在里面 setup() ,因此它只存在于 安装程序() 范围

draw() 如果不使用 frameRate() ,所以要仍然使用它来更新每个帧,只需节省最后一个数字的打印时间即可( 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>

matski 5 年前

我没有检查计时的准确性,但您也可以将帧速率锁定为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);
}

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

4 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

4 月前

Alex · 在轻量级中同时解构和不解构变量

4 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

4 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

5 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

5 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

5 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

5 月前

user3472810 · Angular@Output/EventEmitter返回undefined

5 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

5 月前