An interactive visualization of strange attractors built with p5.js. Explore eleven classical and contemporary dynamical systems in real time, manipulating trajectories, adjusting parameters, and shifting between projection planes to understand how deterministic systems can generate unbounded complexity from simple rules.
This is a browser-based tool for exploring the visual and mathematical properties of chaotic systems. Rather than static images, you're orbiting live particle streams that calculate their trajectories moment by moment using fourth-order Runge-Kutta numerical integration. You can adjust simulation speed, particle count, trail density, and rendering mode while the system adapts quality automatically to maintain smooth performance.
The project demonstrates how determinism and chaos coexist. Each attractor follows precise mathematical rules, yet particles with microscopically different starting points diverge dramatically. The visual result is a strange attractor: a bounded region of space that the system never leaves, yet never exactly repeats. These structures emerge from three simple equations and are as deterministic as gravity, yet as visually complex as natural phenomena.
The explorer includes eleven attractors selected for visual interest and mathematical significance:
Dadras - A five-parameter system with folded, wing-like geometry and extreme sensitivity to initial conditions. The shape suggests both organic growth and mechanical instability.
Lorenz - The seminal butterfly attractor from atmospheric convection equations. This is where the term "butterfly effect" originated, capturing the idea that minute changes ripple outward.
Rossler - A ribbon-like structure with elegant spiraling motion. Despite three variables, the system shows sophisticated behavior due to its careful parameter balance.
Chen - Similar to Lorenz but with sharper, more angular folding patterns. The trajectories cut more decisively through phase space.
Aizawa - A richly detailed system producing shell-like swirls and intricate layered loops. The mathematics involves higher-order terms that create fine structure.
Thomas - Built from cyclic sine coupling between all three axes. Its symmetry makes it visually elegant and mathematically tractable.
Halvorsen - A tri-symmetric system featuring broad curved sheets and pronounced rotational motion. The same parameter appears in each equation, creating a unified structure.
Chua - An electronics circuit-inspired system with a distinctive double-scroll structure. It transitions dramatically between lobes, making it ideal for studying bifurcation.
Dequan Li - A highly energetic system with stretched lobes and strong nonlinear cross-coupling. The mathematics involves multiple multiplicative terms that amplify small variations.
Rabinovich-Fabrikant - Complex and unstable, known for dramatic bursts and sculptural loops. Some parameter ranges produce brief windows of order before chaos reasserts itself.
De Jong - A discrete chaotic map rather than a continuous system. Instead of flowing trajectories, particles jump according to the iterate function, creating dense point clouds.
For continuous attractors, the explorer uses fourth-order Runge-Kutta (RK4) integration. This method evaluates the system's derivatives at four points within each timestep and blends them into a smooth approximation of the true trajectory. RK4 balances accuracy against computational cost, crucial for running thousands of particles in a browser.
The timestep (dt) varies by system. Faster systems like Dequan Li use smaller steps for accuracy. Slower systems like Rossler use larger steps without sacrificing quality. You can adjust the speed slider to experiment with different integration rates.
Rather than drawing the attractor's mathematical surface, the explorer launches thousands of particles into the system. Each particle follows its own trajectory according to the equations, starting from a randomized position within the system's expected range. Their cumulative trails form the attractor's shape.
This particle approach has several advantages. It makes the underlying dynamics visible (you can watch particles spiraling, bifurcating, getting attracted inward). It scales well on a GPU-accelerated canvas. It allows you to adjust particle count in real time to trade visual density for performance.
The attractors live in three-dimensional space (x, y, z coordinates). The visualizer lets you orbit around the structure by dragging, zoom with your scroll wheel, and switch between three 2D projections: XY, XZ, and YZ planes.
Each projection reveals different aspects of the structure. The Lorenz attractor, for example, shows its characteristic butterfly shape in the XY plane but looks like a figure-eight when viewed from certain angles. Switching projections deepens your intuition for how the system actually moves through 3D space.
The system measures your frame rate continuously. If performance dips below 75% of the target (60 fps), the particle count adapts downward slightly. When performance is smooth, it gradually increases particle count back toward your slider setting. This keeps the visualization fluid across different hardware without requiring manual quality tweaking.
You can extend this project by adding new attractors or modifying existing ones. The attractors are defined in the ATTRACTORS object in app.js.
To add a new continuous system, you need:
- A
nameanddescriptionfor the UI - A
derivativefunction that takes parameters and coordinates (x, y, z) and returns derivatives (dx, dy, dz) - Parameters object with the system's coefficients
- A
dt(timestep),scale(for scaling coordinates to screen),hueShift(for color cycling), andlineModeandrandomRangesettings
For example, adding a modified Lorenz system with different parameters would change how spread out the wings are, how quickly particles circulate, and the balance between the two lobes. You could even add a fourth variable by extending the coordinate system and projection logic.
Alternatively, you could implement a discrete system (like De Jong) by providing an iterate function instead of derivative. Discrete systems jump between states rather than flowing continuously, which produces different visual effects and can be computationally faster.
Clone the repository and open index.html in a modern browser. No build process or dependencies are needed beyond p5.js, which is loaded from a CDN.
git clone https://github.com/ionas/Dadras-Attractor.git
cd Dadras-Attractor
# Open index.html in your browserThe visualizer uses p5.js v1.9.4 via CDN for canvas rendering and WebGL acceleration. Modern Chrome, Firefox, Safari, and Edge all handle it smoothly. Very old browsers or devices with minimal GPU resources might struggle with 12,000 particles, but the adaptive quality system helps.
- Drag to orbit around the attractor
- Scroll or pinch to zoom
- Use the control panel to switch systems, adjust particle count, modify trail length and simulation speed, and toggle rendering modes
- Toggle between line-based and point-based rendering to see different visual interpretations
- Enable depth-based stroke weight so particles further back appear thinner, enhancing the 3D illusion
- Auto-rotate mode spins the view gently for presentation or meditation
- The random attractor button selects a system at random, useful for discovery
Built with p5.js for canvas manipulation and basic WebGL. The codebase is intentionally straightforward: a single HTML file, a CSS stylesheet, and a JavaScript application file. No build tools, no frameworks beyond p5.js itself.
The RK4 integration and particle system run synchronously on the main thread. For this scale (up to 12,000 particles), the overhead is manageable. A WebWorker implementation could push this higher, but the current approach keeps the architecture simple and the code readable.
Color assignment uses HSB (hue, saturation, brightness) mode in p5.js. Particles receive random hue values within the system's defined range, then cycle slightly during rendering to create visual flow without overwhelming the eye.
Strange attractors sit at the intersection of mathematics, physics, and visual culture. They appear in weather systems, population dynamics, neural activity, and economic models. Understanding how simple equations generate complex patterns has profound implications for how we think about prediction, causality, and emergence in natural systems.
From a creative perspective, attractors offer a way to generate forms that feel organic without explicit biological modeling. They're deterministic art: beautiful but not random, chaotic but not arbitrary.
This explorer aims to make that intersection tangible. You're not reading equations or looking at textbook diagrams. You're watching particles flow through space in real time, developing intuition for how these systems actually behave.
MIT. See LICENSE file.