Increase sim size for mobile

archive/static/js/simulations/index.js

@@ -13,7 +13,7 @@ class Simulation {
             if (event.pageX > rect.right || event.pageX < rect.left || event.pageY > rect.bottom || event.pageY < rect.top) continue;
             interacting = i;
         }
-        if (interacting !== -1) simulations[interacting].mouseDown(e);
+        if (interacting !== -1) simulations[interacting].mouseDown();
     });
 });
 
@@ -22,7 +22,7 @@ class Simulation {
         if (interacting === -1) return;
         const rect = simulations[interacting].cvs.getBoundingClientRect();
         if (event.pageX > rect.right || event.pageX < rect.left || event.pageY > rect.bottom || event.pageY < rect.top) return;
-        simulations[interacting].mouseUp(e)
+        simulations[interacting].mouseUp()
         interacting = -1;
     });
 });

src/javascript/simulations/doubleSlit.js

@@ -19,8 +19,7 @@ class DoubleSlitSimulation extends Simulation {
     }
 
     resize = () => {
-        this.cvs.width = document.querySelector(".md-content").clientWidth;
-        this.cvs.height = this.cvs.width / 2;
+        super.resize();
         this.screen = new Screen(this.cvs, this.c, 0.85 * this.cvs.width, this.cvs.height / 2, this.cvs.height * 0.95);
         this.slit = new DoubleSlit(this.cvs, this.c, 0.1 * this.cvs.width, this.cvs.height / 2, this.cvs.height * 0.95,
             this.slitWidth / this.ypx2m, this.slitSeparation / this.ypx2m);

src/javascript/simulations/index.js

@@ -4,6 +4,12 @@ class Simulation {
         this.c = c;
         simulations.push(this);
     }
+
+    resize() {
+        const clientWidth = document.querySelector(".md-content").clientWidth;
+        this.cvs.width = Math.min(1000, clientWidth * 2);
+        this.cvs.height = this.cvs.width / 2;
+    }
 }
 
 ["resize", "orientationchange"].forEach(event => {
@@ -20,7 +26,7 @@ class Simulation {
             const rect = simulations[i].cvs.getBoundingClientRect();
             if (e.clientX > rect.right || e.clientX < rect.left || e.clientY > rect.bottom || e.clientY < rect.top) continue;
             interacting = i;
-            simulations[interacting].mouseDown(e, e.clientX - rect.left, e.clientY - rect.top);
+            simulations[interacting].mouseDown(e.clientX - rect.left, e.clientY - rect.top);
         }
     });
 });
@@ -30,7 +36,7 @@ class Simulation {
         if (interacting === -1) return;
         const rect = simulations[interacting].cvs.getBoundingClientRect();
         if (e.clientX > rect.right || e.clientX < rect.left || e.clientY > rect.bottom || e.clientY < rect.top) return;
-        simulations[interacting].mouseUp(e)
+        simulations[interacting].mouseUp()
         interacting = -1;
     });
 });

src/javascript/simulations/interference.js

@@ -25,8 +25,7 @@ class InterferenceSimulation extends Simulation {
     }
 
     resize = () => {
-        this.cvs.width = document.querySelector(".md-content").clientWidth;
-        this.cvs.height = this.cvs.width / 2;
+        super.resize();
         this.pointer = new Pointer(this.cvs, this.c, 0.85 * this.cvs.width + 10, this.cvs.height / 2);
         this.screen = new Screen(this.cvs, this.c, 0.85 * this.cvs.width, this.cvs.height / 2, this.cvs.height * 0.9);
 

src/javascript/simulations/nSlit.js

@@ -1,8 +1,8 @@
 import {Simulation} from "./index.js";
-import {Screen, HorizontalScreen} from "../shared/screen.js";
+import {HorizontalScreen} from "../shared/screen.js";
 import {i2h, interpolate, w2h} from "../utils/color.js";
 import {distance} from "../utils/math.js";
-import {DoubleSlit, NSlit, Slit} from "../shared/slit.js";
+import {NSlit} from "../shared/slit.js";
 
 class NSlitSimulation extends Simulation {
     constructor(cvs, c, wavelength = 500 / 1_000_000_000 , slitWidth = 5 / 1_000_000, slitSeparation = 5 / 1_000_000, slits = 3) {
@@ -20,8 +20,7 @@ class NSlitSimulation extends Simulation {
     }
 
     resize = () => {
-        this.cvs.width = document.querySelector(".md-content").clientWidth;
-        this.cvs.height = this.cvs.width / 2;
+        super.resize();
         this.screen = new HorizontalScreen(this.cvs, this.c, this.cvs.width / 2, 0.25 * this.cvs.height, this.cvs.width * 0.95);
         this.slit = new NSlit(this.cvs, this.c, this.cvs.width / 2, 0.9 * this.cvs.height, this.cvs.width * 0.95,
             this.slitWidth / this.xpx2m, this.slitSeparation / this.xpx2m, this.slits);
@@ -170,9 +169,9 @@ class NSlitSimulation extends Simulation {
         return interpolate(0, this.color, factor);
     }
 
-    mouseDown = (event) => {};
+    mouseDown = () => {};
 
-    mouseUp = (event) => {};
+    mouseUp = () => {};
 
     mouseMove = (event, x, y) => {
         this.screen.y = Math.max(Math.min(y, this.screen.maxY), this.screen.minY);

src/javascript/simulations/singleSlit.js

@@ -17,8 +17,7 @@ class SingleSlitSimulation extends Simulation {
     }
 
     resize = () => {
-        this.cvs.width = document.querySelector(".md-content").clientWidth;
-        this.cvs.height = this.cvs.width / 2;
+        super.resize();
         this.screen = new Screen(this.cvs, this.c, 0.85 * this.cvs.width, this.cvs.height / 2, this.cvs.height * 0.95);
         this.slit = new Slit(this.cvs, this.c, 0.1 * this.cvs.width, this.cvs.height / 2, this.cvs.height * 0.95, this.slitWidth / this.ypx2m);
         this.redraw = true;