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:
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?
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
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 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
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 :)
October 5, 2009 at 1:51 PM Jacob SeidelinI recommend you check out w:blut's strange attractor experiments too:
http://www.wblut.com/tags/strange-symmetry/
Cool. Yes, colouring does add quite a bit. Thanks for the link, some cool stuff there!
October 5, 2009 at 2:14 PM AnonymousThese 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 AnonymousI quite liked de jong (3382941444).
October 5, 2009 at 4:11 PM AnonymousReally cool toy btw :) nice one.
Very cool! This is fantastic. I am in a dynamical systems course this semester and I am going to share with my classmates.
October 5, 2009 at 8:13 PM UnknownHowever, 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!
Check out the pre3d strange attractor: js+canvas+3d!
October 5, 2009 at 10:28 PM Jacob Seidelinhttp://deanm.github.com/pre3d/lorenz84.html
@anon 1: I'll consider your suggestion.
October 6, 2009 at 12:30 AM Rylee Corradini@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.
This is awesome! I just made de Jong 203788127, it's pretty funky.
October 6, 2009 at 10:56 AM UnknownIn 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.
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.
October 6, 2009 at 11:48 AM Unknown@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.
Jacob,
October 6, 2009 at 12:15 PM webcamThanks for your super fast response and your willingness to share your work with others. Keep up the good work.
That's a great article!
October 21, 2009 at 2:54 AM BrockI 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.
Jacob,
October 23, 2009 at 4:43 AM Jacob SeidelinAwesome 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!
@Brock: Ah, you're right. Fixed and thank you!
October 23, 2009 at 4:50 AM AnonymousDe Jong filter, seed 1923923036
October 26, 2009 at 1:52 PM Anonymousalso, de jong 2246249318
October 26, 2009 at 1:54 PM AdamFantastic page!!!
October 27, 2009 at 5:39 AM Adamis there any way you would be able to add a selection for say, Rossler, Lorenz and Henon attractors?
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_PorterExcellent 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.
October 28, 2009 at 10:51 AM AnonymousAnd the Henon attractor is already there, don't know if I'll bother adding more at this time.
Peter de Jong, 4125206880
November 1, 2009 at 6:55 AM AnonymousTrigonometric, 2469625464. Not spectacular, but beautifully simple.
November 1, 2009 at 7:18 AM AnonymousTrigonometric, 2247049933. Wow.
November 1, 2009 at 7:20 AM AnonymousQuardatic 3227075549. I guess I got lucky; this was my first quadratic try!
November 1, 2009 at 7:26 AM AnonymousQuadratic, 2344826955.
November 1, 2009 at 7:33 AM AnonymousQuadratic, 2488098270. You HAVE to have this one on "High"!
November 1, 2009 at 7:35 AM AnonymousI think these things look awesome, except I can never get any...
November 7, 2009 at 10:13 AM UnknownGood job tho, they look really cool.
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.
November 9, 2009 at 2:06 AM unekdoudr4
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)
November 9, 2009 at 11:02 AM unekdoudtrig,-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)
Also, compositing and high quality turn this into a colorful blur with specks.
November 9, 2009 at 11:12 AM Kevin Koo(quadratic, 1589419283)
2417064247 - Quadratic
November 18, 2009 at 10:42 AM victorm459775828 - Quadratic
4064291859 - Quadratic
2344826955 - Quadratic
3451298511 - Trigonometric
i am more curious about how you came up with the names :D
November 28, 2009 at 2:13 AM AnonymousThis is starting to feel like some kind of new-age Rorschach test (what do you see in this weird shape?).
November 29, 2009 at 11:36 AM Anonymouse.g. Peter de Jong 443433221211
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 EklundHello, I really like your stuff here! :)
November 30, 2009 at 5:27 AM UnknownI 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!
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.
December 8, 2009 at 3:53 AM AnonymousMio Navman Spirit V505
1405225482373644 i need to (re)learn some math
January 17, 2010 at 10:15 PM AnonymousTrig - seed: 1 heh
January 25, 2010 at 3:43 PM AnonymousIs 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 AnonymousThe 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 tombrokerCongratulations
February 20, 2010 at 6:35 AM Anonymous2749073327, Peter de Jong
March 18, 2010 at 1:59 PM AnonymousQuadratic, 554771120. It almost looks like a Star Trek ship.
March 18, 2010 at 8:12 PM AnonymousQuadratic, 2995256359. I'm speechless...this is so beautiful with or without color.
March 18, 2010 at 8:17 PM AnonymousQuadratic, 1121307768. This could be used for a company logo!
March 19, 2010 at 4:56 PM AnonymousQuadratic, 2102687300. I see a Valentines' Day card in this...
March 19, 2010 at 4:58 PM AnonymousTrig, Isetubr (3548230319) looks like a beautiful pyramid in the matrix.
March 27, 2010 at 8:34 PM TonksMath has got to be the best tool for art. Math is everything.
March 29, 2010 at 7:59 PM Jordan SneakersThis 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 SneakersThis 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 AnonymousTrig, Histe Anredt (200222000022222)
May 29, 2010 at 8:40 PM AnonymousTrig, Hiteleusega Asahas (411444111144444)
Trig, Abanaus Arelac (12343234543234320)
Try de Jong (99999999)
June 13, 2010 at 1:04 AM VentureKingInteresting, changing the seed even by 1 completely loses the picture.
I really like the non-symmetrical results like de Jong 1332088824.
July 22, 2010 at 12:27 PM ACould 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 AnonymousThis is good and fantastic creativity.This is nice and also good and amazing creativity......
December 30, 2010 at 7:38 PM Anonymousp 90 x
This is amazing creativity and I like this article so much.
January 11, 2011 at 8:37 PM Unknownmobile software development
I am grateful that you let us look in! Keep coming up with ideas.
April 9, 2011 at 4:06 AM AnonymousP90X
nice
August 16, 2011 at 5:56 AM AnonymousTry 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 DiegoHi, is the page no longer active?
November 18, 2013 at 9:19 PMI'm getting a 403 Forbidden:
http://www.nihilogic.dk/labs/strange_attractors/
Thanks