# Growing fractal tree

**URL:** <https://discourse.processing.org/t/growing-fractal-tree/3145>\
**Category:** Processing\
**Tags:** homework\
**Created:** [August 31, 2018, 6:35pm UTC](https://discourse.processing.org/t/growing-fractal-tree/3145 "2018-08-31T18:35:22Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Emanuele](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/emanuele/32/1262_2.png) [@Emanuele](https://discourse.processing.org/u/Emanuele)\
**Post date:** [August 31, 2018, 6:35pm UTC](https://discourse.processing.org/t/growing-fractal-tree/3145/1 "2018-08-31T18:35:22Z")

</div>

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:

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

```

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [August 31, 2018, 6:54pm UTC](https://discourse.processing.org/t/growing-fractal-tree/3145/2 "2018-08-31T18:54:09Z")

</div>

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:

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

```

---

<div class="post-metadata">

**Author:** ![Emanuele](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/emanuele/32/1262_2.png) [@Emanuele](https://discourse.processing.org/u/Emanuele)\
**Post date:** [September 1, 2018, 2:19pm UTC](https://discourse.processing.org/t/growing-fractal-tree/3145/3 "2018-09-01T14:19:11Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [September 1, 2018, 4:32pm UTC](https://discourse.processing.org/t/growing-fractal-tree/3145/4 "2018-09-01T16:32:10Z")

</div>

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.