Growing fractal tree

Processing
1

Hi everyone, I need to do a school project and I want to build a fractal tree that progressively “grows” using the mouse. how can I do it? this is the code I built:

void setup() 
{
       
        fullScreen();
   
 }

int levelsMin = 0;
    int levelsMax = 6;
    float initialLength = 235;
    
    float angleMin = PI/17;
    float angleMax = PI/10;

    int pointColor = color(27, c1, 9);
    int c1= 
   void draw() {
     
  
        background(color(245,247,232));
        stroke(88, c1, 0);
        strokeWeight(7);
        
        float currentAngle = map (mouseX, 0, width, angleMin, angleMax); //mouse control of the branch angle
        int currentLevels = (int)map (mouseY, height,0, levelsMin, levelsMax); //mouse control of the generations count
        
        pushMatrix(); //save the world transformation matrix
        translate (width/2, height); //move the origin to the middle / bottom
       albero (currentLevels, initialLength, currentAngle); //draw first two branches - stems
        popMatrix(); //return to the world coordinate system
    }
    
    void albero (int levels, float length, float angle){
        if (levels>0){  //check if there are any levels left to render
            //destra
            pushMatrix();           //save current transformation matrix
            rotate (angle);         //rotate new matrix to make it point to the right
            line (0,0,0,-length);   //draw line "upwards"
            pushMatrix();           //save current (e.g. new) matrix
            translate(0,-length);   //move the origin to the branch end
            scale (0.85f);          //scale down. fun fact - it scales down also the stroke weight!
           albero (levels-1, length, angle);  //call the recursive function again
            popMatrix();            //return to the matrix of the current line
            popMatrix();            //return to the original matrix
            //second branch - the same story
            pushMatrix();
            rotate (-angle/1.7);
            line (0,0,0,-length);
            pushMatrix();
            translate(0,-length);
            scale (0.85f);
            albero (levels-1, length, angle);
            popMatrix();
            popMatrix();
            
            
        }
       
    }
2

Hi,

What is wrong with your code? It seem to work the way you want no?

There is just some typos in you code at the beginning:

int c1 = 100;
int pointColor = color(27, c1, 9);
3

Yeah sorry for the c1 thing I left unfinished :astonished: ! What I want to obtain is a sort of animation, like the line progressively draws on the canvas

4

Ok so here what I would do.

To store your data:
First you can create a Tree class. This tree would be composed of several layers.
Those layers would be objects of a Layer class. It would be composed of several lines with a start point and an end point.

Setting everything up:
In order for the rest to work you need to completely build the tree in the setup() function.

Animating it:
Now what you need to do is to map the mouseY variable to the different layers. For example, if you have 4 layers in your tree you can do something like this:

  1. First layer - mouseY >= 3 * (height / 4)
  2. Second layer - 3 * (height / 4) > mouseY >= 2 * (height / 4)
  3. Third layer - 2 * (height / 4) > mouseY >= 3 * (height / 4)
  4. Fourth layer - 1 * (height / 4) > mouseY >= 0

Now the only thing left to do is to draw the lines of the tree according to the mouseY position.
Let’s say the mouseY position is in the middle of the third layer part that we designed just before (so at 2 * (height / 4) + height / 8). You know that you can fully draw all the lines of the layers 1 and 2 and none of the lines in level 4. For the level 3 you know that the mouseY is at 50% in the thrid layer part so you need to draw 50% of the lines of the level 3.