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