Various updates

TheTrustyPwo · Mar 8, 2024 · 3e5237c · 3e5237c
1 parent 80d96a9
commit 3e5237c
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 14 deletions.
diff --git a/sim2.html b/sim2.html
@@ -3,20 +3,30 @@
 <head>
     <meta charset="UTF-8">
     <title>Sim 2 - Interference</title>
-
+    <style>
+        canvas {
+            background-color: black;
+        }
+    </style>
 </head>
 <body>
 <canvas width="1000px" height="500px"></canvas>
 
 <div class="frequency">
-    <input type="range" min="0.05" max="1" step="0.05" value="0.5" class="slider" id="frequencyInput">
-    Frequency: <span id="frequencyValue">0.05</span>
+    <input type="range" min="0.2" max="1" step="0.1" value="1" class="slider" id="frequencyInput">
+    Frequency: <span id="frequencyValue">1.0</span> Hz
 </div>
 <div class="amplitude">
-    <input type="range" min="0.1" max="1" step="0.1" value="0.2" class="slider" id="amplitudeInput">
-    Amplitude: <span class="amplitudeValue">0.2</span>
+    <input type="range" min="0.1" max="0.3" step="0.05" value="0.2" class="slider" id="amplitudeInput">
+    Amplitude: <span id="amplitudeValue">0.2</span>
 </div>
 
+Path Difference = <span id="pathDifference">0</span>λ
+<br>
+Phase Difference Δϕ = <span id="phaseDifference">0</span>π
+<br>
+<span id="interference">Constructive Interference!</span>
+
 <script type="module" src="static/js/sim2.js"></script>
 </body>
 </html>
diff --git a/static/js/shared/pointer.js b/static/js/shared/pointer.js
@@ -9,6 +9,8 @@ class Pointer {
         this.length = 40;
         this.minY = this.length;
         this.maxY = cvs.height - this.length;
+
+        this.onMove = () => {};
     }
 
     draw = () => {
@@ -49,6 +51,7 @@ document.addEventListener("mousemove", e => {
     if (dragging === -1) return;
     const pointer = pointers[dragging];
     pointer.y = Math.max(Math.min(pointer.y + e.movementY, pointer.maxY), pointer.minY);
+    pointer.onMove();
 });
 
 export { Pointer, createPointer };
diff --git a/static/js/sim2.js b/static/js/sim2.js
@@ -1,31 +1,58 @@
 import { WaveDisplay } from "./shared/waves.js";
 import { Pointer, createPointer } from "./shared/pointer.js";
 
+const fps = 60;
+
 const cvs = document.querySelector('canvas');
 const c = cvs.getContext('2d');
 const frequencyInput = document.getElementById("frequencyInput");
 const amplitudeInput = document.getElementById("amplitudeInput");
+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.3 * cvs.height, cvs.width - 100, 0.5 * cvs.height);
-s1.frequency = 0.5;
+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 s2 = new WaveDisplay(cvs, c);
-s2.setRect(100, 0.7 * cvs.height, cvs.width - 100, 0.5 * cvs.height);
-s2.frequency = 0.5;
+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);
 
-const pointer = new Pointer(cvs, c, cvs.width - 80, 0.5 * cvs.height);
 createPointer(pointer);
 const animate = () => {
-    requestAnimationFrame(animate)
     c.clearRect(0, 0, cvs.width, cvs.height);
     s1.update();
     s2.update();
-    s1.setRect(100, 0.3 * cvs.height, pointer.x - 30, pointer.y);
-    s2.setRect(100, 0.7 * cvs.height, pointer.x - 30, pointer.y);
+    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();
+
+    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) {
+        interference.innerText = "Constructive Interference!";
+    } else if (Math.abs(phaseDiff - 1) < ep) {
+        interference.innerText = "Destructive Interference!";
+    } else interference.innerText = "Partial Interference"
+
+    setTimeout(() => {
+        requestAnimationFrame(animate);
+    }, 1000 / fps);
+
 }
 
 frequencyInput.oninput = () => {
@@ -35,7 +62,7 @@ frequencyInput.oninput = () => {
 }
 
 amplitudeInput.oninput = () => {
-    document.getElementById("amplitudeInput").innerText = amplitudeInput.value;
+    document.getElementById("amplitudeValue").innerText = amplitudeInput.value;
     s1.amplitude = amplitudeInput.value;
     s2.amplitude = amplitudeInput.value;
 }