mirror of
https://github.com/josdejong/mathjs.git
synced 2025-12-08 19:46:04 +00:00
36611384da
* Interactive lorenz * Separate Interactive Lorenz * Cleanup * Bigger graphs * Full screen examples --------- Co-authored-by: Jos de Jong <wjosdejong@gmail.com>
73 lines
1.7 KiB
HTML
73 lines
1.7 KiB
HTML
<!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: 100vh;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
#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"
|
|
}],
|
|
{
|
|
responsive: true,
|
|
uirevision: 'true',
|
|
title:"Lorenz Attractor",
|
|
}
|
|
)
|
|
|
|
// 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> |