diff --git a/index.html b/index.html
index 566549b..eb0e44b 100644
--- a/index.html
+++ b/index.html
@@ -2,9 +2,11 @@
- Title
+ Superposition
-
+ Simulation 1 - Basic Wave
+ Simulation 2 - Interference
+ Simulation 3 - Wavefront Interference
\ No newline at end of file
diff --git a/sim3.html b/sim3.html
new file mode 100644
index 0000000..9b119ea
--- /dev/null
+++ b/sim3.html
@@ -0,0 +1,32 @@
+
+
+
+
+ Sim 3 - Interference Wavefront
+
+
+
+
+
+
+
+ Frequency: 1.0 Hz
+
+
+
+ Amplitude: 0.2
+
+
+Path Difference = 0λ
+
+Phase Difference Δϕ = 0π
+
+Constructive Interference!
+
+
+
+
\ No newline at end of file
diff --git a/static/js/shared/waves.js b/static/js/shared/waves.js
index 6f0c84d..f0e03a4 100644
--- 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
index 8aeed86..137531c 100644
--- 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
new file mode 100644
index 0000000..936b39d
--- /dev/null
+++ 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();
\ No newline at end of file
diff --git a/static/js/simulations/interference.js b/static/js/simulations/interference.js
index 8b614ba..9b757d2 100644
--- 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);