Starting a Strange Attractor Series

One of my favorite mathematical diversions has been the subject of strange attractors. But to be honest, I’ve mostly just copied some formulas down from somewhere and started messing with them, making some cool graphics but not really having any real understanding of what was going on.

I finally decided to remedy that by reading this book: Strange Attractors:
Creating Patterns in Chaos by Julien C. Sprott. It’s out of print, but freely available as a download in multiple formats from that site.

I’m about half way through Chapter 1 and it’s good stuff. Rather than just reading, I’m trying to actually work out what he’s talking about in code. Here’s my first creation:

[kml_flashembed movie=”http://www.bit-101.com/sprottbook/StrangeAttractors_01.swf” width=”550″ height=”800″/]

OK, so what’s going on here? The top graph shows about 5500 iterations per frame of the formula n1 = Rn(n-1), where n starts out at 0.1, and R begins at 2.0 and increases by 0.001 per frame up to 4.0. The current value of R is shown in the top left.

The bottom graph plots the last hundred or so iterations of the formula of each successive frame on a single vertical line. You can move your mouse over it to show the value of R at any particular point on the x axis. This is known as the Feigenbaum Diagram, after Mitchel J. Feigenbaum, who did a lot of work on this subject.

As you can see, from 2.0 to about 3.0, the results always converge on a single number. Then it splits into two solutions up until about R=3.4 where it splits again into 4. At 3.5699456 it reaches chaos. This is the Feigenbaum point.

Finally, the code I used for this, written straight into the timeline of a Flash CS3, AS3 document:

[as]var begin:Number = 2.0;
var end:Number = 4.0;
var diff:Number = end – begin;
var res:Number = .001;
var n:Number;
var R:Number = begin;
var xpos:Number;
var xpos2:Number = 0;
var bmpd:BitmapData = new BitmapData(550, 400, false);
addChild(new Bitmap(bmpd));

var bmpd2:BitmapData = new BitmapData(550, 400, false, 0);
addChild(new Bitmap(bmpd2)).y = 400;

var tf:TextField = new TextField();
tf.selectable = false;
tf.defaultTextFormat = new TextFormat(“standard 07_55”, 8);
addChild(tf);

var tf2:TextField = new TextField();
tf2.selectable = false;
tf2.defaultTextFormat = new TextFormat(“standard 07_55”, 8, 0xffffff);
tf2.y = 400;
addChild(tf2);

function func(n:Number):Number
{
return R * n * (1 – n);
}

addEventListener(Event.ENTER_FRAME, enterFrameHandler);
stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);

function enterFrameHandler(event:Event):void
{
bmpd.lock();
bmpd2.lock();
tf.text = (Math.round(R * 1000) / 1000).toString();
bmpd.fillRect(bmpd.rect, 0xffffff);
xpos = 0;
n= .1;
while(xpos <= 550) { bmpd.setPixel(xpos, 400 - n * 400, 0); xpos += .1; n = func(n); if(xpos > 540)
{
bmpd2.setPixel(xpos2, 400 – n * 400, 0xffffff);
}
}
xpos2 += 550/(diff / res);
R += res;
if(R >= end)
{
removeEventListener(Event.ENTER_FRAME, enterFrameHandler);
}
bmpd.unlock();
bmpd2.unlock();
}

function mouseMoveHandler(event:MouseEvent):void
{
var r:Number = begin + mouseX / 550 * diff;
tf2.text = (Math.round(r * 1000) / 1000).toString();
}[/as]

Not so pretty, so feel free to clean it up, turn it into a class or whatever. You’ll probably want to set your own font, and embed it. You can play with the beginning and ending settings for R, as well as the resolution of the changes in R, to zoom in on specific regions of the graph. This is cool for me anyway, as I’m actually understanding what is going on here, on the road to understanding a lot more about strange attractors, and hopefully being able to create lots more pretty pictures and animations with them, my ultimate goal. 🙂