Check out my
new book!
HTML5 Games book
Strange attractors - beautiful chaos and canvas Math has the ability to both be totally awesome and beautiful as well as make me bang my head into the wall. While the actual math involved at times goes way above my head, some things are just so damn elegant and when, on top of that, they can be visualized with pretty pictures, I'm sold. To make things even better, we have <canvas> and with it the ability to throw some JavaScript at this magic math. Links to gallery and generator at the bottom if you want to skip the details.

I'm sorry if I offend any math-enabled people with this post, I am but a mere mortal so bear with me if I mess up any of the math.

Anyway, fractals like the well-known Mandelbrot set (and many others) have that ability as do another category of mathematical creatures known as strange attractors. So what are they? I asked Wikipedia:
"An attractor is a set to which a dynamical system evolves after a long enough time."
While in every day use, one might think of an attractor as something that attracts stuff, in this context it's really the pattern or the result of what's going on in a system. E.g. if you're measuring and graphing the relationship between a number of variables over time, by connecting those points you could refer to the resulting pattern as an attractor.

A point attractor a simple form of attractor. Consider a pendulum. Release it and it will always, eventually, end up at rest in the same place. That resulting pattern (the point) would be the attractor for that system.

What about strange attractors, then?
"An attractor is informally described as strange if it has non-integer dimension or if the dynamics on it are chaotic."
Chaos, alright. Among other things, that involves being very sensitive to initial conditions (butterfly -> wing-flapping -> tornado, etc). It's more complex that than, but that's where it just goes beyond what I can grok.

Ok, so what we need is a function that, when called over and over again, shows unpredictable and radically different behaviour if we change some initial conditions (even just slightly). Fortunately there are smart people who already found such functions.

One of those is the quadratic map given by

xn+1 = a0 + a1 xn + a2 xn2 + a3 xn yn + a4 yn + a5 yn2,
yn+1 = b0 + b1 xn + b2 xn2 + b3 xn yn + b4 yn + b5 yn2

where a0-a5 and b0-b5 are constants that make up that attractor. Another is the Peter de Jong attractor using trigonometric functions:

xn+1 = sin(a yn) - cos(b xn),
yn+1 = sin(a xn) - cos(b yn)

I've only played around with a few but there are many more. These, however, produce some very interesting visuals.

One problem, at least in the case of the quadratic attractor, is that, if the a0-a5 and b0-b5 factors are chosen randomly, very few (like 1% for quadratic, the other formulas seem to have a higher rate of success) combinations produce a useful chaotic system. Determining which ones do is done using something called the Lyapunov exponent, which I won't go into but look it up if you're interested.

All this was heavily inspired by the work done by Paul Bourke who has done all sorts of awesome math visualization. The code itself is also partly based on a program available on Bourke's site.

View the gallery for pretty pictures or make your own using the generator. The way it works is that you pick a formula/attractor type and click "Generate". It then searches for potentially nice images by selecting random values for the ai and bi coefficients. When a chaotic attractor is found, it draws it on the screen, optionally with some pretty and colorful compositing (courtesy of Pixastic). You can recreate any attractor by using its seed number (displayed after the name). If you find some really nice ones, leave a comment with the seed and attractor type so I and others can see.

Also, If you're going to generate your own images, I really suggest using Chrome (or WebKit, although it has problems with the compositing). Any recent canvas enabled browser should work, though.

View the gallery
Try the generator

⇓ 63 comments subblue

Very nice. I love the colouring you have used. I did some attractor experiments in Flash a while ago but they look quite drab compared to these :)
I recommend you check out w:blut's strange attractor experiments too:
http://www.wblut.com/tags/strange-symmetry/

October 5, 2009 at 1:51 PM
Jacob Seidelin

Cool. Yes, colouring does add quite a bit. Thanks for the link, some cool stuff there!

October 5, 2009 at 2:14 PM
Anonymous

These would make some beautiful desktop images; could you possibly add a configurable rendering size and background colour? I'd love to get some of these up to 1920x1200 with a black background. :)

October 5, 2009 at 4:01 PM
Anonymous

I quite liked de jong (3382941444).

Really cool toy btw :) nice one.

October 5, 2009 at 4:11 PM
Anonymous

Very cool! This is fantastic. I am in a dynamical systems course this semester and I am going to share with my classmates.

However, I just want to correct a slight error you made.
You said, "Chaotic doesn't mean random, but it does mean that you can't predict the behaviour of a system even if you know its current state."

Yes you can predict the behavior. How else would you draw it? :)

Chaotic, according to Devaney, means three things: 1.) "topological transitivity", 2.) "sensitive dependence on initial conditions", and 3.) "periodic points are dense". Does it matter in the scope of this website what those *exactly* are? Nah, but I'll try to explain the confusion.

What people usually get mixed up on is the "sensitive dependence on initial conditions" which really means two points starting near each other can end up "far" away after you "run the system". Now "far" could mean "within .00001" or it could mean "within 100000000". We let "far" be either one because with respect to ALL numbers, any single distance is "far" from another one in some sense.

This is sometimes explained as the butterfly effect, but it's not as extreme in general as "butterfly flapping wings -> tornado" would seem.

That being said, it's still a fascinating subject and your images are great!

October 5, 2009 at 8:13 PM
Evan

Check out the pre3d strange attractor: js+canvas+3d!

http://deanm.github.com/pre3d/lorenz84.html

October 5, 2009 at 10:28 PM
Jacob Seidelin

@anon 1: I'll consider your suggestion.

@anon 2: :-) Yep, that's a nice one.

@anon 3: Thanks for the correction! I always struggle with things like this so I was afraid I might be get something wrong. However, you're right that in the context of my site, the mathematics is second and the JavaScript/Canvas comes first.

@Evan: Yea, Dean makes some great stuff as well.

October 6, 2009 at 12:30 AM
Anonymous

1, 2, 3 (images preview).

October 6, 2009 at 7:21 AM
Buyog

This is awesome! I just made de Jong 203788127, it's pretty funky.

In 10 minutes' play with the generator, my experience was that de Jong yields good results much more quickly than the other three options, especially Quadratic. But maybe that'd just me.

October 6, 2009 at 10:56 AM
Ryan

Very cool project, would you be willing to post the code for the generator somewhere on your site, I'd be interested to see how you implemented the colors.

October 6, 2009 at 11:39 AM
Jacob Seidelin

@anon nice ones, I like #1.

@Buyog: Yes, that's my experience as well, which is why I made it the default option.

@Ryan: You can see the code here. The color is determined by the "velocity" of the point, ie. the distance between the current and the previous point. It just shifts the hue in a randomly selected part of the color spectrum. To actually render the colors, I'm just painting large spots on a separate canvas which is then blurred and blended in different ways onto the final canvas.

October 6, 2009 at 11:48 AM
Ryan

Jacob,
Thanks for your super fast response and your willingness to share your work with others. Keep up the good work.

October 6, 2009 at 12:15 PM
webcam

That's a great article!
I was waiting to listen this kind of stuffs since a long time. Thank you so much for sharing such a nice information. I will surely try to keep in contact on this site However i am going to bookmark this site for future use.

October 21, 2009 at 2:54 AM
Brock

Jacob,

Awesome work as usual.

I believe there is an issue with the Trigonometric formula in your calcnext function. There is an if statement at line 231:

} else if (options.ula == 1) {

I believe this should be:

} else if (options.formula == 1) {

I am not sure if this will change the rendering, but seemed out of place.

Thanks!

October 23, 2009 at 4:43 AM
Jacob Seidelin

@Brock: Ah, you're right. Fixed and thank you!

October 23, 2009 at 4:50 AM
Anonymous

De Jong filter, seed 1923923036

October 26, 2009 at 1:52 PM
Anonymous

also, de jong 2246249318

October 26, 2009 at 1:54 PM
Adam

Fantastic page!!!

is there any way you would be able to add a selection for say, Rossler, Lorenz and Henon attractors?

October 27, 2009 at 5:39 AM
Adam

oooh...and i've just thought....to better understand the formula's, is there anyway of seeing what values of a, b and c the generator has used once it's finished rendering?

October 27, 2009 at 5:41 AM
Prince_Porter

Excellent work. The third example there looks as if it could be a hologram of a brain in some science fiction film, very cool.

October 27, 2009 at 7:06 AM
Jacob Seidelin

@Adam: No, I'm afraid not. If I find the time, I'll try to think of something.
And the Henon attractor is already there, don't know if I'll bother adding more at this time.

October 28, 2009 at 10:51 AM
Anonymous

Peter de Jong, 4125206880

November 1, 2009 at 6:55 AM
Anonymous

Trigonometric, 2469625464. Not spectacular, but beautifully simple.

November 1, 2009 at 7:18 AM
Anonymous

Trigonometric, 2247049933. Wow.

November 1, 2009 at 7:20 AM
Anonymous

Quardatic 3227075549. I guess I got lucky; this was my first quadratic try!

November 1, 2009 at 7:26 AM
Anonymous

Quadratic, 2344826955.

November 1, 2009 at 7:33 AM
Anonymous

Quadratic, 2488098270. You HAVE to have this one on "High"!

November 1, 2009 at 7:35 AM
Anonymous

I think these things look awesome, except I can never get any...

Good job tho, they look really cool.

November 7, 2009 at 10:13 AM
andrew

Your blog on Strange attractors - beautiful chaos and canvas is so usefull to make paintings on the canvas.It is really so amzing blog to sharing this king of information.

r4

November 9, 2009 at 2:06 AM
unekdoud

Really awesome tool/toy. But it needs the ability to cancel rendering. (using quadratic without a seed made firefox eat up all my remaining memory)

trig,-1414 (negative seed!)
peter de jong, 1414 (so good it doesn't need compositing)
PdJ 3334
PdJ, 111111111111 (12 ones)
trig, 1234567890 (weird that no one has tried this yet)
PdJ 321232123 (looks like me scribbling)

The trig and Peter de Jong go very well together (similar formulas, maybe?) so many seeds work well on both.
Extra playing with expansion of 1/7 gives:
trig 142857
PdJ 428571
trig 285714
trig -571428
are somewhat interesting on one algorithm but totally boring on the other.

Anyway, this took me on a mind trip. I see some new wallpaper possibilities here.

auto generate:
quadratic 2138504878 (some kind of space age slipper)

November 9, 2009 at 11:02 AM
unekdoud

Also, compositing and high quality turn this into a colorful blur with specks.
(quadratic, 1589419283)

November 9, 2009 at 11:12 AM
Kevin Koo

2417064247 - Quadratic
459775828 - Quadratic
4064291859 - Quadratic
2344826955 - Quadratic

3451298511 - Trigonometric

November 18, 2009 at 10:42 AM
victorm

i am more curious about how you came up with the names :D

November 28, 2009 at 2:13 AM
Jacob Seidelin

@victorm: Haha, glad you asked :-) I created a master list of about 1600 names using various generators at http://www.seventhsanctum.com/ and then my app cuts them up and puts them back together in a (pseudo-)random fashion based on the attractor's seed.

November 28, 2009 at 2:27 AM
Anonymous

This is starting to feel like some kind of new-age Rorschach test (what do you see in this weird shape?).
e.g. Peter de Jong 443433221211

November 29, 2009 at 11:36 AM
Anonymous

I really love the things you do. What I would really want to know is how you made this generator. Do you have any resources on how to start a project like this? What skills would I need to make those?

November 30, 2009 at 2:22 AM
Martin Eklund

Hello, I really like your stuff here! :)
I have made an environment called Mad Tea Lab, it can be used
to explore a strange attractors visual space in a more intuitive way:

Strange Attractor Test

(It can also be used for a lot of other stuff, and note it's a beta version!)
Peace!

November 30, 2009 at 5:27 AM
Sheen

I have studied graphics during my graduation.Hence very well know that how difficult it is to create 3D images and all the above shown images.Many thanks to the inventor of attractor.This is gone a be a boon for all the people working with graphics.
Mio Navman Spirit V505

December 8, 2009 at 3:53 AM
Anonymous

1405225482373644 i need to (re)learn some math

January 17, 2010 at 10:15 PM
Anonymous

Trig - seed: 1 heh

January 25, 2010 at 3:43 PM
Anonymous

Is the H�non generator working properly? I can't seem to really get it to do anything other than one specific setup.

January 25, 2010 at 3:59 PM
Jacob Seidelin

Selecting Henon generator picks a specific set of parameters behind the scenes, creating the Henon attractor (http://en.wikipedia.org/wiki/H%C3%A9non_map). So yes, it does properly, but the random parameters don't factor in and you always get the same image.

January 26, 2010 at 12:07 AM
Anonymous

The only thing I've noticed with it is that I was able to change the colors of it a few times. :-p

January 26, 2010 at 12:30 PM
tombroker

Congratulations

February 20, 2010 at 6:35 AM
Anonymous

2749073327, Peter de Jong

March 18, 2010 at 1:59 PM
Anonymous

Quadratic, 554771120. It almost looks like a Star Trek ship.

March 18, 2010 at 8:12 PM
Anonymous

Quadratic, 2995256359. I'm speechless...this is so beautiful with or without color.

March 18, 2010 at 8:17 PM
Anonymous

Quadratic, 1121307768. This could be used for a company logo!

March 19, 2010 at 4:56 PM
Anonymous

Quadratic, 2102687300. I see a Valentines' Day card in this...

March 19, 2010 at 4:58 PM
Anonymous

Trig, Isetubr (3548230319) looks like a beautiful pyramid in the matrix.

March 27, 2010 at 8:34 PM
Tonks

Math has got to be the best tool for art. Math is everything.

March 29, 2010 at 7:59 PM
Jordan Sneakers

This blog makes me realize the energy of words and pictures. I am grateful that you let us look in! Keep coming up with ideas.

May 26, 2010 at 7:58 PM
Jordan Sneakers

This blog makes me realize the energy of words and pictures. I am grateful that you let us look in! Keep coming up with ideas.

May 26, 2010 at 8:00 PM
Anonymous

Trig, Histe Anredt (200222000022222)
Trig, Hiteleusega Asahas (411444111144444)
Trig, Abanaus Arelac (12343234543234320)

May 29, 2010 at 8:40 PM
Anonymous

Try de Jong (99999999)
Interesting, changing the seed even by 1 completely loses the picture.

June 13, 2010 at 1:04 AM
VentureKing

I really like the non-symmetrical results like de Jong 1332088824.

July 22, 2010 at 12:27 PM
A

Could you please make the background of the resulting image all black? I want to set some of these images as desktop backgrounds. :)

October 19, 2010 at 12:12 AM
shuanmedrik

This is good and fantastic creativity.This is nice and also good and amazing creativity......


p 90 x

December 30, 2010 at 7:38 PM
john

This is amazing creativity and I like this article so much.


mobile software development

January 11, 2011 at 8:37 PM
Hanson

I am grateful that you let us look in! Keep coming up with ideas.
P90X

April 9, 2011 at 4:06 AM
sammacks

nice

August 16, 2011 at 5:56 AM
amarantha

Try 1153840119 in Peter de Jong ... it's so very organic and seems like it's a real deep sea organism.

September 25, 2013 at 9:59 AM
Diego

Hi, is the page no longer active?
I'm getting a 403 Forbidden:
http://www.nihilogic.dk/labs/strange_attractors/
Thanks

November 18, 2013 at 9:19 PM
Post a Comment