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