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

simplify width/height

This commit is contained in:
Magnus Ulimoen 2020-05-27 22:19:44 +02:00
parent 2989acfcce
commit e1ed7ca083
3 changed files with 33 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
webfront/pages/index.html
View File

@ -10,9 +10,7 @@
<script async type="module" src="main.js"></script>
</head>
<body>
<div class="canvas">
<canvas id="glCanvas"></canvas>
</div>
<canvas id="glCanvas"></canvas>
<div class="vertical-menu" id="menu">
<div class="menu-item">
<p class="menu-header">Choose an equation set</p>

45
webfront/pages/main.js
View File

@ -141,6 +141,15 @@ class LineDrawer {
}
}
class FieldDrawer {
constructor(ctx) {
this.ctx = ctx;
this.fbuffer = ctx.createBuffer();
//link_and_bind_program(.., ..);
}
}
(async function run() {
const eq_sel = document.getElementById("eq-set");
display_eqset(eq_sel.value);
@ -173,6 +182,7 @@ class LineDrawer {
const xBuffer = gl.createBuffer();
const yBuffer = gl.createBuffer();
const lineDrawer = new LineDrawer(gl);
let universe;
function setup() {
width = parseInt(document.getElementById("xN").value);
@ -184,7 +194,6 @@ class LineDrawer {
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);
@ -206,6 +215,22 @@ class LineDrawer {
}
}
const eq_set = eq_sel.value;
switch (eq_set) {
case "maxwell":
universe = new MaxwellUniverse(height, width, x, y);
break;
case "euler":
universe = new EulerUniverse();
break;
case "shallow":
universe = new ShallowWaterUniverse();
break;
default:
console.error(`Unknown case ${eq_set}`);
return null;
}
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]);
@ -228,21 +253,15 @@ class LineDrawer {
}
function drawMe() {
const w = canvas.clientWidth;
const h = canvas.clientHeight;
canvas.width = w;
canvas.height = h;
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
draw();
animation = window.requestAnimationFrame(drawMe);
}
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
}
resizeCanvas();
window.addEventListener("resize", resizeCanvas, false);
const menu = document.getElementById("menu");
const menu_toggle = document.getElementById("toggle-menu");
menu_toggle.addEventListener("click", () => {
@ -254,7 +273,6 @@ class LineDrawer {
});
eq_sel.addEventListener("change", (e) => {
console.log("equation changed, wants: ", e.target.value);
display_eqset(eq_sel.value);
});
function display_eqset(value) {
@ -279,7 +297,6 @@ class LineDrawer {
let is_setup = false;
const play_button = document.getElementById("toggle-playing");
play_button.addEventListener("click", (_e) => {
console.log("play/pause pressed");
if (!animation) {
if (!is_setup) {
setup();

2
webfront/pages/style.css
View File

@ -1,6 +1,6 @@
* { margin: 0; padding: 0; overflow: hidden; }
html, body { width:100%; height:100%; }
.canvas { display:block; position: fixed; z-index: -1; width: 100%; height: 100%; }
canvas { display:block; position: fixed; z-index: -1; width: 100vw; height: 100vh; }
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; }
.menu-header { font-weight: bold; }