Chaos DancersParticles pulled in the dynamic balance of a strange attraction between four Equationsby Joel CastellanosFull Screen (click here, then press F11) 



Adds current system to a gallery saved in your browser's AppData. If the gallery is nonempty, then the auto morph will periodically return to each saved system. 
Equation 1  Equation 2  Equation 3  Equation 4  
p  
a  
b  
c  
d  
e  
f  
w (Linear)  
w (Sinusoidal)  
w (Spherical)  
w (Fisheye) 
Circle Inversion:  Color Iterations: 
Chaos Dancers is a fractal animation. More precisely, each frame is a collection of pixels
representing a mathematical set that exhibits both
selfsimilarity and differences on endless
magnification. The word "fractal" comes from a curious scaling property that
distinguishes such sets form other geometric
shapes. For example, increasing all the edge lengths of a
polygon by a factor of two will increase the polygon's area by a factor of two raised to the second power.
By contrast, if a fractal's onedimensional lengths are all doubled, the spatial content of the fractal scales
by two raised to a power that is usually greater than two, and not necessarily an integer. This power, called the
fractal dimension,
differs from one fractal to another (and from one frame of Chaos Dancers to another).
While watching Chaos Dancers, it can be
fun to guess which patterns represent fractals with a relatively high or relatively low fractal dimension.
Chaos Dancers is a type of fractal called an
Iterated Function System mixed with variations and
Circle Inversion.
Chaos Dancers is written using a mix of Javascript, HTML5, CSS, WebGL and GLSL.
The algorithm used here is adapted from the Fractal Flame
developed in 2003 by Scott Draves and Erik Reckase. Draves and Reckase's Fractal Flame algorithm allows for an
an arbitrarily large number of equations and variations. This web app supports only four equations with four variations.
This implementation runs in realtime (60 frames per second on an Intel mobile i5 with a mid level graphics card).
In order to achieve this performance, the original algorithm needed to be modified so as to take advantage of
the massively parallel architecture of modern GPUs. Also, to keep the app realtime, the number of particles per frame
is only twice the number pixels on the canvas (just under a million particles/frame for a 700 x 700 pixels canvas).
While that is a large number of particles, it is vastly less than what is typically used for nonrealtime
fractal flame renders.
In addition to the Fractal Flame algorithm, circle inversion, using a single circle that circumscribes the
{(x,y): 1≤ xy ≤1} view window,
is applied to any particles that would otherwise render outside that circle.
The steps of the algorithm that happen each frame are:
The three transformation equations in this IFS are:
Where p_{1}, p_{2}, and p_{3} are each the probability that the corresponding
equation is chosen on any one iteration (p_{1}+p_{2}+p_{3} = 1.0).
Each a, b, c, d, e, and f is a parameter with domain (1.0, 1.0).
Each parameter w_{i,k} is a weight, in equation i, of the variation V_{k}.
The variation functions are:
Linear:  V_{1}(x, y) = (x, y) 
Sinusoidal:  V_{2}(x, y) = (sin(x), sin(y)) 
Spherical:  V_{3}(x, y) = (x/(x^{2}+y^{2}), y/(x^{2}+y^{2})) 
Fisheye:  V_{4}(x, y) = (4x/(x^{2}+y^{2}+4), 4y/(x^{2}+y^{2}+4)) 
For the Sierpinski Triangle, only the linear variation function, V_{1}, has a nonzero weight.
Also, the xcoordinate transformation is independent of y and the ycoordinate transformation
is independent of x.
Thus, with vertices {( 1, 1), ( 0, 1 ), ( 1, 1 )} the IFS equation for the Sierpinski Triangle is:
With thanks to Truman DeYoung, Marcos Lemus, and Luke Balaoro for crossbrowser / crossOS testing and for many useful ideas and advice throughout development.