mulimoen
/
SummationByParts
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add grid options

This commit is contained in:
Magnus Ulimoen 2020-05-24 23:31:33 +02:00
parent cd72ce3477
commit 4c40acbb1f
3 changed files with 134 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
webfront/misc/index.html
View File

@ -10,8 +10,9 @@
<script async type="module" src="main.js"></script> <script async type="module" src="main.js"></script>
</head> </head>
<body> <body>
<div class="canvas">
<canvas id="glCanvas"></canvas> <canvas id="glCanvas"></canvas>
</body> </div>
<div class="vertical-menu" id="menu"> <div class="vertical-menu" id="menu">
<div class="menu-item"> <div class="menu-item">
<p class="menu-header">Choose an equation set</p> <p class="menu-header">Choose an equation set</p>
@ -25,14 +26,28 @@
</p> </p>
</div> </div>
<div class="grid menu-item"> <div class="grid menu-item">
<p class="menu-header">Grid settings:</p> <p class="menu-header">Grid</p>
x: x0, yn, n<br/> <div class="horizontal-flex">
y: y0, yn, n<br/> x:
<label for="x0">x0:</label><input type="number" name="x0" id="x0" step="any" placeholder="0.0" value="0.0">
Curvilinear? Diamond shaped domain? <label for="xn">xn:</label><input type="number" name="xn" id="xn" step="any" placeholder="1.0" value="1.0">
<label for="xN">N:</label><input type="number" name="xN" id="xN" placeholder="25" value="25" min="2">
</div>
<div class="horizontal-flex">
y:
<label for="y0">y0:</label><input type="number" name="y0" id="y0" step="any" placeholder="0.0" value="0.0">
<label for="yn">yn:</label><input type="number" name="yn" id="yn" step="any" placeholder="1.0" value="1.0">
<label for="yN">N:</label><input type="number" name="yN" id="yN" placeholder="25" value="25" min="2">
</div>
<div>
<label for="diamond">Tilt grid </label><input type="checkbox" name="diamond" id="diamond">
</div>
<!--
Curvilinear? Inputting some random json?
-->
</div> </div>
<div class="gen_set menu-item"> <div class="gen_set menu-item">
<p class="menu-header">General settings</p> <p class="menu-header">Settings</p>
</div> </div>
<div class="about menu-item"> <div class="about menu-item">
<p class="menu-header">About</p> <p class="menu-header">About</p>
@ -44,4 +59,5 @@
<button title="Play/pause" class="control-item" id="toggle-playing">▶️/⏸️</button> <button title="Play/pause" class="control-item" id="toggle-playing">▶️/⏸️</button>
<button title="Reset" class="control-item" id="reset">🔄️</button> <button title="Reset" class="control-item" id="reset">🔄️</button>
</div> </div>
</body>
</html> </html>

103
webfront/misc/main.js
View File

@ -1,3 +1,6 @@
import { default as init, set_panic_hook as setPanicHook,
MaxwellUniverse, EulerUniverse, ShallowWaterUniverse } from "./sbp_web.js";
function compile_and_link(ctx, vsource, fsource) { function compile_and_link(ctx, vsource, fsource) {
const program = ctx.createProgram(); const program = ctx.createProgram();
const vsShader = ctx.createShader(ctx.VERTEX_SHADER); const vsShader = ctx.createShader(ctx.VERTEX_SHADER);
@ -139,6 +142,8 @@ class LineDrawer {
} }
(async function run() { (async function run() {
const wasm = await init("./sbp_web_bg.wasm");
setPanicHook();
const canvas = document.getElementById("glCanvas"); const canvas = document.getElementById("glCanvas");
const gl = canvas.getContext("webgl"); const gl = canvas.getContext("webgl");
@ -149,26 +154,10 @@ class LineDrawer {
console.info("Successfully opened webgl canvas"); console.info("Successfully opened webgl canvas");
const width = 23; let x;
const height = 21; let y;
let width;
const x = new Float32Array(width * height); let height;
const y = new Float32Array(width * height);
for (let j = 0; j < height; j += 1) {
for (let i = 0; i < width; i += 1) {
const n = width*j + i;
x[n] = i / (width - 1.0);
y[n] = j / (height - 1.0);
}
}
const bbox = [+Number(Infinity), -Number(Infinity), +Number(Infinity), -Number(Infinity)];
for (let i = 0; i < width*height; i += 1) {
bbox[0] = Math.min(bbox[0], x[i]);
bbox[1] = Math.max(bbox[1], x[i]);
bbox[2] = Math.min(bbox[2], y[i]);
bbox[3] = Math.max(bbox[3], y[i]);
}
// A nice pink to show missing values // A nice pink to show missing values
gl.clearColor(1.0, 0.753, 0.796, 1.0); gl.clearColor(1.0, 0.753, 0.796, 1.0);
@ -180,22 +169,64 @@ class LineDrawer {
const xBuffer = gl.createBuffer(); const xBuffer = gl.createBuffer();
const yBuffer = gl.createBuffer(); const yBuffer = gl.createBuffer();
const lineDrawer = new LineDrawer(gl);
function setup() {
width = parseInt(document.getElementById("xN").value);
height = parseInt(document.getElementById("yN").value);
const x0 = parseFloat(document.getElementById("x0").value);
const xn = parseFloat(document.getElementById("xn").value);
const y0 = parseFloat(document.getElementById("y0").value);
const yn = parseFloat(document.getElementById("yn").value);
const diamond = document.getElementById("diamond").checked;
console.log(diamond);
x = new Float32Array(width * height);
y = new Float32Array(width * height);
const dx = (xn - x0) / (width - 1)
const dy = (yn - y0) / (height - 1)
for (let j = 0; j < height; j += 1) {
for (let i = 0; i < width; i += 1) {
const n = width*j + i;
x[n] = dx*i;
y[n] = dy*j;
if (diamond) {
const xn = x[n];
const yn = y[n];
x[n] = xn - yn;
y[n] = xn + yn;
}
}
}
const bbox = [+Number(Infinity), -Number(Infinity), +Number(Infinity), -Number(Infinity)];
for (let i = 0; i < width*height; i += 1) {
bbox[0] = Math.min(bbox[0], x[i]);
bbox[1] = Math.max(bbox[1], x[i]);
bbox[2] = Math.min(bbox[2], y[i]);
bbox[3] = Math.max(bbox[3], y[i]);
}
gl.bindBuffer(gl.ARRAY_BUFFER, xBuffer); gl.bindBuffer(gl.ARRAY_BUFFER, xBuffer);
gl.bufferData(gl.ARRAY_BUFFER, x, gl.STATIC_DRAW); gl.bufferData(gl.ARRAY_BUFFER, x, gl.STATIC_DRAW);
gl.bindBuffer(gl.ARRAY_BUFFER, yBuffer); gl.bindBuffer(gl.ARRAY_BUFFER, yBuffer);
gl.bufferData(gl.ARRAY_BUFFER, y, gl.STATIC_DRAW); gl.bufferData(gl.ARRAY_BUFFER, y, gl.STATIC_DRAW);
const lineDrawer = new LineDrawer(gl);
lineDrawer.set_xy(width, height, xBuffer, yBuffer, bbox); lineDrawer.set_xy(width, height, xBuffer, yBuffer, bbox);
}
function draw() {
function drawMe() {
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
lineDrawer.draw(); lineDrawer.draw();
}
window.requestAnimationFrame(drawMe); function drawMe() {
draw();
animation = window.requestAnimationFrame(drawMe);
} }
function resizeCanvas() { function resizeCanvas() {
@ -208,7 +239,8 @@ class LineDrawer {
resizeCanvas(); resizeCanvas();
window.addEventListener("resize", resizeCanvas, false); window.addEventListener("resize", resizeCanvas, false);
window.requestAnimationFrame(drawMe);
// window.requestAnimationFrame(drawMe);
const menu = document.getElementById("menu"); const menu = document.getElementById("menu");
const menu_toggle = document.getElementById("toggle-menu"); const menu_toggle = document.getElementById("toggle-menu");
@ -225,6 +257,27 @@ class LineDrawer {
console.log("equation changed, wants: ", e.target.value); console.log("equation changed, wants: ", e.target.value);
}); });
let animation = null;
let is_setup = false;
const play_button = document.getElementById("toggle-playing"); const play_button = document.getElementById("toggle-playing");
play_button.addEventListener("click", (_e) => {
console.log("play/pause pressed");
if (!animation) {
if (!is_setup) {
setup();
}
animation = window.requestAnimationFrame(drawMe);
} else {
window.cancelAnimationFrame(animation);
animation = null;
}
});
const reset_button = document.getElementById("reset"); const reset_button = document.getElementById("reset");
reset_button.addEventListener("click", (_e) => {
window.cancelAnimationFrame(animation);
animation = null;
is_setup = false;
setup();
draw();
});
}()); }());

3
webfront/misc/style.css
View File

@ -1,9 +1,10 @@
* { margin: 0; padding: 0; overflow: hidden; } * { margin: 0; padding: 0; overflow: hidden; }
html, body { width:100%; height:100%; } html, body { width:100%; height:100%; }
canvas { display:block; position: fixed; z-index: 1; } .canvas { display:block; position: fixed; z-index: -1; width: 100%; height: 100%; }
select#eq-set { width: 100%; } select#eq-set { width: 100%; }
.vertical-menu { position: fixed; width: 30%; min-width: 200px; top: 0; bottom: 30px; z-index: 2; background-color: #eee; display: flex; flex-direction: column; justify-content: space-between; padding: 0.5em; overflow-y: auto; } .vertical-menu { position: fixed; width: 30%; min-width: 200px; top: 0; bottom: 30px; z-index: 2; background-color: #eee; display: flex; flex-direction: column; justify-content: space-between; padding: 0.5em; overflow-y: auto; }
.menu-header { font-weight: bold; } .menu-header { font-weight: bold; }
.controls { position: relative; z-index: 3; top: calc(100% - 30px); height: 30px; display: flex; align-items: center; width: 175px; justify-content: space-around; opacity: 0.5; } .controls { position: relative; z-index: 3; top: calc(100% - 30px); height: 30px; display: flex; align-items: center; width: 175px; justify-content: space-around; opacity: 0.5; }
.controls:hover { opacity: 1.0; } .controls:hover { opacity: 1.0; }
.menu-item { flex-shrink: 0; } .menu-item { flex-shrink: 0; }
.horizontal-flex { display: flex; flex-direction: row; align-items: center; justify-content: space-between; }