Make like a tree

A recent piece of work I undertook involved creating an animated GIF of a binary fractal tree. You can see the end result here and read about the motivation behind the figure here.

I think once you start playing with fractals it’s very difficult to stop. So I created a little fractal tree drawer that runs in the browser:

Cycle angle: °

Length ratio:

Using the Multiplicity dropdown menu, you can choose between different types of symmetric tree: binary, ternary, etc. The Branch levels dropdown changes the number of generations of branches drawn. When the multiplicity is high, a high number of branch levels leads to a lot of branches and the browser will seize up. To avoid this, the allowed levels changes depending on the multiplicity. The permitted levels are based on what did and didn’t work smoothly with an iPhone 6, so you should be fine on any modern desktop computer. An old smartphone may still struggle at times, however.

The real beauty in fractal trees comes (I think) from varying the angles between the branches. Here I’m defining the “Cycle angle” (my term, feel free to suggest a better one) such that for a binary tree it corresponds to the angle between a branch and the line extending out from its parent branch (or the trunk). For higher-multiplicity trees the angle between an “outer” branch and the extension to the parent branch is the cycle angle multiplied by one less than the multiplicity. This rather clunky definition for the cycle angle was chosen so that if you go through 360 degrees you end up back where you started, regardless of the multiplicity.

Finally, you can change the Length ratio between one generation and its predecessor using the corresponding slider.

For those that are interested, the tree is drawn using the HTML canvas element and regular (AKA “vanilla”) JavaScript. To assist with the controls and events that force a redraw, I also used jQuery and the plugins jQueryUI, jQueryUI Touch Punch and jQuery Throttle/Debounce.

Update (06/06/16): If you’re really interested in how the tree is drawn, I created an animated Codepen version (that doesn’t use any of the jQuery libraries mentioned above). In this case the angle used corresponds to the angle between an “outer” branch and the line extending out from its parent branch (or the trunk). This means that changing the multiplicity doesn’t change the apparent speed of rotation.

If you haven’t yet had your fill of fractal trees then you can do worse than watch this Kinect-based dancing fractal tree video (includes asymmetric trees),

Leave a Reply

Your email address will not be published. Required fields are marked *