All the points drawn together show the history of the particle's trajectory. The Gumowski-Mira functions come from a paper by two physicists who were working at CERN in the 1980s, studying the stochastic motion of subatomic particles in the particle accelerator, and looking for better ways to calculate particle trajectories. The Gumowski-Mira functions encapsulate the varying forces accelerating the particle. A slight variation in the initial conditions can result in drastically different trajectories. This sensitivity is deterministic chaos. I've added an extra scaling parameter that shrinks or expands the area between each successive iteration to create spiral effects.

The generated patterns contain different closed-curve shapes, orbits, attractors, and fractal structures.

Chaos theory describes the behavior of certain dynamical systems – that is, systems whose state evolves with time – that may exhibit dynamics that are highly sensitive to initial conditions (popularly referred to as the butterfly effect). As a result of this sensitivity, which manifests itself as an exponential growth of perturbations in the initial conditions, the behavior of chaotic systems appears random. This happens even though these systems are deterministic, meaning that their future dynamics are fully defined by their initial conditions, with no random elements involved. This behavior is known as deterministic chaos, or simply chaos. (Wikipedia)

JavaScript detailz

Other than jQuery and a wiggle effect library (gotta get dat wiggle), I've written all the JavaScript from scratch. The animations are created by manipulating pixels in a canvas element, and updating the canvas image data periodically with setInterval().

See the code on Github

A constructor function called PixelGraph() handles the canvas stuff. It fits a canvas element in a div, transforms (x,y) data to fit into the canvas' dimensions, and draws each pixel in varying colors and sizes.

Another constructor function called IterativeMap() takes 2 arguments: A mapping function and initial parameters. It iteratively calculates N points and stores the dataset. There's a parameters object with sets of nice starting parameters that I've picked for Xtreme KOOooLness.

A wrapping constructor function called GraphAnimation() has persistent states, manages PixelGraph() and IterativeMap(), and controls the animation playback. There's also a bunch of jQuery event-driven controller logic that's been added to the buttons so you can pause, zoom, adjust speed, and switch modes. You can easily change the number of graph animations displayed (... cuz constructor functions). You can view 100 graphs animations at once!!!1! 😜

— Grayson