josdejong
Interactive lorenz
Hi, this is an interactive Lorenz Attractor example according to #3147
The code for the interactivity seems complicated, so I think it was a good idea to separate the example.
O wow, nice!
I see that the actual 3d chart is not using all screen space but is relatively small. That is already the case in the lorentz.html example too. Would it be possible to make it a more fullscreen experience?
Can you change lorenz.html to the following contents? That makes it really fullscreen and responsive. I can do something similar to lorenz_interactcive.html, putting the sliders in a floating box bottom left or top left for example.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>math.js | Lorenz Attractor</title>
<script src="../../lib/browser/math.js"></script>
<script src="https://cdn.plot.ly/plotly-2.25.2.min.js" charset="utf-8"></script>
<style>
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
body {
display: flex;
}
#LorenzGraph {
flex: 1;
}
</style>
</head>
<body>
<div id="LorenzGraph"></div>
</body>
<script defer>
// define the constants for the Lorenz attractor
const sigma = 10
const beta = 2.7
const rho = 28
// solve the Lorenz attractor
const sol = math.solveODE(lorenz, [0, 100], [1, 1, 1])
// make colors that represents time differences in the solution
const diff = math.diff(sol.t)
const color = [diff[0], ...diff]
// render the plot using plotly
Plotly.newPlot('LorenzGraph',
[{
x: sol.y.map(u => u[0]),
y: sol.y.map(u => u[1]),
z: sol.y.map(u => u[2]),
line: { color, colorscale: 'Jet' },
type: "scatter3d",
mode: "lines"
}],
{
margin: { l: 0, r: 0, b: 0, t: 0, pad: 0 },
},
{
responsive: true
}
)
// define the lorenz attractor
function lorenz(t, u) {
const [x, y, z] = u
return [
sigma * (y - x),
x * (rho - z) - y,
x * y - beta * z
]
}
</script>
</html>
Yeah :)
Shall I do something similar for lorenz_interactcive.html, or would you like to that yourself?