# Growing fractal tree

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
}

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

}

}
``````

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);
``````

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

Ok so here what I would do.

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.