Prepare Sim 3

TheTrustyPwo · Mar 14, 2024 · d8ef8ac · d8ef8ac
1 parent 6b67811
commit d8ef8ac
Show file tree

Hide file tree

Showing 6 changed files with 132 additions and 12 deletions.
diff --git a/index.html b/index.html
@@ -2,9 +2,11 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>Title</title>
+    <title>Superposition</title>
 </head>
 <body>
-
+    <a href="sim.html">Simulation 1 - Basic Wave</a> <br>
+    <a href="sim2.html">Simulation 2 - Interference</a> <br>
+    <a href="sim3.html">Simulation 3 - Wavefront Interference</a>
 </body>
 </html>
diff --git a/sim3.html b/sim3.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Sim 3 - Interference Wavefront</title>
+    <style>
+        canvas {
+            background-color: black;
+        }
+    </style>
+</head>
+<body>
+<canvas width="1000px" height="500px"></canvas>
+
+<div class="frequency">
+    <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="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/sim3.js"></script>
+</body>
+</html>
diff --git a/static/js/shared/waves.js b/static/js/shared/waves.js
@@ -1,15 +1,15 @@
 import { distance } from "../utils/math.js";
 import { WAVES } from "./constants.js";
 
-class WaveDisplay {
+class WaveVectorDisplay {
     constructor (cvs, c) {
         this.cvs = cvs;
         this.c = c;
 
         this.t = 0;
         this.dt = 1 / 15
-        this.frequency = 10;
-        this.amplitude = 0.5;
+        this.frequency = 1.0;
+        this.amplitude = 0.2;
         this.spacing = 10;
 
         this.vectors = [];
@@ -47,7 +47,6 @@ class WaveDisplay {
     }
 
     drawWavelength = (direction) => {
-
         let y1, y2, dist = distance(this.x1, this.y1, this.x2, this.y2);
         if (direction) {
             // On top
@@ -123,6 +122,58 @@ class WaveVector {
     }
 }
 
+class WaveFrontDisplay {
+    constructor(cvs, c) {
+        this.cvs = cvs;
+        this.c = c;
+
+        this.t = 0;
+        this.dt = 1 / 15
+        this.frequency = 1.0;
+
+        this.wavefronts = [];
+        this.source = new WaveSource(this);
+        this.setRect(0, this.cvs.height / 2, this.cvs.width, this.cvs.height / 2);
+
+        this.wavefronts.push(new WaveFront(this, 1));
+    }
+
+    setRect = (x1, y1, x2, y2) => {
+        this.x1 = x1;
+        this.y1 = y1;
+        this.x2 = x2;
+        this.y2 = y2;
+    }
+
+    update = () => {
+        this.wavefronts.forEach(v => v.draw());
+        this.t += this.dt;
+    }
+}
+
+class WaveFront {
+    constructor(display, id) {
+        this.display = display;
+        this.id = id;
+
+        this.x = this.display.x1 + 100 * this.id / this.display.frequency;
+    }
+
+    draw = () => {
+        this.display.c.beginPath();
+        this.display.c.arc(this.display.x1, this.display.y1, this.x - this.display.x1, -Math.PI / 2, Math.PI / 2, false);
+        this.display.c.closePath();
+        this.display.c.strokeStyle = "#ffffff"
+        this.display.c.stroke();
+        console.log(this.display.x1, this.display.y1, this.x - this.display.x1)
+        this.update();
+    }
+
+    update = () => {
+
+    }
+}
+
 class WaveSource {
     constructor(display) {
         this.display = display;
@@ -158,4 +209,4 @@ class WaveSource {
     }
 }
 
-export { WaveDisplay, WaveVector };
+export { WaveVectorDisplay, WaveVector, WaveFrontDisplay };
diff --git a/static/js/sim.js b/static/js/sim.js
@@ -1,4 +1,4 @@
-import { WaveDisplay } from "./shared/waves.js";
+import { WaveVectorDisplay } from "./shared/waves.js";
 
 const fps = 60;
 
@@ -7,7 +7,7 @@ const c = cvs.getContext('2d');
 const frequencyInput = document.getElementById("frequencyInput");
 const amplitudeInput = document.getElementById("amplitudeInput");
 
-const waveDisplay = new WaveDisplay(cvs, c);
+const waveDisplay = new WaveVectorDisplay(cvs, c);
 waveDisplay.frequency = frequencyInput.value;
 waveDisplay.amplitude = amplitudeInput.value;
 

diff --git a/static/js/sim3.js b/static/js/sim3.js
@@ -0,0 +1,35 @@
+import { WaveFrontDisplay } from "./shared/waves.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 waveDisplay = new WaveFrontDisplay(cvs, c);
+
+const animate = () => {
+    c.clearRect(0, 0, cvs.width, cvs.height);
+    waveDisplay.update();
+
+    setTimeout(() => {
+        requestAnimationFrame(animate);
+    }, 1000 / fps);
+
+}
+
+frequencyInput.oninput = () => {
+    document.getElementById("frequencyValue").innerText = frequencyInput.value;
+    simulation.setFrequency(frequencyInput.value);
+}
+
+amplitudeInput.oninput = () => {
+    document.getElementById("amplitudeValue").innerText = amplitudeInput.value;
+    simulation.setAmplitude(amplitudeInput.value);
+}
+
+animate();
diff --git a/static/js/simulations/interference.js b/static/js/simulations/interference.js
@@ -1,5 +1,5 @@
 import { Simulation } from "./index.js";
-import { WaveDisplay } from "../shared/waves.js";
+import { WaveVectorDisplay } from "../shared/waves.js";
 import { Pointer } from "../shared/pointer.js";
 import { Screen } from "../shared/screen.js";
 
@@ -10,8 +10,8 @@ class InterferenceSimulation extends Simulation {
         this.frequency = frequency;
         this.amplitude = amplitude;
 
-        this.wave1 = new WaveDisplay(cvs, c);
-        this.wave2 = new WaveDisplay(cvs, c);
+        this.wave1 = new WaveVectorDisplay(cvs, c);
+        this.wave2 = new WaveVectorDisplay(cvs, c);
         this.setFrequency(frequency);
         this.setAmplitude(amplitude);