Explanation
For a full explanation of what is being drawn here, please refer to my main portfolio entry. If you would like a fractal tree generator that does not implement any wind please click here. In this sketch I have made the following parameters available for tweaking:
- Wind Speeds:
These parameters control the speed of the wind in the x and y direction with x increasing towards the right of the page and y increasing towards the top.
- Tree Strength:
This parameter determines the strength of the restorative force which attempts to return each branch to its starting angle. Increasing this parameter will make the tree more resistant to the wind. Large wind speeds and tree strength offer essentialy the same dynamics as poportionally lower winds speeds and tree strengths with the downside of considerable performance impact.
- Stroke Opacity Ratio:
At each level of the fractal tree we have more and more branches. Inevitably these branches will overlap and indeed it is this that produces the leaf-like effect at the top of the tree. To make this overlap look more natural, we make the opacity of each level a fraction of the opacity of the previous level. This parameter controls the strength of this effect (1 is no effect and 0 is maximum effect).
- Stroke Weight Ratio:
Another way to make the branches look more natural at higher levels is decrease the thickness of the lines in the same way. Again setting this parameter to 1 turns off this effect.
- Branch Length Ratio:
At each level of the tree we must decrease the side length so that we tend towards a shape contained in a finite area. This doesn’t effect the geometry of the tree too much because it is essentially a rescaling. If you choose to increase this ratio be sure to increase the minimum length to maintain performance.
- Branch Length Variation:
Most trees do not every branch at the same level of exactly the same length. To create a more natural look, branches are chosen from a Gaussian distribution with mean equal to the length the branch would usually be and standard deviation proportional to the usual branch length. This parameter is that constant of proportionality. Select 0 variation to turn off this effect so that all branches at the same level have the same length.
- Angle Range:
At the end of each level we draw a random number of branches which are placed alternately on the left and right of the previous branch, at random angles. To prevent branches going back on themselves we bound these numbers. This parameter determines the maximum angle between any two branches.
- Minimum Length:
In theory this fractal tree would have infinitely many layers. In practice all good things must come to an end. At each level the branch length reduces by a given ratio and we keep drawing new layers until a new branch would be less than the specified minimum length (in pixels). At a branch length ratio of 0.67, higher performance devices can probably manage to around 10 pixels whereas mobile devices should probably stay around 15. Your mileage may vary.
- Colours:
Trees and flowers are rarely monochromatic so, in order to create more artistic images, it may be desirable to colour the top and bottom of the tree in separate colours. There is also the option to change the background colour.
- Transition Level:
This determines the last level which will be coloured by “Lower Colour”.
Acknowledgements
This sketch was completed using the p5.js JavaScript library (license here) which provides an excellent framework for visual coding projects such as this. I also used jscolor (license here) for selecting the colours. This project was greatly inspired by The Coding Train’s video.