P5.js 定时器计数器：步步指南，每隔3秒打印1到10的数字

2024-03-22 04:28:02

P5.js 定时器计数器：步步指南

作为程序员和技术作家，经常遇到需要创建定时器来控制程序流程的情况。P5.js，一个用于创意编码的流行库，提供了强大的功能来创建和管理定时器。在本文中，我们将深入探讨如何在 P5.js 中设置一个定时器计数器，该计数器将每隔 3 秒打印从 1 到 10 的数字，持续 30 秒。

问题：设置 P5.js 定时器计数器

你的任务是创建一个 P5.js 程序，每隔 3 秒从 1 到 10 打印一个数字，持续 30 秒。这对于创建交互式动画、可视化数据和模拟实时系统至关重要。

解决方案：一个循序渐进的指南

要解决这个问题，我们将使用 P5.js 提供的以下关键功能：

1. 初始化：

在 setup() 函数中，我们需要初始化一个 startTime 变量来记录程序开始的时间。这将作为我们计数器的参考点。

2. 计算经过的时间：

在 draw() 函数中，我们可以使用 millis() 函数计算从 startTime 开始经过的时间。这将用于确定何时打印下一个数字。

3. 间隔打印：

通过使用一个 for 循环从 0 到 10 遍历数字，我们可以使用一个条件语句检查是否到了打印下一个数字的时间。每当 timeElapsed 除以 3000 取余等于 0 时，我们就打印当前数字。

代码示例

var startTime;

function setup() {
  createCanvas(windowWidth, windowHeight); // 设置画布大小
  background("#dc3787"); // 设置背景色
  startTime = millis(); // 记录程序开始时间
}

function draw() {
  var timeElapsed = millis() - startTime; // 计算经过时间

  for (let i = 0; i <= 10; i++) {
    if (timeElapsed % 3000 === 0) { // 每 3 秒打印一个数字
      console.log(i);
    }
  }
}

function windowResized() { // 画布大小改变时
  resizeCanvas(windowWidth, windowHeight);
}