Visnos Interactive Fractal Tree Activity

The fractal explorer shows how a simple pattern, when repeated can produce an incredible range of images. With a bit of practice you will be able to create many interesting fractal forms, from organic looking trees to symmetrical structures like snow flakes. In fact the visnos website logo was created using this activity.

Be aware that depending on the settings, the activity can be computationally intensive, especially if the branches or iterations are high. Set the max calculations control to a lower setting if this happens. See below for more details.

Basic Controls

Branches

The number of branches that are created at each step of the pattern. So if the value is two then, then end of each branch will fork into two more.

Iterations

In computing an iteration is similar to a repetition, if the iteration value is 1 then only one set of branches is created. If the iteration is 2 then at the end of each of the first set of branches another set will be drawn. If the number of branches is greater than one then the overall complexity will increase geometrically with each extra iteration step, leading to very complex patterns.

Angle 1

This is the angle between the branches created at each step. If the number of branches is set to one, then this value will be irrelevant.

Each branch ends pointing in a particular direction, angle 2 is the angle shift for the direction of the new branches. The best way to understand this is to set the number of branches to one and with iterations say 5. Changing angle 2 will have the effect of turning each branch through the given angle.

Branch Size Controls

The next set of controls are used to change the initial width and length of the branches and how they change over each iteration.

Start Length

The length value of the first set of branches.

Length Multiplier

After the first set of branches are drawn, at each iteration the current length is multiplied by this value. This means if the length multiplier is 1 then the all the branches will have the same length. If the length multiplier is less than 1 then the branch length will decrease for each iteration, but if the multiplier is more than 1 then the branch lengths will increase. This illustrates an important mathematical concept.

Start Width

The width value of the first set of branches.

Width Multiplier

The width multiplier behaves in the exact same way as the length multiplier but this time affects how the branch width changes through iterations.

Colour Controls

There are two ways to colour the fractal, the first is to use the HSL setting. When turned on, a bright set of colours is used. The colour hue changes through each iteration. To change the start hue value move the slider

The second way is to turn off HSL and use the colour picker to choose a start and end colour. The background colour can also be changed.

Other Controls

Max Calculations

Is the most important of these controls, drawing a fractal can be computationally intensive which can lead to the interface freezing. If this happens lower the max calculations, this will stop all calculations after a set number regardless of the number of iterations etc. In fact this control can be used in the design, since the underlying drawing function works recursively not all branches will be completed.

Global Composite Operation

This control is hard to explain as it relates to the drawing mode of the HTML5 canvas element, some values will create interesting effects and some will make everything disappear!

Line Cap

The lines drawn by default have rounded end, change this setting for other styles.