Fractal Machine

I’ve finished my next project. It’s called the Fractal Machine.

It’s a geometry tool that draws base-motif fractals from five inputs.

If you are unfamiliar with them, fractals are shapes that exhibit self similarity at different scales. This particular type of fractal is created by substituting every line with a shape called the “motif” a number of times.

The Controls

Base changes the base shape the fractal is drawn on. Each side of the polygon will be drawn as one copy of the fractal curve.
Segments cuts the motif into more or fewer pieces of equal length.
Mirror doubles the protruding part of the motif at every level of the fractal.
Depth sets the number of times each line is substituted for the motif.
Angle The slider changes the first and last angles of the motif. Any other angles will sort themselves out to be symmetrical.
EDIT: In June 2013 I added two new controls, Skew and Arms.
skewSkew Skew the motif left or right.
armsArms adds new lines sticking out from the corners of the motif.

The glyphs above show the controls working in isolation (at an angle of 60Β°), but the fractal machine’s complexity comes from the way in which they interact. Once these inputs are given, theΒ  fractal tries to dynamically resize itself in a way that highlights these relationships. So the length of a single line changes, but the overall size of the fractal and positions of analogous components should be relatively stable. Figuring out the trigonometry that made all this work turned out to be pretty fun.

I figure that some people will want to use this to explore human-scale geometric relationships, while other people will just want to turn on the animation, colors and trails and watch it like a music visualizer. Hopefully most people do a little bit of both and enjoy the way one builds into another. One of my favorite things about recursion is that it can let you see simplicity inside complexity.

If you want the quick tour, some shapes worth checking out include: The famous Koch Snowflake, something I’ve been calling the Koch Mirror, Sierpinski’s Triangle, Sierpinski’s Carpet, this great pentagon fractal, and this cube snowflake I found.

Unfortunately, javascript and canvas are still pretty slow when it comes to a hundred million lines at once, so sometimes the page can get pretty slow. If this gets frustrating, try turning a few of the controls down, depth in particular makes a huge difference.

If you find yourself staring at this for a decent amount of time, you might like to know that you can press H to hide the controls and use the keyboard instead. I’ll leave you to work out what buttons do what.

This has been my second ever programming project (the first being my logic grid/eca), and I’ve learnt a lot. For anyone out there interested in beginning to program, I really recommend JavaScript and canvas as a way to start. Just find a template for an html file with a working canvas, and draw some lines. The rest is actually easier than it looks.

11 thoughts on “Fractal Machine

  1. Love it! Just started working with Javascript and the canvas and could not really see a use for it other than “its cool to do”. Thanks for the inspiration. Excited about really working with it now.

  2. This tool is awesome, super fun to experiment with! Great work! I was wondering If it would be possible to use an image I got from this as album art for a song? I make electronic music and it would be cool to have one of these for some art. I’ll link your site and/or blog!

    Let me know,
    Luca

  3. This is sooo beautiful! I accidentally was looking at the fractals with classical music as the background, it so meditative!
    you are amazing!
    thanks!!!!
    πŸ™‚

  4. One of the loveliest fractal generators I have come across among the minimalistic ones. Especially with animation. Do check

    1) if you can tile it on the screen without recalculating the entire fractal.
    2) if you can re-implement this using GLSL

Leave a Reply

Your email address will not be published. Required fields are marked *

Fill in the blank to prove you are human: