add grid options
This commit is contained in:
Magnus Ulimoen
parent
cd72ce3477
commit
4c40acbb1f
|
|
@ -10,38 +10,54 @@
|
||||||
<script async type="module" src="main.js"></script>
|
<script async type="module" src="main.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<canvas id="glCanvas"></canvas>
|
<div class="canvas">
|
||||||
|
<canvas id="glCanvas"></canvas>
|
||||||
|
</div>
|
||||||
|
<div class="vertical-menu" id="menu">
|
||||||
|
<div class="menu-item">
|
||||||
|
<p class="menu-header">Choose an equation set</p>
|
||||||
|
<select id="eq-set" name="eq-set">
|
||||||
|
<option value="euler"/> Euler</option>
|
||||||
|
<option value="maxwell"/> Maxwell</option>
|
||||||
|
<option value="shallow"/> Shallow Water</option>
|
||||||
|
</select>
|
||||||
|
<p>
|
||||||
|
And here will be specific content for the solver in question
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="grid menu-item">
|
||||||
|
<p class="menu-header">Grid</p>
|
||||||
|
<div class="horizontal-flex">
|
||||||
|
x:
|
||||||
|
<label for="x0">x0:</label><input type="number" name="x0" id="x0" step="any" placeholder="0.0" value="0.0">
|
||||||
|
<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 class="gen_set menu-item">
|
||||||
|
<p class="menu-header">Settings</p>
|
||||||
|
</div>
|
||||||
|
<div class="about menu-item">
|
||||||
|
<p class="menu-header">About</p>
|
||||||
|
<p>More information can be found along with the <a href="https://ulimoen.dev/git/mulimoen/SBPonWEB">source code</a>.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="controls">
|
||||||
|
<button title="Menu" class="control-item" id="toggle-menu" type="button">☰</button>
|
||||||
|
<button title="Play/pause" class="control-item" id="toggle-playing">▶️/⏸️</button>
|
||||||
|
<button title="Reset" class="control-item" id="reset">🔄️</button>
|
||||||
|
</div>
|
||||||
</body>
|
</body>
|
||||||
<div class="vertical-menu" id="menu">
|
|
||||||
<div class="menu-item">
|
|
||||||
<p class="menu-header">Choose an equation set</p>
|
|
||||||
<select id="eq-set" name="eq-set">
|
|
||||||
<option value="euler"/> Euler</option>
|
|
||||||
<option value="maxwell"/> Maxwell</option>
|
|
||||||
<option value="shallow"/> Shallow Water</option>
|
|
||||||
</select>
|
|
||||||
<p>
|
|
||||||
And here will be specific content for the solver in question
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="grid menu-item">
|
|
||||||
<p class="menu-header">Grid settings:</p>
|
|
||||||
x: x0, yn, n<br/>
|
|
||||||
y: y0, yn, n<br/>
|
|
||||||
|
|
||||||
Curvilinear? Diamond shaped domain?
|
|
||||||
</div>
|
|
||||||
<div class="gen_set menu-item">
|
|
||||||
<p class="menu-header">General settings</p>
|
|
||||||
</div>
|
|
||||||
<div class="about menu-item">
|
|
||||||
<p class="menu-header">About</p>
|
|
||||||
<p>More information can be found along with the <a href="https://ulimoen.dev/git/mulimoen/SBPonWEB">source code</a>.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="controls">
|
|
||||||
<button title="Menu" class="control-item" id="toggle-menu" type="button">☰</button>
|
|
||||||
<button title="Play/pause" class="control-item" id="toggle-playing">▶️/⏸️</button>
|
|
||||||
<button title="Reset" class="control-item" id="reset">🔄️</button>
|
|
||||||
</div>
|
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -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();
|
||||||
|
|
||||||
gl.bindBuffer(gl.ARRAY_BUFFER, xBuffer);
|
|
||||||
gl.bufferData(gl.ARRAY_BUFFER, x, gl.STATIC_DRAW);
|
|
||||||
gl.bindBuffer(gl.ARRAY_BUFFER, yBuffer);
|
|
||||||
gl.bufferData(gl.ARRAY_BUFFER, y, gl.STATIC_DRAW);
|
|
||||||
|
|
||||||
const lineDrawer = new LineDrawer(gl);
|
const lineDrawer = new LineDrawer(gl);
|
||||||
lineDrawer.set_xy(width, height, xBuffer, yBuffer, bbox);
|
|
||||||
|
|
||||||
|
function setup() {
|
||||||
|
width = parseInt(document.getElementById("xN").value);
|
||||||
|
height = parseInt(document.getElementById("yN").value);
|
||||||
|
|
||||||
function drawMe() {
|
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.bufferData(gl.ARRAY_BUFFER, x, gl.STATIC_DRAW);
|
||||||
|
gl.bindBuffer(gl.ARRAY_BUFFER, yBuffer);
|
||||||
|
gl.bufferData(gl.ARRAY_BUFFER, y, gl.STATIC_DRAW);
|
||||||
|
|
||||||
|
lineDrawer.set_xy(width, height, xBuffer, yBuffer, bbox);
|
||||||
|
}
|
||||||
|
|
||||||
|
function draw() {
|
||||||
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();
|
||||||
|
});
|
||||||
}());
|
}());
|
||||||
|
|
|
||||||
|
|
@ -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; }
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue