使用 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

这个问题很宽泛。 Stack Overflow 不适用于一般 "how do I do this" 类型的问题。这是针对特定 "I tried X, expected Y, but got Z instead" 类型的问题。话虽这么说，我会尽力提供一般意义上的帮助：

您可以这样做的一种方法是跟踪为每一帧绘制了多少个分支，并且只继续绘制直到达到该限制。您可以使用每帧重置的草图级变量来执行此操作，或者您可以将其作为参数传递给 drawLine() 函数。

以下是我所说内容的一个非常非常基本的概念：

int currentLimit = 1;

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

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

使用 p5.js 的平滑动画分形树

Smoothly animated fractal tree using p5.js

javascript

animation

fractals

smoothing

p5.js