Monday, August 20, 2012

Pretty Fractal Trees using HTML-5 Canvas & Random Numbers

Last week I sat down to see how I can generate a fractal tree on a web page. It turned out to be a very interesting exercise using HTML5 Canvas and simple Math trigonometric functions. Using random numbers for changing the length of the tree branch, and the angle of branch split -- I was quite successful in generating very realistic looking trees!

Each time you render the HTML, the trees look quite different. I can see how Game creators can create interesting looking forests for "heroes" to travel in using such techniques.

HTML 5 Canvas with a Fractal Tree





















Here is the code (also posted on github):