javascript - 执行一个函数5秒

Question

我正在尝试在 p5.js 中创建一个加载栏，顶部有一个加载栏，就像 YouTube 加载栏一样。

像这样

var x = 0;
function setup() { 
  createCanvas(400, 400);
    x = width;
} 
function draw() { 
  background(220);
    stroke(255,0,0);
    strokeWeight(10);
    line(0,0,x,0);
}

我想使用map()函数来减少线条的宽度。

map(x, width , 0 , second(),second()+5);

Working Example

注意:使用 p5.js 库

Answer 1

首先，x 不应等于宽度。它应该从 0 开始，然后仅根据时间更新。

其次，second() 返回当前时间的实际秒数，因此它不适合这种情况。最好使用 millis()，它返回自项目启动以来的毫秒数。

最后，您使用的 map 参数错误(或者至少我不明白您要按照传递它们的顺序执行什么操作)

x = map(millis(), 0, 5000, 0 , width);

上面的代码会将毫秒范围 0 - 5000(0 到 5 秒)映射到 Canvas 的 0 - 宽度。

<小时/>

为了能够随时初始化条形图，然后使用变量作为值范围的开始/结束值。

var x,
    startAt;

function setup() {
  createCanvas(400, 400);
  startAt = millis();
}

function draw() {
  background(220);
  stroke(255, 0, 0);
  strokeWeight(10);

  x = map(millis(), startAt, startAt + 5000, 0, width);
  line(0, 0, x, 0);
}

function mouseClicked() {
  startAt = millis();
}

在此示例中，每当您单击时，该栏都会重新启动。

工作示例位于http://alpha.editor.p5js.org/gpetrioli/sketches/SyibBz_ff