Thomas Chaplin

Explanation

For a full ex­pla­na­tion of what is be­ing drawn here, please re­fer to my main port­fo­lio en­try. I have also im­ple­mented a ver­sion of this gen­er­a­tor that in­cu­d­les a wind sim­u­la­tion. For this please click here. In this sketch I have made the fol­low­ing pa­ra­me­ters avail­able for tweak­ing:

• Stroke Opacity Ratio:

  At each level of the frac­tal tree we have more and more branches. In­evitably these branches will over­lap and in­deed it is this that pro­duces the leaf-like ef­fect at the top of the tree. To make this over­lap look more nat­ural, we make the opac­ity of each level a frac­tion of the opac­ity of the pre­vi­ous level. This pa­ra­me­ter con­trols the strength of this ef­fect (1 is no ef­fect and 0 is max­i­mum ef­fect).

• Stroke Weight Ratio:

  Another way to make the branches look more nat­ural at higher lev­els is de­crease the thick­ness of the lines in the same way. Again set­ting this pa­ra­me­ter to 1 turns off this ef­fect.

• Branch Length Ratio:

  At each level of the tree we must de­crease the side length so that we tend to­wards a shape con­tained in a fi­nite area. This does­n’t ef­fect the geom­e­try of the tree too much be­cause it is es­sen­tially a rescal­ing. If you choose to in­crease this ra­tio be sure to in­crease the min­i­mum length to main­tain per­for­mance.

• Branch Length Variation:

  Most trees do not every branch at the same level of ex­actly the same length. To cre­ate a more nat­ural look, branches are cho­sen from a Gaussian dis­tri­b­u­tion with mean equal to the length the branch would usu­ally be and stan­dard de­vi­a­tion pro­por­tional to the usual branch length. This pa­ra­me­ter is that con­stant of pro­por­tion­al­ity. Se­lect 0 vari­a­tion to turn off this ef­fect so that all branches at the same level have the same length.

• Angle Range:

  At the end of each level we draw a ran­dom num­ber of branches which are placed al­ter­nately on the left and right of the pre­vi­ous branch, at ran­dom an­gles. To pre­vent branches go­ing back on them­selves we bound these num­bers. This pa­ra­me­ter de­ter­mines the max­i­mum an­gle be­tween any two branches.

• Minimum Length:

  In the­ory this frac­tal tree would have in­fi­nitely many lay­ers. In prac­tice all good things must come to an end. At each level the branch length re­duces by a given ra­tio and we keep draw­ing new lay­ers un­til a new branch would be less than the spec­i­fied min­i­mum length (in pix­els). At a branch length ra­tio of 0.67, higher per­for­mance de­vices can prob­a­bly man­age to around 4 pix­els whereas mo­bile de­vices should prob­a­bly stay around 10. Your mileage may vary.

• Colours:

  Trees and flow­ers are rarely mono­chro­matic so, in or­der to cre­ate more artis­tic im­ages, it may be de­sir­able to colour the top and bot­tom of the tree in sep­a­rate colours. There is also the op­tion to change the back­ground colour.

• Transition Level:

  This de­ter­mines the last level which will be coloured by “Lower Colour”.

Acknowledgements

This sketch was com­pleted us­ing the p5.js JavaScript li­brary (li­cense here) which pro­vides an ex­cel­lent frame­work for vi­sual cod­ing pro­jects such as this. I also used js­color (li­cense here) for se­lect­ing the colours. This pro­ject was greatly in­spired by The Coding Train’s video.