My Notebook

Some simple animated fractals using HTML5 Canvas

Author
Date
Category
Web Development/JavaScript

A fractal is a kind of mathematical function that creates infinitely self-similar patterns. In its simplest form a fractal can consist of only a few construction rules that describe how to get from one iteration to the next. Every iteration of these rules reveals finer and finer details until an intricate pattern emerges. In practice we have to stop after a finite number of iterations, but the mathematical fractal space goes on into infinity.

These fractal patterns look beautiful and almost life-like and that is not by accident. Nature and especially life uses this concept of self-similar branching into finer and finer structures almost universally. A simple example would be a tree that branches out into thinner and thinner twigs, but the example I find most amazing are our own blood vessels. Every living cell in our body has to be near a blood vessel to survive. So the major arteries branch out into finer and finer vessels until they reach every cell in our body. It turns out that our genome doesn't contain nearly enough information to describe this pattern. Instead our genes only encode a simple fractal branching rule and the rest happens automatically.

Source Code

This post describes some of the simple animated fractals I have implemented in JavaScript using a HTML5 Canvas element. The code is published on Github under the Gnu GPL.

The Koch Snowflake

The Koch Snowflake is one of the earliest fractals. It can be constructed by, starting from a triangle, recursively iterating the following two simple rules to infinity.

  1. Divide every line of the curve into three pieces of equal length, and remove the middle piece. Step one of the Koch snowflake
  2. Draw an equilateral triangle with a sidelength of \(\frac{Original\:Line}{3}\) in the gap. Step two of the Koch snowflake

If you continue these steps into infinity you get the Koch snowflake. In a practical implementation however you stop after a finite number of iterations determined by the resolution of your screen.

Implementation

Isosceles triangleEquilateral triangle

My JavaScript implementation of the Koch snowflake doesn't exactly use the above rules to construct it. Instead it uses the fact, that every angle inside of an equilateral triangle must be \(\frac{\pi}{3}\) or 60 degrees. The code recursively rotates the drawing context by \(\frac{\pi}{3}\) and starts drawing the curve backwards when the recursion ends. Using this construction method, it is easy to adapt the algorithm from equilateral to isosceles triangles, where only the two sides have to be of equal length. This extension allows for more interesting shapes and an additional degree of freedom for my animation.

The animation is controlled by the position of the mouse inside of the HTML5 canvas element. The x-coordinate controls the base angle of the isosceles triangle and the y-coordinate controls the number of iterations.

Demo

The Tree of Pythagoras

Pythagorean theorem

The Tree of Pythagoras is a fractal entirely constructed from squares, which was invented by the mathematics teacher Albert E. Bosman. The shape resembles the squares you draw around a right triangle to explain the pythagorean theorem \( a^2 + b^2 = c^2 \). The construction is very simple. You start with a square and add two smaller squares on top, so that the three squares together form a right triangle. Then you repeat this procedure recursively to infinity. If the angle of the smaller squares is \( 45^\circ \) or \(\frac{\pi}{4}\) then the squares have to be scaled down on every iteration by the constant factor \( r = \sin(\frac{\pi}{4}) = \frac{1}{2} \sqrt{2} \).

Implementation

My JavaScript implementation uses a color gradient, to make it look more like a tree, and allows for angles other than \(\frac{\pi}{4}\). This gives the tree a more irregular shape and the branches reach out to one side or the other.

The animation is controlled by the position of the mouse inside of the HTML5 canvas element. The x-coordinate controls the base angle of the squares and the y-coordinate controls the number of iterations.

Demo

The H-tree

H-tree

The H-tree fractal starts with a single line of arbitrary length. Then two smaller lines are drawn perpendicular to the first line at both ends. The result looks like a very wide letter H, hence the name H-tree. The same procedure continues for the smaller lines on both sides. On each iteration the lines get smaller by a factor of \( \sqrt(2) \).

Implementation

In my implementation the H-tree gets a trunk and the branches can be at any angle and are not limited to the right angles of the original. Furthermore the colors change on a gradient that gets more and more transparant as it reaches the top branches. All these changes make it look more like a natural tree. Unlike with the original H-tree, the branches actually overlap and form a kind of bushy mesh at the treetop.

Again the animation is controlled by the position of the mouse inside of the HTML5 canvas element. The angle is determined by the angle of the mouse to the top of the trunk. So the first branch always points directly at the mouse curser. The number of iterations and the factor by which the branches get smaller in every iteration, is determined by the distance of the mouse cursor to the top of the trunk.

Demo

References