Skip to content

Commit

Permalink
Make single & double scale realistic
Browse files Browse the repository at this point in the history
  • Loading branch information
@TheTrustyPwo
TheTrustyPwo committed Jun 27, 2024
1 parent ca80e97 commit 902c74e
Show file tree
Hide file tree
Showing 7 changed files with 47 additions and 50 deletions.
4 changes: 2 additions & 2 deletions sim4.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@
<canvas width="1000px" height="500px"></canvas>

<div class="slitWidth">
<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
<input type="range" min="200" max="1000" step="100" value="500" class="slider" id="slitWidthInput">
Slit Width: <span id="slitWidthValue">500</span> μm
</div>
<div class="wavelength">
<input type="range" min="380" max="780" step="10" value="500" class="slider" id="wavelengthInput">
Expand Down
8 changes: 4 additions & 4 deletions sim5.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,12 @@
<canvas width="1000px" height="500px"></canvas>

<div class="slitWidth">
<input type="range" min="1" max="3" step="0.1" value="2.0" class="slider" id="slitWidthInput">
Slit Width: <span id="slitWidthValue">2.0</span> μm
<input type="range" min="200" max="1000" step="100" value="500" class="slider" id="slitWidthInput">
Slit Width: <span id="slitWidthValue">500</span> μm
</div>
<div class="slitSeparation">
<input type="range" min="1" max="5" step="0.1" value="4.0" class="slider" id="slitSeparationInput">
Slit Separation: <span id="slitSeparationValue">4.0</span> μm
<input type="range" min="200" max="1000" step="100" value="500" class="slider" id="slitSeparationInput">
Slit Separation: <span id="slitSeparationValue">500</span> μm
</div>
<div class="wavelength">
<input type="range" min="380" max="780" step="10" value="500" class="slider" id="wavelengthInput">
Expand Down
4 changes: 2 additions & 2 deletions static/js/sim4.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}


Expand Down
6 changes: 3 additions & 3 deletions static/js/sim5.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}


Expand Down
38 changes: 18 additions & 20 deletions static/js/simulations/doubleSlit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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];
Expand Down Expand Up @@ -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);
Expand All @@ -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();
}

Expand All @@ -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);
}
Expand All @@ -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() {
Expand Down
36 changes: 17 additions & 19 deletions static/js/simulations/singleSlit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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];
Expand Down Expand Up @@ -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);
}
Expand All @@ -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();
}

Expand All @@ -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 = {};
}
Expand All @@ -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() {
Expand Down
1 change: 1 addition & 0 deletions static/js/utils/color.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down

0 comments on commit 902c74e

Please sign in to comment.