Create interference simulation class

static/js/shared/constants.js

@@ -8,7 +8,12 @@ const WAVES  = {
 };
 
 const POINTERS = {
-    POINTER_DEFAULT_COLOR: "#179e7e"
+    POINTER_COLOR: "#179e7e"
 }
 
-export { WAVES };
+const SCREENS = {
+    SCREEN_COLOR: "#ffffff",
+    SCREEN_WIDTH: 5
+}
+
+export { WAVES, POINTERS, SCREENS };

static/js/sim2.js

@@ -1,5 +1,4 @@
-import { WaveDisplay } from "./shared/waves.js";
-import { Pointer, createPointer } from "./shared/pointer.js";
+import { InterferenceSimulation } from "./simulations/interference.js";
 
 const fps = 60;
 
@@ -11,41 +10,22 @@ const pathDifference = document.getElementById("pathDifference");
 const phaseDifference = document.getElementById("phaseDifference");
 const interference = document.getElementById("interference");
 
-const s1 = new WaveDisplay(cvs, c);
-s1.setRect(100, 0.1 * cvs.height, cvs.width - 200, 0.5 * cvs.height);
-s1.frequency = 1.0;
-s1.amplitude = 0.2
-s1.waveTopColor = "#e1503c";
-s1.waveBottomColor = "#ea887b";
+const simulation = new InterferenceSimulation(cvs, c, frequencyInput.value, amplitudeInput.value);
+simulation.wave1.waveTopColor = "#e1503c";
+simulation.wave1.waveBottomColor = "#ea887b";
+simulation.wave2.waveTopColor = "#eea71f";
+simulation.wave2.waveBottomColor = "#f4c671";
 
-const s2 = new WaveDisplay(cvs, c);
-s2.setRect(100, 0.9 * cvs.height, cvs.width - 200, 0.5 * cvs.height);
-s2.frequency = 1.0;
-s2.amplitude = 0.2;
-s2.waveTopColor = "#eea71f";
-s2.waveBottomColor = "#f4c671";
-
-const pointer = new Pointer(cvs, c, cvs.width - 180, 0.5 * cvs.height);
-
-createPointer(pointer);
 const animate = () => {
     c.clearRect(0, 0, cvs.width, cvs.height);
-    s1.update();
-    s2.update();
-    s1.setRect(100, 0.3 * cvs.height, pointer.x - 20, pointer.y);
-    s2.setRect(100, 0.7 * cvs.height, pointer.x - 20, pointer.y);
-    s1.drawWavelength(1);
-    s2.drawWavelength(0);
-    pointer.draw();
+    simulation.update();
 
-    const pathDiff = Math.abs(s1.distance / s1.wavelength - s2.distance / s2.wavelength)
-    const phaseDiff = 2 * pathDiff;
     const ep = 0.01
-    pathDifference.innerText = `${pathDiff.toFixed(2)}`;
-    phaseDifference.innerText = `${phaseDiff.toFixed(2)}`;
-    if (Math.abs(phaseDiff) < ep || Math.abs(phaseDiff - 2) < ep) {
+    pathDifference.innerText = `${simulation.pathDifference.toFixed(2)}`;
+    phaseDifference.innerText = `${simulation.phaseDifference.toFixed(2)}`;
+    if (Math.abs(simulation.phaseDifference) < ep || Math.abs(simulation.phaseDifference - 2) < ep) {
         interference.innerText = "Constructive Interference!";
-    } else if (Math.abs(phaseDiff - 1) < ep) {
+    } else if (Math.abs(simulation.phaseDifference - 1) < ep) {
         interference.innerText = "Destructive Interference!";
     } else interference.innerText = "Partial Interference"
 
@@ -57,14 +37,12 @@ const animate = () => {
 
 frequencyInput.oninput = () => {
     document.getElementById("frequencyValue").innerText = frequencyInput.value;
-    s1.frequency = frequencyInput.value;
-    s2.frequency = frequencyInput.value;
+    simulation.setFrequency(frequencyInput.value);
 }
 
 amplitudeInput.oninput = () => {
     document.getElementById("amplitudeValue").innerText = amplitudeInput.value;
-    s1.amplitude = amplitudeInput.value;
-    s2.amplitude = amplitudeInput.value;
+    simulation.setAmplitude(amplitudeInput.value);
 }
 
 animate();

static/js/simulations/interference.js

@@ -0,0 +1,69 @@
+import { Simulation } from "./index.js";
+import { WaveDisplay } from "../shared/waves.js";
+import { Pointer } from "../shared/pointer.js";
+import { Screen } from "../shared/screen.js";
+
+// Double Source Interference Simulation
+class InterferenceSimulation extends Simulation {
+    constructor(cvs, c, frequency = 1.0, amplitude = 0.2) {
+        super(cvs, c);
+        this.frequency = frequency;
+        this.amplitude = amplitude;
+
+        this.wave1 = new WaveDisplay(cvs, c);
+        this.wave2 = new WaveDisplay(cvs, c);
+        this.setFrequency(frequency);
+        this.setAmplitude(amplitude);
+
+        this.pointer = new Pointer(cvs, c, cvs.width - 50, cvs.height / 2);
+        this.screen = new Screen(cvs, c, cvs.width - 60, cvs.height / 2, cvs.height - 50);
+
+        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);
+    }
+
+    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.update();
+        this.wave2.update();
+        this.wave1.drawWavelength(1);
+        this.wave2.drawWavelength(0);
+
+        this.pointer.draw();
+        this.screen.draw();
+    }
+
+    setFrequency = (freq) => {
+        this.frequency = freq;
+        this.wave1.frequency = freq;
+        this.wave2.frequency = freq;
+    }
+
+    setAmplitude = (amplitude) => {
+        this.amplitude = amplitude;
+        this.wave1.amplitude = amplitude;
+        this.wave2.amplitude = amplitude;
+    }
+
+    get pathDifference() {
+        return Math.abs(this.wave1.distance - this.wave2.distance) / this.wave1.wavelength;
+    }
+
+    get phaseDifference() {
+        return 2 * this.pathDifference;
+    }
+
+    mouseDown = (event) => {};
+
+    mouseUp = (event) => {};
+
+    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);
+    }
+}
+
+export { InterferenceSimulation };