61 lines
2.0 KiB
HTML
61 lines
2.0 KiB
HTML
<!doctype html>
|
|
<html class="no-js" lang="">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta http-equiv="x-ua-compatible" content="ie=edge" />
|
|
<title>Untitled</title>
|
|
<meta name="description" content="" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
|
|
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/picnic" />
|
|
<!-- Place favicon.ico in the root directory -->
|
|
</head>
|
|
|
|
<script type="module">
|
|
import { load, ECGSyn } from "../dist/index.js";
|
|
await load();
|
|
const ecgsyn = new ECGSyn();
|
|
ecgsyn.rrProcess();
|
|
ecgsyn.compute();
|
|
ecgsyn.update();
|
|
|
|
const p = ecgsyn.parameters;
|
|
|
|
const width = document.getElementById("r_width");
|
|
width.value = p.attractors[2].b;
|
|
|
|
const theta = document.getElementById("p_theta");
|
|
theta.value = (p.attractors[0].theta * 180) / Math.PI;
|
|
|
|
function listener(event) {
|
|
p.attractors[0].theta = (theta.value * Math.PI) / 180;
|
|
p.attractors[2].b = width.value;
|
|
ecgsyn.compute();
|
|
ecgsyn.update();
|
|
}
|
|
|
|
for (const el of [theta, width]) {
|
|
el.addEventListener("input", listener);
|
|
}
|
|
</script>
|
|
<body>
|
|
<!--[if lt IE 8]>
|
|
<p class="browserupgrade">
|
|
You are using an <strong>outdated</strong> browser. Please
|
|
<a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.
|
|
</p>
|
|
<![endif]-->
|
|
<canvas width="1900" height="300" id="output"></canvas>
|
|
<div>
|
|
<select>
|
|
<option value="range"></option>
|
|
</select>
|
|
<div>
|
|
<input type="range" min="0" max="1" value="0" step=".01" class="slider" id="r_width" />
|
|
<input type="range" min="-180" max="180" value="0" class="slider" id="p_theta" />
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|