Trees and Waves

May, 2018
figure 1

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

figure 2 -- The binary tree and sine waves

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.

figure 3

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.

figure 4

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

figure 5

Compound Sine Waves

In the following we add up multiple sine waves:

figure 6

Here we multiply multiple sine waves together:

figure 7

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.

figure 8

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:

figure 9

In this example, the tree rachets to fold and unfold itself:

figure 10

Random Shakes

We can also move the branches in different random patterns:

figure 11

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:

figure 12

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

figure 13

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

Below the motion is smoother:

figure 14

These two spread and contract widely:

figure 15

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

figure 16


The final example resemble heartbeats:

figure 17


This is just a start to the kind of motion and behaviors that can be produced. I will have more to say soon!

home ∧ top