Fractals in Silverlight

Introduction

I thought it would be interesting to generate some fractal images in a Silverlight app.  The 1.0 version of Silverlight uses JavaScript for coding, so I found a JavaScript fractal algorithm here in an article by Peter Bromberg.  He demonstrated drawing directly in the browser using an algorithm called Martin Fractals.  I borrowed that algorithm and tweaked it to draw instead in a Silverlight app.

The Fractal Script

The Martin Fractal script works well because it isn't as intensive as other full blown fractal algorithms.  I think when I get around to a Silverlight 1.1 app. I may try a bigger algorithm, since the compiled code will be much faster than JavaScript.  I won't bore you with the details of how the algorithm works. You can go to the page mentioned above, or simply view the source of this page to take a look.  Basically, it uses some randomly generated values and a mathematical equation to plot points in an X,Y system.  Plot enough points and you see interesting patterns emerge.

I used the algorithm pretty much as is, but I changed the way the script is run.  Originally the main routine looped 100 times, and the script used the window.SetInterval method to cause the routine to be called multiple times.  This is done so that the drawing will refresh periodically as it is run.  I fiddled around with variations of that, but finally decided to just have the loop run 10,000 times all at once.  That's enough for you to see the patterns, but not have to wait too long. (depending on your computer of course!)

This highlights an important thing to know about the Silverlight plug-in.  If you are running script to manipulate the image in the app., it won't refresh the display until the code is done running.  Not surprising, everything else is like that, but you should just be aware of that if you have long running code like this.

The other thing I had to add is the plotting of the calculated points on the drawing.  Silverlight XAML doesn't have the concept of a point.  So it looks like the choice is either add a line that is one pixel wide and one pixel long, or add a rectangle that is 1 x 1.  I tried both and there didn't seem to be any noticeable performance difference between the two.  The shape is simply plotted at the X and Y coordinates calculated by the algorithm.  You can have fun with this by enlarging the rectangle, or plotting circles instead to see what you get.

strxaml = '<Rectangle Height="1" Width="1" StrokeThickness="1" Stroke="' + color + 
		'" Canvas.Top="' + y + '" Canvas.Left="' + x + '" />';
            
var e = sl.content.createFromXaml(strxaml);
board.children.Add(e);

The code above plots the point.  The Rectangle tag is created with location and color parameters passed into the procedure.  Then the createFromXaml method of the Silverlight app. is used to create the element.  The element is then added to the canvas tag, which is named 'board'.

Setting Up Silverlight

The Silverlight app. is set up normally.  I give it a simple XAML file as its source that contains a blank canvas named 'board' that serves as the container for the plotted points.  The HTML button kicks of the process each time you click it. 

Note that the JavaScript variables that are used to figure the coordinates are global to the page.  So each click of the button continues with the values that were left after the last click.  You see this in the images that are produced.  If you click the button a second time, the image will be plotted in patterns similar to the first one.  The random variables are initialized when the page loads, so if you want to start with a new pattern, just refresh the page.

The calculations take about 4 - 6 seconds to run on my machine.  Once you click the button, just wait, when you see the pattern, it's done.