Updates

TheTrustyPwo · May 10, 2024 · bbda06c · bbda06c
1 parent 901f3e0
commit bbda06c
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 5 deletions.
diff --git a/sim5.html b/sim5.html
@@ -16,6 +16,10 @@
     <input type="range" min="20" max="80" step="10" value="50" class="slider" id="slitWidthInput">
     Slit Width: <span id="slitWidthValue">50</span> px
 </div>
+<div class="slitSeparation">
+    <input type="range" min="50" max="200" step="10" value="100" class="slider" id="slitSeparationInput">
+    Slit Separation: <span id="slitSeparationValue">100</span> px
+</div>
 <div class="wavelength">
     <input type="range" min="5" max="20" step="1" value="10" class="slider" id="wavelengthInput">
     Wavelength: <span id="wavelengthValue">10</span> px

diff --git a/static/js/sim4.js b/static/js/sim4.js
@@ -7,7 +7,7 @@ const c = cvs.getContext('2d');
 const wavelengthInput = document.getElementById("wavelengthInput");
 const slitWidthInput = document.getElementById("slitWidthInput");
 
-const simulation = new RippleSimulation(cvs, c)
+const simulation = new RippleSimulation(cvs, c, wavelengthInput.value, slitWidthInput.value);
 const animate = () => {
     c.clearRect(0, 0, cvs.width, cvs.height);
     simulation.update();

diff --git a/static/js/sim5.js b/static/js/sim5.js
@@ -6,6 +6,7 @@ const cvs = document.querySelector('canvas');
 const c = cvs.getContext('2d');
 const wavelengthInput = document.getElementById("wavelengthInput");
 const slitWidthInput = document.getElementById("slitWidthInput");
+const slitSeparationInput = document.getElementById("slitSeparationInput");
 
 const simulation = new DoubleSlitSimulation(cvs, c)
 const animate = () => {
@@ -27,5 +28,10 @@ slitWidthInput.oninput = () => {
     simulation.setSlitWidth(slitWidthInput.value);
 }
 
+slitSeparationInput.oninput = () => {
+    document.getElementById("slitSeparationValue").innerText = slitSeparationInput.value;
+    simulation.setSlitSeparation(slitSeparationInput.value);
+}
+
 
 animate()
diff --git a/static/js/simulations/doubleSlit.js b/static/js/simulations/doubleSlit.js
@@ -40,7 +40,7 @@ class DoubleSlitSimulation extends Simulation {
         for (let x = this.slit.x; x <= this.screen.x - 10; x += 5) {
             for (let y = 0; y <= this.cvs.height; y += 5) {
                 const theta = Math.atan2(y - this.slit.y, x - this.slit.x);
-                this.c.globalAlpha = Math.min(1 * this.evaluate(theta), 255);
+                this.c.globalAlpha = Math.max(Math.min(1.5 * this.evaluate(theta), 1), 0.15);
                 const dist = distance(this.slit.x, this.slit.y, x, y);
                 this.c.fillStyle = interpolate(this.waveColor1, this.waveColor2, (1 + (Math.sin(dist / this.wavelength - 8 * this.t))) / 2);
                 this.c.fillRect(x, y, 3, 3);
@@ -72,6 +72,11 @@ class DoubleSlitSimulation extends Simulation {
         this.cache = {};
     }
 
+    setSlitSeparation = (slitSeparation) => {
+        this.slit.separation = slitSeparation;
+        this.cache = {};
+    }
+
     mouseDown = (event) => {};
 
     mouseUp = (event) => {};

diff --git a/static/js/simulations/ripple.js b/static/js/simulations/ripple.js
@@ -5,11 +5,11 @@ import {distance} from "../utils/math.js";
 import {Slit} from "../shared/slit.js";
 
 class RippleSimulation extends Simulation {
-    constructor(cvs, c, wavelength = 20) {
+    constructor(cvs, c, wavelength = 10, slitWidth = 50) {
         super(cvs, c);
         this.wavelength = wavelength;
         this.screen = new Screen(cvs, c, 0.85 * cvs.width, cvs.height / 2, cvs.height - 50);
-        this.slit = new Slit(cvs, c, 0.15 * cvs.width, cvs.height / 2, cvs.height - 50, 50);
+        this.slit = new Slit(cvs, c, 0.15 * cvs.width, cvs.height / 2, cvs.height - 50, slitWidth);
 
         this.waveColor1 = "#ce2b15";
         this.waveColor2 = "#000000";
@@ -39,7 +39,7 @@ class RippleSimulation extends Simulation {
         for (let x = this.slit.x; x <= this.screen.x - 10; x += 5) {
             for (let y = 0; y <= this.cvs.height; y += 5) {
                 const theta = Math.atan2(y - this.slit.y, x - this.slit.x);
-                this.c.globalAlpha = Math.min(10 * this.evaluate(theta), 255);
+                this.c.globalAlpha = Math.max(Math.min(10 * this.evaluate(theta), 1), 0.15);
                 const dist = distance(this.slit.x, this.slit.y, x, y);
                 this.c.fillStyle = interpolate(this.waveColor1, this.waveColor2, (1 + (Math.sin(dist / this.wavelength - 8 * this.t))) / 2);
                 this.c.fillRect(x, y, 3, 3);