[edit] [comment] [remove] |2006-05-26| e1 # Iterated Function Systems

Fractals are beautiful and when using an elegant way to create them with SVG they become even more beautiful.

Iterated Function Systems (IFS) are a fascinating type of selfsimilar fractals. The theory behind them is not so much complicated. All we need to do is applying a set of affine transformations to an arbitrary shape.

 

[edit] [comment] [remove] |2006-05-26| e2 # Sierpinsky Triangle (1)

Let's start with a simple triangle

frac0.png

<?xml version="1.0" ?>
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="600" height="400">
  <defs>
    <path id="lev0" fill="#039" d="M0 0,2 0,1 1.732 z" />
  </defs>
  <use xlink:href="#lev0" transform="translate(50,50) scale(200)" />
</svg>
 

[edit] [comment] [remove] |2006-05-26| e3 # Sierpinsky Triangle (2)

Now we apply the following set of affine transformations to the triangle.

T1 =  1⁄20001⁄20001 
T2 =  1⁄20001⁄20101 
T2 =  1⁄20001⁄201⁄21⁄2√31 

By this we scale the triangle down by the factor 1⁄2 and position it at each corner of the original triangle.

frac1.png

<?xml version="1.0" ?>
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="600" height="400">
  <defs>
    <path id="lev0" fill="#039" d="M0 0,2 0,1 1.732 z" />
    <g id="level_1">
      <use xlink:href="#lev0" transform="matrix(0.5 0 0 0.5  0  0)" />
      <use xlink:href="#lev0" transform="matrix(0.5 0 0 0.5  1  0)" />
      <use xlink:href="#lev0" transform="matrix(0.5 0 0 0.5 0.5 0.866)" />
    </g>
  </defs>
  <use xlink:href="#lev1" transform="translate(50,50) scale(200)" />
</svg>
 

[edit] [comment] [remove] |2006-05-26| e4 # Sierpinsky Triangle (3)

We repeat the previous transformation in a simple recursive manner …

frac2.png

<?xml version="1.0" ?>
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="600" height="400">
  <defs>
    <path id="lev0" fill="#039" d="M0 0,2 0,1 1.732 z" />
    <g id="lev1">
      <use xlink:href="#lev0" transform="matrix(0.5 0 0 0.5  0  0)" />
      <use xlink:href="#lev0" transform="matrix(0.5 0 0 0.5  1  0)" />
      <use xlink:href="#lev0" transform="matrix(0.5 0 0 0.5 0.5 0.866)" />
    </g>
    <g id="lev2">
      <use xlink:href="#lev1" transform="matrix(0.5 0 0 0.5  0  0)" />
      <use xlink:href="#lev1" transform="matrix(0.5 0 0 0.5  1  0)" />
      <use xlink:href="#lev1" transform="matrix(0.5 0 0 0.5 0.5 0.866)" />
    </g>
    <g id="lev3">
      <use xlink:href="#lev2" transform="matrix(0.5 0 0 0.5  0  0)" />
      <use xlink:href="#lev2" transform="matrix(0.5 0 0 0.5  1  0)" />
      <use xlink:href="#lev2" transform="matrix(0.5 0 0 0.5 0.5 0.866)" />
    </g>
    <g id="lev4">
      <use xlink:href="#lev3" transform="matrix(0.5 0 0 0.5  0  0)" />
      <use xlink:href="#lev3" transform="matrix(0.5 0 0 0.5  1  0)" />
      <use xlink:href="#lev3" transform="matrix(0.5 0 0 0.5 0.5 0.866)" />
    </g>
    <g id="lev5">
      <use xlink:href="#lev4" transform="matrix(0.5 0 0 0.5  0  0)" />
      <use xlink:href="#lev4" transform="matrix(0.5 0 0 0.5  1  0)" />
      <use xlink:href="#lev4" transform="matrix(0.5 0 0 0.5 0.5 0.866)" />
    </g>
  </defs>
  <use xlink:href="#lev5" transform="translate(50,50) scale(200)" />
</svg>

and finally yield … the Sierpinsky triangle.

 

[edit] [comment] [remove] |2006-05-26| e5 # More Fractals

We can increase the level of iterations (recursions), we can even assign different level colors and we can play with other shapes and transformations - rotation, shearing - of course.

frac3.png frac4.png

Another feature, that is possible with vector graphics, but not with the pixel based fractals (still the majority on the web), is to visualize not only the last level, but all levels.

frac5.png

It is not very difficult, to create fractals interactively by some ecmascript code. You may look at Michel Hitzler's interactive ifs generator for an example. The recursive nature of XSLT would also be very useful here.