javascript - p5.j​​s:为什么我的椭圆闪烁？

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);
   }
}