Skip to content

Instantly share code, notes, and snippets.

@nl-hugo
Last active March 7, 2023 21:59
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nl-hugo/cfd24fee7e3f4878d9afa7f306e02771 to your computer and use it in GitHub Desktop.
Save nl-hugo/cfd24fee7e3f4878d9afa7f306e02771 to your computer and use it in GitHub Desktop.
Lorenz System
height: 600
license: MIT
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.circle {
opacity: 0.5;
fill: #ccc;
stroke: steelblue;
r: 3px;
}
.track {
fill: none;
stroke: url("#line-gradient");
}
</style>
<body></body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var margin = {top: 10, right: 10, bottom: 10, left: 10},
width = 600 - margin.left - margin.right,
height = 600 - margin.top - margin.bottom;
var rho = 28.0,
sigma = 10.0,
beta = 8.0 / 3.0,
x = 0,
y = z = 1,
t = 0.01,
iter = 0,
max_iter = 10000,
data = [];
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("class", "g-lorentz")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var colorScale = d3.scaleLinear()
.domain([0, 40])
.range([0, 1]);
var circle = svg.append("circle")
.attr("class", "circle");
var line = d3.line()
.curve(d3.curveCardinal)
.x(function(d) { return d[0]; })
.y(function(d) { return d[1]; });
var track = svg.append("path")
.attr("class", "track");
// set the gradient
svg.append("linearGradient")
.attr("id", "line-gradient")
.attr("x1", "10%").attr("x1", "90%")
.attr("y1", "10%").attr("y2", "90%")
.selectAll("stop")
.data([
{offset: "0%", color: "#b2182b"},
{offset: "100%", color: "#2166ac"}
])
.enter().append("stop")
.attr("offset", function(d) { return d.offset; })
.attr("stop-color", function(d) { return d.color; });
function lorentz(callback) {
callback(
x += t * (sigma * (y - x)),
y += t * (x * (rho - z) - y),
z += t * (x * y - beta * z)
);
}
function draw(x, y, z) {
data.push([(width / 2 + 10 * x), (height + 10 * -z)]);
track.attr("d", line(data)).attr("stroke", "url(#line-gradient)");
circle.attr("transform", function(d) { return "translate(" + data[data.length - 1] + ")"; });
}
var interval = setInterval(function() {
iter++;
if (iter >= max_iter)
clearInterval(interval);
lorentz(draw);
}, 10);
</script>
{
"name": "lorentz attractor",
"version": "0.0.1",
"description": "Visualization of a Lorentz attractor",
"keywords": [
"math",
"visualization",
"chaos theory",
"d3.js",
"oscillator"
],
"author": "Hugo Janssen <nl-hugo@hugojanssen.nl>",
"private": true,
"license": "MIT"
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment