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不是为一般的“我该怎么做”类型问题而设计的。这是针对具体的“我试过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);
   }
}

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

1 个答案: