I am very much into Fractals. Mostly because of their geometric art, but also interested in their mathematical properties. Specially the Sierpinski triangle. Usually fractals have very simple construction rules, but the result is aesthetically pleasing. Sierpinski is no different. What makes it fascinating to me is that it can be drawn in several very different ways. Here I show three ways that you can draw a Sierpinski triangle, or at least something that looks like one.

For creating graphical output on a webpage, I learned how to use HTML5 canvas and use javascript to draw shapes programatically. All of the shapes you see in this page are rendered on this page and are not pre-loaded images. Unfortunately I did not find a clean way to include html codes in the post from arbitrary locations using the jekyll system! Therefore, I had put the codes in the _includes/fractals folder as well as the codes/fractals folder. The file head.html in that folder contains the common codes and helper functions for drawing on canvases.

Now, let’s get our canvases dirty!

The recursive method/definition

The basic way to draw these triangles is the following steps:

  1. Draw an equilateral triangle.
  2. Connect the middle points of each edge to form a triangle.
  3. Color the middle triangle.
  4. Repeat from step 2 for all not colored triangles (the other three newly created triangles).

The canvas below shows the application of this recursive algorithm up to 6 steps.

You can find the code that implements this method in _includes/fractals/srecur.html.

The chaos game method

This method is based on the property that if you draw a line from any point on a Sierpinski to any of the main three vertices, the midpoint of the line is also on the triangle!

Here is the high level algorithm using this property:

  1. Put three point on the plane for the three vertices of the triangle.
  2. Start from any of these points.
  3. At the current point, randomly select one of the three vertices.
  4. Move halfway toward that vertex.
  5. Plot at the current point.
  6. Go to 3.

The canvas below shows how adding more and more pixels, converges graphically to a Sierpinski triangle. You can find the code in _includes/fractals/srand.html.

The Chaos game is very interesting in general. For different polygons (not just triangle) and different fractions of distance toward vertices, you can get different fractals.

The binary method

This property was the one that really blew me away when I first wrote a small code to print a Sierpinski in terminal. The code was as small as:

#include <stdio.h>
int main(){
    for( int i=0; i<64; i++ ) {
        for( int j=0; j<64; j++ )
            printf( i&j ? " " : "." );
        printf("\n");
    }
    return 0;
}

As can be seen in the code, if the bitwise AND of x and y coordinate of a point on the plane is 0, then it is on a shape that is very similar to the Sirepinski triangle. This property has been studied in the context of cellular automata, and it comes from the famous Rule 90. These cellular autoamtons work on a 1-d array of cells and using an update rule generate the next array from the current array. Applying rule 90 repeatedly, generates a Sierpinski looking structure.

The canvas below shows this relation and its code is in _includes/fractals/sbin.html.

Other fractals: Koch snowflake

I mainly wrote about Sierpinski, because it has many different ways to construct. However, I wanted to add one fractal other than Sierpinski. Koch snowflake has a very simple construction rule as well, but it has interesting mathematical properties and looks nice! For example it is continuous everywhere and diffrentiable nowehere!

The basic method of constructing it is as follows:

  1. Draw an equilateral triangle.
  2. Divide each line segment into three equal segments.
  3. Draw an equilateral triangle using the middle segment as base
  4. Remove the middle line segment
  5. Go to 2

The canvas below shows step of drawing this snowflake up to 4 steps. You can find the code in _includes/fractals/koch.html.