2023-05-20 00:34:08 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<title>cxgraph</title>
|
|
|
|
|
<link rel="stylesheet" href="style.css">
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div id="main">
|
|
|
|
|
<div id="header">
|
|
|
|
|
<h1>CXGraph</h1>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="content">
|
|
|
|
|
<div id="sidebar" class="split left">
|
|
|
|
|
<textarea id="srcinput"></textarea>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="canvas_container" class="split right">
|
2023-05-31 01:46:04 +00:00
|
|
|
<!-- canvas -->
|
2023-05-20 00:34:08 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<script type="module">
|
|
|
|
|
import init, * as cxgraph from "./pkg/cxgraph.js";
|
|
|
|
|
await init();
|
|
|
|
|
canvas.style.width = "100%";
|
|
|
|
|
canvas.style.height = "100%";
|
2023-05-31 01:46:04 +00:00
|
|
|
await cxgraph.load_shader("f(z) = z^8 + 15z^4 - 16\nfp(z) = 8z^7 + 60z^3\nn(z) = z - f(z)/fp(z)\nni: iter n, 60\nplot(z) = f(z)");
|
|
|
|
|
await cxgraph.redraw();
|
|
|
|
|
let canvas = document.getElementsByTagName("canvas")[0];
|
2023-05-20 00:34:08 +00:00
|
|
|
|
|
|
|
|
new ResizeObserver(async () => {
|
2023-05-31 01:46:04 +00:00
|
|
|
let width = canvas.clientWidth;
|
|
|
|
|
let height = canvas.clientHeight;
|
|
|
|
|
await cxgraph.resize(width*2, height*2);
|
|
|
|
|
await cxgraph.set_bounds(-5*width/height, -5, 5*width/height, 5);
|
|
|
|
|
await cxgraph.redraw();
|
2023-05-20 00:34:08 +00:00
|
|
|
}).observe(canvas);
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
