Factal trees grow as mousePressed

p5.js Coding Questions
1

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.

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

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

3

Thank you!

I will go try it out!

4

you could use a toggle;

var toggle ;

in you mousePressed function

mousePressed = function(){

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

then in your draw code

draw = function(){




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


};