Trees and Waves

I've been interested in how to add behavior to simple forms.

On this page I explore ways sine waves (and other patterns) can be used to animate binary trees.

Simple Sine Waves

Here the trees follow a simple sine wave, but for the middle one the upper branches sway less, while on the leftmost tree the trunk sways the least.

Here the period (how long a full sway takes) is different at each level. On the left, the top sways faster than the trunk, and on the right vice versa.

Here the offset (which part of the sway at a given time), is different.

Compound Sine Waves

In the following we add up multiple sine waves:

Here we multiply multiple sine waves together:

Left / Right

Branches can be thought of as going left or right of their parent. In the following we make left vs right branches move in different directions.

Step Shake

Now we move into some behaviors that are not based on sine waves.

Below, each level of the tree moves in unison, and the movements cycle up and down the tree:

In this example the tree ratchets to fold and unfold itself:

Random Shakes

We can also move the branches in different random patterns:

Complex Waves

The following are examples of more complicated waves.

Each example is made up of multiple interacting smaller sine waves, that produce more complex behavior over time:

Here the left right branches start to move independently as well:

In the above, the left moves smoothly, while the right exhibits a jerkier behavior.

Below the motion is smoother:

These two spread and contract widely:

And a final compound behavior, where the branch tracing on the right shows a weaving in and out pattern:

Heartbeats

The final examples resemble heartbeats:

Conclusion

This is just a hint of the kind of motion and behaviors that can be produced. I will have more to say soon! Let me know any feedback.