# Factal trees grow as mousePressed

**URL:** <https://discourse.processing.org/t/factal-trees-grow-as-mousepressed/11089>\
**Category:** Coding Questions\
**Created:** [May 9, 2019, 9:37pm UTC](https://discourse.processing.org/t/factal-trees-grow-as-mousepressed/11089 "2019-05-09T21:37:37Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![youyou0032](https://avatars.discourse-cdn.com/v4/letter/y/bc8723/32.png) [@youyou0032](https://discourse.processing.org/u/youyou0032)\
**Post date:** [May 9, 2019, 9:37pm UTC](https://discourse.processing.org/t/factal-trees-grow-as-mousepressed/11089/1 "2019-05-09T21:37:37Z")

</div>

Hi Everyone

I am a beginner in coding and I am working on my first official project.  
I followed the Coding challenge #14 Fractal tree. It works and very well. I am very happy.  
And then, I want to change the growth of factual related to mousePressed();  
every time the mouse pressed, the fractal grow one layer.  
I tried many times on my own, but it didn’t really react.  
Here is my code, I hope you guys can guide me with it.

```auto
var angle =0;
var slider;

function setup() {
    
	createCanvas(800, 800); 
        slider = createSlider(0, TWO_PI, PI/4,0.01);
	
}

function draw() {  
 
    background(100);
    angle = slider.value();
    stroke(255);
    translate(400, height);
    branch(100);
  
	
}
function branch(len){
	line(0,0,0, -len); 
	translate(0,-len);
	rotate(angle);
        rotate(-angle);
        line(0,0,0, -len); 
	translate(0,-len);
}

function mousePressed(len){
    if (len > 4){
		push();
		rotate(angle);
		branch(len*0.67);
		pop();
		push();
		rotate(-angle);
		branch(len*0.67);
		pop();
	
   
    }
  
}

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [May 10, 2019, 1:42am UTC](https://discourse.processing.org/t/factal-trees-grow-as-mousepressed/11089/2 "2019-05-10T01:42:42Z")

</div>

basically you should not draw on/in  
mousePressed() {}

the fractal tree idea is recursiv, means you call its own function again  
( after you walk to the end of the just drawn branch )  
but limit that possibly by a counter you can increase by mousePressed()

besides as a start see also

> **[CodingTrain/website](https://github.com/CodingTrain/website/tree/master/CodingChallenges/CC_014_FractalTree/P5)**
>
> Coding Train website. Contribute to CodingTrain/website development by creating an account on GitHub.

---

<div class="post-metadata">

**Author:** ![youyou0032](https://avatars.discourse-cdn.com/v4/letter/y/bc8723/32.png) [@youyou0032](https://discourse.processing.org/u/youyou0032)\
**Post date:** [May 21, 2019, 3:41pm UTC](https://discourse.processing.org/t/factal-trees-grow-as-mousepressed/11089/3 "2019-05-21T15:41:57Z")

</div>

Thank you!

I will go try it out!

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [May 21, 2019, 3:47pm UTC](https://discourse.processing.org/t/factal-trees-grow-as-mousepressed/11089/4 "2019-05-21T15:47:51Z")

</div>

you could use a toggle;

```auto
var toggle ;

```

in you mousePressed function

```auto
mousePressed = function(){

toggle ++;
if(toggle===2){
toggle = 0;
}
};

then in your draw code

draw = function(){

if(toggle===1){
run code
}

};

```