Arborescence fractale animée en utilisant p5.js

Question

J'essaie de créer un arbre fractal animé en utilisant p5.js. Je n'ai aucune idée de comment générer des branches une par une, au lieu de tout générer en même temps.

Voici mon code:

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(); 
    } 
} 

Merci pour tous les conseils!

Answer 1

Cette question est assez large. Stack Overflow n'est pas conçu pour les questions de type "Comment faire cela?" C'est pour des questions spécifiques "J'ai essayé X, j'ai attendu Y, mais j'ai obtenu Z à la place". Cela étant dit, je vais essayer d'aider dans un sens général:

Une façon de faire cela est de garder une trace du nombre de branches ont été tirées pour chaque image, et de continuer à dessiner seulement jusqu'à ce que vous atteigniez cette limite . Vous pouvez le faire avec une variable au niveau de l'esquisse, vous réinitialisez chaque image, ou vous pouvez le transmettre en tant qu'argument à la fonction drawLine().

est ici une idée très simple de ce dont je parle:

int currentLimit = 1; 

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

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