WP2WS W02 Generative Visuals with Forces – Xinyu Liu's Documentation Blog 🥕

The Tree and the Glowworm

Demo

Inspiration

I’m inspired by Dan Shiffman’s tutorial on making a recursive tree. I wanted to make a tree that has branches and leaves that react to wind forces.

Process

I started by following this tutorial to create a class for the branch. I had some problem

The tree grew infinitely:

I was stuck here for a long time because I already set the if statement to let the program stop when the length of the branch is smaller than 10.

I console.log the distance between the new end&start point and found that the distance never gets smaller than 10. Therefore, I increased the threshold to 50. And the tree stopped growing infinitely:

Then, I tried to find a way to apply the wind force onto the branch’s objects. I first tried to

1) rotate each branch in the display() function:

display() {
    push();
    stroke(255);
    strokeWeight(map(this.len, 20, 150, 0.5, 9));
    push();
    translate(this.begin.x, this.begin.y);
    rotate(radians(this.vel.x * 10));
    pop();
    line(this.begin.x, this.begin.y, this.end.x, this.end.y);
    pop();
  }

But nothing happens, except that I can console the force value.

2) rotate the whole tree without the push() and pop() . But get this visual:

3) apply forces by adding the force vector to the begin vector this.begin.add(this.vel); , but get this visual: https://drive.google.com/file/d/14D7kbQWXasfLDWQXjSvA5eP9yvUjo7zu/view?usp=sharing (edited)