Interactive Fractal Tree

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.

The controls are split into two sections, the variables section change the algorithm that builds the fractal. The style section controls colour and appearance of the fractal.

Setting Variables

Important click variables to access these controls


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.


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.

Angle 2

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.

Style Controls

Important click style to access these controls

Webworker setting can be turned on if max calculations is being exceeded. It can handle any number of calculations but can be slower.

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.

Line Cap

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

Global Composite Operation

This control relates to the drawing mode of the HTML5 canvas element, some values can create interesting effects.

Access variables section
Access style section
Set angle 1, the angle between branches.
Set angle 2, the angular rotation at each iteration
Set the number of iterations, each iteration creates a new set of branches.
Set the number of branches created at each iteration.
Set the length of the first branch.
Set the value to multiply the current branch length at each iteration.
Set the width of the first branch.
Set the value to multiply the current branch width at each iteration.
Choose how the the lines are capped
Global Composite Operation
Webworker turn on if exceeding maximum calculations
hsl when on the start and end colors are ignored and a flowing rainbow like effect is applied
hsl start value, in hsl mode the value will change the starting color
set start color of fractal (note hsl needs to be off)
set end color of fractal (note hsl needs to be off)
set background color
once a color field is selected change the color here
toggle pan zoom, if on click and drag on main surface to pan, mouse wheel to zoom