Welcome to the tutorial on converging lenses.\n\n"+
153 | "We will explore how\na lens focuses light\n\n"+
154 | "To begin, press
");
155 |
156 | app.showLabelLayer([btNextContainer]);
157 | btNextContainer.blinkOn(true);
158 | btNext.onPress(step1);
159 | btNext.enable();
160 |
161 | btGraph.disable();
162 |
163 | app.arrowManager.addArrow({
164 | x: btNextContainer.x - 20,
165 | y: btNextContainer.y - 20
166 | },135);
167 | app.arrowManager.show();
168 | app.arrowManager.onTop();
169 | }
170 |
171 | /* ------- STEP 1 -------- */
172 | function step1() {
173 | btNextContainer.blinkOff();
174 |
175 | setLabels1();
176 | app.showLabelLayer([btHelpContainer]);
177 |
178 | // app.arrowManager.addArrow({ x: btHelpContainer.x - 15, y: btHelpContainer - 15 }, 135 );
179 | // app.arrowManager.show();
180 |
181 | // Go to step 2
182 | // btHelp.onPress(step2);
183 | // btHelpContainer.blinkOn(true);
184 |
185 | for (var i = -SLIT_SIZE/2;i <= SLIT_SIZE/2;i+=1) {
186 | createLightPath(exp.height/2 + 10*i);
187 | }
188 |
189 | detector.setPosition(560, exp.height/2);
190 | lightLayer.changePointAllPaths(3, { x: detector.x, y: detector.y }, true);
191 |
192 | glowManager.enable();
193 | // btGo.disable();
194 | btGraph.onPress(function(){
195 | amps.toggleTotalAmplitudeArrow();
196 | plotProbability();
197 | });
198 |
199 | step2();
200 | }
201 | // This function creates a path with a point on the slit
202 | // It also creates the associated clock and the associations
203 | function createLightPath(y) {
204 | //x = h - y² / w²
205 | var ior = IOR;
206 | var path = new Engine.LightPath(1);
207 | path.addPoint({ x: photonSource.x, y: photonSource.y });
208 | path.addPoint({
209 | x: exp.width/2 - LENS_WIDTH/2 + Math.pow((y - exp.height/2)/(SLIT_SIZE+2),2)
210 | ,
211 | y: y,
212 | ior: ior
213 | });
214 | path.addPoint({
215 | x: exp.width/2 + LENS_WIDTH/2 - Math.pow((y - exp.height/2)/(SLIT_SIZE+2),2)
216 | ,
217 | y: y,
218 | ior: 1
219 | });
220 | path.addPoint({ x: detector.x, y: detector.y });
221 | path.updateData(); // call this manually so the Engine knows when to compute the entire path, instead of computing every new point
222 | lightLayer.addPath(path);
223 | path.clock = clocks.addClock(photonSource.color);
224 | }
225 |
226 | function plotProbability() {
227 | graph.clear();
228 | var a, y;
229 | for(var i = 3; i < exp.height/10-2; i++) {
230 | y = i*10;
231 | lightLayer.changePointAllPaths(3, { x: detector.x, y: y }, true);
232 | graph.drawBar(y - exp.height/2, Math.pow(lightLayer.getTotalAmplitude().amplitude / lightLayer.numPaths(),2), photonSource.color);
233 | }
234 | lightLayer.changePointAllPaths(3, detector);
235 | }
236 |
237 | /* ------- STEP 2 -------- */
238 | function step2() {
239 | setDefaultLabels();
240 | btHelpContainer.blinkOff();
241 | // btNextContainer.blinkOn(true);
242 | btNext.disable();
243 | app.hideLabelLayer();
244 | btHelp.onPress(function(){
245 | app.toggleLabelLayer([btHelpContainer]);
246 | });
247 | msg.setMessage( TEXT['lens'] );
248 |
249 | // exp.blinkOn(true);
250 | detector.onTop();
251 | detector.enableDrag();
252 | detector.setCursor("ns-resize");
253 | Engine.addEvent({ source: detector, node: detector.container.node }, "moved", evDrag);
254 | btGo.enable();
255 | btGo.onPress(function(){
256 | detector.disableDrag();
257 | graph.clear();
258 | amps.clear();
259 | lightLayer.shootAllPhotons(function(){
260 | detector.blink();
261 | detector.enableDrag();
262 | amps.drawAmplitudes(lightLayer);
263 | btGraph.enable();
264 | // amps.showTotalAmplitudeArrow();
265 | });
266 | });
267 | }
268 | function evDrag(ev) {
269 | lightLayer.changePointAllPaths(3, detector);
270 | amps.drawAmplitudes(lightLayer);
271 | amps.showTotalAmplitudeArrow();
272 | lightLayer.setFinalState();
273 | }
274 |
275 |
276 | function changeColor(e) {
277 | photonSource.setColor(photonSource.color+1);
278 | lightLayer.setColor(Engine.STYLE.Colors[photonSource.color].color);
279 | lightLayer.setFrequency(Engine.STYLE.Colors[photonSource.color].frequency);
280 | lightLayer.drawAll();
281 | plotProbability();
282 | clocks.setAllColor(photonSource.color);
283 | amps.drawAmplitudes(lightLayer);
284 | amps.showTotalAmplitudeArrow();
285 | // amps.setTotalAmplitudeColor(photonSource.color);
286 | lightLayer.setFinalState();
287 | }
288 |
289 | /* ----------------------------------------- Start -------------------------------------------- */
290 | amps.viewportScale = 1;
291 | SLIT_SIZE = 15;
292 | IOR = 1.55;
293 | LENS_WIDTH = 60;
294 | LENS_HEIGHT = (SLIT_SIZE+4)*10
295 |
296 | // buildWalls();
297 |
298 | Engine.C = 150;
299 | Engine.ANIMATION_SPEED = 0.85;
300 | Engine.FREQUENCY_ADJUST = 2;
301 |
302 | var lens = new Engine.Lens(LENS_WIDTH, LENS_HEIGHT);
303 | exp.add(lens, exp.width/2, exp.height/2);
304 |
305 | photonSource.setColor(0);
306 | var lightLayer = new Engine.LightLayer(
307 | Engine.STYLE.Colors[photonSource.color].color,
308 | Engine.STYLE.Colors[photonSource.color].frequency
309 | );
310 | exp.addLightLayer(lightLayer);
311 | var glowManager = new Engine.GlowManager({ 'paths': lightLayer, 'clocks': clocks, 'amplitudes': amps });
312 |
313 | intro();
314 |
--------------------------------------------------------------------------------
/qed/exp_11_single_slit_color.js:
--------------------------------------------------------------------------------
1 | // #################################################################################################
2 | // QED Engine tutorials
3 | // Copyright (C) 2015-2016 Georgetown University
4 | // Department of Physics - Washington, DC, USA
5 | // Written by Lucas Vieira (https://github.com/1ucasvb)
6 | // Dylan Cutler (https://github.com/DCtheTall)
7 | //
8 | // -------------------------------------- LICENSE --------------------------------------------------
9 | //
10 | // This library is free software; you can redistribute it and/or
11 | // modify it under the terms of the GNU Lesser General Public
12 | // License as published by the Free Software Foundation; either
13 | // version 2.1 of the License, or (at your option) any later version.
14 | //
15 | // This library is distributed in the hope that it will be useful,
16 | // but WITHOUT ANY WARRANTY; without even the implied warranty of
17 | // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
18 | // Lesser General Public License for more details.
19 | //
20 | // You should have received a copy of the GNU Lesser General Public
21 | // License along with this library; if not, write to the Free Software
22 | // Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
23 | //
24 | // #################################################################################################
25 |
26 |
27 | /* STANDARD SETUP */
28 | var clocksBoxHeight = 150; // helps set up overall height
29 |
30 | // Main object definitions
31 | var app = Engine.create("experiment", 1000, 430 + clocksBoxHeight);
32 | $(document.body).append(app.div);
33 |
34 | var exp = new Engine.ExperimentBox("exp", 600, 400);
35 | app.add(exp, 10, 10);
36 |
37 | var graph = new Engine.GraphBox("graph", 120, 400, 2);
38 | app.add(graph, 620, 10);
39 |
40 | var amps = new Engine.AmplitudeBox("amps", 240, 240);
41 | app.add(amps, 750, 10);
42 |
43 | var msg = new Engine.MessageBox("msg", 240, 60 + clocksBoxHeight);
44 | app.add(msg, 750, 360);
45 |
46 | var clocks = new Engine.ClockBox("clocks", 730, clocksBoxHeight);
47 | clocks.setRadius(30);
48 | app.add(clocks, 10, 420);
49 |
50 | // Button in containers, necessary to make it above the label overlay
51 | var btHelpContainer = new Engine.RaphaelPaper("btHelpContainer", 50, 40);
52 | var btHelp = new Engine.ButtonHelp();
53 | btHelpContainer.add(btHelp, 0, 0);
54 | app.add(btHelpContainer, 940, 260);
55 |
56 | var btGoContainer = new Engine.RaphaelPaper("btGoContainer", 50, 40);
57 | var btGo = new Engine.ButtonGo();
58 | btGoContainer.add(btGo, 0, 0);
59 | app.add(btGoContainer, 750, 260);
60 |
61 | var btNextContainer = new Engine.RaphaelPaper("btNextContainer", 120, 40);
62 | var btNext = new Engine.ButtonNext();
63 | btNextContainer.add(btNext, 0, 0);
64 | app.add(btNextContainer, 810, 260);
65 |
66 | var btGraph = new Engine.ButtonGraph();
67 | amps.add(btGraph, amps.width-btGraph.width-5, amps.height-btGraph.height-5);
68 |
69 | /* ------------------------------ BEGIN EXPERIMENT ------------------------------ */
70 |
71 | var TEXT = {
72 | 'welcome':
73 | "
This interactive tutorial is on changing\nthe color of light that\ntravels through a single slit!\n\n"+
74 | "This time, we explore in a little more\ndetail what happens when light passes\nthrough a large slit, "+
75 | "and how changing\nthe color of light affects the results\nof the experiment.\n\n"+
76 | "To continue, press
"
77 | ,
78 | 'move_detector':
79 | "We start from a slit with seven alternative ways the photon can go through it.\n\n"+
80 | "We have filled the entire probability graph for all positions of the detector.\n\n"+
81 | "Move the detector and study how the probability amplitudes change with the position of the detector.\n\n"+
82 | "Can you describe in words what happens at the center position and at the ends?\n\n"+
83 | "When you are done, press "
84 | ,
85 | 'change_color':
86 | "Now, click on the photon source to change its color.\n\n"+
87 | "How does the color of the photon affect the shape of the probability distribution?\n\n"+
88 | "Knowing that the wavelengths λ (Greek letter lambda) of light of each color follow the relation:\n
λRED > λGREEN > λBLUE
\n"+
89 | "Explain in words how the width of the central peak of the probability curve is related to the wavelength of the light.\n\n"+
90 | //“Recalling the results of the previous tutorial, could you find the same pattern by changing the width of the slit instead of the color of the light?\n\n"+
91 | "That's it for this tutorial! Please, continue on to the next part of the course."
92 | }
93 |
94 | // Source
95 | var photonSource = new Engine.PhotonSource("source", 0);
96 | photonSource.setTitle("Source");
97 | exp.add(photonSource, 30, 200);
98 |
99 | // Detector rail
100 | var rail = new Engine.Rail(10,360);
101 | exp.add(rail, 560, 20);
102 |
103 | // Detector
104 | var detector = new Engine.Detector("detector");
105 | detector.snap = 10;
106 | detector.setTitle("Detector");
107 | exp.add(detector, 560, 200);
108 | detector.setDragBounds([560, 560], [30, 370]);
109 |
110 | function buildWalls() {
111 | var a = (SLIT_SIZE+1)*10;
112 | var h = exp.height/2 - a/2;
113 | var w = 10;
114 | exp.add(new Engine.Wall(w,h,5), exp.width/2-w/2, 0);
115 | exp.add(new Engine.Wall(w,h,5), exp.width/2-w/2, exp.height - h);
116 | }
117 |
118 | /* Labels */
119 |
120 | function setLabels1() {
121 | app.labelManager.clearLabels();
122 | app.labelManager.addLabel({ at: {x: app.width/2-20, y: app.height/2}, align: [0,0] }, TEXT['welcome'] );
123 | }
124 |
125 | function setDefaultLabels() {
126 | app.labelManager.clearLabels();
127 | app.arrowManager.clearArrows();
128 |
129 | app.labelManager.addLabel({ at: {x: 10, y: 10}, align: [-1,-1] },
130 | "
press again to exit the help window.
");
131 |
132 | app.labelManager.addLabel({ at: photonSource, align: [-1,0] },
133 | "Photon\nsource\nPress to\nchange color");
134 |
135 | app.labelManager.addLabel({ at: detector, align: [1,0] },
136 | "Photon\ndetector\nDrag to\nchange\nposition");
137 |
138 | app.labelManager.addLabel({ at: {x: clocks.x + clocks.width/2, y: clocks.y + clocks.height/2 }, align: [0,0] },
139 | "Clock for each path\nMouse over or long tap to highlight an\nindividual path and its respective clock and arrow");
140 |
141 | app.labelManager.addLabel({ at: {x: btGoContainer.x + 15, y: btGoContainer.y+25 }, align: [1,1] },
142 | "Emit\nphoton");
143 |
144 | app.labelManager.addLabel({ at: {x: btNextContainer.x + 60, y: btNextContainer.y+25 }, align: [0,1] },
145 | "Go to\nnext step");
146 |
147 | app.labelManager.addLabel({ at: {x: graph.x+graph.width/2, y: graph.y }, align: [0,-1] },
148 | "Probability\nof photon\ndetection\n(horizontal)\nvs.\nposition of\nthe detector\n(vertical)");
149 |
150 | app.labelManager.addLabel({ at: {x: amps.x+amps.width/2, y: amps.y+20 }, align: [0,-1] },
151 | "Computation\nwindow with\nprobability\namplitude\narrows");
152 |
153 | app.labelManager.addLabel({ at: {x: msg.x+msg.width/2, y: msg.y+msg.height/2 }, align: [0,0] },
154 | "Instruction box");
155 | }
156 |
157 | /* Steps */
158 | /* ------- STEP 1 -------- */
159 | function step1() {
160 | setLabels1();
161 | app.showLabelLayer([btHelpContainer]);
162 |
163 | app.arrowManager.addArrow({ x: btHelpContainer.x - 15, y: btHelpContainer - 15 }, 135 );
164 | app.arrowManager.show();
165 |
166 | // Go to step 2
167 | btHelp.onPress(step2);
168 | btHelpContainer.blinkOn(true);
169 |
170 | for (var i = -SLIT_SIZE/2;i <= SLIT_SIZE/2;i+=1) {
171 | createLightPath(exp.height/2 + 10*i);
172 | }
173 | plotProbability();
174 |
175 | detector.setPosition(560, exp.height/2);
176 | lightLayer.changePointAllPaths(2, { x: detector.x, y: detector.y }, true);
177 |
178 | amps.drawAmplitudes(lightLayer);
179 | amps.showTotalAmplitudeArrow();
180 |
181 | glowManager.enable();
182 | btGo.disable();
183 | btGraph.onPress(function(){ amps.toggleTotalAmplitudeArrow(); });
184 | }
185 | // This function creates a path with a point on the slit
186 | // It also creates the associated clock and the associations
187 | function createLightPath(y) {
188 | var path = new Engine.LightPath(1);
189 | path.addPoint({ x: photonSource.x, y: photonSource.y });
190 | path.addPoint({ x: 300, y: y });
191 | path.addPoint({ x: detector.x, y: detector.y });
192 | path.updateData(); // call this manually so the Engine knows when to compute the entire path, instead of computing every new point
193 | lightLayer.addPath(path);
194 | path.clock = clocks.addClock(photonSource.color);
195 | }
196 |
197 | function plotProbability() {
198 | graph.clear();
199 | var a, y;
200 | for(var i = 3; i < exp.height/10-2; i++) {
201 | y = i*10;
202 | lightLayer.changePointAllPaths(2, { x: detector.x, y: y }, true);
203 | graph.drawBar(y - exp.height/2, Math.pow(lightLayer.getTotalAmplitude().amplitude / lightLayer.numPaths(),2), photonSource.color);
204 | }
205 | lightLayer.changePointAllPaths(2, detector);
206 | }
207 |
208 | /* ------- STEP 2 -------- */
209 | function step2() {
210 | setDefaultLabels();
211 | btHelpContainer.blinkOff();
212 | btNextContainer.blinkOn(true);
213 | btNext.onPress(step3);
214 | app.hideLabelLayer();
215 | btHelp.onPress(function(){
216 | app.toggleLabelLayer([btHelpContainer]);
217 | });
218 | msg.setMessage( TEXT['move_detector'] );
219 |
220 | app.arrowManager.clearArrows();
221 | app.arrowManager.addArrow({
222 | x: detector.x - 10,
223 | y: detector.y - 10
224 | }, 145);
225 |
226 | // exp.blinkOn(true);
227 | detector.onTop();
228 | detector.enableDrag();
229 | detector.setCursor("ns-resize");
230 | Engine.addEvent({ source: detector, node: detector.container.node }, "moved", evDrag);
231 | Engine.addEvent({ source: detector, node: detector.container.node }, "startdrag", function(){
232 | app.arrowManager.clearArrows();
233 | amps.useTotalAmplitudeLengthText = false;
234 | if (amps.totalAmplitudeLengthText) amps.totalAmplitudeLengthText.hide();
235 | // Engine.addEvent({ source: detector, node: document.body }, "enddrag", updateTotalAmplitude);
236 | });
237 | }
238 | function evDrag(ev) {
239 | lightLayer.changePointAllPaths(2, detector);
240 | amps.drawAmplitudes(lightLayer);
241 | amps.showTotalAmplitudeArrow();
242 | lightLayer.setFinalState();
243 | }
244 |
245 |
246 | /* ------- STEP 3 -------- */
247 | function step3() {
248 | btNextContainer.blinkOff();
249 | btNext.disable();
250 | btNext.offPress();
251 | msg.setMessage( TEXT['change_color'] );
252 | photonSource.setCursor("pointer");
253 |
254 | app.arrowManager.clearArrows();
255 | app.arrowManager.addArrow({
256 | x: exp.x + photonSource.x + 20,
257 | y: exp.y + photonSource.y - 35
258 | },60);
259 |
260 | Engine.addEvent({ source: photonSource, node: photonSource.container.node }, "press", changeColor);
261 | }
262 |
263 |
264 | function changeColor(e) {
265 | photonSource.setColor(photonSource.color+1);
266 | lightLayer.setColor(Engine.STYLE.Colors[photonSource.color].color);
267 | lightLayer.setFrequency(Engine.STYLE.Colors[photonSource.color].frequency);
268 | lightLayer.drawAll();
269 | plotProbability();
270 | clocks.setAllColor(photonSource.color);
271 | amps.drawAmplitudes(lightLayer);
272 | amps.showTotalAmplitudeArrow();
273 | // amps.setTotalAmplitudeColor(photonSource.color);
274 | lightLayer.setFinalState();
275 | }
276 |
277 | /* ----------------------------------------- Start -------------------------------------------- */
278 | amps.viewportScale = 2.5;
279 | SLIT_SIZE = 6;
280 | buildWalls();
281 |
282 | Engine.C = 150;
283 | Engine.ANIMATION_SPEED = 1;
284 | Engine.FREQUENCY_ADJUST = 1.2;
285 |
286 | photonSource.setColor(2);
287 | var lightLayer = new Engine.LightLayer(
288 | Engine.STYLE.Colors[photonSource.color].color,
289 | Engine.STYLE.Colors[photonSource.color].frequency
290 | );
291 | exp.addLightLayer(lightLayer);
292 | var glowManager = new Engine.GlowManager({ 'paths': lightLayer, 'clocks': clocks, 'amplitudes': amps });
293 |
294 | step1();
295 |
--------------------------------------------------------------------------------
/photons/linear-polarization-exp1.js:
--------------------------------------------------------------------------------
1 | // PHOTON Engine Tutorials
2 | // Copyright (C) 2015-2016 Georgetown University
3 | // Department of Physics - Washington, DC, USA
4 | // Written by Dylan Cutler (https://github.com/DCtheTall)
5 | //
6 | // -------------------------------------- LICENSE --------------------------------------------------
7 | //
8 | // This library is free software; you can redistribute it and/or
9 | // modify it under the terms of the GNU Lesser General Public
10 | // License as published by the Free Software Foundation; either
11 | // version 2.1 of the License, or (at your option) any later version.
12 | //
13 | // This library is distributed in the hope that it will be useful,
14 | // but WITHOUT ANY WARRANTY; without even the implied warranty of
15 | // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
16 | // Lesser General Public License for more details.
17 | //
18 | // You should have received a copy of the GNU Lesser General Public
19 | // License along with this library; if not, write to the Free Software
20 | // Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
21 | //
22 | // #################################################################################################
23 |
24 |
25 | /*
26 |
27 | Linear Polarization Experiment 1:
28 | ---------------------------------
29 | Introduction to photon polarization
30 |
31 | This program uses the PHOTON engine to
32 | render an exercise which introduces users
33 | to photon polarization.
34 |
35 | Author: Dylan Cutler
36 |
37 | */
38 |
39 | // Setting the PHOTON.experiment property to a function that starts
40 | // the exercise.
41 | PHOTON.experiment = function() {
42 | // Reference to the instance of the PHOTON app
43 | var app = PHOTON.instance
44 | // Adding a WebGL scene
45 | , scene = new PHOTON.SceneBox(10, 60, 980, 450);
46 | app.add(scene, true);
47 | // If WebGL is supported, the experiment begins
48 | if(PHOTON._WEB_GL_SUPPORT) beginExperiment();
49 | }
50 |
51 | // This function is called when the app knows it can use WebGL
52 | // This part of the program defines the actual exercise
53 | function beginExperiment() {
54 |
55 | //== EXPERIMENT SETUP ==//
56 |
57 | // Reference to the instance of the application
58 | var app = PHOTON.instance;
59 |
60 | // Reference to object that renders the 3D scene
61 | var scene = PHOTON.children['SceneBox'];
62 | scene.placeCamera(-200, 50, 250, -200, 0, 0);
63 | scene.addPointLight({
64 | name: 'scene-light',
65 | color: 0xffff99,
66 | decay: 2000,
67 | position: new THREE.Vector3(-100, 300, 50)
68 | });
69 |
70 | //-- Adding message box and buttons --//
71 |
72 | // Refresh button
73 | var btRefresh = new PHOTON.ButtonRefresh();
74 | app.add(btRefresh, true);
75 |
76 | // New window button
77 | var btWindow = new PHOTON.ButtonWindow();
78 | app.add(btWindow, true);
79 |
80 | // Play button
81 | var btPlay = new PHOTON.ButtonPlay(720, 530, 100, 60);
82 | btPlay.disable();
83 | app.add(btPlay, true);
84 |
85 | // Help button
86 | var btHelp = new PHOTON.ButtonHelp(850, 530, 80, 60);
87 | app.add(btHelp, true);
88 |
89 | // NEXT button
90 | var btNext = new PHOTON.ButtonNext(750, 620, 160, 50);
91 | btNext.disable();
92 | app.add(btNext, true);
93 |
94 | // BACK button
95 | var btBack = new PHOTON.ButtonBack(750, 700, 160, 50);
96 | btBack.disable();
97 | app.add(btBack, true);
98 |
99 | // Message box
100 | var msg = new PHOTON.MessageBox(10, 520, 650, 270);
101 | app.add(msg, true);
102 |
103 | //-- Help Layer setup --//
104 |
105 | PHOTON.helpLayerSetup = function() {
106 | var helpLayer = PHOTON.children['help-layer'];
107 |
108 | with(helpLayer) {
109 | // Rendering a clone of the help button
110 | renderHelpClone(850, 530, 80, 60);
111 |
112 | // Rendering arrows to point to various graphics elements
113 | addArrow(950, 140, 10);
114 | addArrow(800, 40, 80);
115 | addArrow(690, 470, 150);
116 | addArrow(680, 670, 80);
117 | addArrow(680, 720, 100);
118 |
119 | // Adding text which provides information about the components of the app
120 | addText(790, 150, 200, 'Press this button to restart the exercise from the beginning.');
121 | addText(630, 10, 150, 'Press this button to open the exercise in another browser window.');
122 | addText(590, 390, 200, 'Press this button when prompted to start animations.');
123 | addText(485, 650, 200, 'Press these buttons when prompted to navigate through the exercise.');
124 | addText(200, 300, 200, 'The experiment is depicted in this window.');
125 | addText(200, 600, 200, 'This window provides helpful information about the experiment and how to navigate the exercise.');
126 | }
127 | }
128 |
129 | //-- Elements for the experiment --//
130 |
131 | // Photon source
132 | var source = new PHOTON.PhotonSource3D();
133 | source.translate(-200, 300, 0);
134 |
135 | // Polarizer
136 | var polarizer = new PHOTON.Polarizer();
137 | polarizer.translate(0, 300, 0);
138 |
139 | // Screen
140 | var screen = new PHOTON.Screen3D();
141 | screen.putInXZPlane('-x');
142 | screen.translate(200, 300, 0);
143 |
144 | // LightPaths
145 | var lightPaths = PHOTON.lightPaths;
146 |
147 | // Photon
148 | var photon = new PHOTON.Photon3D();
149 | photon.setPoyntingVector(1, 0);
150 | photon.polarize('random');
151 | photon.translate(-200, 300, 0);
152 |
153 | //== TEXT FOR EXPERIMENT ==//
154 |
155 | var TEXT = {
156 | 'welcome':
157 | "Welcome to our first 3D interactive tutorial. This experiment demonstrates "+
158 | "how individual photons travel through a polarizer onto a screen. Press the cyan "+
159 | "help button on the right for information on how to use the simulation, press "+
160 | "NEXT to continue.",
161 | 'introduce-photon-source':
162 | "In this experiment, we are going to be observing photons leaving a source "+
163 | "depicted above. Press NEXT to continue.",
164 | 'introduce-screen':
165 | "The photon source emits photons onto the screen depicted above. Press NEXT "+
166 | "to continue.",
167 | 'added-polarizer':
168 | "We have now added a polarizer in front of the photon source. This polarizer "+
169 | "will polarize a photon to 0° from the vertical, and is labeled following "+
170 | "this convention. Press the green play button to shoot the photon.",
171 | 'random-polarization':
172 | "When the photon leaves the source, we do not know the photon's polarization. "+
173 | "The ring around the photon represents that the photon could have any possible "+
174 | "polarization when it leaves the photon source. Press NEXT to continue.",
175 | 'know-polarization':
176 | "If the photon passes through the polarizer, we know that the photon "+
177 | "is polarized to 0° from the vertical. The photon graphic has changed "+
178 | "because now we know the photon's polarization. Press NEXT to continue.",
179 | 'conclusion':
180 | "The photon reaches the screen. The probability displayed on the right is "+
181 | "the probability that a photon that passes through this first polarizer will "+
182 | "and reach the screen."+
183 | "
"+
184 | "If we shoot a large number of photons at the screen "+
185 | "through this setup, the screen illuminates. The brightness of the screen is "+
186 | "related directly to the probability that each individual photon will go through."+
187 | "
"+
188 | "This is the end of this tutorial, press BACK if you would like to "+
189 | "see how photons go through this setup again."
190 | }
191 |
192 | //== TUTORIAL SETUP ==//
193 |
194 | // Instance of the tutorial object
195 | var tutorial = new PHOTON.Tutorial();
196 |
197 | // Step 0: introduce exercise and the photon source
198 | tutorial.addStep(
199 | { // Introduce exercise
200 | msg: TEXT['welcome'],
201 | blink: [
202 | {object: btHelp, hold: true}
203 | ],
204 | trigger: 'next'
205 | },
206 | { // Animate source into view
207 | animation: function(callback) {
208 | source.move(1, [0, -300, 0], function() {
209 | photon.translate(0, -300, 0);
210 | callback();
211 | })
212 | }
213 | },
214 | { // Rotate source continuously
215 | msg: TEXT['introduce-photon-source'],
216 | continuous: true,
217 | labels: [
218 | {object: source, dx: -100, dy: 160}
219 | ],
220 | animation: function(callback) {
221 | source.animateToAngle(4, 2*Math.PI, callback);
222 | },
223 | endAnimation: function(callback) {
224 | source.animateToAngle(0.5, 2*Math.PI + source.theta, callback);
225 | },
226 | trigger: 'next'
227 | }
228 | );
229 |
230 | // Step 1: Introduce polarizer
231 | tutorial.addStep(
232 | { // Move camera
233 | // removeLabels: true,
234 | animation: function(callback) {
235 | scene.moveCamera(3, -130, 50, 300, -30, 0, 0, callback);
236 | }
237 | },
238 | { // Introducing the screen
239 | animation: function(callback) {
240 | screen.move(1, [0, -300, 0], function() {
241 | var path = new PHOTON.LightPath3D(-200, 0, -190, 0);
242 | callback();
243 | });
244 | }
245 | },
246 | { // Labeling screen and adding text
247 | animation: function(callback) {
248 | source.blink();
249 | lightPaths[0].animateLengthChange(0.25, 390, callback);
250 | }
251 | },
252 | { // Explain screen
253 | labels: [
254 | {object: screen, dx: -100, dy: 160}
255 | ],
256 | msg: TEXT['introduce-screen'],
257 | trigger: 'next'
258 | }
259 | );
260 |
261 | // Step 2: Introduce polarizer
262 | tutorial.addStep(
263 | { // Moving the polarizer into view
264 | animation: function(callback) {
265 | polarizer.move(1, [0, -300, 0], callback);
266 | }
267 | }
268 | )
269 |
270 | // Step 3: Shoot photon into screen
271 | tutorial.addStep(
272 | { // Explaining the polarizer
273 | labels: [
274 | {object: polarizer, dx: -90, dy: 175}
275 | ],
276 | msg: TEXT['added-polarizer'],
277 | trigger: 'play'
278 | },
279 | { // Shoot photon with random polarization and zoom in on photon
280 | removeLabels: true,
281 | animation: function(callback) {
282 | source.blink();
283 | photon.shoot(1.2, 120, function() {
284 | scene.moveCamera(3, -60, 50, 150, -60, 0, 0, callback);
285 | });
286 | }
287 | },
288 | { // Explain random polarization
289 | msg: TEXT['random-polarization'],
290 | trigger: 'next'
291 | },
292 | { // Zoom out then shoot the photon again through the polarizer then zoom in again
293 | animation: function(callback) {
294 | scene.moveCamera(3, 130, 50, 300, 30, 0, 0, function() {
295 | photon.shoot(0.8, 80, function() {
296 | photon.polarize(0);
297 | photon.shoot(0.8, 80, function() {
298 | scene.moveCamera(3, 60, 50, 150, 60, 0, 0, callback);
299 | })
300 | })
301 | });
302 | }
303 | },
304 | { // Explain the vertical polarization
305 | msg: TEXT['know-polarization'],
306 | trigger: 'next'
307 | },
308 | { // Shoot photon into the screen
309 | animation: function(callback) {
310 | scene.moveCamera(3, 0, 50, 250, 200, 0, 0, function() {
311 | photon.shoot(1.3, 130, function() {
312 | screen.illuminate(1);
313 | scene.moveCamera(3, 50, 50, 0, 200, 0, 0, callback)
314 | })
315 | });
316 | }
317 | }
318 | );
319 |
320 | // Step 4: Conclude the exercise and give users the opportunity to go back
321 | tutorial.addStep(
322 | { // Final part
323 | msg: TEXT['conclusion'],
324 | back: function() {
325 | screen.reset()
326 | photon.translate(-410, 0, 0);
327 | photon.polarize('random');
328 | scene.placeCamera(-130, 50, 300, -30, 0, 0);
329 | source.addLabel(-100, 160);
330 | screen.addLabel(-100, 160);
331 | }
332 | }
333 | );
334 |
335 | // Starting the experiment
336 | setTimeout(function(){
337 | PHOTON.children['loading'].$.fadeOut({ duration: 300 });
338 | setTimeout(tutorial.start, 500);
339 | }, 2000);
340 |
341 | } // End of the definition of the exercise
342 |
343 | // Initializing the application when the HTML document is ready
344 | $(document).ready(function() {
345 | // Setting the intro
346 | PHOTON._INTRO_MESSAGE = "Welcome to the first exercise on "+
347 | "photon polarization. "+
348 | "Press START to begin the exercise.";
349 |
350 | // Initializating the PHOTON object
351 | PHOTON.init(1000, 800);
352 | });
353 |
--------------------------------------------------------------------------------
/qed/exp_12_single_slit_width.js:
--------------------------------------------------------------------------------
1 | // #################################################################################################
2 | // QED Engine tutorials
3 | // Copyright (C) 2015-2016 Georgetown University
4 | // Department of Physics - Washington, DC, USA
5 | // Written by Lucas Vieira (https://github.com/1ucasvb)
6 | // Dylan Cutler (https://github.com/DCtheTall)
7 | //
8 | // -------------------------------------- LICENSE --------------------------------------------------
9 | //
10 | // This library is free software; you can redistribute it and/or
11 | // modify it under the terms of the GNU Lesser General Public
12 | // License as published by the Free Software Foundation; either
13 | // version 2.1 of the License, or (at your option) any later version.
14 | //
15 | // This library is distributed in the hope that it will be useful,
16 | // but WITHOUT ANY WARRANTY; without even the implied warranty of
17 | // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
18 | // Lesser General Public License for more details.
19 | //
20 | // You should have received a copy of the GNU Lesser General Public
21 | // License along with this library; if not, write to the Free Software
22 | // Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
23 | //
24 | // #################################################################################################
25 |
26 |
27 | /* STANDARD SETUP */
28 | var clocksBoxHeight = 150; // helps set up overall height
29 |
30 | // Main object definitions
31 | var app = Engine.create("experiment", 1000, 430 + clocksBoxHeight);
32 | $(document.body).append(app.div);
33 |
34 | var exp = new Engine.ExperimentBox("exp", 600, 400);
35 | app.add(exp, 10, 10);
36 |
37 | var graph = new Engine.GraphBox("graph", 120, 400, 2);
38 | app.add(graph, 620, 10);
39 |
40 | var amps = new Engine.AmplitudeBox("amps", 240, 240);
41 | app.add(amps, 750, 10);
42 |
43 | var msg = new Engine.MessageBox("msg", 240, 60 + clocksBoxHeight);
44 | app.add(msg, 750, 360);
45 |
46 | var clocks = new Engine.ClockBox("clocks", 730, clocksBoxHeight);
47 | clocks.setRadius(30);
48 | app.add(clocks, 10, 420);
49 |
50 | // Button in containers, necessary to make it above the label overlay
51 | var btHelpContainer = new Engine.RaphaelPaper("btHelpContainer", 50, 40);
52 | var btHelp = new Engine.ButtonHelp();
53 | btHelpContainer.add(btHelp, 0, 0);
54 | app.add(btHelpContainer, 940, 260);
55 |
56 | var btGoContainer = new Engine.RaphaelPaper("btGoContainer", 50, 40);
57 | var btGo = new Engine.ButtonGo();
58 | btGoContainer.add(btGo, 0, 0);
59 | app.add(btGoContainer, 750, 260);
60 |
61 | var btNextContainer = new Engine.RaphaelPaper("btNextContainer", 120, 40);
62 | var btNext = new Engine.ButtonNext();
63 | btNextContainer.add(btNext, 0, 0);
64 | app.add(btNextContainer, 810, 260);
65 |
66 | var btGraph = new Engine.ButtonGraph();
67 | amps.add(btGraph, amps.width-btGraph.width-5, amps.height-btGraph.height-5);
68 |
69 | /* ------------------------------ BEGIN EXPERIMENT ------------------------------ */
70 |
71 | var TEXT = {
72 | 'welcome':
73 | "
Welcome to the next\nsingle slit tutorial.\n\n"+
74 | "This time, we will explore what\nhappens when light passes\nthrough a slit of different widths\nand relate that to changing the color of light.\n\n\n"+
75 | "To continue, press
"
76 | ,
77 | 'slit_size':
78 | "In this tutorial, we will explore what happens when the width of the slit changes.\n\n"+
79 | "Press the yellow buttons on the left to change the width of the slit and to see what happens to the probability distribution.\n\n"+
80 | "Be sure to move the detector and study how the probability amplitudes change with detector position.\n\n"+
81 | "Can you describe in words what happens when the slit becomes smaller? What about when it becomes larger? Can you explain why it behaves this way in terms of the amplitude arrows?\n\n"+
82 | "When you are done, press "
83 | ,
84 | 'change_color':
85 | "Now, we can also explore how the pattern changes with the color of the photon. Click the photon source to change its color.\n\n"+
86 | "How does the color of the photon affect the shape of the probability distribution for slits of different sizes?\n\n"+
87 | "Recall that the rate of rotation of the clocks is faster for blue than red.\nTry to explain in words the relation between the width of the slit for each probability curve.\n\nCan you relate the changes of the slit width for fixed photon color to those for changing the color with a fixed slit width?\n\n"+
88 | "This concludes this tutorial."
89 | }
90 |
91 | // Source
92 | var photonSource = new Engine.PhotonSource("source", 0);
93 | photonSource.setTitle("Source");
94 | exp.add(photonSource, 30, 200);
95 |
96 | // Detector rail
97 | var rail = new Engine.Rail(10,360);
98 | exp.add(rail, 560, 20);
99 |
100 | // Detector
101 | var detector = new Engine.Detector("detector");
102 | detector.snap = 10;
103 | detector.setTitle("Detector");
104 | exp.add(detector, 560, 200);
105 | detector.setDragBounds([560, 560], [30, 370]);
106 |
107 | var btSlitNarrow = new Engine.ButtonSlitNarrow();
108 | var btSlitWide = new Engine.ButtonSlitWide();
109 | exp.add(btSlitNarrow, 70, 290);
110 | exp.add(btSlitWide, 70+70, 290);
111 |
112 | var wall1, wall2;
113 | function buildWalls() {
114 | var a = (SLIT_SIZE+1)*10;
115 | var h = exp.height/2 - a/2;
116 | var w = 10;
117 | wall1 = new Engine.Wall(w,h,5);
118 | wall2 = new Engine.Wall(w,h,5);
119 | exp.add(wall1, exp.width/2-w/2, 0);
120 | exp.add(wall2, exp.width/2-w/2, exp.height - h);
121 | }
122 |
123 | /* Labels */
124 |
125 | function setLabels1() {
126 | app.labelManager.clearLabels();
127 | app.labelManager.addLabel({ at: {x: app.width/2-20, y: app.height/2}, align: [0,0] }, TEXT['welcome'] );
128 | }
129 |
130 | function setDefaultLabels() {
131 | app.labelManager.clearLabels();
132 | app.arrowManager.clearArrows();
133 |
134 | app.labelManager.addLabel({ at: {x: 10, y: 10}, align: [-1,-1] },
135 | "
press again to exit the help window.
");
136 |
137 | app.labelManager.addLabel({ at: photonSource, align: [-1,0] },
138 | "Photon\nsource\nPress to\nchange color");
139 |
140 | app.labelManager.addLabel({ at: detector, align: [1,0] },
141 | "Photon\ndetector\nDrag to\nchange\nposition");
142 |
143 | app.labelManager.addLabel({ at: {x: clocks.x + clocks.width/2, y: clocks.y + clocks.height/2 }, align: [0,0] },
144 | "Clock for each path\nMouse over or long tap to highlight an\nindividual path and its respective clock and arrow");
145 |
146 | app.labelManager.addLabel({ at: {x: btGoContainer.x + 15, y: btGoContainer.y+25 }, align: [1,1] },
147 | "Emit\nphoton");
148 |
149 | app.labelManager.addLabel({ at: {x: btNextContainer.x + 60, y: btNextContainer.y+25 }, align: [0,1] },
150 | "Go to\nnext step");
151 |
152 | app.labelManager.addLabel({ at: {x: graph.x+graph.width/2, y: graph.y }, align: [0,-1] },
153 | "Probability\nof photon\ndetection\n(horizontal)\nvs.\nposition of\nthe detector\n(vertical)");
154 |
155 | app.labelManager.addLabel({ at: {x: amps.x+amps.width/2, y: amps.y+20 }, align: [0,-1] },
156 | "Computation\nwindow with\nprobability\namplitude\narrows");
157 |
158 | app.labelManager.addLabel({ at: {x: msg.x+msg.width/2, y: msg.y+msg.height/2 }, align: [0,0] },
159 | "Instruction box");
160 |
161 | app.labelManager.addLabel({ at: {x: btSlitWide.x + btSlitWide.width/2, y: btSlitWide.y + btSlitWide.height*0.7 }, align: [-1,0] },
162 | "Widen\nslit");
163 |
164 | app.labelManager.addLabel({ at: {x: btSlitNarrow.x + btSlitNarrow.width/2, y: btSlitNarrow.y + btSlitNarrow.height*0.7 }, align: [0.75,0] },
165 | "Narrow\nslit");
166 | }
167 |
168 | /* Steps */
169 | /* ------- STEP 1 -------- */
170 | function step1() {
171 | setLabels1();
172 | app.showLabelLayer([btHelpContainer]);
173 |
174 | app.arrowManager.addArrow({ x: btHelpContainer.x - 15, y: btHelpContainer.y - 15 }, 135 );
175 | app.arrowManager.show();
176 |
177 | // Go to step 2
178 | btHelp.onPress(step2);
179 | btHelpContainer.blinkOn(true);
180 |
181 | for (var i = -SLIT_SIZE/2;i <= SLIT_SIZE/2;i+=1) {
182 | createLightPath(exp.height/2 + 10*i);
183 | }
184 | plotProbability();
185 |
186 | detector.setPosition(560, exp.height/2);
187 | lightLayer.changePointAllPaths(2, { x: detector.x, y: detector.y }, true);
188 |
189 | amps.drawAmplitudes(lightLayer);
190 | amps.showTotalAmplitudeArrow();
191 |
192 | glowManager.enable();
193 | btGo.disable();
194 | btGraph.onPress(function(){ amps.toggleTotalAmplitudeArrow(); });
195 |
196 | btSlitNarrow.onPress(function(){
197 | if (SLIT_SIZE == 2) return;
198 | SLIT_SIZE -= 2;
199 |
200 | if (SLIT_SIZE == 2) { btSlitNarrow.disable(); }
201 | btSlitWide.enable();
202 |
203 | slitChanged();
204 | });
205 | btSlitWide.onPress(function(){
206 | if (SLIT_SIZE == 8) return;
207 | SLIT_SIZE += 2;
208 |
209 | if (SLIT_SIZE == 8) { btSlitWide.disable(); }
210 | btSlitNarrow.enable();
211 |
212 | slitChanged();
213 | });
214 | }
215 |
216 | function slitChanged() {
217 | lightLayer.clear();
218 | clocks.clear();
219 | exp.remove(wall1); exp.remove(wall2);
220 | buildWalls();
221 | amps.clear();
222 | for (var i = -SLIT_SIZE/2;i <= SLIT_SIZE/2;i+=1) {
223 | createLightPath(exp.height/2 + 10*i);
224 | }
225 | plotProbability();
226 |
227 | lightLayer.changePointAllPaths(2, detector);
228 | amps.drawAmplitudes(lightLayer);
229 | amps.showTotalAmplitudeArrow();
230 | lightLayer.setFinalState();
231 |
232 | glowManager.assign({ 'paths': lightLayer, 'clocks': clocks, 'amplitudes': amps });
233 | glowManager.enable();
234 | }
235 |
236 | // This function creates a path with a point on the slit
237 | // It also creates the associated clock and the associations
238 | function createLightPath(y) {
239 | var path = new Engine.LightPath(1);
240 | path.addPoint({ x: photonSource.x, y: photonSource.y });
241 | path.addPoint({ x: 300, y: y });
242 | path.addPoint({ x: detector.x, y: detector.y });
243 | path.updateData(); // call this manually so the Engine knows when to compute the entire path, instead of computing every new point
244 | lightLayer.addPath(path);
245 | path.clock = clocks.addClock(photonSource.color);
246 | }
247 |
248 | function plotProbability() {
249 | graph.clear();
250 | var a, y;
251 | for(var i = 3; i < exp.height/10-2; i++) {
252 | y = i*10;
253 | lightLayer.changePointAllPaths(2, { x: detector.x, y: y }, true);
254 | graph.drawBar(y - exp.height/2, Math.pow(lightLayer.getTotalAmplitude().amplitude / lightLayer.numPaths(),2), photonSource.color);
255 | }
256 | lightLayer.changePointAllPaths(2, detector);
257 | }
258 |
259 | /* ------- STEP 2 -------- */
260 | function step2() {
261 | setDefaultLabels();
262 | btHelpContainer.blinkOff();
263 | btNextContainer.blinkOn(true);
264 | btNext.onPress(step3);
265 | app.hideLabelLayer();
266 | btHelp.onPress(function(){
267 | app.toggleLabelLayer([btHelpContainer]);
268 | });
269 | msg.setMessage( TEXT['slit_size'] );
270 |
271 | app.arrowManager.clearArrows();
272 | app.arrowManager.addArrow({
273 | x: detector.x - 10,
274 | y: detector.y - 10
275 | }, 145);
276 |
277 | // exp.blinkOn(true);
278 | detector.onTop();
279 | detector.enableDrag();
280 | detector.setCursor("ns-resize");
281 | Engine.addEvent({ source: detector, node: detector.container.node }, "moved", evDrag);
282 | Engine.addEvent({ source: detector, node: detector.container.node }, "startdrag", function(){
283 | app.arrowManager.clearArrows();
284 | amps.useTotalAmplitudeLengthText = false;
285 | if (amps.totalAmplitudeLengthText) amps.totalAmplitudeLengthText.hide();
286 | // Engine.addEvent({ source: detector, node: document.body }, "enddrag", updateTotalAmplitude);
287 | });
288 | }
289 | function evDrag(ev) {
290 | lightLayer.changePointAllPaths(2, detector);
291 | amps.drawAmplitudes(lightLayer);
292 | amps.showTotalAmplitudeArrow();
293 | lightLayer.setFinalState();
294 | }
295 |
296 |
297 | /* ------- STEP 3 -------- */
298 | function step3() {
299 | btNextContainer.blinkOff();
300 | btNext.disable();
301 | btNext.offPress();
302 | msg.setMessage( TEXT['change_color'] );
303 | photonSource.setCursor("pointer");
304 |
305 | app.arrowManager.clearArrows();
306 | app.arrowManager.addArrow({
307 | x: exp.x + photonSource.x + 20,
308 | y: exp.y + photonSource.y - 35
309 | },60);
310 |
311 | Engine.addEvent({ source: photonSource, node: photonSource.container.node }, "press", changeColor);
312 | }
313 |
314 |
315 | function changeColor(e) {
316 | photonSource.setColor(photonSource.color+1);
317 | lightLayer.setColor(Engine.STYLE.Colors[photonSource.color].color);
318 | lightLayer.setFrequency(Engine.STYLE.Colors[photonSource.color].frequency);
319 | lightLayer.drawAll();
320 | plotProbability();
321 | clocks.setAllColor(photonSource.color);
322 | amps.drawAmplitudes(lightLayer);
323 | amps.showTotalAmplitudeArrow();
324 | // amps.setTotalAmplitudeColor(photonSource.color);
325 | lightLayer.setFinalState();
326 | }
327 |
328 | /* ----------------------------------------- Start -------------------------------------------- */
329 | amps.viewportScale = 2.5;
330 | SLIT_SIZE = 6;
331 | buildWalls();
332 |
333 | Engine.C = 150;
334 | Engine.ANIMATION_SPEED = 1;
335 | Engine.FREQUENCY_ADJUST = 1.2;
336 |
337 | var lightLayer = new Engine.LightLayer(
338 | Engine.STYLE.Colors[photonSource.color].color,
339 | Engine.STYLE.Colors[photonSource.color].frequency
340 | );
341 | exp.addLightLayer(lightLayer);
342 | var glowManager = new Engine.GlowManager({ 'paths': lightLayer, 'clocks': clocks, 'amplitudes': amps });
343 |
344 | step1();
345 |
--------------------------------------------------------------------------------
/qed/exp_00_detectors_in_and_outside_glass.js:
--------------------------------------------------------------------------------
1 | // #################################################################################################
2 | // QED Engine tutorials
3 | // Copyright (C) 2015-2016 Georgetown University
4 | // Department of Physics - Washington, DC, USA
5 | // Written by Lucas Vieira (https://github.com/1ucasvb)
6 | // Dylan Cutler (https://github.com/DCtheTall)
7 | //
8 | // -------------------------------------- LICENSE --------------------------------------------------
9 | //
10 | // This library is free software; you can redistribute it and/or
11 | // modify it under the terms of the GNU Lesser General Public
12 | // License as published by the Free Software Foundation; either
13 | // version 2.1 of the License, or (at your option) any later version.
14 | //
15 | // This library is distributed in the hope that it will be useful,
16 | // but WITHOUT ANY WARRANTY; without even the implied warranty of
17 | // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
18 | // Lesser General Public License for more details.
19 | //
20 | // You should have received a copy of the GNU Lesser General Public
21 | // License along with this library; if not, write to the Free Software
22 | // Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
23 | //
24 | // #################################################################################################
25 |
26 |
27 | /* STANDARD SETUP */
28 | var clocksBoxHeight = 150; // helps set up overall height
29 |
30 | // Main object definitions
31 | var app = Engine.create("experiment", 1000, 430 + clocksBoxHeight);
32 | $(document.body).append(app.div);
33 |
34 | var exp = new Engine.ExperimentBox("exp", 600, 400);
35 | app.add(exp, 10, 10);
36 |
37 | var graph = new Engine.GraphBox("graph", 120, 400);
38 | app.add(graph, 620, 10);
39 |
40 | var amps = new Engine.AmplitudeBox("amps", 240, 240);
41 | var amps2 = new Engine.AmplitudeBox("amps2", 240, 240);
42 | app.add(amps, 750, 10);
43 |
44 |
45 | var msg = new Engine.MessageBox("msg", 240, 60 + clocksBoxHeight);
46 | app.add(msg, 750, 360);
47 |
48 | var clocks = new Engine.ClockBox("clocks", 730, clocksBoxHeight);
49 | clocks.setRadius(50);
50 | app.add(clocks, 10, 420);
51 |
52 | // Button in containers, necessary to make it above the label overlay
53 | var btHelpContainer = new Engine.RaphaelPaper("btHelpContainer", 50, 40);
54 | var btHelp = new Engine.ButtonHelp();
55 | btHelpContainer.add(btHelp, 0, 0);
56 | app.add(btHelpContainer, 940, 260);
57 |
58 | var btGoContainer = new Engine.RaphaelPaper("btGoContainer", 50, 40);
59 | var btGo = new Engine.ButtonGo();
60 | btGoContainer.add(btGo, 0, 0);
61 | app.add(btGoContainer, 750, 260);
62 |
63 | var btNextContainer = new Engine.RaphaelPaper("btNextContainer", 120, 40);
64 | var btNext = new Engine.ButtonNext();
65 | btNextContainer.add(btNext, 0, 0);
66 | app.add(btNextContainer, 810, 260);
67 |
68 | // var btGraph = new Engine.ButtonGraph();
69 | // amps.add(btGraph, amps.width-btGraph.width-5, amps.height-btGraph.height-5);
70 |
71 | /* ------------------------------ BEGIN EXPERIMENT ------------------------------ */
72 |
73 | var angle = -5;
74 | var distance = 120;
75 |
76 | amps.viewportScale = 5;
77 | amps2.viewportScale = 5;
78 |
79 | Engine.FREQUENCY_ADJUST = 0.7;
80 |
81 | // Source
82 | var photonSource = new Engine.PhotonSource("source", 0, true);
83 |
84 | // Detector
85 | var detector = new Engine.Detector("detector", false);
86 |
87 | // photonSource.setOpacity(0.5);
88 | // detector.setOpacity(0.5);
89 |
90 | Engine.ANIMATION_SPEED = 1;
91 | var spaceBelow = 40;
92 | var glassWidth = 400;
93 | var glassThickness = 10*16;
94 | var glassIOR = 2;
95 |
96 | function intro() {
97 | app.labelManager.addLabel({ at: {x: app.width/2-60, y: app.height/2}, align: [0,0] },
98 | "
Welcome to the partial reflection tutorial.\n\n"+
99 | "Here, we will see what happens when\nlight passes through and reflects off a piece of glass.\n\n"+
100 | "To begin, press
Instructions will be given\nin the instruction box,\non the bottom right."+
126 | ""+
127 | "
"
128 | );
129 |
130 | app.showLabelLayer([msg]);
131 |
132 | app.arrowManager.clearArrows();
133 | app.arrowManager.addArrow({
134 | x: msg.x - 20,
135 | y: msg.y + msg.height/2
136 | },180);
137 | app.arrowManager.onTop();
138 |
139 | msg.setMessage(
140 | "This is the instruction box. Instructions will be shown here, and the box will glow when there's a new instruction.\n\n"+
141 | "Press in this box to continue.", true);
142 |
143 | Engine.addEvent({ source: msg, node: msg.div }, "press", step2);
144 | }
145 | function step2() {
146 | Engine.removeEvent({ source: msg, node: msg.div }, "press");
147 |
148 | msg.setMessage(
149 | "At the left, we see the experiment window, where the simulations will occur. Right now, it is empty.\n\n"+
150 | "Press "+""+" to add a source of photons and a detector.");
151 |
152 | app.arrowManager.clearArrows();
153 | app.arrowManager.hide();
154 |
155 | btNextContainer.blinkOn(true);
156 |
157 | app.hideLabelLayer();
158 |
159 | btNext.onPress(step3);
160 | btNext.enable();
161 |
162 | }
163 |
164 | function step3() {
165 | btNextContainer.blinkOff();
166 |
167 | exp.add(photonSource,
168 | exp.width/2 + distance*Math.sin(angle*Engine.DEG2RAD),
169 | exp.height/2 - distance*Math.cos(angle*Engine.DEG2RAD)
170 | );
171 | photonSource.setRotation(90+angle);
172 |
173 | exp.add(detector,
174 | exp.width/2 + distance*Math.sin((180+angle)*Engine.DEG2RAD),
175 | exp.height/2 - distance*Math.cos((180+angle)*Engine.DEG2RAD)
176 | );
177 | detector.setRotation(90+angle);
178 |
179 | msg.setMessage(
180 | "We re-examine the simplest possible experiment. The event is describes as follows: a photon leaves the source, moves in a straight line, and hits the detector. We consider only one alternative way for the event to occur. The path the photon will take is shown as a straight line.\n\n"+
181 | "For each path, there will be a clock and an amplitude arrow pointing in the same direction as the clock's hand. The hand starts at 12 o'clock.\n\n"+
182 | "When the photon is emitted, the arrow has unit length. As the photon moves through the path, the clock will rotate very rapidly according to the color of the light (36,000 revolutions per inch for red light). When the photon interacts with objects, the size of the amplitude arrow may shrink.\n\n"+
183 | "Press "+""+" to begin the simulation.");
184 |
185 | var path = new Engine.LightPath(1);
186 | path.addPoint({ x: photonSource.x, y: photonSource.y });
187 | path.addPoint({ x: detector.x, y: detector.y });
188 | path.updateData(); // call this manually so the Engine knows when to compute the entire path, instead of computing every new point
189 | lightLayer.addPath(path);
190 | clocks.setRadius(60);
191 | path.clock = clocks.addClock(photonSource.color);
192 |
193 | path.clock.mockAmplitudeBox = amps;
194 | amps.drawMockAmplitude(0);
195 |
196 | btGoContainer.blinkOn(true);
197 |
198 | btNext.disable();
199 | btGo.enable();
200 | btGo.onPress(step4);
201 |
202 |
203 | }
204 |
205 | function step4() {
206 | btGoContainer.blinkOff();
207 | btGo.disable();
208 | lightLayer.shootAllPhotons(step5);
209 | }
210 |
211 | function step5() {
212 | amps.drawAmplitudes(lightLayer);
213 | detector.blink();
214 |
215 | glowManager.assign({ 'paths': lightLayer, 'clocks': clocks, 'amplitudes': amps });
216 | glowManager.enable();
217 |
218 | msg.setMessage(
219 | "The final position of the clock for this path is represented by an arrow in the amplitude arrows window, on the top right.\n\n"+
220 | "Pay close attention to the direction and size of this arrow.\n\n"+
221 | "Now, let's make things more interesting. Press "+""+" to place the detector inside a thick piece of glass."
222 | );
223 | amps.blinkOn(true);
224 |
225 | btNext.enable();
226 | btNext.onPress(step6);
227 | }
228 |
229 | function step6() {
230 | exp.add(new Engine.Glass(glassWidth, glassThickness), exp.width/2-glassWidth/2, exp.height - glassThickness - spaceBelow, true);
231 |
232 | exp.add(new Engine.Marker("Air"), exp.width/2-glassWidth/2, exp.height/2 - 20);
233 | exp.add(new Engine.Marker("Glass"), exp.width/2-glassWidth/2, exp.height/2 + 20);
234 |
235 | amps.blinkOff();
236 |
237 | lightLayer.clear();
238 | clocks.clear();
239 | app.remove(amps);
240 | app.add(amps2, 750, 10);
241 |
242 | var path;
243 | path = new Engine.LightPath(1);
244 | path.addPoint({ x: photonSource.x, y: photonSource.y });
245 | path.addPoint({ x: exp.width/2, y: exp.height/2, ior: 2, trigger: function() {
246 | msg.setMessage(
247 | "This path leads the photon to hit the surface of the glass before being transmitted through it.\n\n"+
248 | "Therefore, for this path, we must shrink the amplitude arrow by a factor representing the chance that it does get transmitted, instead of reflected.\n\n"+
249 | "The arrow shrinks slightly to 98% of its original size, since 0.98² ≈ 96%, the chance of transmission. However, this is hard to see.\n\n"+
250 | "Press "+""+" to continue."
251 | );
252 | lightLayer.pauseAnimation();
253 | btGo.enable();
254 | btGo.onPress(function(){
255 | btGo.disable();
256 | lightLayer.resumeAnimation();
257 | });
258 | } });
259 | path.addPoint({ x: detector.x, y: detector.y });
260 | path.updateData(); // call this manually so the Engine knows when to compute the entire path, instead of computing every new point
261 | lightLayer.addPath(path);
262 | path.clock = clocks.addClock(photonSource.color);
263 |
264 | msg.setMessage(
265 | "The photon will take the same path, but inside the glass it will move more slowly. The clock, however, spins at the same rate.\n\n"+
266 | "How will this affect the final amplitude arrow? Find out by pressing "+""+" again."
267 | );
268 |
269 | amps2.drawMockAmplitude(0);
270 | path.clock.mockAmplitudeBox = amps2;
271 |
272 | btNext.disable();
273 | btGo.enable();
274 | btGo.onPress(function(){
275 | btGo.disable();
276 | lightLayer.shootAllPhotons(step7);
277 | });
278 | }
279 |
280 | function step7() {
281 | amps2.drawAmplitudes(lightLayer);
282 | detector.blink();
283 |
284 | glowManager.assign({ 'paths': lightLayer, 'clocks': clocks, 'amplitudes': amps2 });
285 | glowManager.enable();
286 |
287 | amps2.blinkOn(true);
288 | msg.setMessage(
289 | "Now check the new amplitude arrow. How does it compare to the previous one?\n\n"+
290 | "Keep in mind what happens in the presence of the glass.\n\n"+
291 | "Press "+""+" to find out if you are right."
292 | );
293 |
294 | btNext.enable();
295 | btNext.onPress(step8);
296 | }
297 |
298 | function step8() {
299 | btNext.disable();
300 |
301 | amps.resetBlink();
302 | app.add(amps, amps.x, amps.y);
303 | amps.drawLabel("Without glass")
304 | app.add(amps, app.width/2 - amps.width/2 - amps.width/2*1.25, app.height/2 - amps.height );
305 | $(amps.div).hide().fadeIn();
306 | amps.onTop();
307 | amps.blinkOn(true);
308 |
309 | amps2.resetBlink();
310 | $(amps2.div).animate({ left: app.width/2 - amps.width/2 + amps.width/2*1.25, top: app.height/2 - amps.height });
311 | amps2.drawLabel("With glass");
312 | amps2.onTop();
313 | amps2.blinkOn(true);
314 |
315 | app.labelManager.clearLabels();
316 | app.showLabelLayer([amps,amps2,msg]);
317 |
318 | msg.setMessage(
319 | "Now compare both arrows. How are they similar and how are they different?\n\n"+
320 | "This concludes this tutorial. Please, proceed to the next section of the course."
321 | );
322 |
323 | }
324 |
325 | function step() {
326 | app.labelManager.clearLabels();
327 | app.labelManager.addLabel({ at: {x: app.width/2-20, y: app.height/2}, align: [0,0] },
328 | "
Welcome to the first interactive tutorial.\n\n"+
329 | "Here, we will see what happens when\nlight passes through a piece of glass.\n\n"+
330 | "To begin, press
![](\""+Engine.assetURL("button_help.png")+"\"/)
![](\""+Engine.assetURL("button_go.png")+"\"/)
to see how a lens works.\n\n"+
79 | "Press ![](\""+Engine.assetURL('button_graph.png')+"\"/)
to plot the resulting probability distribution.\n\n"+
80 | "Move the detector to see how the arrows cancel nearly everywhere else. Recall the glass retards the arrows by just the right amount for all clocks to align. This is how the lens focuses."
81 | }
82 |
83 | // Source
84 | var photonSource = new Engine.PhotonSource("source", 0);
85 | photonSource.setTitle("Source");
86 | exp.add(photonSource, 30, 200);
87 |
88 | // Detector rail
89 | var rail = new Engine.Rail(10,360);
90 | exp.add(rail, 560, 20);
91 |
92 | // Detector
93 | var detector = new Engine.Detector("detector");
94 | detector.snap = 10;
95 | detector.setTitle("Detector");
96 | exp.add(detector, 560, 200);
97 | detector.setDragBounds([560, 560], [30, 370]);
98 |
99 | function buildWalls() {
100 | var a = (SLIT_SIZE+1)*10;
101 | var h = exp.height/2 - a/2;
102 | var w = 10;
103 | exp.add(new Engine.Wall(w,h,5), exp.width/2-w/2, 0);
104 | exp.add(new Engine.Wall(w,h,5), exp.width/2-w/2, exp.height - h);
105 | }
106 |
107 | /* Labels */
108 |
109 | function setLabels1() {
110 | app.labelManager.clearLabels();
111 | app.labelManager.addLabel({ at: {x: app.width/2-20, y: app.height/2}, align: [0,0] }, TEXT['welcome'] );
112 | }
113 |
114 | function setDefaultLabels() {
115 | app.labelManager.clearLabels();
116 | app.arrowManager.clearArrows();
117 |
118 | app.labelManager.addLabel({ at: {x: 10, y: 10}, align: [-1,-1] },
119 | "![](\""+Engine.assetURL("button_next.png")+"\"/)