From 06c9ba3d6a20f98a1410a19192847fc3c9138b56 Mon Sep 17 00:00:00 2001 From: TheTrustyPwo Date: Fri, 16 Aug 2024 16:08:24 +0800 Subject: [PATCH] Increase sim size for mobile --- archive/static/js/simulations/index.js | 4 ++-- src/javascript/simulations/doubleSlit.js | 3 +-- src/javascript/simulations/index.js | 10 ++++++++-- src/javascript/simulations/interference.js | 3 +-- src/javascript/simulations/nSlit.js | 11 +++++------ src/javascript/simulations/singleSlit.js | 3 +-- 6 files changed, 18 insertions(+), 16 deletions(-) diff --git a/archive/static/js/simulations/index.js b/archive/static/js/simulations/index.js index 42120a3..08864a3 100644 --- a/archive/static/js/simulations/index.js +++ b/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; }); }); diff --git a/src/javascript/simulations/doubleSlit.js b/src/javascript/simulations/doubleSlit.js index 62cae4e..a12e317 100644 --- a/src/javascript/simulations/doubleSlit.js +++ b/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); diff --git a/src/javascript/simulations/index.js b/src/javascript/simulations/index.js index e874e6b..a7e20bd 100644 --- a/src/javascript/simulations/index.js +++ b/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; }); }); diff --git a/src/javascript/simulations/interference.js b/src/javascript/simulations/interference.js index 2bcd850..ec16d2d 100644 --- a/src/javascript/simulations/interference.js +++ b/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); diff --git a/src/javascript/simulations/nSlit.js b/src/javascript/simulations/nSlit.js index 7a31ccc..bf9cb80 100644 --- a/src/javascript/simulations/nSlit.js +++ b/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); diff --git a/src/javascript/simulations/singleSlit.js b/src/javascript/simulations/singleSlit.js index dc64b11..66d55a8 100644 --- a/src/javascript/simulations/singleSlit.js +++ b/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;