-
Notifications
You must be signed in to change notification settings - Fork 1
/
aizawa.html
172 lines (145 loc) · 5.58 KB
/
aizawa.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
<!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>Aizawa 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="scripts/ode.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>Aizawa Attractor</h1>
<p>A visualization of the Aizawa Attractor. The third dimension is represented by color, with lighter colors
indicating a higher value.</p>
<div style="display: flex; justify-content: space-between;">
<div class="sliderscont">
<input type="range" oninput="updateInitialValues()" value="4" min="1" max="4" step="0.1" name="resolution slider"
id="resSlid">
<label for="resSlid">resolution</label>
<input type="range" oninput="updateInitialValues()" value=".7" min="0" max="3" step="any" id="betaSlid">
<label for="betaSlid">beta</label>
</div>
<div class="sliderscont">
<input type="range" oninput="updateInitialValues()" value="3.5" min="-5" max="5" step="any" id="deltaSlid">
<label for="deltaSlid">delta</label>
<input type="range" oninput="updateInitialValues()" value=".9" min="-1" max="1" step="any" id="alphaSlid">
<label for="alphaSlid">alpha</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>
<script src="scripts/ode.js"></script>
<script async>
var plotElem = document.getElementById("plot")
var alpha = .9
var beta = .7
var delta = 3.5
var eta = .25
var f = .1
var c = .6
var iterPerFrame = 10
var oderes = []
function AizawaODE(t, y) {
//dx = (z-b) * x - d*y
//dy = d * x + (z-b) * y
//dz = c + a*z - z3 /3 - x2 + f * z * x3
const dx = (y[2] - beta) * y[0] - delta * y[1];
const dy = delta * y[0] + (y[2] - beta) * y[1];
const dz = c + alpha * y[2] - Math.pow(y[2], 3) / 3 - y[0] * y[0] + f * y[2] * Math.pow(y[0], 3);
return [dx, dy, dz];
}
solver = new ODEsolver(AizawaODE, [.1, 0, 0], 0, 10)
function getSliderValue(id) {
return parseFloat(document.getElementById(id).value)
}
function updateInitialValues() {
alpha = getSliderValue("alphaSlid")
beta = getSliderValue("betaSlid")
delta = getSliderValue("deltaSlid")
solver.f = AizawaODE
iterPerFrame = Math.pow(2, getSliderValue("resSlid"))
solver.t0 = 0
solver.t1 = 10
solver.y0 = [.1, 0, 0]
oderes = solver.rk4(1000)
}
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)
//"3d" viz using color
for (let i = 1; i < data[1].length; i++) {
ctx.beginPath()
const x0 = map(data[1][i - 1], xmin, xmax, 0, canvas.width)
const y0 = map(data[2][i - 1], ymin, ymax, 0, canvas.height)
ctx.moveTo(x0, y0)
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()
function updateCanvasProperties() {
var ptr = window.devicePixelRatio | 1
canvas.height = plotElem.clientWidth * ptr
canvas.width = plotElem.clientWidth * ptr
}
updateCanvasProperties()
window.addEventListener("resize", updateCanvasProperties)
drawOde()
const tmax = 60
const tstep = .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()
if (!solver.y0.includes(NaN))
window.requestAnimationFrame(step)
}
window.requestAnimationFrame(step)
</script>
</html>