使用p5.js平滑動畫的分形樹

Question

我想使用p5.js製作平滑動畫的分形樹。我完全不知道如何讓分支一個一個地生成，而不是同時生成所有分支。

這裏是我的代碼：

function draw() { 
    background(51); 
    strokeWeight(5); 
    stroke(255, 0, 0); 
    translate(600, height); 

    drawLine(300); 
} 

function drawLine(length) { 
    miliseconds = millis()/10; 
    if(miliseconds < length) { 
     line(0, 0, 0, -miliseconds); 
    } 
    else { 
     line(0, 0, 0, -length); 
    } 

    translate(0, -length); 

    if(length > 50) { 
     push(); 
     rotate(PI/4); 
     drawLine(length * 0.67); 
     pop(); 
     push(); 
     rotate(-(PI/4)); 
     drawLine(length * 0.67); 
     pop(); 
    } 
} 

感謝您的建議！

Answer 1

這個問題很廣泛。堆棧溢出不是爲一般的「我該怎麼做」類型問題而設計的。這是針對具體的「我試過X，預計Y，但得到Z」類型的問題。話雖如此，我會盡力在一般意義上提供幫助：

您可能會這樣做的一種方法是記錄每幀有多少分支已被繪製，並且只有持續繪製直到達到該極限。您可以使用草圖級別變量來重置每一幀，或者將其作爲參數傳遞給drawLine()函數。

這裏就是我在談論的一個非常非常基本的想法：

int currentLimit = 1; 

void draw(){ 
    exampleRecursiveFunction(0, currentLimit); 
    currentLimit++; 
} 

void exampleRecursiveFunction(int count, int limit){ 
    drawMe(); 
    if(count < limit){ 
     exampleRecursiveFunction(count+1, limit); 
    } 
}