-
-
Notifications
You must be signed in to change notification settings - Fork 1.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Interactive lorenz #3151
Interactive lorenz #3151
Conversation
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 |
Can you change <!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> |
O wow! That looks really nice! |
Yeah :) Shall I do something similar for |
I would like to give it a try on the weekend. |
Okido👌 |
Nice, thanks! |
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.