diff --git a/sim5.html b/sim5.html
index 30f1d05..b3aac61 100644
--- a/sim5.html
+++ b/sim5.html
@@ -13,12 +13,12 @@
-
- Slit Width: 2.0 μm
+
+ Slit Width: 500 μm
-
- Slit Separation: 4.0 μm
+
+ Slit Separation: 500 μm
diff --git a/static/js/sim4.js b/static/js/sim4.js
index 962d7eb..015fc98 100644
--- a/static/js/sim4.js
+++ b/static/js/sim4.js
@@ -18,12 +18,12 @@ const animate = () => {
wavelengthInput.oninput = () => {
document.getElementById("wavelengthValue").innerText = wavelengthInput.value;
- simulation.setWavelength(wavelengthInput.value);
+ simulation.setWavelength(wavelengthInput.value / 1_000_000_000);
}
slitWidthInput.oninput = () => {
document.getElementById("slitWidthValue").innerText = slitWidthInput.value;
- simulation.setSlitWidth(slitWidthInput.value * 1000);
+ simulation.setSlitWidth(slitWidthInput.value / 1_000_000);
}
diff --git a/static/js/sim5.js b/static/js/sim5.js
index f297525..0b60cfb 100644
--- a/static/js/sim5.js
+++ b/static/js/sim5.js
@@ -19,17 +19,17 @@ const animate = () => {
wavelengthInput.oninput = () => {
document.getElementById("wavelengthValue").innerText = wavelengthInput.value;
- simulation.setWavelength(wavelengthInput.value);
+ simulation.setWavelength(wavelengthInput.value / 1_000_000_000);
}
slitWidthInput.oninput = () => {
document.getElementById("slitWidthValue").innerText = slitWidthInput.value;
- simulation.setSlitWidth(slitWidthInput.value * 1000);
+ simulation.setSlitWidth(slitWidthInput.value / 1_000_000);
}
slitSeparationInput.oninput = () => {
document.getElementById("slitSeparationValue").innerText = slitSeparationInput.value;
- simulation.setSlitSeparation(slitSeparationInput.value * 1000);
+ simulation.setSlitSeparation(slitSeparationInput.value / 1_000_000);
}
diff --git a/static/js/simulations/doubleSlit.js b/static/js/simulations/doubleSlit.js
index 1a530b3..808bcd2 100644
--- a/static/js/simulations/doubleSlit.js
+++ b/static/js/simulations/doubleSlit.js
@@ -5,11 +5,11 @@ import {distance} from "../utils/math.js";
import {DoubleSlit} from "../shared/slit.js";
class DoubleSlitSimulation extends Simulation {
- constructor(cvs, c, wavelength = 500, slitWidth = 2000, slitSeparation = 4000) {
+ constructor(cvs, c, wavelength = 500 / 1_000_000_000 , slitWidth = 500 / 1_000_000, slitSeparation = 50 / 1_000_000) {
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 DoubleSlit(cvs, c, 0.15 * cvs.width, cvs.height / 2, cvs.height - 50, slitWidth / this.ypx2nm, slitSeparation / this.ypx2nm);
+ this.slit = new DoubleSlit(cvs, c, 0.15 * cvs.width, cvs.height / 2, cvs.height - 50, slitWidth / this.ypx2m, slitSeparation / this.ypx2m);
this.t = 0;
this.dt = 1 / 60;
@@ -18,11 +18,11 @@ class DoubleSlitSimulation extends Simulation {
}
evaluate = (theta) => {
- theta = Math.round(theta * 1000) / 1000;
+ theta = Math.round(theta * 1_000_000) / 1_000_000;
if (theta in this.cache) return this.cache[theta];
const sine = Math.sin(theta);
- const cs = Math.cos(Math.PI * this.slit.separation * this.ypx2nm * sine / this.wavelength);
- const a = Math.PI * this.slit.width * this.ypx2nm * sine / this.wavelength
+ const cs = Math.cos(Math.PI * this.slit.separation * this.ypx2m * sine / this.wavelength);
+ const a = Math.PI * this.slit.width * this.ypx2m * sine / this.wavelength
const tmp = Math.sin(a) / a;
this.cache[theta] = cs * cs * tmp * tmp;
return this.cache[theta];
@@ -57,7 +57,7 @@ class DoubleSlitSimulation extends Simulation {
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.ypx2nm, (this.screen.x - this.slit.x) * this.xpx2nm);
+ const theta = Math.atan2((y - this.slit.y) * this.ypx2m, (this.screen.x - this.slit.x) * this.xpx2m);
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);
@@ -76,7 +76,8 @@ class DoubleSlitSimulation extends Simulation {
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);
+ const dist = Math.round((this.screen.x - this.slit.x) * this.xpx2m * 1000) / 10;
+ this.c.fillText(`${dist} cm`, 0, 10);
this.c.restore();
}
@@ -87,29 +88,26 @@ class DoubleSlitSimulation extends Simulation {
}
setSlitWidth = (slitWidth) => {
- this.slit.width = slitWidth / this.ypx2nm;
+ this.slit.width = slitWidth / this.ypx2m;
this.redraw = true;
this.cache = {};
}
setSlitSeparation = (slitSeparation) => {
- this.slit.separation = slitSeparation / this.ypx2nm;
+ this.slit.separation = slitSeparation / this.ypx2m;
this.redraw = true;
this.cache = {};
}
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;
+ const theta = Math.atan2((y - this.slit.y) * this.ypx2m, (x - this.slit.x) * this.xpx2m);
+ return this.evaluate(theta);
}
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 dist = (x < this.slit.x ? x : distance(this.slit.x, this.slit.y, x , y));
+ const v = 2 * dist / (this.wavelength * 50000000) - 10 * this.t;
const factor = (1 + Math.cos(v)) / 2;
return interpolate("#000000", this.color, factor);
}
@@ -123,12 +121,12 @@ class DoubleSlitSimulation extends Simulation {
this.redraw = true;
}
- get xpx2nm() {
- return 20;
+ get xpx2m() {
+ return 2 / (this.screen.maxX - this.slit.x);
}
- get ypx2nm() {
- return 20;
+ get ypx2m() {
+ return 1 / 1_000_00;
}
get color() {
diff --git a/static/js/simulations/singleSlit.js b/static/js/simulations/singleSlit.js
index b0e0afa..bc8f2d2 100644
--- a/static/js/simulations/singleSlit.js
+++ b/static/js/simulations/singleSlit.js
@@ -5,11 +5,11 @@ import {distance} from "../utils/math.js";
import {Slit} from "../shared/slit.js";
class SingleSlitSimulation extends Simulation {
- constructor(cvs, c, wavelength = 500, slitWidth = 2000) {
+ constructor(cvs, c, wavelength = 500 / 1_000_000_000, slitWidth = 500 / 1_000_000) {
super(cvs, c);
this.wavelength = wavelength;
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.slit = new Slit(cvs, c, 0.15 * cvs.width, cvs.height / 2, cvs.height - 20, slitWidth / this.ypx2m);
this.t = 0;
this.dt = 1 / 60;
@@ -18,10 +18,10 @@ class SingleSlitSimulation extends Simulation {
}
evaluate = (theta) => {
- theta = Math.round(theta * 1000) / 1000;
+ theta = Math.round(theta * 1_000_000) / 1_000_000;
if (theta in this.cache) return this.cache[theta];
let sine = Math.sin(theta);
- let a = Math.PI * this.slit.width * this.ypx2nm * sine / this.wavelength;
+ let a = Math.PI * this.slit.width * this.ypx2m * sine / this.wavelength;
let tmp = Math.sin(a) / a;
this.cache[theta] = tmp * tmp;
return this.cache[theta];
@@ -55,8 +55,8 @@ class SingleSlitSimulation extends Simulation {
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.ypx2nm, (this.screen.x - this.slit.x) * this.xpx2nm);
- const intensity = this.evaluate(theta) * 100;
+ const theta = Math.atan2((y - this.slit.y) * this.ypx2m, (this.screen.x - this.slit.x) * this.xpx2m);
+ 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);
}
@@ -74,7 +74,8 @@ class SingleSlitSimulation extends Simulation {
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);
+ const dist = Math.round((this.screen.x - this.slit.x) * this.xpx2m * 1000) / 10;
+ this.c.fillText(`${dist} cm`, 0, 10);
this.c.restore();
}
@@ -85,7 +86,7 @@ class SingleSlitSimulation extends Simulation {
}
setSlitWidth = (slitWidth) => {
- this.slit.width = slitWidth / this.ypx2nm;
+ this.slit.width = slitWidth / this.ypx2m;
this.redraw = true;
this.cache = {};
}
@@ -101,26 +102,23 @@ class SingleSlitSimulation extends Simulation {
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;
+ const theta = Math.atan2((y - this.slit.y) * this.ypx2m, (x - this.slit.x) * this.xpx2m);
+ return this.evaluate(theta);
}
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 dist = (x < this.slit.x ? x : distance(this.slit.x, this.slit.y, x , y));
+ const v = 2 * dist / (this.wavelength * 50000000) - 10 * this.t;
const factor = (1 + Math.cos(v)) / 2;
return interpolate("#000000", this.color, factor);
}
- get xpx2nm() {
- return 20;
+ get xpx2m() {
+ return 2 / (this.screen.maxX - this.slit.x);
}
- get ypx2nm() {
- return 20;
+ get ypx2m() {
+ return 1 / 1_000_00;
}
get color() {
diff --git a/static/js/utils/color.js b/static/js/utils/color.js
index 282c2ad..c74c7a7 100644
--- a/static/js/utils/color.js
+++ b/static/js/utils/color.js
@@ -20,6 +20,7 @@ function interpolate(color1, color2, factor = 0.5) {
}
function w2h(wavelength) {
+ wavelength *= 1_000_000_000;
let red, green, blue, factor;
if (wavelength >= 380 && wavelength < 440) {
red = -(wavelength - 440) / (440 - 380);