Temp commit coz charger broken

sim4.html

@@ -13,12 +13,12 @@
 <canvas width="1000px" height="500px"></canvas>
 
 <div class="slitWidth">
-    <input type="range" min="20" max="80" step="10" value="50" class="slider" id="slitWidthInput">
-    Slit Width: <span id="slitWidthValue">50</span> px
+    <input type="range" min="1000" max="5000" step="100" value="2000" class="slider" id="slitWidthInput">
+    Slit Width: <span id="slitWidthValue">2000</span> nm
 </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
+    <input type="range" min="380" max="780" step="10" value="500" class="slider" id="wavelengthInput">
+    Wavelength: <span id="wavelengthValue">500</span> nm
 </div>
 
 <script type="module" src="static/js/sim4.js"></script>

static/js/simulations/ripple.js

@@ -1,18 +1,15 @@
 import {Simulation} from "./index.js";
 import {Screen} from "../shared/screen.js";
-import {interpolate} from "../utils/color.js";
+import {interpolate, w2h} from "../utils/color.js";
 import {distance} from "../utils/math.js";
 import {Slit} from "../shared/slit.js";
 
 class RippleSimulation extends Simulation {
-    constructor(cvs, c, wavelength = 10, slitWidth = 50) {
+    constructor(cvs, c, wavelength = 300, 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, slitWidth);
-
-        this.waveColor1 = "#ce2b15";
-        this.waveColor2 = "#000000";
+        this.screen = new Screen(cvs, c, 0.85 * cvs.width, cvs.height / 2, cvs.height - 20);
+        this.slit = new Slit(cvs, c, 0.15 * cvs.width, cvs.height / 2, cvs.height - 20, slitWidth / this.ypx2nm);
 
         this.t = 0;
         this.dt = 1 / 60;
@@ -24,7 +21,8 @@ class RippleSimulation extends Simulation {
         theta = Math.round(theta * 1000) / 1000;
         if (theta in this.cache) return this.cache[theta];
         let sine = Math.sin(theta);
-        let tmp = Math.sin(Math.PI * this.slit.width * sine / this.wavelength) / (Math.PI * this.slit.width * sine / this.wavelength);
+        let a = Math.PI * this.slit.width * this.ypx2nm * sine / this.wavelength;
+        let tmp = Math.sin(a) / a;
         this.cache[theta] = tmp * tmp;
         return this.cache[theta];
     }
@@ -38,10 +36,10 @@ class RippleSimulation extends Simulation {
         this.c.save();
         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);
+                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.slit.y, x, y);
-                this.c.fillStyle = interpolate(this.waveColor1, this.waveColor2, (1 + (Math.sin(dist / this.wavelength - 8 * this.t))) / 2);
+                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.fillRect(x, y, 3, 3);
             }
         }
@@ -67,7 +65,7 @@ class RippleSimulation extends Simulation {
     }
 
     setSlitWidth = (slitWidth) => {
-        this.slit.width = slitWidth;
+        this.slit.width = slitWidth / this.ypx2nm;
         this.cache = {};
     }
 
@@ -78,6 +76,14 @@ class RippleSimulation extends Simulation {
     mouseMove = (event, x, y) => {
         this.screen.x = Math.max(Math.min(x, this.screen.maxX), this.screen.minX);
     }
+
+    get xpx2nm() {
+        return 20;
+    }
+
+    get ypx2nm() {
+        return 20;
+    }
 }
 
 export { RippleSimulation };

static/js/utils/color.js

@@ -19,4 +19,43 @@ function interpolate(color1, color2, factor = 0.5) {
     return r2h(result);
 }
 
-export { h2r, r2h, interpolate };
+function w2h(wavelength) {
+    let red, green, blue, factor;
+    if (wavelength >= 380 && wavelength < 440) {
+        red   = -(wavelength - 440) / (440 - 380);
+        green = 0.0;
+        blue  = 1.0;
+    } else if (wavelength >= 440 && wavelength < 490) {
+        red   = 0.0;
+        green = (wavelength - 440) / (490 - 440);
+        blue  = 1.0;
+    } else if (wavelength >= 490 && wavelength < 510) {
+        red   = 0.0;
+        green = 1.0;
+        blue  = -(wavelength - 510) / (510 - 490);
+    } else if (wavelength >= 510 && wavelength < 580) {
+        red   = (wavelength - 510) / (580 - 510);
+        green = 1.0;
+        blue  = 0.0;
+    } else if (wavelength >= 580 && wavelength < 645) {
+        red   = 1.0;
+        green = -(wavelength - 645) / (645 - 580);
+        blue  = 0.0;
+    } else if (wavelength >= 645 && wavelength < 781) {
+        red   = 1.0;
+        green = 0.0;
+        blue  = 0.0;
+    } else {
+        red   = 0.0;
+        green = 0.0;
+        blue  = 0.0;
+    }
+
+    const gamma = 0.80;
+    const R = Math.round(red > 0 ? 255 * Math.pow(red, gamma) : 0);
+    const G = Math.round(green > 0 ? 255 * Math.pow(green, gamma) : 0);
+    const B = Math.round(blue > 0 ? 255 * Math.pow(blue, gamma) : 0);
+    return r2h([R, G, B]);
+}
+
+export { h2r, r2h, interpolate, w2h };