QueTwo's Blog

Flex,Actionscript,Fractal,Tree,Graphics,Math,Flash,Code

So, in my continuing series of simple Flex examples, I am posting an example of how to build mathematically generated Fractals. In this app, we have a button, a color picker, a numeric stepper, and of course, our friend the Canvas.

To use the example, choose a “trunk” color from the color picker, and click somewhere in the Canvas (which is pretty much the entire stage).  It will call a function that will draw the tree. This function is iterative, meaning it calls itself over and over again to create the proper number of branches, etc.  At each iteration, it will also make the color more ‘green’, and the line weight one pixel smaller.  We pass in a few seed variables to get it started, including an initial direction (pointing straight up), the initial color, and an X and Y coordinate to start at.  The last variable we pass in also dictates how think the trunk should be (and therefore setting how many iterations deep the function should go).

Again, you can view 100% of the source code of this application by clicking on the image above and running the app, right clicking, and going to View Source.  I encourage comments on the example and code — let me know if this is useful at all!  This app should be a good example on some of the math and graphics functions in Flex.  There is also a demonstration on how to break up an RGB value and modify it programmatically, in addition to recursive functions.

Hope you have fun, and enjoy!   I think I only have one more example based on math stuff, so if that bores you, there is other cool stuff to come!

Edit:  Be careful with the "trunk size" or the number of iterations. Slower PC’s have a hard time with numbers larger than 10. Only choose a number > 13 if you have a really slick pc.