Hack 7 Blowin' in the Wind: Simulate Tree Movement

Create forward kinematics with embedded movie clips.

We saw in the preceding hack how to generate a random tree. In this hack, we'll animate it. When trees move, they seem to follow the same tree-branch-twig hierarchy we used when generating the tree. It took me a while to work it out, although it's completely obvious once you grasp it:

When the tree trunk moves, the whole tree moves.
When a branch moves, all its daughter branches move.

The part that takes a bit of insight, though, is to figure out how much each part of the tree moves. I assumed that the trunk moves much less than the twigs at the fringes of the tree, but this isn't so. To see for yourself, plant a twig (cut up to its branch point) in the ground during a wind. You'll see it moves as much or as little as the trunk. The twig is weaker, but its surface area (assuming it has no leaves) is also less than the trunk, so the wind force is to the same scale.

A twig at the top of a tree moves more than the trunk simply because the motion of each branch in the hierarchy that supports it also moves, and all these movements are added cumulatively as you move up the tree. Wow! You learn something every day.

That tip for the day makes it easy to add a wind effect-you simply treat each branch the same as the trunk and all other branches!

Rather than delete each onEnterFrame( ) handler as we did in our original tree-creation code [Hack #6], change this line that removed the grow( ) function as the onEnterFrame( ) handler:

delete (this.onEnterFrame);

and replace it with the sway( ) function, once the branch is grown:

this.onEnterFrame = sway;

To create the wind effect, simply create a sway( ) function that specifies a wind value that is added to each branch every frame using our new sway( ) function:

function sway( ) {

  this._rotation += wind;

}

We need to vary the sway value, and here's one simple way to do it:

function sway( ) {

  wind += windEffect;

  if (wind > windStrength) {

    wind = -wind;

  }

  this._rotation += wind;

}

Of course, you need to provide initial values for the wind-related parameters. Here are the final values I plugged in for this example (new wind parameters are shown in bold):

// Tree parameters

var angle = 100;

var branch = 5;

var trunkThickness = 8;

var trunkLength = -100;

var branchSize = 0.7;

// Wind parameters

var windEffect = 0.05;

var windStrength = 1;

var wind = 0;

You can add some manual sliders to let the user control it interactively [Hack #61] .

Figure 1-30 shows the tree bending in the wind. See tree02.fla from this book's web site for the motion graphics version in all its glory.

Figure 1-30. Tree in the wind

Final Thoughts

Although there's one or two bits of hacky code going on here, the real hack is the way of thinking. Copying from nature or whatever is around you is a time-tested way to get new inputs and insights into your Flash design.

One of the cool things about Flash that allows this form of exploration is that Flash is a graphic programming environment. You can create the code and get immediate graphical feedback. If you make more than one tree, experiment to see whether applying the same wind to all trees makes for a more realistic effect. I suspect a slight variation among trees would look more realistic, especially if the wind is coming from a direction where it would be blocked by other trees.

My personal muse is not nature but video games. I believe that all problems faced by motion graphics designers have already been faced and overcome by a video game production team, but that, as they say, is a different story.

Table of Contents