Skip to content

Commit

Permalink
Add envelope for double slit and N slit
Browse files Browse the repository at this point in the history
  • Loading branch information
@TheTrustyPwo
TheTrustyPwo committed Aug 15, 2024
1 parent d4733a2 commit c390752
Show file tree
Hide file tree
Showing 6 changed files with 90 additions and 1 deletion.
5 changes: 5 additions & 0 deletions src/javascript/sim5.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ const c = cvs.getContext('2d');
const wavelengthInput = document.getElementById("wavelengthInput_DS");
const slitWidthInput = document.getElementById("slitWidthInput_DS");
const slitSeparationInput = document.getElementById("slitSeparationInput_DS");
const envelopeInput = document.getElementById("envelopeInput_DS");

const simulation = new DoubleSlitSimulation(cvs, c)
const animate = () => {
Expand All @@ -32,5 +33,9 @@ slitSeparationInput.oninput = () => {
simulation.setSlitSeparation(slitSeparationInput.value / 1_000_000);
}

envelopeInput.oninput = () => {
simulation.setEnvelope(envelopeInput.checked);
}


animate()
5 changes: 5 additions & 0 deletions src/javascript/sim6.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ const slitsInput = document.getElementById("slitsInput_nSlit");
const wavelengthInput = document.getElementById("wavelengthInput_nSlit");
const slitWidthInput = document.getElementById("slitWidthInput_nSlit");
const slitSeparationInput = document.getElementById("slitSeparationInput_nSlit");
const envelopeInput = document.getElementById("envelopeInput_nSlit");

const simulation = new NSlitSimulation(cvs, c)
const animate = () => {
Expand Down Expand Up @@ -38,5 +39,9 @@ slitsInput.oninput = () => {
simulation.setSlits(slitsInput.value);
}

envelopeInput.oninput = () => {
simulation.setEnvelope(envelopeInput.checked);
}


animate()
37 changes: 36 additions & 1 deletion src/javascript/simulations/doubleSlit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ class DoubleSlitSimulation extends Simulation {
this.wavelength = wavelength;
this.slitWidth = slitWidth;
this.slitSeparation = slitSeparation;
this.envelope = 1;
this.color = w2h(this.wavelength);

this.t = 0;
Expand All @@ -25,19 +26,30 @@ class DoubleSlitSimulation extends Simulation {
this.slitWidth / this.ypx2m, this.slitSeparation / this.ypx2m);
this.redraw = true;
this.cache = {};
this.cacheEnvelope = {};
}

evaluate = (theta) => {
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.ypx2m * sine / this.wavelength);
const cs = Math.cos(Math.PI * (this.slit.separation + this.slit.width) * 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];
}

evaluateEnvelope = (theta) => {
theta = Math.round(theta * 1_000_00) / 1_000_00;
if (theta in this.cacheEnvelope) return this.cacheEnvelope[theta];
let sine = Math.sin(theta);
let a = Math.PI * this.slit.width * this.ypx2m * sine / this.wavelength;
let tmp = Math.sin(a) / a;
this.cacheEnvelope[theta] = tmp * tmp;
return this.cacheEnvelope[theta];
}

update = () => {
this.t += this.dt;

Expand All @@ -46,6 +58,7 @@ class DoubleSlitSimulation extends Simulation {
this.screen.draw();
this.slit.draw();
this.plotIntensity();
if (this.envelope) this.plotEnvelope();
this.redraw = false;
} else this.c.clearRect(this.slit.x + 2.5, 0, this.screen.x - this.slit.x - 5, this.cvs.height);

Expand Down Expand Up @@ -75,11 +88,25 @@ class DoubleSlitSimulation extends Simulation {
this.c.stroke();
}

plotEnvelope = () => {
this.c.beginPath();
this.c.lineWidth = 1;
this.c.strokeStyle = "#FFFFFF";
for (let y = 0; y <= this.cvs.height; y++) {
const theta = Math.atan2((y - this.slit.y) * this.ypx2m, (this.screen.x - this.slit.x) * this.xpx2m);
const intensity = this.evaluateEnvelope(theta) * this.cvs.width / 10;
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.lineWidth = 3;
this.c.strokeStyle = "#179e7e";
this.c.stroke();
this.c.translate((this.slit.x + this.screen.x) / 2, this.cvs.height * 0.9 - 18);
Expand All @@ -96,20 +123,28 @@ class DoubleSlitSimulation extends Simulation {
this.color = w2h(wavelength);
this.redraw = true;
this.cache = {};
this.cacheEnvelope = {};
}

setSlitWidth = (slitWidth) => {
this.slitWidth = slitWidth;
this.slit.width = slitWidth / this.ypx2m;
this.redraw = true;
this.cache = {};
this.cacheEnvelope = {};
}

setSlitSeparation = (slitSeparation) => {
this.slitSeparation = slitSeparation;
this.slit.separation = slitSeparation / this.ypx2m;
this.redraw = true;
this.cache = {};
this.cacheEnvelope = {};
}

setEnvelope = (envelope) => {
this.envelope = envelope;
this.redraw = true;
}

intensityAt = (x, y) => {
Expand Down
36 changes: 36 additions & 0 deletions src/javascript/simulations/nSlit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ class NSlitSimulation extends Simulation {
this.slitWidth = slitWidth;
this.slitSeparation = slitSeparation;
this.slits = slits;
this.envelope = 1;
this.color = w2h(this.wavelength);

this.t = 0;
Expand All @@ -26,6 +27,7 @@ class NSlitSimulation extends Simulation {
this.slitWidth / this.xpx2m, this.slitSeparation / this.xpx2m, this.slits);
this.redraw = true;
this.cache = {};
this.cacheEnvelope = {};
}

evaluate = (theta) => {
Expand All @@ -40,6 +42,16 @@ class NSlitSimulation extends Simulation {
return this.cache[theta];
}

evaluateEnvelope = (theta) => {
theta = Math.round(theta * 1_000_00) / 1_000_00;
if (theta in this.cacheEnvelope) return this.cacheEnvelope[theta];
let sine = Math.sin(theta);
let a = Math.PI * this.slit.width * this.xpx2m * sine / this.wavelength;
let tmp = Math.sin(a) / a;
this.cacheEnvelope[theta] = tmp * tmp;
return this.cacheEnvelope[theta];
}

update = () => {
this.t += this.dt;

Expand All @@ -48,6 +60,7 @@ class NSlitSimulation extends Simulation {
this.screen.draw();
this.slit.draw();
this.plotIntensity();
if (this.envelope) this.plotEnvelope();
this.redraw = false;
} else this.c.clearRect(0, this.screen.y + 2.5, this.cvs.width, this.slit.y - this.screen.y - 5);

Expand Down Expand Up @@ -77,11 +90,25 @@ class NSlitSimulation extends Simulation {
this.c.stroke();
}

plotEnvelope = () => {
this.c.beginPath();
this.c.lineWidth = 1;
this.c.strokeStyle = "#FFFFFF";
for (let x = 0; x <= this.cvs.width; x++) {
const theta = Math.atan2((x - this.slit.x) * this.xpx2m, (this.slit.y - this.screen.y) * this.ypx2m);
const intensity = this.evaluateEnvelope(theta) * this.cvs.height / 5;
if (x === 0) this.c.moveTo(x, this.screen.y - 5 - intensity);
else this.c.lineTo(x, this.screen.y - 5 - intensity);
}
this.c.stroke();
}

displayMeasurements = () => {
this.c.save();
this.c.beginPath();
this.c.moveTo(this.cvs.width * 0.9, this.slit.y);
this.c.lineTo(this.cvs.width * 0.9, this.screen.y);
this.c.lineWidth = 3;
this.c.strokeStyle = "#179e7e";
this.c.stroke();
this.c.translate(this.cvs.width * 0.9 + 40, (this.slit.y + this.screen.y) / 2);
Expand All @@ -98,27 +125,36 @@ class NSlitSimulation extends Simulation {
this.color = w2h(wavelength);
this.redraw = true;
this.cache = {};
this.cacheEnvelope = {};
}

setSlitWidth = (slitWidth) => {
this.slitWidth = slitWidth;
this.slit.width = slitWidth / this.xpx2m;
this.redraw = true;
this.cache = {};
this.cacheEnvelope = {};
}

setSlitSeparation = (slitSeparation) => {
this.slitSeparation = slitSeparation;
this.slit.separation = slitSeparation / this.xpx2m;
this.redraw = true;
this.cache = {};
this.cacheEnvelope = {};
}

setSlits = (slits) => {
this.slits = slits;
this.slit.slits = slits;
this.redraw = true;
this.cache = {};
this.cacheEnvelope = {};
}

setEnvelope = (envelope) => {
this.envelope = envelope;
this.redraw = true;
}

intensityAt = (x, y) => {
Expand Down
4 changes: 4 additions & 0 deletions src/simulations/double_slit_diffraction.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,5 +12,9 @@
<input type="range" min="380" max="780" step="10" value="500" class="slider" id="wavelengthInput_DS">
Wavelength: <span id="wavelengthValue_DS">500</span> nm
</div>
<div class="envelope">
<input type="checkbox" id="envelopeInput_DS" checked="checked">
<label for="envelopeInput_DS">Toggle Envelope</label>
</div>

<script type="module" src="../javascript/sim5.js"></script>
4 changes: 4 additions & 0 deletions src/simulations/n_slit_diffraction.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,5 +16,9 @@
<input type="range" min="380" max="780" step="10" value="500" class="slider" id="wavelengthInput_nSlit">
Wavelength: <span id="wavelengthValue_nSlit">500</span> nm
</div>
<div class="envelope">
<input type="checkbox" id="envelopeInput_nSlit" checked="checked">
<label for="envelopeInput_nSlit">Toggle Envelope</label>
</div>

<script type="module" src="../javascript/sim6.js"></script>

0 comments on commit c390752

Please sign in to comment.