31:T7f0,md` Strange attractors are fascinating objects, but precise definitions can be fairly non-intuitive. I vaguely sensed that while an *attractor* is a dynamical system that gravitates toward some state, a *strange attractor* is a chaotic system that's hard to predict and never quite settles down. *Chaotic* just means that points which start close together diverge in time—that is, the system has a positive *[Lyapunov exponent](https://en.wikipedia.org/wiki/Lyapunov_exponent)*. I was surprised to learn then when I started tracking down references and reading some survey papers that the fundamental characteristic of a strange attractor is actually its *fractal* behavior, not its chaotic behavior. In fact the fractal nature is precisely why they're called "strange". Some strange attractors—appropriately called *strange non-chaotic attractors* (SNA)—are in fact fractal but not chaotic! The [Rabinovitch-Fabrikant](https://www.mdpi.com/2227-7390/9/6/652) system below purportedly shows this behavior, though only in a narrow parameter range and not in a manner obvious to the naked eye. If I understand correctly—which I really may not—if you tracked nearby points and plotted the intersection as they pass through the same plane over and over, you'd see fractal structure but find that points which start nearby are not actually diverging! This notebook exists so that you can visualize and moidfy the attractors. If you're interested though, the best paper I found—precise, but not too heavy on the mathematics—was Robert Taylor's [Attractors: Nonstrange to Chaotic](https://evoq-eval.siam.org/Portals/0/Publications/SIURO/Vol4/Attractors_Nonstrange_to_Chaotic.pdf?ver=2018-04-06-103239-977). I've tried to provide references, though many have been so wholeheartedly adopted by the computer art community that they can be hard to track down! As for the graphics, at the top of my list is to draw better axes with values labeled, but I don't currently have the time to reinvent that particular wheel. Enjoy!`32:T84e5,viewof selectedAttractor = { const initiallySelectedAttractor = 'Bouali 2'; function createTransform({ center = [0, 0, 0], size = [1, 1, 1], rotation = [0, 0, 0] } = {}) { const m = mat4create(); mat4translate(m, m, center); mat4scale(m, m, size); mat4rotateX(m, m, rotation[0]); mat4rotateY(m, m, rotation[1]); mat4rotateZ(m, m, rotation[2]); mat4invert(m, m); mat4multiply(m, mat4fromTranslation([], [0, 0.5, 0]), m); return m; } const attractors = { 'Akgul-Pehlivan': { deriv: ` a * y - x + z * y, -b * x * z - c * x + y * z + d, e - f * x * y - x * x`, parameters: { a: 2.8, b: 0.2, c: 1.4, d: 1, e: 10, f: 2 }, dt: 0.01, initializationScale: 5, transform: createTransform({ center: [0, 0, -5], size: [15, 15, 15], rotation: [Math.PI / 2, 0, 0] }), references: [ { authors: ['A. Akgul', 'I. Pehlivan'], title: 'A new three-dimensional chaotic system without equilibrium points, its dynamical analyses, and electronic circuit applications', url: 'https://www.researchgate.net/publication/303284335_A_new_three-dimensional_chaotic_system_its_dynamical_analysis_and_electronic_circuit_applications', deets: 'Tehnicki Vjesnik 23(1) (2016), pages 209-214.' } ] }, Aizawa: { deriv: ` (z - b) * x - d * y, d * x + (z - b) * y, c + a * z - (z * z * z / 3.0) - (x * x + y * y) * (1.0 + e * z) + f * z * (x * x * x)`, parameters: { a: 0.95, b: 0.7, c: 0.6, d: 3.5, e: 0.25, f: 0.1 }, dt: 0.02, initializationScale: 0.1, transform: createTransform({ center: [0, 0, 0.8], size: [1.5, 1.5, 1.5], rotation: [Math.PI / 2, 0, 0] }), tex: [ '(z - a) x - d y', 'd x + (z - b) y', 'c + a z - \\frac{1}{3}z^3 - (x^2 + y^2) (1 + e z) + f z x^3' ], references: [ { authors: ['W. Langford'], url: 'https://www.researchgate.net/publication/238282172_Numerical_Studies_of_Torus_Bifurcations', title: 'Numerical Studies of Torus Bifurcations' } ] }, 'Anishchenko-Astakhov': { deriv: ` mu * x + y - x * z, -x, -eta * z + eta * (x > 0.0 ? 1.0 : 0.0) * x * x`, dt: 0.05, initializationScale: 5, initializationOrigin: [0, 0, 5], transform: createTransform({ center: [0, 2, 0], size: [5, 5, 5], rotation: [0, -Math.PI / 2, 0] }), parameters: { mu: 1.2, eta: 0.5 }, references: [ { title: 'The Anishchenko–Astakhov Oscillator of Chaotic Self-Sustained Oscillations', authors: ['V. S. Anishchenko', 'T. E. Vadivasova', 'G. I. Strelkova'], url: 'https://link.springer.com/chapter/10.1007/978-3-319-06871-8_11', deets: 'Deterministic Nonlinear Systems pages 175-201.' } ] }, Arneodo: { deriv: ` y, z, -a * x - b * y - z + c * x * x * x`, dt: 0.02, initializationScale: 2, transform: createTransform({ center: [0, 0, 0], size: [4, 10, 10], rotation: [Math.PI / 2, 0, Math.PI / 2] }), tex: ['y', 'z', '-a x - b y - z + c x^3'], parameters: { a: -5.5, b: 3.5, c: -1.0 }, references: [ { title: 'Strange attractors in volterra equations for species in competition', authors: ['A. Arneodo', 'P. Coullet', 'J. Peyraud', 'C. Tresser'], url: 'https://link.springer.com/article/10.1007/BF01832841', deets: 'Journal of Mathematical Biology volume 14, pages 153–157 (1982).' } ] }, Bouali: { deriv: ` x * (4.0 - y) + a * z, -y * (1.0 - x * x), -x * (b - z) - c * z`, parameters: { a: 0.3, b: 1.5, c: 0.05 }, dt: 0.02, initializationOrigin: [1, 1, 0], transform: createTransform({ center: [0, 4, -4], size: [6, 6, 6], rotation: [-Math.PI * 0.5, Math.PI * 0.5, 0] }), tex: ['x (4 - y) + 0.3 z', '-y (1 - x^2)', '-x (1.5 - z) - 0.05 z'], references: [ { url: 'https://arxiv.org/abs/1311.6128', title: 'A 3D Strange Attractor with a Distinctive Silhouette. The Butterfly Effect Revisited', authors: ['S. Bouali'], deets: '(2013).' } ] }, 'Bouali 2': { deriv: ` alpha * x * (1.0 - y) - beta * z, -gamma * y * (1.0 - x * x), mu * x`, parameters: { alpha: 3.0, beta: 2.2, gamma: 1.0, mu: 1.51 }, dt: 0.02, initializationOrigin: [1, 1, 0], transform: createTransform({ center: [0, 2, 0], size: [2.5, 2.5, 2.5], rotation: [0, -Math.PI * 0.5, 0] }), tex: ['\\alpha x (1 - y) - \\beta z', '-y (1 - x^2)', '\\mu x'], references: [ { url: 'https://arxiv.org/abs/1311.6128', title: 'A 3D Strange Attractor with a Distinctive Silhouette. The Butterfly Effect Revisited', authors: ['S. Bouali'], deets: '(2013).' } ] }, 'Burke-Shaw': { deriv: ` -s * (x + y), -y - s * x * z, s * x * y + v`, parameters: { s: 10, v: 4.272 }, transform: createTransform({ center: [0, 0, 0], size: [4, 4, 4], rotation: [-Math.PI / 2, 0, 0] }), dt: 0.005, tex: ['-s (x + y)', '-y - s x z', 's x y + v'], references: [ { url: 'http://paulbourke.net/fractals/burkeshaw/', title: 'Burke-Shaw attractor', authors: ['Paul Bourke'], deets: '(2010).' }, { title: 'The Burke & Shaw System', authors: ['Christophe Letellier'], url: 'http://www.atomosyd.net/spip.php?article33', deets: '(2008).' } ] }, 'Chen-Lee': { dt: 0.005, deriv: ` alpha * x - y * z, beta * y + x * z, gamma * z + x * y / 3.0`, parameters: { alpha: 5, beta: -10, gamma: -0.38 }, transform: createTransform({ center: [0, 0, 0], size: [25, 25, 25], rotation: [-Math.PI / 2, 0, 0] }), initializationScale: 25, tex: [ '\\alpha x - y z', '\\beta y + x z', '\\gamma z + \\frac{1}{3} x y' ], references: [ { title: 'Alternative implementation of the chaotic Chen–Lee system', url: 'https://www.sciencedirect.com/science/article/abs/pii/S0960077908003524', authors: [ 'Long-Jye Sheu', 'Lap-Mou Tam', 'Hsien-Keng Chen', 'Seng-Kin Lao' ], deets: 'Chaos, Solitons & Fractals, Volume 41, Issue 4 (2009), Pages 1923-1929.' }, { title: 'The Chen-Lee Attractor', url: 'https://www.vorillaz.com/chen-lee-attractor/' } ] }, 'Chen-Celikovsky': { dt: 0.005, deriv: ` alpha * (y - x), -x * z + gamma * y, x * y - beta * z`, parameters: { alpha: 36.0, beta: 3.0, gamma: 20.0 }, transform: createTransform({ center: [0, 0, 20], size: [25, 25, 25], rotation: [Math.PI / 2, 0, 0] }), initializationScale: 1, initializationOrigin: [0, 0, 20], references: [ 'https://github.com/simonfuhrmann/attractors/blob/master/src/attractor_functions.cc' ] }, Chen: { dt: 0.003, deriv: ` a * (y - x), (c - a) * x - x * z + c * y, x * y - b * z`, parameters: { a: 40, b: 3, c: 28 }, initializationScale: 3, initializationOrigin: [0, 0, 15], tex: ['40 (y - x)', '-12 x - x z + 28 y', 'x y - 3 z'], transform: createTransform({ center: [0, 0, 20], size: [20, 20, 20], rotation: [Math.PI / 2, 0, 0] }), tex: ['a (y - x)', '(c - a) x - x z + c y', 'x y - b z'], references: [ { title: 'Wikipedia: Multiscroll Attractor', url: 'https://en.wikipedia.org/wiki/Multiscroll_attractor#Lu_Chen_attractor' } ] }, Coullet: { deriv: ` y, z, 0.8 * x - 1.1 * y - 0.45 * z - x * x * x`, dt: 0.05, initializationScale: 0.2, transform: createTransform({ center: [0, 0, 0], size: [1.5, 1.5, 1.5], rotation: [0, 0, 0] }), tex: ['y', 'z', '0.8 x - 1.1 y - 0.45 z - x^3'], references: [ { authors: ['A. Arneodo', 'P. Coullet', 'C. Tresser'], title: 'Possible new strange attractors with spiral structure', deets: 'Comm. Math. Phys. 79(4): 573-579 (1981).', url: 'https://projecteuclid.org/journals/communications-in-mathematical-physics/volume-79/issue-4/Possible-new-strange-attractors-with-spiral-structure/cmp/1103909142.full' } ] }, Dadras: { deriv: ` y - a * x + b * y * z, c * y - x * z + z, d * x * y - e * z`, parameters: { a: 3, b: 2.7, c: 1.7, d: 2.0, e: 9.0 }, dt: 0.01, initializationScale: 2, transform: createTransform({ center: [0, 0, 0], size: [15, 15, 15], rotation: [0, 0, 0] }), tex: ['y - a x + b y z', 'c y - x z + z', 'd x y - e z'], references: [ { title: 'The chaotic Dadras-Momeni system: Control and hyperchaotification', url: 'https://www.researchgate.net/publication/274511798_The_chaotic_Dadras-Momeni_system_Control_and_hyperchaotification', authors: ['H. Saberi-Nik', 'R. A. Van Gorder', 'G. Gambino'], deets: 'IMA Journal of Mathematical Control and Information (2015).' } ] }, Duffing: { deriv: ` y, gamma * cos(omega * t) - delta * y - alpha * x - beta * x * x * x, -z`, parameters: { alpha: -1, beta: 1, delta: 0.3, gamma: 0.37, omega: 1.2 }, dt: 0.05, initializationScale: 2, transform: createTransform({ center: [0, -0.1, 0], size: [1, 1, 1], rotation: [0, 0, 0] }) }, Finance: { deriv: ` z + (y - a) * x, 1.0 - b * y - x * x, -x - c * z`, parameters: { a: 0.00001, b: 0.1, c: 1 }, dt: 0.04, initializationScale: 0.5, initializationOrigin: [0, 0, 0], transform: createTransform({ center: [0, 0, 0], size: [3.5, 3.5, 3.5], rotation: [Math.PI, Math.PI / 2, 0] }), tex: ['z + (y - a) x', '1 - b y - x^2', '-x - c z'], references: [ { title: 'A New Finance Chaotic Attractor', authors: ['G. Cai', 'J. Huang'], url: 'http://internonlinearscience.org/upload/papers/20110308103218810.pdf', deets: 'International Journal of Nonlinear Science, Vol. 3 (2007) No. 3, pp. 213-220.' } ] }, 'Four-wing': { deriv: ` a * x + y * z, b * x + d * y - x * z, -z - x * y`, parameters: { a: 0.2, b: -0.01, d: -0.4 }, dt: 0.05, initializationScale: 2, transform: createTransform({ center: [0, 0, 0], size: [2.5, 2.5, 2.5], rotation: [0, Math.PI / 2, 0] }), tex: ['0.2 x + y z', '-0.01 x - 0.4 y - x z', '-z - x y'], references: [ { title: 'A 3-D four-wing attractor and its analysis', url: 'https://www.scielo.br/j/bjp/a/PZsxkWyBdyDpS3sHTQVwKZq/?lang=en', authors: [ 'Z. Wang', 'Y. Sun', 'B. J. van Wyk', 'G. Qi', 'M. A. van Wyk' ], deets: 'Braz. J. Phys. 39 (3), Sept 2009.' } ] }, 'Genesio-Tesi': { deriv: ` y, z, -a * z - b * y - x * (1.0 + x)`, parameters: { a: 0.446, b: 1.1 }, dt: 0.05, initializationScale: 0.2, transform: createTransform({ center: [-0.2, 0, 0], size: [1, 1, 1], rotation: [-Math.PI / 2, 0, Math.PI / 2] }), tex: ['y', 'z', '-az - by - x(1 + x)'], references: [ { url: 'http://www.atomosyd.net/spip.php?article153', title: 'The Genesio-Tesi System', authors: ['Christophe Letellier'] }, { url: 'https://www.researchgate.net/publication/303369826_Design_analysis_of_the_Genesio-Tesi_chaotic_system_and_its_electronic_experimental_implementation', title: 'Design, analysis of the Genesio-Tesi chaotic system and its electronic experimental implementation', authors: [ 'A. Sambas', 'S. Vaidyanathan', 'M. Mamat', 'W. S. Mada Sanjaya' ], deets: 'International Journal of Circuit Theory and Applications, 9(1), 2016, pp. 141-149.' } ] }, Hadley: { deriv: ` a * z * y + z * x - x, z * y - a * z * x - y + 1.0, b * (c - z) - (x * x + y * y)`, parameters: { a: 4, b: 0.2, c: 8 }, dt: 0.01, transform: createTransform({ center: [0, 0, 1], size: [2.5, 2.5, 2.5], rotation: [Math.PI / 2, 0, 0] }), initializationScale: 1, tex: [ 'a z y + z x - x', 'z y - a z x - y + 1', 'b (c - z) - (x^2 + y^2)' ], references: [ { title: 'Wikipedia: Hadley Cell', url: 'https://en.wikipedia.org/wiki/Hadley_cell' } ] }, Halvorsen: { deriv: ` -sigma * x - 4.0 * (y + z) - y * y, -sigma * y - 4.0 * (z + x) - z * z, -sigma * z - 4.0 * (x + y) - x * x`, parameters: { sigma: 1.3 }, dt: 0.005, initializationScale: 2, initializationOrigin: [-2, -2, -2], transform: createTransform({ center: [-3, -3, -3], size: [12, 12, 12], rotation: [0, 0, 0] }), tex: [ '-\\sigma x - 4 (y + z) - y^2', '-\\sigma y - 4 (z + x) - z^2', '-\\sigma z - 4 (x + y) - x^2' ], references: [ { url: 'https://arxiv.org/abs/2010.07103', title: 'Breaking Symmetries of the Reservoir Equations in Echo State Networks', authors: ['J. Herteux', 'C. Räth'], deets: 'Chaos 30, 123142 (2020).' } ] }, 'Liu-Chen': { deriv: ` 0.4 * x - y * z, -12.0 * y + x * z, -5.0 * z + x * y`, transform: createTransform({ center: [0, 0, 0], size: [12, 12, 12], rotation: [0, 0, 0] }), dt: 0.005, initializationScale: 20, tex: ['0.4 x - y z', '-12 y + x z', '-5 z + x y'] }, Lorenz: { dt: 0.005, deriv: ` sigma * (y - x), x * (rho - z) - y, x * y - beta * z`, parameters: { sigma: 10, rho: 28, beta: 8 / 3 }, initializationOrigin: [0, 0, 28], initializationScale: 20, tex: ['\\sigma (y - x)', 'x(\\rho - z) - y', 'x y - \\beta z'], transform: createTransform({ center: [0, 0, 28], size: [28, 28, 28], rotation: [Math.PI / 2, 0, 0] }), url: 'http://www.atomosyd.net/spip.php?article13' }, 'Lorenz Mod 1': { deriv: ` -alpha * x + y * y - z * z + alpha * beta, x * (y - 4.0 * z) + gamma, z + x * (4.0 * y + z)`, tex: [ '-\\alpha x + y^2 - z^2 + \\alpha \\beta', 'x (y - 4 z) + \\gamma', 'z + x (4 y + z)' ], transform: createTransform({ center: [0, 0, 0], size: [40, 40, 40], rotation: [0, 0, 0] }), parameters: { alpha: 0.1, beta: 14.0, gamma: 0.08 }, dt: 0.001, initializationScale: 20 }, 'Lorenz Mod 2': { deriv: ` -alpha * x + y * y - z * z + alpha * beta, x * (y - 5.0 * z) + gamma, -z + x * (5.0 * y + z)`, parameters: { alpha: 0.9, beta: 9.9, gamma: 1 }, dt: 0.003, initializationScale: 10, tex: [ '-\\alpha x + y^2 - z^2 + \\alpha \\beta', 'x (y - 5 z) + \\gamma', '-z + x (5 y + z)' ], transform: createTransform({ center: [0, 0, 0], size: [15, 15, 15], rotation: [0, 0, 0] }) }, 'Lü-Chen': { deriv: ` -4.0 * x + z * y, -10.0 * y + z * x, (10.0 * 4.0 * z) / 14.0 - y * x + 18.1`, dt: 0.005, transform: createTransform({ center: [0, 0, 5], size: [20, 20, 20], rotation: [-Math.PI / 2, Math.PI / 2, 0] }), tex: ['-4 x + z y', '-10 y + z x', '\\frac{20}{7} z - y x + 18.1'] }, 'Newton-Leipnik': { deriv: ` 0.4 * x + y + 10.0 * y * z, -x - 0.4 * y + 5.0 * x * z, 0.175 * z - 5.0 * x * y`, dt: 0.0001, initializationScale: 100, transform: createTransform({ center: [0, 0, 0], size: [80, 80, 80], rotation: [0, 0, 0] }), tex: ['0.4 x + y + 10 y z', '-x - 0.4 y + 5 x z', '0.175 z - 5 x y'], references: [ { title: 'Double strange attractors in rigid body motion with linear feedback control', authors: ['R. B. Leipnik', 'T. A. Newton'], deets: 'Phys Lett A, Vol. 86 (1981), pp. 63–7.', url: 'https://www.semanticscholar.org/paper/Double-strange-attractors-in-rigid-body-motion-with-Leipnik-Newton/a24b76a848c5ba87901d9d03945c180dd2c88939' } ] }, 'Nosé-Hoover': { deriv: ` y, -x + y * z, 1.5 - y * y`, dt: 0.02, transform: createTransform({ size: [5, 5, 5], center: [0, 0, 0], rotation: [Math.PI / 2, 0, 0] }), tex: ['y', '-x + y z', '1.5 - y^2'], references: [ { title: '1986 The Nosé-Hoover System (Sprott A System)', authors: ['Christophe Letellier'], url: 'http://www.atomosyd.net/spip.php?article193' } ] }, 'Qi-Chen': { deriv: ` alpha * (y - x) + y * z, beta * x + y - x * z, x * y - gamma * z`, parameters: { alpha: 38, beta: 80, gamma: 8 / 3 }, dt: 0.0015, initializationOrigin: [0, 0, 75], transform: createTransform({ size: [50, 50, 50], center: [0, 0, 80], rotation: [Math.PI / 2, 0, 0] }), tex: ['38 (y - x) + y z', '80 x + y - x z', 'x y - \\frac{8}{3}z'] }, 'Rabinovich-Fabrikant': { deriv: ` y * (z - 1.0 + x * x) + a * x, x * (3.0 * z + 1.0 - x * x) + a * y, -2.0 * z * (b + x * y)`, parameters: { a: 0.1, b: 0.2875 }, dt: 0.03, initializationScale: 1, initializationOrigin: [0.1, 0.1, 1.1], transform: createTransform({ center: [0, 0, 0.7], size: [2, 2, 1], rotation: [Math.PI / 2, 0, 0] }), references: [ { title: 'Hidden Strange Nonchaotic Attractors', authors: ['M. F. Danca', 'N. Kuznetsov'], url: 'https://www.mdpi.com/2227-7390/9/6/652', deets: 'Mathematics 2021, 9(6), 652.' } ] }, 'Rayleigh-Benard': { deriv: ` -9.0 * x + 9.0 * y, 12.0 * x - y - x * z, x * y - 0.5 * z`, dt: 0.02, initializationScale: 2, initializationOrigin: [0, 0, 10], transform: createTransform({ size: [9, 9, 9], center: [0, 0, 10], rotation: [Math.PI / 2, 0, 0] }), tex: ['-9 x + 9 y', '12 x - y - x z', 'x y - 0.5 z'] }, Rössler: { dt: 0.02, deriv: ` -z - y, x + 0.1 * y, 0.1 + z * (x - 14.0)`, tex: ['-z - y', 'x + 0.1 y', '0.1 + z (x - 14)'], transform: createTransform({ size: [20, 20, 25], center: [0, 0, 15], rotation: [Math.PI / 2, 0, 0] }), initializationScale: 14, initializationOrigin: [0, 0, 0.1] }, Rucklidge: { deriv: ` -2.0 * x + alpha * y - y * z, x, -z + y * y`, dt: 0.02, initializationScale: 5, transform: createTransform({ size: [9, 9, 9], center: [0, 0, 8], rotation: [Math.PI / 2, 0, 0] }), parameters: { alpha: 6.7 }, tex: ['-2 x + \\alpha y - y z', 'x', '-z + y^2'] }, Sakarya: { deriv: ` -x + y + y * z, -x - y + 0.4 * x * z, z - 0.3 * x * y`, dt: 0.003, initializationScale: 50, transform: createTransform({ size: [40, 40, 40], center: [0, 0, 0], rotation: [Math.PI / 2, 0, 0] }), tex: ['-x + y + y z', '-x - y + 0.4 x z', 'z - 0.3 x y'] }, Thomas: { deriv: ` -alpha * x + sin(y), -alpha * y + sin(z), -alpha * z + sin(x)`, parameters: { alpha: 0.19 }, dt: 0.1, transform: createTransform({ size: [4.5, 4.5, 4.5], center: [0, 0, 0], rotation: [Math.PI / 2, 0, 0] }), tex: [ '-\\alpha x + \\sin(y)', '-\\alpha y + \\sin(z)', '-\\alpha z + \\sin(x)' ], references: [ { title: 'Deterministic Chaos Seen in Terms of Feedback Circuit: Analysis, Synthesis, \'Labyrinth Chaos\'', authors: ['R. Thomas'], url: 'https://www.worldscientific.com/doi/abs/10.1142/S0218127499001383', deets: 'International Journal of Bifurcation and Chaos, Vol. 09, No. 10, pp. 1889-1905 (1999).' }, { title: 'Wikipedia: Thomas\' cyclically symmetric attractor', url: 'https://en.wikipedia.org/wiki/Thomas%27_cyclically_symmetric_attractor' } ] }, TSUCS1: { deriv: ` 40.0 * (y - x) + 0.5 * x * z, 20.0 * y - x * z, 0.833 * z + x * y - 0.65 * x * x`, transform: createTransform({ size: [60, 60, 60], center: [0, 0, 40], rotation: [Math.PI / 2, 0, 0] }), initializationScale: 20, dt: 0.003, tex: ['40 (y - x) + 0.5 x z', '20 y - x z', '0.833 z + x y - 0.65 x^2'], references: [ { title: 'A three-scroll chaotic attractor', authors: ['D. Li'], url: 'https://www.semanticscholar.org/paper/A-three-scroll-chaotic-attractor-Li/dbeb673b0a2542d75e26a18a095672f917176398', deets: 'Physics Letters A, Volume 372, Issue 4, 21 January 2008, Pages 387-393.' } ] }, TSUCS2: { deriv: ` 40.0 * (y - x) + 0.16 * x * z, 55.0 * x - x * z + 20.0 * y, 1.833 * z + x * y - 0.65 * x * x`, dt: 0.0015, initializationScale: 80, transform: createTransform({ size: [150, 150, 150], center: [0, 0, 100], rotation: [Math.PI / 2, 0, 0] }), tex: [ '40 (y - x) + 0.16 x z', '55 x - x z + 20 y', '1.833 z + x y - 0.65 x^2' ], references: [ { title: 'A three-scroll chaotic attractor', authors: ['D. Li'], url: 'https://www.semanticscholar.org/paper/A-three-scroll-chaotic-attractor-Li/dbeb673b0a2542d75e26a18a095672f917176398', deets: 'Physics Letters A, Volume 372, Issue 4, 21 January 2008, Pages 387-393.' } ] }, 'Wang-Sun': { deriv: ` x * 0.2 + y * z, -0.01 * x + -0.4 * y - x * z, -z - x * y`, transform: createTransform({ size: [2, 2, 2], center: [0, 0, 0], rotation: [Math.PI / 2, 0, 0] }), initializationScale: 2, dt: 0.04, tex: ['0.2 x + y z', '-0.01 x + -0.4 y - x z', '-z - x y'] }, 'Yu-Wang': { deriv: ` 10.0 * (y - x), 40.0 * x - 2.0 * x * z, exp(x * y) - 2.5 * z`, dt: 0.003, initializationOrigin: [0, 0, 30], initializationScale: 2, transform: createTransform({ size: [5, 5, 30], center: [0, 0, 30], rotation: [Math.PI / 2, 0, 0] }), tex: ['10 (y - x)', '40 x - 2 x z', 'e^{x y} - 2.5 z'] }, 'Genus-5 Multispiral': { deriv: `alpha * (y - x - ( abs(x) < s0 ? m0 * x + sign(x) * xi0 : abs(x) < s1 ? m1 * x + sign(x) * (m0 - m1) * s0 : m2 * x + sign(x) * ((m1 - m2) * s1 + (m0 - m1) * s0) )), x - y + z, -beta * y - gamma * z`, parameters: { alpha: 14.6, beta: 12.0, gamma: 0.9, s0: 1, s1: 3, m0: -5 / 7, m1: -8 / 7, m2: -0.7, xi0: 0 }, dt: 0.02, tex: [`-`, `-`, `-`], transform: createTransform({ size: [5.5, 5.5, 5.5], center: [0, 0, 0], rotation: [Math.PI / 2, 0, 0] }), initializationOrigin: [0, 0, 0], initializationScale: 1, references: [ { authors: ['Christophe Letellier'], url: 'http://www.atomosyd.net/spip.php?article137', title: '1999 A Genus-5 Multispiral Attractor' }, { authors: ['M. A. Aziz-Alaoui'], title: 'Differential equations with multispiral attractors', deets: 'International Journal of Bifurcation & Chaos, 9, 1009-1039, 1999.', url: 'https://www.worldscientific.com/doi/10.1142/S0218127499000729' } ] }, /*'Rössler 1984 Piecewise': { deriv: substitute( `-y - z, x, a * (1.0 - abs(y)) - b * z `, { a: 1.0, b: 0.0 } ), dt: 0.04, tex: [`-`, `-`, `-`], transform: mat4translate([], mat4fromScaling([], [1, 1, 1]), [0, 0, 0]), initializationOrigin: [0.1417, 0, 0], initializationScale: 5 },*/ 'A Semi-Conductor Laser': { deriv: `0.5 * x * z + (w - alpha * z * 0.5) * y + K, -(w - alpha * z * 0.5) * x + y * z * 0.5, -2.0 * Gamma * z - (1.0 + 2.0 * B * z) * (x * x + y * y - 1.0)`, parameters: { K: 0.3, w: 0, alpha: 8.0, B: 0.015, Gamma: 0.035 }, dt: 0.012, tex: [`-`, `-`, `-`], transform: createTransform({ size: [3, 3, 3], center: [0, 0, 0], rotation: [Math.PI / 2, 0, 0] }), initializationOrigin: [0, 0, 0], initializationScale: 1, references: [ { title: '1999 A Semi-Conductor Laser Driven by a Light Beam', authors: ['Christophe Letellier'], url: 'http://www.atomosyd.net/spip.php?article129' }, { url: 'https://research-information.bris.ac.uk/en/publications/a-unifying-view-of-bifurcations-in-a-semiconductor-laser-subject-', authors: ['S.Wieczorek', 'B. Krauskopf', 'D. Lenstra'], title: 'A unifying view of bifurcations in a semiconductor laser subject to optical injection', deets: 'Optics Communications, 172, 279295, 1999.' } ] }, 'Multi-folded Toroidal': { deriv: `y, (lambda + z + x * x * (1.0 - 0.5 * x * x)) * y - (w0 * w0) * x, mu - x * x`, parameters: { lambda: 0, w0: 2.7, mu: 0.3 }, dt: 0.015, tex: [`-`, `-`, `-`], transform: createTransform({ size: [4, 4, 2], center: [0, 0, 0], rotation: [Math.PI / 2, 0, 0] }), initializationOrigin: [0, 0, 0], initializationScale: 1, references: [ { title: '2010 Multi-Folded Toroidal Chaos', authors: ['Christophe Letellier'], url: 'http://www.atomosyd.net/spip.php?article220' }, { authors: ['A. P. Kuznetsov', 'S. P. Kuznetsov', 'N. V. Stankevich'], title: 'A simple autonomous quasiperiodic self-oscillator', deets: 'Communications in Nonlinear Science and Numerical Simulation, 15 (6), 1676-1681, 2010.', url: 'https://www.researchgate.net/publication/222396257_A_simple_autonomous_quasiperiodic_self-oscillator' } ] }, 'Unimodal Toroidal': { deriv: `z * (lambda * x - mu * y) + (2.0 - z) * (alpha * x * (1.0 - (x * x + y * y) / (R * R)) - beta * y), z * (mu * x + lambda * y) + (2.0 - z) * (alpha * y * (1.0 - (x * x + y * y) / (R * R)) + beta * x), 1.0 / eps * (z * ((2.0 - z) * (a * (z - 2.0) * (z - 2.0) + b) - d * x) * (z + m * (x * x + y * y) - eta) - eps * c * (z - 1.0))`, parameters: { alpha: 5, eps: 0.1, a: 3.0, b: 0.8, c: 1.0, d: 0.1, m: 0.05, eta: 3.312, R: 10.0, alpha: 2.8, beta: 5.0, eps: 0.1, lambda: -2.0, mu: 1.0 }, dt: 0.002, tex: [`-`, `-`, `-`], transform: createTransform({ size: [8, 8, 4], center: [0, 0, 2], rotation: [Math.PI / 2, 0, 0] }), initializationOrigin: [0, 0, 1], initializationScale: 1, references: [ { authors: ['Bo Deng'], url: 'https://www.worldscientific.com/doi/abs/10.1142/S0218127494000599', title: 'Constructing homoclinic orbits and chaotic attractors', deets: 'International Journal of Bifurcation & Chaos, 4, 823-841, 1994.' }, { url: 'http://www.atomosyd.net/spip.php?article67', title: '1994 Unimodal Toroidal Chaos', authors: ['Christophe Letellier'] } ] }, 'Cord Attractor': { deriv: ` -y - z + 0.25 * (8.0 - x), (x - 1.0) * y - 4.0 * x * z + 1.0, 4.0 * x * y + (x - 1.0) * z`, dt: 0.01, tex: [`-`, `-`, `-`], initializationOrigin: [0, 0, 0], transform: createTransform({ size: [10, 40, 40], center: [0, 0, 2], rotation: [Math.PI / 2, Math.PI / 2, 0] }), initializationScale: 10, references: [ { url: 'http://www.atomosyd.net/spip.php?article185', title: '2012 The "Cord" Attractor', authors: ['Christophe Letellier'] } ] }, 'Torn Unimodal Chaos': { deriv: ` 33.0 * x + 150.0 * y - 1.0 * x * y - (3.5 * z + 4815.0) * x / (x + 0.01), 410.0 + 0.59 * z - 4.0 * y - 2.5 * x * y / (y + 0.01), 2.5 + 5.29 * x * z - 750.0 * z`, dt: 0.002, tex: [ `33.0 * x + 150.0 * y - 1.0 * x * y - (3.5 * z + 4815.0) * x / (x + 0.01)`, `410.0 + 0.59 * z - 4.0 * y - 2.5 * x * y / (y + 0.01)`, `2.5 + 5.29 * x * z - 750.0 * z` ], initializationOrigin: [125, 25, 0], initializationScale: 10, transform: createTransform({ size: [20, 10, 200], center: [140, 20, 170], rotation: [Math.PI / 2, 0, 0] }), references: [ { authors: ['O. E. Rössler', 'P. J. Ortoleva'], title: 'Strange attractors in 3-variable reaction systems', deets: 'Lecture Notes in Biomathematics, 21, 67-73, 1978.' }, { title: '1978 Torn Unimodal Chaos', url: 'http://www.atomosyd.net/spip.php?article65', authors: ['Christohpe Letellier'] } ] }, 'Lorenz 1984': { deriv: ` -y * y - z * z + alpha * (beta - x), x * y - 4.0 * x * z - y + 1.0, 4.0 * x * y + x * z - z`, dt: 0.01, tex: [ '-y^2 - z^2 + \\alpha (\\beta - x)', `x y - 4 x z - y + 1`, `4 x y + x z - z` ], parameters: { alpha: 0.25, beta: 8 }, initializationOrigin: [0, 0, 0], initializationScale: 1, transform: createTransform({ size: [2.8, 2.8, 2.8], center: [1, 0, 0], rotation: [0, 0, -Math.PI / 2] }), references: [ { author: 'E. N. Lorenz', url: 'https://onlinelibrary.wiley.com/doi/10.1111/j.1600-0870.1984.tb00230.x', title: 'Irregularity: a fundamental property of the atmosphere', deets: 'Tellus A, 36, 98-110, 1984.' }, { title: '1984 A 3D Model for Global Atmospheric Circulation', authors: ['Christophe Letellier'], url: 'http://www.atomosyd.net/spip.php?article42' } ] } }; for (const [key, attractor] of Object.entries(attractors)) { if (!attractor.transform) { attractor.transform = mat4create(); } } // Wrap to return the object, not just the name const wrapper = DOM.element('div'); const input = Inputs.select(Object.keys(attractors), { value: initiallySelectedAttractor, label: 'Attractor' }); wrapper.appendChild(input); function update() { wrapper.value = attractors[input.value]; wrapper.dispatchEvent(new CustomEvent('input')); } update(); input.addEventListener('input', update); /*html`${tex.block` \begin{aligned} \dot{x} &= ${selectedAttractor.tex[0]} \\ \dot{y} &= ${selectedAttractor.tex[1]} \\ \dot{z} &= ${selectedAttractor.tex[2]} \end{aligned}`}`*/ return wrapper; }33:T4fd,viewof userAttractorParameters = { if (actions && viewof actions.canIgnore(this, 'resetParameters')) return this; function displayVar(texName) { //prettier-ignore const GREEK_CHARS = ['alpha','beta','gamma','delta','epsilon','zeta','eta','theta','iota','kappa','lambda','mu','nu','xi','omicron','pi','rho','sigma','tau','upsilon','phi','xi','psi','omega']; if (GREEK_CHARS.indexOf(texName.toLowerCase()) !== -1) { texName = '\\' + texName; } return tex`${texName}`; } const inputs = {}; for (let [variable, value] of Object.entries(parsedAttractorShader.params)) { const sign = Math.sign(value); let min = 0; let max = 10; let transform = undefined; if (value < 0) { min = -Math.pow(10, Math.floor(Math.log10(Math.abs(value)) + 1)); max = 0; } else if (value > 0) { min = sign * Math.pow(10, Math.floor(Math.log10(Math.abs(value)) - 1)); max = sign * Math.pow(10, Math.ceil(Math.log10(Math.abs(value)) + 1)); transform = Math.log; } inputs[variable] = Inputs.range([min, max], { value, label: displayVar(variable), transform }); } const ui = multiplexInputs(inputs, { label: 'Parameters', open: true }); viewof actions.cacheState(ui); return ui; }34:T427,viewof displayParams = multiplexInputs( { width: Inputs.range([0.1, 40], { value: 10, label: 'Line width', step: 0.1 }), fade: Inputs.range([0, 1], { value: 0.25, label: 'Line taper', step: 0.01 }), borderOpacity: Inputs.range([0, 1], { value: 0.8, label: 'Border opacity', step: 0.01 }), borderWidth: Inputs.range([-0.5, 5], { value: 0.5, label: 'Border width', step: 0.01 }), shading: Inputs.range([0, 0.5], { value: 0.1, label: 'Shading' }), shadow: Inputs.range([0, 1], { value: 0.07, label: 'Shadow' }), colorBy: Inputs.radio(['radius', 'random'], { value: 'radius', label: 'Color by initial' }), color1: Inputs.color({ value: '#1c51a6', label: 'Line color 1' }), color2: Inputs.color({ value: '#8de2a7', label: 'Line color 2' }), borderColor: Inputs.color({ value: '#492727', label: 'Border color' }), opts: Inputs.checkbox(['Axes'], { value: ['Axes'], label: ' ' }) }, { label: 'Display parameters' } )35:T6b8,initializeState = regl({ vert: ` precision mediump float; attribute vec2 xy; varying vec2 uv; void main () { uv = 0.5 * xy + 0.5; gl_Position = vec4(xy, 0, 1); }`, frag: ` precision mediump float; varying vec2 uv; uniform vec2 resolution; uniform vec3 origin; uniform float scale; uniform sampler2D src; // http://extremelearning.com.au/unreasonable-effectiveness-of-quasirandom-sequences/ vec3 quasirandom (float n) { const float g = 1.22074408460575947536; return fract(0.5 + n * vec3(1.0 / g, 1.0 / (g * g), 1.0 / (g * g * g))).zyx; } vec3 sphericalRandom (float n) { vec3 rand = quasirandom(n); float u = rand.x * 2.0 - 1.0; float theta = (2.0 * ${Math.PI}) * rand.y; return vec3(sqrt(1.0 - u * u) * vec2(cos(theta), sin(theta)), u) * sqrt(rand.z); } void main () { // gl_FragCoord is offset by a half-texel, but it's actually nice to avoid // identically zero states, since they tend to get stuck along zero // axes and follow unstable paths off to infinity. float particle = gl_FragCoord.y; gl_FragColor = vec4(origin + scale * sphericalRandom(particle), 1); // Add a tiny amount of variation along each path so that we see // *something* on initialization gl_FragColor.z -= gl_FragCoord.x / resolution.x * 0.001; }`, uniforms: { resolution: ctx => [ctx.framebufferWidth, ctx.framebufferHeight], origin: (ctx, props) => props.initializationOrigin || [0, 0, 0], scale: (ctx, props) => props.initializationScale || 1 }, attributes: { xy: [[-4, -4], [0, 4], [4, -4]] }, framebuffer: regl.prop('dst'), count: 3 })36:T79a,// The main update is just a fbo -> fbo map that reads the // floating point position from one fbo, integrates, and // sets it as the frag color to write it to the other. integrate = regl({ vert: ` precision highp float; attribute vec2 xy; varying vec2 srcTexCoord; uniform float srcTexCoordU; void main () { // Map clip coords ([-1, 1] x [-1, 1]) to texture coords // ([0, 1] x [0, 1]) and store in a varying to be used // in the fragment shader: srcTexCoord = vec2(srcTexCoordU, 0.5 * xy.y + 0.5); gl_Position = vec4(xy, 0, 1); }`, frag: ` precision highp float; uniform sampler2D srcTex; uniform float _dt, _t; varying vec2 srcTexCoord; ${parsedAttractorShader.glsl} vec3 _deriv (vec3 p, float t) { // Unpack, for convenience return derivative(p.x, p.y, p.z, t); } void main () { vec3 p = texture2D(srcTex, srcTexCoord).xyz; // Runge-Kutta 4th order integration vec3 k1 = _deriv(p, _t); vec3 k2 = _deriv(p + (0.5 * _dt) * k1, _t + 0.5 * _dt); vec3 k3 = _deriv(p + (0.5 * _dt) * k2, _t + 0.5 * _dt); vec3 k4 = _deriv(p + _dt * k3, _t + _dt); // Evaluate the derivative there and use for a whole step: gl_FragColor = vec4(p + (_dt / 6.0) * (k1 + k4 + 2.0 * (k2 + k3)), 1); // If the particle diverges off to infinity, place it back near the origin if (dot(gl_FragColor.xyz, gl_FragColor.xyz) > 1e6) { gl_FragColor.xyz *= 0.0001; } }`, attributes: { // A single big triangle which covers the viewport, [-1, 1] x [-1, 1], // and draws to all texels xy: [[-4, -4], [0, 4], [4, -4]] }, uniforms: { _dt: regl.prop('dt'), _t: regl.prop('t'), srcTex: regl.prop('src'), srcTexCoordU: (ctx, props) => (props.srcColumn + 0.5) / config.stepCount, ...parsedAttractorShader.uniforms }, framebuffer: regl.prop('dst'), count: 3 })37:Tb4f,drawLines = reglLines(regl, { vert: ` precision highp float; #pragma lines: attribute vec2 position; #pragma lines: attribute float orientation; #pragma lines: position = projectPoint(position); #pragma lines: width = pointWidth(position); #pragma lines: varying float computedWidth = pointWidth(position); #pragma lines: orientation = getCapOrientation(orientation); #pragma lines: varying vec4 color = pointColor(position); uniform mat4 uProjectionView, transform; uniform sampler2D src; uniform float scale, texOffset, width, pixelRatio, fade, particleCount; uniform vec3 color1, color2; uniform vec4 colorBy; vec4 projectPoint (vec2 point) { if (point.x < 0.0) return vec4(0); vec4 position = vec4(texture2D(src, fract(point.xy + vec2(texOffset, 0))).xyz, 1); position = transform * position; vec4 p = uProjectionView * position; float w = p.w; p /= w; p.z -= 0.0001 * abs(point.y - 0.5); return p * w; } float getCapOrientation(float orientation) { return orientation; } float pointWidth (vec2 point) { return width * exp(-3.0 * fade * (1.0 - point.x)); } vec3 quasirandom (float n) { const float g = 1.22074408460575947536; return fract(0.5 + n * vec3(1.0 / g, 1.0 / (g * g), 1.0 / (g * g * g))).zyx; } vec4 pointColor (vec2 point) { vec3 initialPos = quasirandom(point.y * particleCount); float coord = dot(vec4(initialPos, point.y), colorBy); float fade = exp(-3.0 * fade * (1.0 - point.x)); return vec4(mix(color1, color2, coord), fade); }`, frag: ` precision highp float; varying vec3 lineCoord; varying float computedWidth, vFade; varying vec4 color; uniform bool squareCap; uniform float antialiasThreshold, shading; uniform vec2 borderWidth; uniform vec4 borderColor; float linearstep(float x0, float x1, float x) { return clamp((x - x0) / (x1 - x0), 0.0, 1.0); } void main() { // Apply the end cap style float sdf = squareCap ? max(abs(lineCoord.x), abs(lineCoord.y)) : length(lineCoord.xy); float highlight = 1.0 - sdf * sdf; float shade = mix(1.0, highlight, shading); shade = mix(shade, 1.0, shading * highlight * 0.7); // Apply the border color vec2 borderThreshold = 1.0 - borderWidth / computedWidth; float isBorder = linearstep(borderThreshold.x, borderThreshold.y, sdf); gl_FragColor = vec4(mix(color.rgb * shade, borderColor.rgb, isBorder * borderColor.a * color.a), 1); ${ !~contextOpts.indexOf('Antialiasing') ? ` // Fake antialiasing when MSAA is off gl_FragColor.a *= linearstep(1.0, antialiasThreshold, sdf); if (gl_FragColor.a < 0.4) discard;` : '' } }`, cull: { enable: false } })38:T482,drawLineShadows = reglLines(regl, { vert: ` precision highp float; #pragma lines: attribute vec2 position; #pragma lines: attribute float orientation; #pragma lines: position = projectPoint(position); #pragma lines: orientation = getCapOrientation(orientation); #pragma lines: width = pointWidth(position); uniform mat4 uProjectionView, transform; uniform sampler2D src; uniform float scale, texOffset, width, fade, particleCount; vec4 projectPoint (vec2 point) { if (point.x < 0.0) return vec4(0); vec4 position = vec4(texture2D(src, fract(point.xy + vec2(texOffset, 0))).xyz, 1); position = transform * position; position.y = -0.5; vec4 p = uProjectionView * position; float w = p.w; p /= w; p.z -= 0.001 * abs(point.y - 0.5); return p * w; } float getCapOrientation(float orientation) { return orientation; } float pointWidth (vec2 point) { return width * exp(-3.0 * fade * (1.0 - point.x)); }`, frag: ` precision highp float; uniform vec4 color1; void main() { gl_FragColor = color1; }` })39:T447,customLineConfig = regl({ uniforms: { color1: regl.prop('color1'), color2: regl.prop('color2'), borderColor: regl.prop('borderColor'), src: regl.prop('src'), squareCap: (ctx, props) => props.cap === 'square', fade: regl.prop('fade'), width: (ctx, props) => props.width * ctx.pixelRatio, borderWidth: (ctx, props) => [ 2.0 * props.borderWidth * ctx.pixelRatio + 0.75, 2.0 * props.borderWidth * ctx.pixelRatio - 0.75 ], antialiasThreshold: (ctx, props) => 1.0 - 2.0 / (ctx.pixelRatio * props.width), pixelRatio: regl.context('pixelRatio'), transform: regl.prop('transform'), texOffset: regl.prop('texOffset'), particleCount: regl.prop('particleCount'), colorBy: regl.prop('colorBy'), shading: regl.prop('shading') }, blend: { enable: !~contextOpts.indexOf('Antialiasing'), func: { srcRGB: 'src alpha', srcAlpha: 1, dstRGB: 'one minus src alpha', dstAlpha: 1 }, equation: { rgb: 'add', alpha: 'add' } }, depth: { enable: regl.prop('depth') } })3a:Te6d,drawFancyAxes = { const boxVertices = regl.buffer( [0, 1, 2].map(() => [ [-1, -1, -1], [1, -1, -1], [1, 1, -1], [-1, 1, -1], [-1, -1, 1], [1, -1, 1], [1, 1, 1], [-1, 1, 1] ]) ); const boxFaceNormal = regl.buffer( [0, 1, 2].map(i => [...Array(8).keys()].map(() => [0, 1, 2].map(j => (i === (5 - j) % 3 ? 1 : 0)) ) ) ); const boxFaceTangent = regl.buffer( [0, 1, 2].map(i => [...Array(8).keys()].map(() => [0, 1, 2].map(j => (i === (3 - j) % 3 ? 1 : 0)) ) ) ); const boxFaceBitangent = regl.buffer( [0, 1, 2].map(i => [...Array(8).keys()].map(() => [0, 1, 2].map(j => (i === (4 - j) % 3 ? 1 : 0)) ) ) ); // prettier-ignore const boxFaceElements = regl.elements([ [0, 1, 2], [0, 2, 3], [6, 4, 7], [6, 5, 4], [0, 4, 5].map(i => i + 8), [0, 5, 1].map(i => i + 8), [2, 7, 3].map(i => i + 8), [2, 6, 7].map(i => i + 8), [1, 5, 2].map(i => i + 16), [2, 5, 6].map(i => i + 16), [0, 3, 7].map(i => i + 16), [0, 7, 4].map(i => i + 16), ]); invalidation.then(() => { boxVertices.destroy(); boxFaceElements.destroy(); boxFaceNormal.destroy(); boxFaceTangent.destroy(); boxFaceBitangent.destroy(); }); const transform = mat4create(); const normalMatrix = mat3create(); const drawFaces = regl({ vert: ` precision highp float; uniform mat4 uProjectionView, transform; uniform mat3 normalMatrix; attribute vec3 position, tangent, bitangent, normal; varying vec2 coord; varying vec3 p, n, t, b; void main () { p = (transform * vec4(position, 1)).xyz; n = normalMatrix * normal; t = normalMatrix * tangent; b = normalMatrix * bitangent; coord = vec2(dot(position, b), dot(position, t)); gl_Position = uProjectionView * vec4(p, 1); }`, frag: ` #extension GL_OES_standard_derivatives : enable precision mediump float; varying vec2 coord; varying vec3 p, n, t, b; uniform vec3 eye; float gridFactor (vec2 parameter, float width) { vec2 d = fwidth(parameter); vec2 looped = 0.5 - abs(mod(parameter, 1.0) - 0.5); vec2 a2 = smoothstep(d * (width + 0.5), d * (width - 0.5), looped); return max(a2.x, a2.y); } void main () { float vDotN = dot(normalize(p - eye), n); float fade = smoothstep(0.02, 0.25, abs(vDotN)); float alpha = fade * 0.25 * ( gridFactor(coord * 4.0, 0.5) + 0.2 * gridFactor(coord * 10.0 * 4.0, 0.5) ); gl_FragColor = vec4(vec3(0), alpha); if (alpha < 0.001) discard; }`, attributes: { position: boxVertices, normal: boxFaceNormal, tangent: boxFaceTangent, bitangent: boxFaceBitangent }, uniforms: { transform: mat4scale( mat4create(), mat4fromTranslation(transform, [0, 1.5, 0]), [2, 2, 2] ), normalMatrix: mat3normalFromMat4( normalMatrix, mat4scale( mat4create(), mat4translate(mat4create(), mat4create(), [0, 1.5, 0]), [2, 2, 2] ) ), eye: regl.context('eye') }, depth: { enable: true, mask: true }, cull: { enable: true, face: 'back' }, blend: { enable: true, func: { srcRGB: 'src alpha', dstRGB: 'one minus src alpha', srcAlpha: 1, dstAlpha: 1 }, equation: { rgb: 'add', alpha: 'add' } }, primitive: 'triangles', elements: boxFaceElements }); function labelMaker() {} return function() { drawFaces(); }; }3b:T7bd,function renderFrame({ simulate = false, dTheta = 0, tick = 0 } = {}) { if (dTheta) camera.params.dTheta = dTheta; camera(({ dirty }) => { if (!simulate && !dirty) return; if (simulate) { integrate({ src: state, dst: tmpState, srcColumn: mutable currentColumn, dt: selectedAttractor.dt, t: mutable t, params: userAttractorParameters }); mutable t += selectedAttractor.dt; mutable currentColumn = (mutable currentColumn + 1) % config.stepCount; copyStateColumn({ src: tmpState, dst: state, dstColumn: mutable currentColumn }); } regl.clear({ color: [1, 1, 1, 1], depth: 1 }); const texOffset = (mutable currentColumn - config.stepCount + 1) / config.stepCount; const colors = { borderColor: hexRgbToFloat(displayParams.borderColor).concat( displayParams.borderOpacity ), color1: hexRgbToFloat(displayParams.color1), color2: hexRgbToFloat(displayParams.color2) }; const lines = { ...displayParams, ...lineParams, ...config, ...colors, src: state, depth: true, transform: selectedAttractor.transform, colorBy: { radius: [0, 0, 1, 0], random: [0, 0, 0, 1] }[displayParams.colorBy], texOffset }; if (displayParams.shadow && camera.state.eye[1] > -0.5) { const shadowColor = [1, 1, 1].fill(1 - displayParams.shadow).concat(1); customLineConfig( { ...lines, depth: false, color1: shadowColor }, () => drawLineShadows({ ...lineData, vao: shadowLinesVAO }) ); } //if (~displayParams.opts.indexOf('Axes')) // drawAxes({ transform: selectedAttractor.transform }); customLineConfig(lines, () => { drawLines({ ...lineData, vao: drawLinesVAO }); }); if (~displayParams.opts.indexOf('Axes')) drawFancyAxes(); }); }3c:[{"id":"cc5d67e395e39d5498c9f169dfe7f308ee528813c5acd91281579a29b0719c49d11c20fb35ffb6cde47736903cabd7371528042e00ae0b9ac284f61c8b1e830a","href":"https://static.observableusercontent.com/files/cc5d67e395e39d5498c9f169dfe7f308ee528813c5acd91281579a29b0719c49d11c20fb35ffb6cde47736903cabd7371528042e00ae0b9ac284f61c8b1e830a","name":"headerimg.jpg","type":"image/jpeg","lastModified":1635061776771.692,"size":137874}] 2f:{"title":"Strange Attractors on the GPU, Part 2: Fun!","cells":[{"id":3593,"value":"html`

Strange Attractors on the GPU, Part 2: Fun!

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3177,"value":"md`This notebook computes and renders some well-known [strange attractors](https://en.wikipedia.org/wiki/Attractor#Strange_attractor) on the GPU. In order for things to look their best, this notebook does not lend itself particularly well to explanation. Instead, I've extracted the essence of the simulation and explained the steps in great detail in the companion notebook, [Strange Attractors on the GPU, Part 1 🔗](https://observablehq.com/d/ab6cd8bb0137889c).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4424,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":3713,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":8204,"value":"refs(selectedAttractor.references)","pinned":false,"hidden":false,"mode":"ojs"},{"id":5984,"value":"viewof deriv = {\n function toGlslFloat(value) {\n const str = value.toFixed(14);\n if (/\\./.test(str)) {\n return str.replace(/00*$/, '0');\n } else {\n return str;\n }\n }\n const consts = [];\n if (selectedAttractor.parameters) {\n for (const [variable, value] of Object.entries(\n selectedAttractor.parameters\n )) {\n consts.push(`#pragma param: ${variable} = ${toGlslFloat(value)}`);\n }\n }\n\n const glsl = Editor({\n value: `${consts.join(\n '\\n'\n )}\\n\\nvec3 derivative (float x, float y, float z, float t) {\n return vec3(\\n${selectedAttractor.deriv\n .trim()\n .replace(/^\\s*/gm, ' ')}\\n );\n}`.trim(),\n language: 'glsl'\n });\n\n // Fix the position of the update button\n glsl.style.position = 'relative';\n\n const container = multiplexInputs(\n { glsl },\n {\n label: html`Edit shader (shift + enter to update)`,\n open: true\n }\n );\n return container;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6201,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":4557,"value":"viewof actions = multiplexInputs(\n {\n restart: Inputs.button('Reinitialize'),\n resetCamera: Inputs.button('Reset camera'),\n resetParameters: Inputs.button('Reset parameters'),\n simulateOpts: Inputs.checkbox(['Simulate'], {\n value: ['Simulate']\n })\n },\n { inline: true }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"viewof regl = reglCanvas(this, {\n width: viewport.width,\n height: viewport.height,\n pixelRatio: viewport.pixelRatio,\n attributes: {\n antialias: ~contextOpts.indexOf('Antialiasing'),\n preserveDrawingBuffer: true\n },\n extensions: [\n 'OES_standard_derivatives',\n 'ANGLE_instanced_arrays',\n 'OES_texture_float'\n ],\n optionalExtensions: ['OES_vertex_array_object']\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4253,"value":"viewof config = multiplexInputs(\n {\n particleCount: Inputs.range([1, 4096], {\n value: 1024,\n label: 'Particles',\n transform: Math.log,\n step: 1\n }),\n stepCount: Inputs.range([3, 2048], {\n value: 10,\n label: 'Track length',\n transform: Math.log,\n step: 1\n })\n },\n { label: 'Particle configuration' }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4238,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":4316,"value":"viewof lineParams = multiplexInputs(\n {\n join: Inputs.select(['bevel', 'miter', 'round'], {\n value: 'bevel',\n label: 'Joins'\n }),\n cap: Inputs.select(['none', 'square', 'round'], {\n value: 'round',\n label: 'Caps'\n }),\n capResolution: Inputs.range([1, 10], {\n value: 5,\n label: 'Cap resolution',\n step: 1\n //disabled: cap !== 'round'\n }),\n joinResolution: Inputs.range([1, 10], {\n value: 3,\n label: 'Join resolution',\n step: 1\n //disabled: join !== 'round'\n }),\n miterLimit: Inputs.range([1, 8], {\n value: 2,\n step: 0.1,\n label: 'Miter limit'\n //disabled: join !== 'miter'\n })\n },\n { label: 'Line rendering parameters', open: false }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4311,"value":"viewof video = multiplexInputs(\n {\n export: html`\n${\n ~actions.simulateOpts.indexOf('simulate')\n ? md`Pause simulation to enable rendering to video`\n : await encodeMP4(\n Array.from(Array(2500).keys()),\n function(t) {\n regl.poll();\n renderFrame({ simulate: true, dTheta: 0.003 });\n return regl.read();\n },\n {\n disabled: !!~actions.simulateOpts.indexOf('Simulate'),\n flipY: true,\n displayOutput: false,\n beforeStart: performInitialization,\n quantizationParameter: 10,\n groupOfPictures: 10,\n kbps: 15000,\n frameRate: 60,\n width: regl._gl.canvas.width,\n height: regl._gl.canvas.height\n }\n )\n}`,\n instructions: md`Pause simulation to encode video`\n },\n { label: 'Video export' }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2587,"value":"viewof viewportSizing = Inputs.radio(['Display', 'Export'], {\n value: 'Display',\n label: 'Size viewport for:'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1046,"value":"viewof contextOpts = Inputs.checkbox(['Antialiasing'], {\n value: []\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":6757,"value":"mutable t = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":7698,"value":"md`## Implementation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8148,"value":"import { reglCanvas } from '@rreusser/regl-canvas'","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"viewport = ({\n width: viewportSizing === 'Export' ? 640 : width,\n height: viewportSizing === 'Export' ? 480 : Math.max(400, width * 0.7),\n pixelRatio: viewportSizing === 'Export' ? 1 : devicePixelRatio\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":7701,"value":"md`### Attractor state definition`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"state = {\n const fbo = regl.framebuffer({\n depthStencil: false,\n height: config.particleCount,\n width: config.stepCount,\n colorType: 'float',\n colorFormat: 'rgba'\n });\n\n // Clean up resources when Observable reevaluates this cell\n invalidation.then(() => fbo.destroy());\n\n return fbo;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2387,"value":"tmpState = {\n const fbo = regl.framebuffer({\n depthStencil: false,\n height: config.particleCount,\n width: 1,\n colorType: 'float',\n colorFormat: 'rgba'\n });\n invalidation.then(() => fbo.destroy());\n return fbo;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":7706,"value":"md`### Draw commands`","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":2528,"value":"function performInitialization() {\n regl.poll();\n mutable currentColumn = 0;\n mutable t = 0;\n initializeState({ dst: state, ...selectedAttractor });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"initializationTrigger = {\n if (actions && viewof actions.canIgnore(this, 'restart')) return this;\n\n performInitialization();\n\n return viewof actions.cacheState({});\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6127,"value":"parsedAttractorShader = {\n // Extract user-specified parameters in the \"#pragma param:\" statements and connect\n // them to uniform inputs controlled by sliders\n const params = {};\n const uniforms = {};\n const glsl = deriv.glsl.replace(\n /^\\s*#pragma\\s+param\\s*:\\s+([a-zA-Z0-9_]+)\\s*=\\s*([e\\d.+-]+)\\s*;?\\s*$/gm,\n function(match, variable, value) {\n params[variable] = parseFloat(value);\n uniforms[variable] = regl.prop(`params.${variable}`);\n return `uniform float ${variable};`;\n }\n );\n return { params, uniforms, glsl };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":275,"value":"copyStateColumn = regl({\n vert: `\n precision mediump float;\n attribute vec2 xy;\n varying vec2 uv;\n void main () {\n uv = 0.5 * xy + 0.5;\n gl_Position = vec4(xy, 0, 1);\n }`,\n frag: `\n precision mediump float;\n varying vec2 uv;\n uniform sampler2D srcTex;\n void main () {\n gl_FragColor = texture2D(srcTex, uv);\n }`,\n attributes: { xy: [[-4, -4], [0, 4], [4, -4]] },\n uniforms: {\n srcTex: regl.prop('src')\n },\n framebuffer: regl.prop('dst'),\n scissor: {\n enable: true,\n box: {\n x: regl.prop('dstColumn'),\n y: 0,\n height: config.particleCount,\n width: 1\n }\n },\n count: 3\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2394,"value":"mutable currentColumn = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":5673,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":7754,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":2788,"value":"drawAxes = regl({\n vert: `\n precision highp float;\n uniform mat4 uProjectionView, transform;\n attribute vec3 xyz;\n attribute vec3 color;\n varying vec3 vColor;\n void main () {\n vColor = color;\n gl_Position = uProjectionView * (transform * vec4(xyz, 1));\n }`,\n frag: `\n precision lowp float;\n varying vec3 vColor;\n void main () {\n gl_FragColor = vec4(vColor, 1);\n }`,\n attributes: {\n xyz: [[0, 0, 0], [1, 0, 0], [0, 0, 0], [0, 1, 0], [0, 0, 0], [0, 0, 1]],\n color: [[1, 0, 0], [1, 0, 0], [0, 1, 0], [0, 1, 0], [0, 0, 1], [0, 0, 1]]\n },\n uniforms: {\n transform: regl.prop('transform')\n },\n primitive: 'lines',\n count: 6\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":7714,"value":"md`### Line rendering data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6445,"value":"positions = {\n let positions = [];\n const { particleCount, stepCount } = config;\n for (let i = 0; i < particleCount; i++) {\n for (let j = 0; j < stepCount; j++) {\n positions.push([(j + 0.5) / stepCount, (i + 0.5) / particleCount]);\n }\n if (i < particleCount - 1) {\n positions.push([-1, -1]);\n }\n }\n return positions;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"vertexAttributes = {\n let position = regl.buffer(positions);\n invalidation.then(() => position.destroy());\n return { position };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6454,"value":"endpointPositions = {\n let positions = [];\n const { particleCount, stepCount } = config;\n for (let j = 0; j < particleCount; j++) {\n // Start cap\n for (let i = 0; i < 3; i++) {\n positions.push([(i + 0.5) / stepCount, (j + 0.5) / particleCount]);\n }\n\n // End cap\n for (let i = stepCount - 1; i >= stepCount - 3; i--) {\n positions.push([(i + 0.5) / stepCount, (j + 0.5) / particleCount]);\n }\n }\n return positions;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6783,"value":"capOrientation = {\n let orientation = [];\n const { particleCount } = config;\n for (let j = 0; j < particleCount; j++) {\n orientation.push(reglLines.CAP_START, reglLines.CAP_END);\n }\n return orientation;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6457,"value":"endpointAttributes = {\n let position = regl.buffer(endpointPositions);\n let orientation = regl.buffer(new Uint8Array(capOrientation));\n invalidation.then(() => {\n position.destroy();\n orientation.destroy();\n });\n return { position, orientation };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"lineData = ({\n ...displayParams,\n vertexCount: positions.length,\n endpointCount: endpointPositions.length / 3,\n ...lineParams\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":8376,"value":"drawLinesVAO = {\n const vao = drawLines.vao({\n vertexAttributes,\n endpointAttributes\n });\n invalidation.then(() => vao.destroy());\n return vao;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":8401,"value":"shadowLinesVAO = {\n const vao = drawLineShadows.vao({\n vertexAttributes,\n endpointAttributes\n });\n invalidation.then(() => vao.destroy());\n return vao;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3480,"value":"section_drawLoop = md`### Draw loop`","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"camera = {\n if (actions && viewof actions.canIgnore(this, 'resetCamera')) return this;\n contextOpts;\n\n const camera = createReglCamera(regl, {\n distance: 3,\n near: 0.01,\n far: 100,\n phi: 0.1,\n theta: 0.6,\n center: [0, 0.4, 0]\n });\n createInteractions(camera);\n viewof actions.cacheState(camera);\n return camera;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3732,"value":"updateCameraAspectRatio = {\n // Trigger a dependence of resizing on the regl instance:\n viewof regl;\n contextOpts;\n\n const aspectRatio = viewof regl.width / viewof regl.height;\n camera.resize(aspectRatio);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2543,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"mainDrawLoop = {\n actions;\n initializeState;\n const simulate = ~actions.simulateOpts.indexOf('Simulate');\n camera.taint();\n let frame = regl.frame(({ tick }) => {\n try {\n renderFrame({ simulate, tick });\n } catch (e) {\n console.error(e);\n frame && frame.cancel();\n frame = null;\n }\n });\n invalidation.then(() => {\n frame && frame.cancel();\n frame = null;\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3344,"value":"section_extras = md`### Imports and definitions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"createREGL = require('regl@2.1.0')","pinned":false,"hidden":false,"mode":"ojs"},{"id":6441,"value":"reglLines = require('https://unpkg.com/regl-gpu-lines@2.2.0/dist/regl-gpu-lines.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":7649,"value":"import { multiplexInputs } from '@rreusser/multiplex-inputs'","pinned":false,"hidden":false,"mode":"ojs"},{"id":6556,"value":"d3 = require('d3@7')","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"import { createReglCamera, createInteractions } from '@rreusser/regl-tools'","pinned":false,"hidden":false,"mode":"ojs"},{"id":5981,"value":"import { Editor } from '@cmudig/editor'","pinned":false,"hidden":false,"mode":"ojs"},{"id":2516,"value":"import { encodeMP4 } from '42411b151082b5c0'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1128,"value":"import { hexRgbToFloat } from '@rreusser/utils'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1812,"value":"import {\n mat4fromScaling,\n mat4scale,\n mat4create,\n mat4fromTranslation,\n mat4translate,\n mat4invert,\n mat4rotateX,\n mat4rotateY,\n mat4rotateZ,\n mat4multiply,\n mat4rotate\n} from '@rreusser/gl-mat4'","pinned":false,"hidden":false,"mode":"ojs"},{"id":7958,"value":"import { mat3normalFromMat4, mat3create } from '@rreusser/gl-mat3'","pinned":false,"hidden":false,"mode":"ojs"},{"id":8233,"value":"function refs(data) {\n if (!data) return DOM.element('span');\n\n function ref(data) {\n if (typeof data === 'string') return data;\n const el = DOM.element('span');\n if (data.authors) {\n const auth = Array.isArray(data.authors) ? data.authors : [data.authors];\n el.appendChild(html`${auth.join(', ')}.`);\n }\n if (data.title) {\n if (data.authors) el.appendChild(html` `);\n }\n el.append(html`${data.title}.`);\n if (data.deets) {\n el.append(html` ${data.deets}`);\n }\n\n return el;\n }\n\n return html`${data.map(data => md`- ${ref(data)}`)}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1333,"value":"html`