You can get a lot of mileage from the simple spiral. Take this for a spin . . . ha-ha, get it? Spin? Just move the sliders around. You’ll come up with some cool designs. Play with the cosine factor and radius delta to get some cool 3D effects going. And when you find a pattern you like try selecting the animate drawing checkbox so that you can see the spiral animate from the center.

Here’s the meat of the class. The variables sin, cos, x, y are only created for convenience and readability. Plus it saves a bit on processes since otherwise some calculations would be duplicated if.

private function drawSpiral( e:TimerEvent=null ):void {
	var sin:Number = Math.sin( r );
	var cos:Number = Math.cos( r );

	var x:Number = _sinFactor * r * sin
	var y:Number = _cosFactor * r * cos

	var color:uint = Math.abs( sin * 255 ) << 16 |
		0 << 8 | Math.abs( cos * 255 );
	this.graphics.lineStyle( 1, color );
	if( r > 0 ) {
		this.graphics.lineTo( x, y + c );
	} else {
		this.graphics.moveTo( x, y + c );
	}
	r += _rDelta;
	c += _cDelta;
}

The spiral. Good device. Will be used more later. :)

There is a beautiful relationship between the Mandelbrot set and Julia sets. Namely, when creating a Julia set with a point that is contained inside the Mandelbrot set you end up with a Julia set that is contiguous. But pick a point outside of the Mandelbrot set and your Julia set will start to form islands and will no longer be contiguous. ( I’m sure there are really cool mathematical terms for that but I don’t know them. )

Move your mouse over the Mandelbrot set ( top ) and watch the Julia set ( bottom ) change form.

Back in college in the mid 80s I saw a video about the Mandelbrot set that illustrated just this relationship that you see here. A large Mandelbrot set was displayed on screen and in one corner was a display of a Julia set. A point floating over the Mandelbrot set moved around – like you do with your mouse above – and the Julia set would be created with the points corresponding to the ( a + ib ) point of the Mandelbrot set. As the point moved near the center of the Mandelbrot set the Julia set became nearly circular. Moving out toward the edge of the Mandelbrot set caused the Julia set to become more complex. And finally the Julia set became wildly dispersed as the point moved far away from the edge of the Mandelbrot set.

What the video showed was a rendering of the Julia sets changing because few if any computers at the time has the power to crunch out Julia sets that fast in real time. Since then I’ve always wanted to recreate that visual but in an interactive way, not something that is pre-rendered.

My wife and I went on a camping trip this weekend and I took the opportunity to hammer it out. I had created a class to display the Mandelbrot set months ago. So all I had to do was handle the Julia set and interactions. Turns out it is very easy to create a Julia set and the caculations do not requrie recursion so it renders much faster than the Mandelbrot set which does require recursion.

About the code
Of course the source code is available in case you would like to poke around with this yourself. I got the pseudo code from ThinkQuest.com. In the JuliaSet class I left the pseudo code comments around the Actionscript translation so it should be very easy to follow.

Every time the mouse moves across the Mandelbrot set a listener fires and passes the current ( a + ib ) coordinates to the JuliaSet class. If the JuliaSet class is still calculating from a previous call it will just return the BitmapData of the last rendered Julia set. Otherwise it will create a new Julia set with the new coordinates and return that. So it’s best to move your mouse around somewhat slowly. Mileage may vary depending on various factors. It seems to zip along pretty well on my laptop running Ubuntu on a 2.2Ghz processor.

The colors are calculated based on the number of iterations it takes to create the Julia set, or Mandelbrot set. For instance, points inside the Mandelbrot set are always black. But points very near the edge vary in color depending on the number of recursive loops it took before the breakout condition was met: x^2 + y^2 > 4.

The color assignment is found by simply multiplying ‘white’ 0xFFFFFF times iterations/max_iterations. It isn’t the best method of assigning colors but it is quick and easy to impliment. The colors for the Julia set are assigned in a similar manner.

When I strike it rich with one of my crazy startup ideas I’m going to retire to an island somewhere and just explore mathematical algorithms like this one. :-)

One of my hobbies is playing around with mathematical algorithms in Actionscript. Here are a few sites I have found useful.

Code Optimization

AS3 Speed tests
This is a community maintained page of speed optimization techniques for use with ActionScript3.

AS3: Rethink your old assumptions
A bit on code optimization using constants and variables.

Fast and accurate sine/cosine approximation
More code optimization to do sine/cosine operations without using the Math class.

Bitwise gems – fast integer math
Using bitwise operations to speed up calculations.

Actionscript

Using molecular mechanics in Flash
Cool motions based on equations of attraction and repulsion.

Making Bitmap Art with Flash CS3 and WikiPedia
Art from equations.

Sites

Wolfram’s MathWorld
The web’s most extensive math resource.

Superfractals
The site resource for the book Superfractals by Professor Michael F. Barnsley

Good Math / Bad Math
Finding the fun in good math. Squashing bad math and the fools who promote it is their tagline. I just hope he never writes about me.

Articles

Iterated Function Systems and Attractors
Covers the mathematical iteration I used here.

On the first page of the book Superfractals is one of those cool mathematical curiosities that makes math geeks like me go all Archimedian. (No, I didn’t run naked to the bookstore counter and buy the book. But I did go home and order it at Amazon.)

Here’s the gist of the curiosity, which I created an algorithm for below:

Pick 3 points on the xy-plane and label them A, B, and C. (As a group I’ll call them ABC.)

Now pick a fourth point and label it X₀. Now randomly pick a point from the ABC group. From X₀ make a new point that is the mid-point between your random ABC selection and X₀. Label that point X₁.

Now from X₁ do the same thing again. Pick randomly between ABC group and then from X₁ go to the mid-point between X₁ and your random selection.

Repeat that a few millions times.

You might think that eventually you’ll fill up the points in between the ABC group and have a solid triangle. But no. You’ll end up with a skewed Sierpinski triangle as you can see below.

Serendipitous errors

In my first version of the algorithm I made a mistake in the equation that calculates the mid-point. The equation should be as such:

x_mid = ( x₁ + x₂ ) / 2

And the same for the y-coordinate.

In my haste I wrote the incorrectly and calculated a difference instead of a sum between the two values.

Now that sould produce something random because what on earth could the relationship of the difference between the first and second points divided by two have anything to do with?

But you don’t get a random dispersion. You get something that closely resembles the inverse of the Kosh snowflake. Why? Ask a mathematician because I have no idea.

Grdenizing the code

This is exactly the sort of algorithm where code optimization can make a big difference. John Grden just wrote a wonderful post on optimizing Actionscript by using bitwise operations and a few other tricks that I applied here.

In the application above you can check/uncheck the optimized code checkbox to select which version of the method gets used. Then you can see the results displayed and judge for yourself how much code optimization can benefit you in cases where you are iterating over large sets of data.

View source code here.

The obvious place to optimize is with the mid-point equation. Instead of dividing by two I’m using the equivalent bitwise operation: >> 1.

That helped but using int(num) instead of Math.floor(num) made a huge difference. I’ll never use Math.floor() again that’s for sure.