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’ll be able to create many interesting forms, from organic-looking trees to symmetrical structures like snowflakes. In fact, the Visnos website logo was created using this activity!

The controls are split into two sections: the variables tab changes the algorithm that builds the fractal, while the style tab controls the color and appearance.

Setting Variables

Note: Click the variables tab to access these controls.

Branches

This sets the number of new branches that are created at each step. If the value is two, the end of each branch will fork into two more.

Iterations

In computing, an iteration is a repetition. An iteration of 1 creates one set of branches. An iteration of 2 adds another set of branches to the end of the first set. This can lead to very complex patterns.

Angle 1

This is the angle between the branches created at each step. This has no effect if the number of branches is set to one.

Angle 2

This sets the angle shift for each new set of branches. The best way to understand this is to set “Branches” to 1 and “Iterations” to 5. Changing this angle will turn each subsequent branch.

Start Length

The length of the first set of branches.

Length Multiplier

After the first iteration, the current branch length is multiplied by this value. If the multiplier is less than 1, branches get smaller. If it’s more than 1, they get bigger.

Start Width

The width of the first set of branches.

Width Multiplier

This works just like the Length Multiplier, but affects the branch width.

Style Controls

Note: Click the style tab to access these controls.

Paper Style

Choose the background paper style

Paper Color

Choose the background color

Paper Line/Spot Color

Choose the color of background spots or lines

Line Cap

Choose how lines are capped

Color Modes

HSL (Hue, Saturation, Luminosity)

note make sure HSL setting has a tick to access these controls.

Hue Start and Hue End

These determine the start and end colors

Saturation

The intensity or vividness of the color, ranging from 0% (a shade of gray) to 100% (the purest color).

Lightness

Determines how bright or dark the color is, from 0% (black) to 100% (white).

User selected colors

note make sure HSL setting has a cross to access these controls.

Start Color

Set the intial start color the first branches

End Color

Set the end color the color of the last branches drawn