Tuesday, September 27, 2011

Chaos Games and Fractals

I just attended the HTML5 Developer's Conference in San Francisco. I learned a handful of things about HTML5, JavaScript, Node.js and a checked out a few companies that are doing cool things to allow devs to create apps and port to various mobile platforms.

During lunch break, I continued working on Chaos game (see http://en.wikipedia.org/wiki/Chaos_game for more information). Basically, I finished the specification for 3 vertices and discovered, yes, it creates a cool fractalized, coherent graphics image:

The algorithm is basically this:
1) Ask the user to click three points in the window. These become the 3 vertices of  a triangle. Draw lines between the 3 points. Choose one vertex at random.
2) Draw a small circle at that point.
3) Choose another vertex and move the current point 1/2 the distance towards that vertex.
4) Repeat steps 2 and 3 until the user clicks the mouse again.

Walla! Nice result.
I decided to extend this a bit to add more vertices. The results were not so spectacular. Then, I decided to change the rendering algorithm every so slightly by changing the divisor to 3. Something interesting occured. A shadow image appears outside the original bounds of the figure drawn out by the user. A run with 6 vertices and a divider of 6 yeilds the following:

Try it out. The C++ source and Xcode project are parked at github. Also, you can just run the app on your Mac. It will prompt you for the number of vertices and dividers so you can experiment with shapes of your own. Fractal away! 

p.s. Thanks to eroberts at Stanford for the utility libraries.