使用p5.js平滑动画的分形树
问题描述:
我想使用p5.js制作平滑动画的分形树。我完全不知道如何让分支一个一个地生成,而不是同时生成所有分支。使用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();
}
}
感谢您的建议!
答
这个问题很广泛。堆栈溢出不是为一般的“我该怎么做”类型问题而设计的。这是针对具体的“我试过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);
}
}