p5.js: Warum blinkt meine Ellipse?

Question

Ich habe eine Ellipse, die durch Draw() skaliert, aber aus irgendeinem Grund blinkt es unkontrolliert. Ich kann nicht herausfinden, warum. Ich vermute, dass es mit setTimeout zu tun hat. Ich brauche es, weil ich 10 Sekunden warten müssen, bevor die Ellipse zeichnen den Code Ist hier:

//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

Sie nicht setTimeout() verwenden sollten Zeichenfunktionen aufzurufen.

Wenn Sie Timing durchführen möchten, verwenden Sie die millis() Funktion. Weitere Informationen finden Sie in the reference, aber ein Basisprogramm würde so aussehen:

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