Update single slit sim

sim4.html

@@ -13,8 +13,8 @@
 <canvas width="1000px" height="500px"></canvas>
 
 <div class="slitWidth">
-    <input type="range" min="1000" max="5000" step="100" value="2000" class="slider" id="slitWidthInput">
-    Slit Width: <span id="slitWidthValue">2000</span> nm
+    <input type="range" min="1" max="5" step="0.1" value="2.0" class="slider" id="slitWidthInput">
+    Slit Width: <span id="slitWidthValue">2.0</span> μm
 </div>
 <div class="wavelength">
     <input type="range" min="380" max="780" step="10" value="500" class="slider" id="wavelengthInput">

static/js/sim4.js

@@ -1,4 +1,4 @@
-import { RippleSimulation } from "./simulations/ripple.js"
+import { SingleSlitSimulation } from "./simulations/singleSlit.js"
 
 const fps = 60;
 
@@ -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, wavelengthInput.value, slitWidthInput.value);
+const simulation = new SingleSlitSimulation(cvs, c, wavelengthInput.value, slitWidthInput.value * 1000);
 const animate = () => {
     c.clearRect(0, 0, cvs.width, cvs.height);
     simulation.update();
@@ -24,7 +24,7 @@ wavelengthInput.oninput = () => {
 
 slitWidthInput.oninput = () => {
     document.getElementById("slitWidthValue").innerText = slitWidthInput.value;
-    simulation.setSlitWidth(slitWidthInput.value);
+    simulation.setSlitWidth(slitWidthInput.value * 1000);
 }
 
 

static/js/simulations/interference.js

@@ -63,12 +63,14 @@ class InterferenceSimulation extends Simulation {
         this.wavelength = wavelength;
         this.wave1.wavelength = wavelength;
         this.wave2.wavelength = wavelength;
+        this.redraw = true;
     }
 
     setAmplitude = (amplitude) => {
         this.amplitude = amplitude;
         this.wave1.amplitude = amplitude;
         this.wave2.amplitude = amplitude;
+        this.redraw = true;
     }
 
     get pathDifference() {

static/js/simulations/ripple.js → static/js/simulations/singleSlit.js

@@ -4,7 +4,7 @@ import {interpolate, w2h} from "../utils/color.js";
 import {distance} from "../utils/math.js";
 import {Slit} from "../shared/slit.js";
 
-class RippleSimulation extends Simulation {
+class SingleSlitSimulation extends Simulation {
     constructor(cvs, c, wavelength = 300, slitWidth = 50) {
         super(cvs, c);
         this.wavelength = wavelength;
@@ -32,14 +32,13 @@ class RippleSimulation extends Simulation {
         this.screen.draw();
         this.slit.draw();
         this.plotIntensity();
+        this.displayMeasurements();
 
         this.c.save();
-        for (let x = this.slit.x; x <= this.screen.x - 10; x += 5) {
+        for (let x = 0; x < this.screen.x; x += 5) {
             for (let y = 0; y <= this.cvs.height; y += 5) {
-                const theta = Math.atan2((y - this.slit.y) * this.ypx2nm, (x - this.slit.x) * this.xpx2nm);
-                this.c.globalAlpha = Math.max(Math.min(10 * this.evaluate(theta), 1), 0.15);
-                const dist = distance(this.slit.x * this.xpx2nm, this.slit.y * this.ypx2nm, x * this.xpx2nm, y * this.ypx2nm);
-                this.c.fillStyle = interpolate(w2h(this.wavelength), "#000000", (1 + (Math.sin(dist / this.wavelength - 8 * this.t))) / 2);
+                this.c.globalAlpha = this.intensityAt(x, y);
+                this.c.fillStyle = this.colorAt(x, y);
                 this.c.fillRect(x, y, 3, 3);
             }
         }
@@ -48,17 +47,32 @@ class RippleSimulation extends Simulation {
 
     plotIntensity = () => {
         this.c.beginPath();
-        this.c.strokeStyle = "#d94444";
         this.c.lineWidth = 3;
+        this.c.strokeStyle = this.color;
         for (let y = 0; y <= this.cvs.height; y++) {
-            const theta = Math.atan2(y - this.slit.y, this.screen.x - this.slit.x);
+            const theta = Math.atan2((y - this.slit.y) * this.ypx2nm, (this.screen.x - this.slit.x) * this.xpx2nm);
             const intensity =  this.evaluate(theta) * 100;
             if (y === 0) this.c.moveTo(this.screen.x + 5 + intensity, y);
             else this.c.lineTo(this.screen.x + 5 + intensity, y);
         }
         this.c.stroke();
     }
 
+    displayMeasurements = () => {
+        this.c.save();
+        this.c.beginPath();
+        this.c.moveTo(this.slit.x, this.cvs.height * 0.9);
+        this.c.lineTo(this.screen.x, this.cvs.height * 0.9);
+        this.c.strokeStyle = "#179e7e";
+        this.c.stroke();
+        this.c.translate((this.slit.x + this.screen.x) / 2, this.cvs.height * 0.9 - 18);
+        this.c.font = "20px arial";
+        this.c.textAlign = "center";
+        this.c.fillStyle = "#179e7e";
+        this.c.fillText(`${(this.screen.x - this.slit.x) * this.xpx2nm} nm`, 0, 10);
+        this.c.restore();
+    }
+
     setWavelength = (wavelength) => {
         this.wavelength = wavelength;
         this.cache = {};
@@ -77,13 +91,33 @@ class RippleSimulation extends Simulation {
         this.screen.x = Math.max(Math.min(x, this.screen.maxX), this.screen.minX);
     }
 
+    intensityAt = (x, y) => {
+        if (x < this.slit.x) return 1;
+        const theta = Math.atan2((y - this.slit.y) * this.ypx2nm, (x - this.slit.x) * this.xpx2nm);
+        let intensity = this.evaluate(theta);
+        // Following line is unscientific, only for visual effects
+        if (Math.abs(theta) > Math.asin(this.wavelength / this.slit.width / this.ypx2nm)) intensity *= 3;
+        return intensity;
+    }
+
+    colorAt = (x, y) => {
+        const dist = (x < this.slit.x ? x * this.xpx2nm : distance(this.slit.x * this.xpx2nm, this.slit.y * this.ypx2nm, x * this.xpx2nm, y * this.ypx2nm));
+        const v = 2 * dist / this.wavelength - 10 * this.t;
+        const factor = (1 + Math.cos(v)) / 2;
+        return interpolate("#000000", this.color, factor);
+    }
+
     get xpx2nm() {
         return 20;
     }
 
     get ypx2nm() {
         return 20;
     }
+
+    get color() {
+        return w2h(this.wavelength);
+    }
 }
 
-export { RippleSimulation };
+export { SingleSlitSimulation };