Add interactable wave source

TheTrustyPwo · Mar 9, 2024 · 48ffb0b · 48ffb0b
1 parent 287455b
commit 48ffb0b
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 12 deletions.
diff --git a/static/js/shared/waves.js b/static/js/shared/waves.js
@@ -13,6 +13,7 @@ class WaveDisplay {
         this.spacing = 10;
 
         this.vectors = [];
+        this.source = new WaveSource(this);
         this.setRect(0, this.cvs.height / 2, this.cvs.width, this.cvs.height / 2);
 
         this.waveTopColor = WAVES.WAVES_TOP_COLOR;
@@ -21,6 +22,7 @@ class WaveDisplay {
 
     update = () => {
         this.vectors.forEach(v => v.draw());
+        this.source.draw();
         this.t += this.dt;
     }
 
@@ -121,4 +123,39 @@ class WaveVector {
     }
 }
 
+class WaveSource {
+    constructor(display) {
+        this.display = display;
+        this.radius = 15;
+        this.offset = 6;
+        this.amplitude = 3;
+    }
+
+    update = () => {
+        this.internal = this.offset + this.amplitude * Math.sin(this.display.t);
+    }
+
+    draw = () => {
+        this.display.c.save();
+        this.display.c.beginPath();
+        this.display.c.arc(this.display.x1, this.display.y1, this.radius, 0, 2 * Math.PI, false);
+        this.display.c.fillStyle = this.display.waveTopColor;
+        this.display.c.closePath();
+        this.display.c.fill();
+
+        this.display.c.beginPath();
+        this.display.c.arc(this.display.x1, this.display.y1, this.internal, 0, 2 * Math.PI, false);
+        this.display.c.fillStyle = this.display.waveBottomColor;
+        this.display.c.closePath();
+        this.display.c.fill();
+        this.display.c.restore();
+
+        this.update();
+    }
+
+    contains = (x, y) => {
+        return distance(x, y, this.display.x1, this.display.y1) <= this.radius;
+    }
+}
+
 export { WaveDisplay, WaveVector };
diff --git a/static/js/sim2.js b/static/js/sim2.js
@@ -23,9 +23,9 @@ const animate = () => {
     const ep = 0.01
     pathDifference.innerText = `${simulation.pathDifference.toFixed(2)}`;
     phaseDifference.innerText = `${simulation.phaseDifference.toFixed(2)}`;
-    if (Math.abs(simulation.phaseDifference) < ep || Math.abs(simulation.phaseDifference - 2) < ep) {
+    if (Math.min(Math.abs(simulation.phaseDifference % 2), 2 - Math.abs(simulation.phaseDifference % 2)) < ep) {
         interference.innerText = "Constructive Interference!";
-    } else if (Math.abs(simulation.phaseDifference - 1) < ep) {
+    } else if (Math.min(Math.abs((simulation.phaseDifference + 1) % 2), 2 - Math.abs((simulation.phaseDifference + 1) % 2)) < ep) {
         interference.innerText = "Destructive Interference!";
     } else interference.innerText = "Partial Interference"
 

diff --git a/static/js/simulations/index.js b/static/js/simulations/index.js
@@ -13,14 +13,14 @@ class Simulation {
             // lazy to code
         }
         interacting = 0;
-        simulations[interacting].mouseDown(event);
+        simulations[interacting].mouseDown(e);
     });
 });
 
 ["mouseup", "touchend"].forEach(event => {
     document.addEventListener(event, e => {
         if (interacting === -1) return;
-        simulations[interacting].mouseUp(event)
+        simulations[interacting].mouseUp(e)
         interacting = -1;
     });
 });

diff --git a/static/js/simulations/interference.js b/static/js/simulations/interference.js
@@ -20,11 +20,13 @@ class InterferenceSimulation extends Simulation {
 
         this.wave1.setRect(100, 0.3 * cvs.height, this.pointer.x - 20, this.pointer.y);
         this.wave2.setRect(100, 0.7 * cvs.height, this.pointer.x - 20, this.pointer.y);
+
+        this.adjustingSource = 0;
     }
 
     update = () => {
-        this.wave1.setRect(100, 0.3 * this.cvs.height, this.pointer.x - 20, this.pointer.y);
-        this.wave2.setRect(100, 0.7 * this.cvs.height, this.pointer.x - 20, this.pointer.y);
+        this.wave1.setRect(this.wave1.x1, this.wave1.y1, this.pointer.x - 20, this.pointer.y);
+        this.wave2.setRect(this.wave2.x1, this.wave2.y1, this.pointer.x - 20, this.pointer.y);
         this.wave1.update();
         this.wave2.update();
         this.wave1.drawWavelength(1);
@@ -54,15 +56,26 @@ class InterferenceSimulation extends Simulation {
         return 2 * this.pathDifference;
     }
 
-    mouseDown = (event) => {};
+    mouseDown = (event) => {
+        if (this.wave1.source.contains(event.pageX, event.pageY)) this.adjustingSource = 1;
+        else if (this.wave2.source.contains(event.pageX, event.pageY)) this.adjustingSource = 2;
+        else this.adjustingSource = 0;
+    };
 
-    mouseUp = (event) => {};
+    mouseUp = (event) => {
+        this.adjustingSource = 0;
+    };
 
     mouseMove = (event, x, y) => {
-        event.preventDefault();
-        this.pointer.y = Math.max(Math.min(y, this.pointer.maxY), this.pointer.minY);
-        this.pointer.x = Math.max(Math.min(x, this.screen.maxX) + 10, this.screen.minX + 10);
-        this.screen.x = Math.max(Math.min(x, this.screen.maxX), this.screen.minX);
+        if (this.adjustingSource === 0) {
+            this.pointer.y = Math.max(Math.min(y, this.pointer.maxY), this.pointer.minY);
+            this.pointer.x = Math.max(Math.min(x, this.screen.maxX) + 10, this.screen.minX + 10);
+            this.screen.x = Math.max(Math.min(x, this.screen.maxX), this.screen.minX);
+        } else {
+            const wave = (this.adjustingSource === 1 ? this.wave1 : this.wave2);
+            wave.x1 = Math.max(Math.min(x, 0.3 * this.cvs.width), 100);
+            wave.y1 = Math.max(Math.min(y, 0.9 * this.cvs.height), 0.1 * this.cvs.height);
+        }
     }
 }