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