HTML5 Fractals

Fractal models and the HTML5 canvas.

June 1, 2011

The speed of rendering on the HTML5 canvas in javascript depends on the browser you are using and on the power of your computer. Speed testing of javascript for a given browser can be determined by recursive calls to javascript functions.

The simple fractal tree shown at right is based on a mathematical model in which there are two branches at a fixed angle and the length of each branch is a fraction of the one before it. The number of iterations (recursive calls) is shown below the tree as well as the elapsed time in milliseconds required to draw the tree in HTML5.

Loading the page with different web browsers will show that there is a significant difference in browser performance.

With this simple model we can draw a forest of trees and think about the connection between math, nature and art. Mathematics gives us the essential growth model, from nature we get the idea of limited randomness, and from art, the placement and distribution of color.

It is the mixture of these elements that produces a rendering which can be modified to produce a variety of results.