From 0bfbca056ed46461b0ea33125cbde333847c9f57 Mon Sep 17 00:00:00 2001
From: TheTrustyPwo <thetrustypwo@gmail.com>
Date: Sat, 30 Mar 2024 15:54:21 +0800
Subject: [PATCH] Replace frequency with wavelength

---
 sim2.html                             |  4 ++--
 static/js/shared/waves.js             | 17 ++++++++++-------
 static/js/sim2.js                     | 10 +++++-----
 static/js/simulations/interference.js | 14 +++++++-------
 4 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/sim2.html b/sim2.html
index 324b40d..e1d9c0e 100644
--- a/sim2.html
+++ b/sim2.html
@@ -13,8 +13,8 @@
 <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
+    <input type="range" min="50" max="200" step="10" value="120" class="slider" id="wavelengthInput">
+    Wavelength: <span id="wavelengthValue">120</span> px
 </div>
 <div class="amplitude">
     <input type="range" min="0.1" max="0.3" step="0.05" value="0.2" class="slider" id="amplitudeInput">
diff --git a/static/js/shared/waves.js b/static/js/shared/waves.js
index f0e03a4..74b108c 100644
--- a/static/js/shared/waves.js
+++ b/static/js/shared/waves.js
@@ -7,9 +7,10 @@ class WaveVectorDisplay {
         this.c = c;
 
         this.t = 0;
-        this.dt = 1 / 15
-        this.frequency = 1.0;
+        this.dt = 1 / 60;
+        this.wavelength = 150;
         this.amplitude = 0.2;
+        this.velocity = 60;
         this.spacing = 10;
 
         this.vectors = [];
@@ -89,8 +90,8 @@ class WaveVectorDisplay {
         return distance(this.x1, this.y1, this.x2, this.y2);
     }
 
-    get wavelength() {
-        return 120 / this.frequency;
+    get waveNumber() {
+        return 2 * Math.PI / this.wavelength;
     }
 }
 
@@ -101,8 +102,9 @@ class WaveVector {
 
         this.x = this.display.x1 + this.id * this.display.spacing;
         this.base =  this.display.gradient * this.x + this.display.verticalOffset;
+        const dist =  distance(this.x, this.base, this.display.x1, this.display.y1);
         this.y = 0.5 * this.display.amplitude * this.display.cvs.height
-            * Math.sin(0.05 * this.display.frequency * distance(this.x, this.base, this.display.x1, this.display.y1)) + this.base;
+            * Math.cos(this.display.waveNumber * (dist - this.display.velocity * this.display.t)) + this.base;
     }
 
     draw = () => {
@@ -117,8 +119,9 @@ class WaveVector {
     }
 
     update = () => {
+        const dist =  distance(this.x, this.base, this.display.x1, this.display.y1);
         this.y = 0.5 * this.display.amplitude * this.display.cvs.height
-            * Math.sin(0.05 * this.display.frequency * distance(this.x, this.base, this.display.x1, this.display.y1) - this.display.t) + this.base;
+            * Math.cos(this.display.waveNumber * (dist - this.display.velocity * this.display.t)) + this.base;
     }
 }
 
@@ -183,7 +186,7 @@ class WaveSource {
     }
 
     update = () => {
-        this.internal = this.offset + this.amplitude * Math.sin(this.display.t);
+        this.internal = this.offset + this.amplitude * Math.cos(this.display.waveNumber * this.display.velocity * this.display.t);
     }
 
     draw = () => {
diff --git a/static/js/sim2.js b/static/js/sim2.js
index 287e1a7..d4d8bee 100644
--- a/static/js/sim2.js
+++ b/static/js/sim2.js
@@ -4,13 +4,13 @@ const fps = 60;
 
 const cvs = document.querySelector('canvas');
 const c = cvs.getContext('2d');
-const frequencyInput = document.getElementById("frequencyInput");
+const wavelengthInput = document.getElementById("wavelengthInput");
 const amplitudeInput = document.getElementById("amplitudeInput");
 const pathDifference = document.getElementById("pathDifference");
 const phaseDifference = document.getElementById("phaseDifference");
 const interference = document.getElementById("interference");
 
-const simulation = new InterferenceSimulation(cvs, c, frequencyInput.value, amplitudeInput.value);
+const simulation = new InterferenceSimulation(cvs, c, wavelengthInput.value, amplitudeInput.value);
 simulation.wave1.waveTopColor = "#e1503c";
 simulation.wave1.waveBottomColor = "#ea887b";
 simulation.wave2.waveTopColor = "#eea71f";
@@ -35,9 +35,9 @@ const animate = () => {
 
 }
 
-frequencyInput.oninput = () => {
-    document.getElementById("frequencyValue").innerText = frequencyInput.value;
-    simulation.setFrequency(frequencyInput.value);
+wavelengthInput.oninput = () => {
+    document.getElementById("wavelengthValue").innerText = wavelengthInput.value;
+    simulation.setWavelength(wavelengthInput.value);
 }
 
 amplitudeInput.oninput = () => {
diff --git a/static/js/simulations/interference.js b/static/js/simulations/interference.js
index 9b757d2..118a1c8 100644
--- a/static/js/simulations/interference.js
+++ b/static/js/simulations/interference.js
@@ -5,14 +5,14 @@ import { Screen } from "../shared/screen.js";
 
 // Double Source Interference Simulation
 class InterferenceSimulation extends Simulation {
-    constructor(cvs, c, frequency = 1.0, amplitude = 0.2) {
+    constructor(cvs, c, wavelength = 120, amplitude = 0.2) {
         super(cvs, c);
-        this.frequency = frequency;
+        this.wavelength = wavelength;
         this.amplitude = amplitude;
 
         this.wave1 = new WaveVectorDisplay(cvs, c);
         this.wave2 = new WaveVectorDisplay(cvs, c);
-        this.setFrequency(frequency);
+        this.setWavelength(wavelength);
         this.setAmplitude(amplitude);
 
         this.pointer = new Pointer(cvs, c, cvs.width - 50, cvs.height / 2);
@@ -36,10 +36,10 @@ class InterferenceSimulation extends Simulation {
         this.screen.draw();
     }
 
-    setFrequency = (freq) => {
-        this.frequency = freq;
-        this.wave1.frequency = freq;
-        this.wave2.frequency = freq;
+    setWavelength = (wavelength) => {
+        this.wavelength = wavelength;
+        this.wave1.wavelength = wavelength;
+        this.wave2.wavelength = wavelength;
     }
 
     setAmplitude = (amplitude) => {