| license: gpl-3.0 |
Generation of the Lorenz attractor on the (x,z) plane using the most common lorenz system parameters.
Nadieh says everything is better with an svg filter rainbow gradient, so I obliged.
Visualization of other attractors:
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| .drawingDot { | |
| fill-opacity: 0.8; | |
| stroke-opacity: 0.5; | |
| fill: #ccc; | |
| stroke: black; | |
| r: 3px; | |
| } | |
| .dotTrack { | |
| fill: none; | |
| stroke: url("#linear-gradient"); | |
| } | |
| </style> | |
| <svg width="960" height="500"></svg> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script> | |
| let svg = d3.select("svg") | |
| //Append linear gradient in svg defs | |
| let defs = svg.append("defs"); | |
| let linearGradient = defs.append("linearGradient") | |
| .attr("id", "linear-gradient"); | |
| //gradient color scale | |
| let gradientScale = d3.scaleLinear() | |
| .range(["#2c7bb6", "#00a6ca","#00ccbc","#90eb9d","#f9d057","#f29e2e","#e76818","#d7191c"]); | |
| //Append multiple color stops evenly spaced | |
| linearGradient.selectAll("stop") | |
| .data( gradientScale.range() ) | |
| .enter().append("stop") | |
| .attr("offset", function(d,i) { return i/(gradientScale.range().length-1); }) | |
| .attr("stop-color", function(d) { return d; }); | |
| let offsetX = +svg.attr("width")/2 | |
| let offsetY = +svg.attr("height") | |
| let lorenzParameters = { | |
| rho: 28.0, | |
| sigma: 10.0, | |
| beta: 8.0/3.0 | |
| } | |
| let x = 0, | |
| y = z = 1, | |
| t = 0.01, | |
| iter = 0, | |
| max_iter = 10000; | |
| let zoomFactor = 9 | |
| var data = []; | |
| let lineGenerator = d3.line() | |
| .x(d => d.x) | |
| .y(d => d.z) | |
| .curve(d3.curveCardinal); | |
| let gTrack = svg.append("g") | |
| .attr("class", "gTrack") | |
| .attr("transform", `translate(${offsetX}, ${offsetY})`) | |
| //follow the dot! | |
| let dot = gTrack.append("circle") | |
| .attr("class", "drawingDot"); | |
| let dotTrack = gTrack.append("path") | |
| .attr("class", "dotTrack"); | |
| function lorenz(callback) { | |
| callback( | |
| x += t * (lorenzParameters.sigma * (y - x)), | |
| y += t * (x * (lorenzParameters.rho - z) - y), | |
| z += t * (x * y - lorenzParameters.beta * z) | |
| ); | |
| } | |
| function draw(x, y, z) { | |
| data.push({x: zoomFactor * x, z: zoomFactor * - z}) | |
| dotTrack | |
| .attr("d", lineGenerator(data)) | |
| .attr("stroke", "black"); | |
| dot | |
| .attr("transform", `translate(${data[data.length-1].x}, ${data[data.length-1].z})`) | |
| } | |
| let timeInterval = d3.interval(function() { | |
| iter++; //time increment | |
| if (iter >= max_iter) timeInterval.stop(); | |
| lorenz(draw) | |
| }, 5); | |
| </script> |
