Fractal Web Apps

Explorations using the HTML5 canvas and javascript

To explore the mathematics behind fractals, as well as the possibilities with the HTML5 canvas object, I've created a series of small apps to demonstrate the power of recursive algorithms. Each of these apps requires a remarkably small amount of code to produce complex shapes.

Branching Algorithm This algorithm works by taking a line and adding 2 branches off that line at 2 specified angles. I included 3 sliders to control the branch angle, reducing coefficient, and the randomness of each branch angle. It is the randomness control that allows this algorithm to mimick real trees.
Koch Lines A rather famous fractal, this is created by making a standard transformation on a single line as many times as specified. I added a slider control to allow you to step though the number of iterations to see how the fractal is generated step by step.
Koch Line Variation 4 A variation of the Koch line algorithm that produces leaf-like structures when the iteration count is increased.
Recursive Circles This fractal starts with one large circle and recursively draws smaller circles in 4 directions around it. The offset of each circle is varied over time in this animation.
The Barnsley Fern This algorithm is different than the other fractals in that it uses an Iterated Function System to draw a series of points on the screen, rather than recursively drawing self-similar shapes based on previous shapes.