p5.js: 为什么我的椭圆在闪烁？

Question

我有一个通过 draw() 缩放的椭圆，但由于某种原因，它无法控制地闪烁。我似乎无法弄清楚为什么。我怀疑这与setTimeout有关。我需要它，因为我需要等待 10 秒才能绘制椭圆这是代码：

//diameter of ellipse that increments
var dia1 = 0;
var dia2 = 0;

function setup() {
createCanvas(400,400);
stroke(255);
noFill();
frameRate(40);
}  

//draw and increment ellipse
function circle1() {  
ellipse(width/2,height/2, dia1,dia1);

dia1 = dia1+1;
if (dia1 >= width) {
  dia1 = 0;
}

}
function circle2() {  
ellipse(width/2,height/2, dia2,dia2);
dia2 = dia2+1;
if (dia2 >= width) {
  dia2 = 0;
}

}



function draw() {


background(40,40,40);

//wait 10 seconds before drawing ellipse
setTimeout(function() { circle1(); }, 10000);

circle2();


console.log(dia1);


}

Answer 1

您不应使用 setTimeout() 来调用绘图函数。

如果要计时，使用millis()函数。 the reference 中提供了更多信息，但基本程序如下所示：

function draw(){
   background(0);
   if(millis() > 10000){
      ellipse(width/2, height/2, 25, 25);
   }
}

p5.js: 为什么我的椭圆在闪烁？

p5.js: Why is my ellipse flashing?

javascript

processing

p5.js