-
Notifications
You must be signed in to change notification settings - Fork 1
/
lorenz.html
202 lines (177 loc) · 6.65 KB
/
lorenz.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://api.fonts.coollabs.io">
<title>Lorenz Attractor</title>
<meta name="description" content="Numerical simulations of a Lorenz Attractor in JavaScript">
<link rel="stylesheet" href="css/ode.css">
<link rel="stylesheet" href="https://api.fonts.coollabs.io/css2?family=Raleway:wght@300;400;600&display=swap">
<link rel="preload" href="css/uplot.min.css" as="style">
<link rel="preload" href="scripts/ode.js" as="script">
<link rel="preload" href="scripts/uplot.min.js" as="script">
</head>
<body> <a class="homeLink" href="./"><svg width="40" height="40" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M11.9481 14.8285L10.5339 16.2427L6.29126 12L10.5339 7.7574L11.9481 9.17161L10.1197 11H17.6568V13H10.1197L11.9481 14.8285Z"
fill="currentColor" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M23 19C23 21.2091 21.2091 23 19 23H5C2.79086 23 1 21.2091 1 19V5C1 2.79086 2.79086 1 5 1H19C21.2091 1 23 2.79086 23 5V19ZM19 21H5C3.89543 21 3 20.1046 3 19V5C3 3.89543 3.89543 3 5 3H19C20.1046 3 21 3.89543 21 5V19C21 20.1046 20.1046 21 19 21Z"
fill="currentColor" />
</svg></a>
<h1>Lorenz Attractor</h1>
<p>This is a <a href="https://en.wikipedia.org/wiki/Lorenz_system">Lorenz strange attractor</a>
It is notable for having chaotic solutions for certain initial conditions.
</p>
<object style="width: 100%; max-height: 10em;" data="images/lorenz.svg" type="image/svg+xml">Lorenz equations</object>
<p>
The lorenz system was developed to
describe a two dimensional fluid layer that is being warmed from below and cooled from above. <b>x</b>
is proportional to the rate of convection, <b>y</b> to the horizontal temperature variation, and
<b>z</b> to the vertical temperature variation. This demo shows a xy projection of the result and all three
coordinates in the time plot below.
</p>
<div style="display: flex; justify-content: space-between;">
<div class="sliderscont">
<input type="range" oninput="updateInitialValues()" min="1" max="4" value="3" step="0.1" name="resolution slider"
id="resSlid">
<label for="resSlid">resolution</label>
<input type="range" oninput="updateInitialValues()" value="8 / 3" min="0" max="3" step="any" name="amplitude"
id="betaSlid">
<label for="betaSlid">beta</label>
</div>
<div class="sliderscont">
<input type="range" oninput="updateInitialValues()" value="5" min="0.1" max="10" step="any"
name="resonance slider" id="deltaSlid">
<label for="deltaSlid">delta</label>
<input type="range" oninput="updateInitialValues()" value="1" min="-20" max="20" step="any"
name="dampening slider" id="gammaSlid">
<label for="gammaSlid">initial position</label>
</div>
</div>
<noscript>
<p>
Please enable JavaScript for a live demo. I promise it's not for tracking.
</p>
</noscript>
<canvas style="width: 100%;" id="canvas"></canvas>
<div id="plot"></div>
</body>
<link rel="stylesheet" href="css/uplot.min.css">
<script src="scripts/uplot.min.js"></script>
<script src="scripts/ode.js"></script>
<script async>
var plotElem = document.getElementById("plot")
var delta = 10
var beta = 8 / 3
var radius = 28
var iterPerFrame = 4
var oderes = []
function LorenzODE(t, y) {
return [-delta * (y[0] - y[1]),
radius * y[0] - y[1] - y[0] * y[2],
-beta * y[2] + y[0] * y[1]]
}
solver = new ODEsolver(LorenzODE, [0, 1, 0.5], 0, 20)
function getSliderValue(id) {
return parseFloat(document.getElementById(id).value)
}
function updateInitialValues() {
solver.y0 = [getSliderValue("gammaSlid"), 1, 0.5]
beta = getSliderValue("betaSlid")
delta = getSliderValue("deltaSlid")
solver.f = LorenzODE
iterPerFrame = Math.pow(2, getSliderValue("resSlid"))
solver.t0 = 0
solver.t1 = 20
oderes = solver.rk4(~~iterPerFrame * 120) //calculate a 20s preview at high res
}
const opts = {
width: 900,
height: 900,
title: "Lorenz attractor",
scales: {
x: { time: false },
},
series: [
{ label: "t" },
{
label: "x",
stroke: "#D32F2F",
},
{
label: "y",
stroke: "#ff8000",
},
{
label: "z",
stroke: "#12B02F",
},
],
}
var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")
const map = (value, x1, y1, x2, y2) => (value - x1) * (y2 - x2) / (y1 - x1) + x2;
var data = []
function drawOde() {
data = [
oderes.ts,
oderes.ys.map((t) => t[0]),
oderes.ys.map((t) => t[1]),
oderes.ys.map((t) => t[2]),
]
const xmin = Math.min(...data[1])
const xmax = Math.max(...data[1])
const ymin = Math.min(...data[2])
const ymax = Math.max(...data[2])
const zmin = Math.min(...data[3])
const zmax = Math.max(...data[3])
ctx.clearRect(0, 0, canvas.width, canvas.height)
const x0 = map(data[1][0], xmin, xmax, 0, canvas.width)
const y0 = map(data[2][0], ymin, ymax, 0, canvas.height)
ctx.moveTo(x0, y0)
ctx.beginPath()
for (let i = 1; i < data[1].length; i++) {
const x = map(data[1][i], xmin, xmax, 0, canvas.width)
const y = map(data[2][i], ymin, ymax, 0, canvas.height)
ctx.lineTo(x, y)
//const heightValue =map(data[3][i], zmin, zmax, 70, 0)
//ctx.strokeStyle = `hsl(210,100%,${~~heightValue}%)`;
}
ctx.stroke()
}
updateInitialValues()
var u = new uPlot(opts, data, plotElem)
function updateCanvasProperties() {
var ptr = window.devicePixelRatio | 1
u.setSize({ width: plotElem.clientWidth, height: plotElem.clientWidth });
canvas.height = plotElem.clientWidth * ptr
canvas.width = plotElem.clientWidth * ptr
}
updateCanvasProperties()
window.addEventListener("resize", updateCanvasProperties)
drawOde()
const tmax = 40
const tstep = 0.1
function step(timestamp) {
solver.y0 = oderes.ys[oderes.ys.length - 1]
solver.t0 = solver.t1
solver.t1 += tstep
// append the results to the current results
var tmpres = solver.rk4(~~iterPerFrame)
oderes.ts = oderes.ts.concat(tmpres.ts)
oderes.ys = oderes.ys.concat(tmpres.ys)
//remove the first few elements if the array is too long
if (oderes.ts[oderes.ts.length - 1] - oderes.ts[0] > tmax) {
oderes.ts.splice(0, tmpres.ts.length)
oderes.ys.splice(0, tmpres.ts.length)
}
drawOde()
u.setData(data)
window.requestAnimationFrame(step)
}
window.requestAnimationFrame(step)
</script>
</html>