31:Td06,function *TDSESimulation() { potential() // set up potential texture while (playing) { regl.poll(); ++mutable elapsedTime if (elapsedTime > animationTimeLimit) { reset(); } // used to hold during click events when imported into another notebook, not relevant here if (holdOnFirstFrame) { reset(); } // step through approximation, rendering each step to a frame buffer setupDefault({time: elapsedTime}, () => { psi_n({wave_position: wave_position, wave_unit_components: wave_unit_components}); k1(); k2(); k3(); k4(); combine_k(); }) if (width > breakpoint) { let gl = regl._gl; gl.enable(gl.SCISSOR_TEST); gl.scissor(w-inset_w, 0, inset_w, inset_h); gl.viewport(w-inset_w, 0, inset_w, inset_h); if (selected_visualization == "probability") { draw2DProbability(); } if (selected_visualization == "probability_amplitude") { draw2DProbabilityAmplitude(); } gl.scissor(0, 0, w - inset_w, h); gl.viewport(-w/6, 0, w, h); camera(function () { setup3DDefaults(() => { if (selected_visualization == "probability") { drawProbability(); } if (selected_visualization == "probability_amplitude") { drawProbabilityAmplitude(); } drawPotential(); }); }); } else { if (selected_visualization == "probability") { draw2DProbability(); } if (selected_visualization == "probability_amplitude") { draw2DProbabilityAmplitude(); } } yield regl.container; } if (!playing) { while (true) { if (elapsedTime < 1) { // if we have reset the simulation, render the first step setupDefault({time: elapsedTime}, () => { psi_n({wave_position: wave_position, wave_unit_components: wave_unit_components}); k1(); k2(); k3(); k4(); combine_k(); }) } if (width > breakpoint) { let gl = regl._gl; gl.enable(gl.SCISSOR_TEST); gl.scissor(w-inset_w, 0, inset_w, inset_h); gl.viewport(w-inset_w, 0, inset_w, inset_h); if (selected_visualization == "probability") { draw2DProbability(); } if (selected_visualization == "probability_amplitude") { draw2DProbabilityAmplitude(); } gl.scissor(0, 0, w-inset_w, h); gl.viewport(-inset_w/2, 0, w, h); camera(function () { setup3DDefaults(() => { if (selected_visualization == "probability") { drawProbability(); } if (selected_visualization == "probability_amplitude") { drawProbabilityAmplitude(); } drawPotential(); }); }); } else { if (selected_visualization == "probability") { draw2DProbability(); } if (selected_visualization == "probability_amplitude") { draw2DProbabilityAmplitude(); } } yield regl.container; } }}32:Tf57,function createREGLInstance () { const container = document.createElement('div'); container.classList.add("container"); container.style.position = "relative"; container.style.width = w + 'px'; if (width > breakpoint) { container.style.height = h + 'px'; } const glCanvas = document.createElement('canvas'); glCanvas.classList.add("glCanvas"); glCanvas.style.position = "absolute"; glCanvas.style.top = 0 glCanvas.style.left = 0; glCanvas.style.width = w; glCanvas.style.height = h; glCanvas.style.zIndex = 1; glCanvas.width = w; glCanvas.height = h; // used to provide an element to the camera, so it can properly calculate width and height of the 3D area const cameraDiv = document.createElement('div'); cameraDiv.classList.add("cameraDiv"); cameraDiv.style.position = "absolute"; cameraDiv.style.top = 0 cameraDiv.style.left = 0; cameraDiv.style.width = 2 * w / 3 + 'px'; cameraDiv.style.height = h + 'px'; cameraDiv.style.zIndex = 2; if (width > breakpoint) { cameraDiv.style.display = "block;" } else { cameraDiv.style.display = "none"; } const topCanvas = document.createElement('canvas'); topCanvas.classList.add("topCanvas"); topCanvas.style.bottom = 0 topCanvas.style.left = w - inset_w +'px'; topCanvas.style.width = inset_w + 'px'; topCanvas.style.height = inset_h + 'px'; topCanvas.style.zIndex = 2; topCanvas.width = inset_w; topCanvas.height = inset_h; const controls = document.createElement('div'); controls.classList.add("controls"); if (width > breakpoint) { controls.style.position = "absolute"; controls.style.top = 0; controls.style.left = w - inset_w +'px'; controls.style.width = inset_w + 'px'; controls.style.height = inset_h + 'px'; } else { controls.style.position = "relative"; controls.style.width = "100%"; } controls.style.zIndex = 3; function addLabel(text) { let d = document.createElement('span'); let n = document.createTextNode(text); d.appendChild(n); return d } function addText(text) { let d = document.createElement('p'); let n = document.createTextNode(text); d.appendChild(n); return d } controls.appendChild(viewof playToggle); controls.appendChild(viewof stopToggle); controls.appendChild(viewof restart); controls.appendChild(document.createElement('br')); controls.appendChild(addLabel("Visualization:")); controls.appendChild(viewof selected_visualization); controls.appendChild(document.createElement('br')); controls.appendChild(addLabel("Potential:")); controls.appendChild(viewof potential_selection); // let d = document.createElement('div'); // d.classList.add("barrier-slider"); // d.appendChild(document.createElement('br')); // d.appendChild(addLabel("Barrier Height:")); // d.appendChild(viewof barrier_height); // d.appendChild(document.createElement('br')); // controls.appendChild(d) if (width > breakpoint) { controls.appendChild(document.createElement('br')); controls.appendChild(addText("Click and drag the 3D representation to the left to change the view.")) controls.appendChild(addText("Click and drag the 2D representation below to set the initial wavepacket position and direction. Release to start the simulation.")); } else { controls.appendChild(document.createElement('br')); controls.appendChild(addText("Click and drag above to set the initial wavepacket position and direction. Release to start the simulation.")); } container.appendChild(glCanvas); container.appendChild(cameraDiv); container.appendChild(topCanvas); container.appendChild(controls); const regl = createREGL( Object.assign({canvas: glCanvas, extensions: 'OES_texture_float'})) regl.cameraDiv = cameraDiv; regl.canvas = glCanvas; regl.topCanvas = topCanvas; regl.container = container; return regl }33:[] 2f:{"title":"Split View of TDSE Simulation","cells":[{"id":0,"value":"md`# Split View of TDSE Simulation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"value":"TDSESimulation()","pinned":true,"hidden":false,"mode":"ojs"},{"id":971,"value":"playing","pinned":true,"hidden":false,"mode":"ojs"},{"id":734,"value":"width","pinned":true,"hidden":false,"mode":"ojs"},{"id":609,"value":"md`Simulation steps/s: ${fps}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1077,"value":"breakpoint = 900","pinned":true,"hidden":false,"mode":"ojs"},{"id":110,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":1139,"value":"{\n width;\n reset();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":149,"value":"viewof restart = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":960,"value":"viewof playToggle = {\n const button = html``;\n button.onclick = () => {\n mutable playing = ! mutable playing;\n };\n return button;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1123,"value":"viewof stopToggle = {\n const button = html``;\n button.onclick = () => {\n mutable playing = ! mutable playing;\n };\n return button;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1037,"value":"playing","pinned":true,"hidden":false,"mode":"ojs"},{"id":1042,"value":"mutable playing","pinned":true,"hidden":false,"mode":"ojs"},{"id":452,"value":"md`Select Visualization:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":454,"value":"viewof selected_visualization = html`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":399,"value":"md`Select Color Map:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":402,"value":"viewof color_map = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":311,"value":"md`Select Potential:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"viewof potential_selection = html`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":63,"value":"md`Barrier Height (sets potential to barrier):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"viewof barrier_height = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"md`## Potentials`","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"import {inferno, viridis, turbo, plasma} from \"@flimsyhat/webgl-color-maps\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":367,"value":"md`## 2D Shader`","pinned":false,"hidden":false,"mode":"ojs"},{"id":438,"value":"md`Conversion from complex ${tex`\\psi`} to probability ${tex`|\\psi|^2`}:\n\n${tex`|x + iy|^2 = x^2 + y^2`}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":444,"value":"probability = `\n float probability(vec2 complex_number) {\n return pow(complex_number.r, 2.) + pow(complex_number.g, 2.);\n }\n\n float clamped_probability(vec2 rg) {\n return clamp(pow(probability(rg), 0.7), 0., 1.);\n }\n\n float nudge_intensity(float x) {\n return 1. - pow((1. - x), 6.);\n }\n \n float intensity(vec2 rg) {\n return nudge_intensity(clamped_probability(rg));\n }\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":472,"value":"probability_amplitude =`\n float nudge_intensity(float x) {\n return 1. - pow((1. - x), 2.);\n }\n float intensity(vec2 tex) { \n float h = pow(abs(tex.r + tex.g), 0.9); // (tex.r + tex.g + 1.) / 2.\n return nudge_intensity(clamp(h, 0., 1.));\n }\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":283,"value":"draw2DProbability = regl({\n uniforms: {\n k_combined_texture: kCombined,\n potential_texture: potentialBuffer,\n },\n \n vert:`\n precision mediump float;\n attribute vec2 position;\n varying vec2 coord;\n void main () {\n coord = position;\n gl_Position = vec4(position, 0, 1);\n }`,\n\n frag: `\n precision mediump float;\n varying vec2 coord;\n uniform sampler2D k_combined_texture;\n uniform sampler2D potential_texture;\n uniform vec2 u_resolution;\n #define k_combined(p) texture2D(k_combined_texture, p).xy\n #define potential(p) texture2D(potential_texture, p).x\n\n ${probability}\n\n ${color_map}\n\n void main () {\n vec2 st = (coord.xy + vec2(1.0)) / vec2(2.); // using vertex coordinates so viewport/scissoring works\n vec2 v = k_combined(st);\n gl_FragColor = vec4(color_map(intensity(v)), 1.0) + vec4(vec3(potential(st)), 1.0);\n }`,\n\n attributes: {\n position: [\n -4, 0,\n 4, 4,\n 4, -4\n ]\n },\n count: 3,\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":501,"value":"draw2DProbabilityAmplitude = regl({\n uniforms: {\n k_combined_texture: kCombined,\n potential_texture: potentialBuffer,\n },\n \n vert:`\n precision mediump float;\n attribute vec2 position;\n varying vec2 coord;\n void main () {\n coord = position;\n gl_Position = vec4(position, 0, 1);\n }`,\n\n frag: `\n precision mediump float;\n varying vec2 coord;\n uniform sampler2D k_combined_texture;\n uniform sampler2D potential_texture;\n uniform vec2 u_resolution;\n #define k_combined(p) texture2D(k_combined_texture, p).xy\n #define potential(p) texture2D(potential_texture, p).x\n\n ${probability_amplitude}\n\n ${color_map}\n\n void main () {\n vec2 st = (coord.xy + vec2(1.0)) / vec2(2.); // using vertex coordinates so viewport/scissoring works\n vec2 v = k_combined(st);\n gl_FragColor = vec4(color_map(intensity(v)), 1.0) + vec4(vec3(potential(st)), 1.0);\n }`,\n\n attributes: {\n position: [\n -4, 0,\n 4, 4,\n 4, -4\n ]\n },\n count: 3,\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":378,"value":"md`## Camera`","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"camera = createCamera(regl, {\n center: [0, -2, 0],\n theta: 6.25 * Math.PI/6.0,\n phi: Math.PI/4.0,\n distance: 18.5,\n damping: 0,\n noScroll: false,\n renderOnDirty: false,\n zoomSpeed: 0, // disables zoom\n rotationSpeed: 0.4,\n element: regl.cameraDiv\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":381,"value":"md`## Initial Wavepacket State`","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"mutable wave_angle = Math.PI/2","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"mutable wave_position = [0.5, 0.25]","pinned":false,"hidden":false,"mode":"ojs"},{"id":384,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"import\n{\n mutable elapsedTime,\n shading_function,\n kCombined,\n potentialBuffer,\n k1,\n k2,\n k3,\n k4,\n combine_k,\n potential,\n setupDefault,\n psi_n,\n}\nwith\n{\n TDSESimulation as TDSESimulation,\n playing as playing,\n animationTimeLimit as animationTimeLimit,\n potential_selection as potential_function,\n dt as dt,\n dx as dx,\n wave_position as wave_position,\n wave_unit_components as wave_unit_components,\n regl as regl,\n createREGLInstance as createREGLInstance,\n reset as reset,\n}\nfrom \"@flimsyhat/tdse-simulation\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":73,"value":"import\n{\n setup3DDefaults,\n drawProbability,\n drawProbabilityAmplitude,\n barrier,\n two_slit_potential,\n scatter,\n createCamera,\n drawPotential,\n elements,\n xzPosition\n}\nwith\n{\n TDSESimulation as TDSESimulation,\n playing as playing,\n animationTimeLimit as animationTimeLimit,\n potential_selection as potential_function,\n dt as dt,\n dx as dx,\n wave_position as wave_position,\n wave_unit_components as wave_unit_components,\n regl as regl,\n createREGLInstance as createREGLInstance,\n color_map as color_map,\n kCombined as kCombined,\n potentialBuffer,\n reset as reset,\n barrier_height as barrier_height,\n camera as camera,\n N as N\n}\nfrom \"@flimsyhat/3d-view-of-tdse-simulation\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":83,"value":"import\n{ pointerdown, pointerup, pointermove, pointerout, wave_unit_components, holdOnFirstFrame }\nwith\n{\n mutable playing as playing,\n regl as regl,\n reset as reset,\n mutable wave_angle as wave_angle,\n mutable wave_position as wave_position,\n}\nfrom\n\"@flimsyhat/touch-interaction-for-tdse-simulation\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":409,"value":"md`## Canvas Creation and Layout`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1113,"value":"function clamp(number, min, max) {\n return Math.max(min, Math.min(number, max));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"w = {\n let w = width\n if (width > breakpoint) {return w}\n else {return clamp(w, 0, 600)}\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"h = {\n if (width > breakpoint) {return 2*w/3}\n else {return w}\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":390,"value":"inset_w = {\n if (width > breakpoint) {return w/3}\n else {return w}\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":392,"value":"inset_h = inset_w","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"createREGL = require(\"regl\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1143,"value":"{\n regl.container.ontouchstart = e => {\n if ( regl.topCanvas.contains(e.target) ) { e.preventDefault() };\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":93,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":233,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":1020,"value":"{\n if (potential_selection == barrier) { return html``}\n else { return html`` }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1130,"value":"{\n if (playing) { return html``}\n else { return html`` }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1087,"value":"{\n if (width > breakpoint) {\n return html`\n `}\n else {\n return html`\n `}\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":107,"value":"regl = createREGLInstance();","pinned":false,"hidden":false,"mode":"ojs"},{"id":419,"value":"md`## Simulation Settings`","pinned":false,"hidden":false,"mode":"ojs"},{"id":555,"value":"N = 254","pinned":true,"hidden":false,"mode":"ojs"},{"id":170,"value":"dx = .0039","pinned":false,"hidden":false,"mode":"ojs"},{"id":1204,"value":"512 / width / 140","pinned":true,"hidden":false,"mode":"ojs"},{"id":41,"value":"md`Simulation Speed:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"viewof dt = {\n const element = html``\n return element\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":371,"value":"md`## Simulation Controls`","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"animationTimeLimit = 4000","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"mutable playing = false","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"handlers = {\n regl.topCanvas.onpointerdown = pointerdown\n regl.topCanvas.onpointerup = pointerup\n regl.topCanvas.onpointerout = pointerout\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":151,"value":"reset = () => {\n mutable elapsedTime = -1;\n mutable tick = 0;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":314,"value":"{\n potential_selection;\n restart;\n reset();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":604,"value":"md`Stuff for calculating framerate:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":578,"value":"mutable tick = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":563,"value":"{\n while (playing) {\n await Promises.delay(1000);\n yield ++mutable tick\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":560,"value":"framerate = elapsedTime / tick","pinned":false,"hidden":false,"mode":"ojs"},{"id":622,"value":"function windowed_average(series, length) {\n if (values.length < length) {\n values.push(series)\n }\n else {\n values.shift()\n values.push(series)\n }\n const sum = values.reduce((a, b) => a + b, 0);\n const avg = (sum / values.length) || 0;\n return avg\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":625,"value":"mutable values = []","pinned":true,"hidden":false,"mode":"ojs"},{"id":655,"value":"windowed_average(framerate, 100)","pinned":true,"hidden":false,"mode":"ojs"},{"id":627,"value":"fps = (windowed_average(framerate, 100)).toLocaleString()","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}