3. Strange attractors

Several points are created evaluating a strange attractor equation.

From those points, a line geometry is created, a MeshLine geometry is created, and particles (billboarded triangles) are spawned along the path. MeshLine width and particles sizes and spread is based on distance along the path.

Finally everything is rendered to a framebuffer (3 draw calls, one for each geometry), then some post-processing is applied. First, a slight RGB shift. Then, a tilt shift shader performing a directional blur pass on the vertical axis, based on vertical distance to the center. Finally, a final pass performs FXAA, add vignette, noise and performs gamma correction.

The fade in and fade out animation is done with a framerate-independent easing function that modified the draw ranges of each mesh.

Credits

Inspired by this image, this image and all this thread
Attractor equations and initial conditions values from chaoscope, softology and Wikipedia's list of chaotic maps.
I can't remember where I got the separable blur and FXAA shader code from 😕

Coded using WebGL with three.js, Maf.js and THREE.MeshLine