Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	I rendered a Volumetric Hydrogen Atom in WebGL using the Spherical Harmonic Solutions to the Schrödinger equation \| Contest: Underground
ID	5041574597017600
Created	2 months ago, 1729620855930
Updated	2 months ago, 1729621077949
Code	<!DOCTYPE html> <!-- Contest: Underground! I have completed 0% of Khan Academy's 'Intro to HTML/CSS' and have been programming for 75 months. I would prefer to be placed in the [Advanced] bracket This is probably one of my most advanced projects I have done, to date. I believe it is the first of it's kind on KA (not 100% sure but a few Willard fun searches yielded no results, none even similar). But what is it? This is what a hydrogen atom looks like (or, as close as we can get to a visualization). The one you see before you now (unless you played with the settings) is the GROUND state. And I would like to emphasize: this solution to the Schrodinger equation ONLY applies to hydrogen, a single proton and electron, no other elements (though I believe it is a good approximation for elements with a single electron in the outer shell, like lithium and other alkali metals). Also, the hydrogen atom is AT REST. It has NO energy from velocity. It is prudent to keep in mind that the Schrodinger equation is non-relativistic, unlike the Klein-Gordon equation or the Dirac equation (too hard for me right now), so this equation breaks down especially as we approach the speed of light. How to control it: Look at the UI panel. You have three quantum numbers: n: the principal quantum number, or the shell, this is how much energy the atom has. Higher number, more energy, like if it got hit by a photon or something. You can go up to four in this program. l: the azimuthal quantum number. This is the orbital, you might remember learning in school spdf if you have taken a more advanced chemistry class. l can go from 0 to n-1. s = sharp, p=principal, d=diffuse, f=fundamental. There is also g and more, but I didn't program those because literally no one talks about them and it would have taken like 10x the math for diminishing returns. Plus n only goes to 4. m: magnetic quantum number, from -l to l. Controls the specific orbital thingy. We also have render type, but that's kind of hard to explain without getting into the math. Let's just say that there are some different orientation axes to choose from, and physicists and chemists do things differently. Brightness and size sliders: pretty self explanatory, play with it and see what they do. Options: 1s (GROUND STATE) 2s 2p 3s 3p 3d 4s 4p 4d 4f First off, some dedications. Richard Behiel's Hydrogen series on YouTube is AMAZING and I would highly recommend watching it, though it is in excess of an hour (pt. 1 and 2 combined). It was in a way an inspiration for this project, and really helped me to understand Quantum Mechanics. Also, thanks to Bearkirb for letting me tap into his WebGL raymarching knowledge (and he forced me to do the youtube clickbait thumbnail). Though I would like to reiterate, no code was taken from these sources, only understanding. I did play around with some of these ideas before the competition began, but I rewrote everything in WebGL so the code is essentially from scratch. And I apologize for any percieved 'messiness' but some of the mathematics that goes into this is quite simply complex and there is no way around it. Look at line 224, for example. So, how does this work? I'll give you a high level overview then try to walk you through it. 1. Thank physicists for solving the Schrodinger equation for a hydrogen atom and mathematicians for providing the tools to do so (spherical harmonics, associated legendre polynomials and generalized lagruerre polynomials). You want to know more, or hope for a derivation, go watch that video I mentioned. 2. Use the equations to set up Ψ, the wavefunction. Ψ(Ψ) or \|Ψ\|^2 represents the probability of finding an electron at some small volume element dV. Does that sound like a probability distribution function to you? It sure does to me! 3. This is really cool because now that we have this function in 3 dimensions all we need to do is render it, and it is literally exactly like a volumetric. In a way, it feels like we are taking a line integral through the PDF to project it onto our 2d screen! So, we simply march rays through the function, accumulate our probability density, and draw that to the screen! I also created a slicing plane that cuts it in half so that you can see it better, instead of the camera being inside of the cloud. Kind of looks like you are in a lighthouse or getting a flashlight shined at you that way. I also left comments throughout this program so you can understand the process that is involved in this and some more of the details. NOTE: I was able to avoid complex numbers in this program even though they are involved in the wave function by ignoring the complex phase factor. In this specific case, it all gets washed out when we do our probability calculations. Normally, we would multiply Ψ by its conjugate, but here we can just take the magnitude squared. I'll explain more in the program. I should also talk about spin. It's the fourth quantum number, but not really captured by the schrodinger equation. This is another benefit offered by the Dirac formula, and as an added bonus antimatter sort of just pops out and also all of the crazy math associated with spinors... as I said, if you want to learn more, look into that YouTube Channel. --> <html> <head> <meta charset="utf-8"> <title>I rendered a Volumetric Hydrogen Atom in WebGL using the Spherical Harmonic Solutions to the Schrödinger equation \| Contest: Underground</title> <style> / Annoying styling / { margin:0; padding:0; overflow: hidden; background: #000; } canvas{ /* Works on any screen size! / position: absolute; top: calc((100% - 600px)/2); left:calc((100% - 600px)/2); } p, input, label{ position: fixed; color: white; z-index: 2; top: 20px; left: 10px; font-family: verdana; } #d{ / Cool in-fashion semi-transparent UI bar / background: #0007; width: 150px; } </style> </head> <body> <!-- UI Bar --> <p id = 'd'>Something Went Wrong!</p> <input type="number" id="inputn" min="1" max="4" value = '1' style = "top: 80px; left:60px;"> <input type="number" id="inputl" min="0" max="3" value = '0' style = "top: 115px; left: 60px;"> <input type="number" id="inputm" min="-3" max="3" value = '0' style = "top: 155px; left: 60px;"> <input type="radio" id="chem1" name="rtype" value="chem1" checked = 'true' style = "top: 245px; left: 30px;"> <label for="chem1" id = 'chem1l' style = "top: 241px; left: 50px; background: #0007;">Chemistry 1</label> <input type="radio" id="chem2" name="rtype" value="chem2" style = "top: 275px; left: 30px;"> <label for="chem2" id = 'chem2l' style = "top: 271px; left: 50px; background: #0007;">Chemistry 2</label> <input type="radio" id="physics" name="rtype" value="physics" style = "top: 305px; left: 30px;"> <label for="physics" id = 'physicsl' style = "top: 301px; left: 50px; background: #0007;">Physics</label> <input type="range" id="inputb" min="0" max="120" value = '3' style = "top: 400px; left: 25px;"> <input type="range" id="inputs" min="0" max="160" value = '80' style = "top: 475px; left: 25px;"> <script id = 'vertexShader' type = 'glsl'> #version 300 es //This is the vertex shader, if you know WebGL you will understand this otherwise it is hopeless to try to explain. in vec2 coords; out vec2 position; void main(){ position = coords; gl_Position = vec4(coords,0.0,1.0); } </script> <script id = 'fragShader' type = 'glsl'> #version 300 es //This is the frag shader. Yes chromebook people, I used highp! Now, if it still isn't working, GET A REAL COMPUTER AND STOP USING A CALCULATOR WITH INTERNET ACCESS. precision highp float; out vec4 fragColor; //Now we define some uniformsso that we can port in our quantum numbers and a few other specifications from JS. This allows you to make changes from the sidebar. uniform float mousex; uniform float mousey; uniform float qn; uniform float ql; uniform float qm; uniform float rtype; uniform float b; uniform float sz; //I have no idea if WebGL has a built-in PI but it does now, I use it a lot. float PI = 3.141592653; //This is hard to explain... It is involved in the spherical harmonic. There is a certain e^iphi term. This has a magnitude of 1, so when you square the wavefunction it is just one because of how complex numbers work. This means (and is accurate in physics), that the Wave function is actually COMPLETELY INDEPENDENT OF PSI, our second angle. But I guess chemists don't like this or something because they maybe just take the real or imaginary part? I don't know but they multiply it by some trig term to make it look like the orbitals you see in the textbooks. float phiTerm(float phi, int m, float type){ return type==0.0?cos(float(m)phi):type==1.0?sin(float(m)phi):1.0; } //Lots of factorials involved later. float factorial(int n){ int product = 1; for(int i = 1; i <= 10000; i++){ product=i; if(i>=n) break; } return float(product); } //Here I make a function to convert cartesian coordinates into spherical coordinates. It might look like a mess but it makes the schrodinger equation so much easier to solve. It actually allows us to break the wave function into something like this: R(r)Y(theta, phi). Pretty cool right? R only depends on the quantum numbers n and l, and Y the spherical harmonic is only affected by l and m. vec3 cartesianToSpherical(vec3 coords){ float radius = sqrt(coords.xcoords.x+coords.ycoords.y+coords.zcoords.z); //Thank goodness WebGL has atan built in, and it handles the negative sign problems caused by quadrants. return vec3(radius,acos(coords.z/radius),atan(coords.y,coords.x)); } //Get ready for tons of math ahead! Also for some reason I was having trouble with the uniforms attatching to global variables so I had to put them as arguments to this function. //They get more and more complicated as l gets higher. float sphericalHarmonics(float theta, float phi, int l, int m, float type){ //See this phi term? This is the one that looks like e^iphi float p = phiTerm(phi, m, type); if(l==0){ return 0.5sqrt(1.0/PI); } else if(l==1){ if(m==-1){ return 0.5sqrt(3.0/(2.0PI))psin(theta); }else if(m==0){ return 0.5sqrt(3.0/PI)cos(theta); }else if(m==1){ return -0.5sqrt(3.0/(2.0PI))psin(theta); } } else if(l==2){ if(m==-2){ return 0.25sqrt(15.0/(2.0PI))psin(theta)sin(theta); }else if(m==-1){ return 0.5sqrt(15.0/(2.0PI))psin(theta)cos(theta); }else if(m==0){ return 0.25sqrt(5.0/PI)(3.0cos(theta)cos(theta)-1.0); }else if(m==1){ return -0.5sqrt(15.0/(2.0PI))psin(theta)cos(theta); }else if(m==2){ return 0.25sqrt(15.0/(2.0PI))psin(theta)sin(theta); } } else if(l==3){ if(m==-3){ return 0.125sqrt(35.0/PI)psin(theta)sin(theta)sin(theta); }else if(m==-2){ return 0.25sqrt(105.0/(2.0PI))psin(theta)sin(theta)cos(theta); }else if(m==-1){ return 0.125sqrt(21.0/PI)p(5.0cos(theta)cos(theta)-1.0)sin(theta); }else if(m==0){ return 0.25sqrt(7.0/PI)(5.0cos(theta)cos(theta)cos(theta)-3.0cos(theta)); }else if(m==1){ return -0.125sqrt(21.0/PI)p(5.0cos(theta)cos(theta)-1.0)sin(theta); }else if(m==2){ return 0.25sqrt(105.0/(2.0PI))psin(theta)sin(theta)cos(theta); }else if(m==3){ return -0.125sqrt(35.0/PI)psin(theta)sin(theta)sin(theta); } } } //Associated Laguerre polynomials. Anything after 3 is a nightmare! float L(int degree, float x, float alpha){ if(degree == 0) return 1.0; else if(degree == 1) return -x+alpha+1.0; else if(degree == 2) { return 0.5 (xx-2.0(alpha+2.0)x+(alpha+1.0)(alpha+2.0)); }else if(degree == 3){ return (-xxx+3.0(alpha+3.0)xx-3.0(alpha+3.0)(alpha+2.0)x+(alpha+1.0)(alpha+2.0)(alpha+3.0))/6.0; } } //Radial function float R(float r, int n, int l, int m){ float C = sqrt(8.0/float(nnn)factorial(n-l-1)/(2.0float(n)factorial(n+l))); float D = exp(-r/float(n)) pow(2.0r/float(n),float(l)); return CDL(n-l-1,2.0r/float(n),2.0float(l)+1.0); } //This is the squared magnitude of the wave function. float psiBarPsi(float psi){ return psipsi; } //Our complete wave function! It looks simple, now that we got everything out of the way with the radial harmonics and the radial function. float psi(vec3 coords, int n, int l, int m, float type){ //This little conditional here tells us if the function is getting sliced by our intersection plane. if(coords.z<-PI/2.0\|\|coords.z>PI/2.0){ return 0.0; } return sphericalHarmonics(coords.y,coords.z, l, m, type)R(coords.r, n, l, m); } //Let the volumetric raymarching begin! void main(){ //Mouse movement float thetax = PI+(300.0+mousey)/100.0; float thetaz = PI+(300.0-mousex)/100.0; //Quantum Numbers int n = int(qn); int l = int(ql); int m = int(qm); //Other specs float type = rtype; float brightness = b; float size = sz; //Rotation matricies for 2 axes. mat3 rotationMatrixY = mat3( cos(thetax) , 0 , sin(thetax), 0 , 1 , 0 , -sin(thetax), 0 , cos(thetax) ); mat3 rotationMatrixZ = mat3( cos(thetaz) , -sin(thetaz), 0 , sin(thetaz) , cos(thetaz) , 0 , 0 , 0 , 1 ); //Define our initial ray, and the direction that it will head. vec3 rayPos = vec3(-8.080.0/size,0.0,0.0); vec2 screenPosition = gl_FragCoord.xy-vec2(300,300); vec3 rayDir = normalize(vec3(1.0,screenPosition/size)); //Rotate everything according to the rotation matricies and where the mouse position is so that you can move around. rayPos=rotationMatrixYrotationMatrixZ; rayDir=rotationMatrixYrotationMatrixZ; //This is how much 'cloud' we have 'collected'. float accumulation = 0.0; vec3 cameraPos = rayPos; float add; float t; vec3 norm = vec3(1.0,0.0,0.0); //300 interations should be enough for(int i = 0; i < 300; i++){ //Call our wave function! We add the value to our accumulation as we march the ray through space to see how bright things are. add=psiBarPsi(psi(cartesianToSpherical(rayPos),n, l, m, type)); //If we are on one side of the slicing plane, we do a little vector math to jump straight to it so we do not need to waste time. This extra optimization actually makes it significantly faster. if(add==0.0){ if(i==0){ t=-dot(norm,cameraPos)/dot(norm,rayDir); rayPos = rayDirt+cameraPos; }else{ //If we hit the slicing plane after going through the cloud (looking from the other direction) we can just zoom off into infinity, so we are done. break; } } accumulation+=add; //We march the ray further if the function has a lower value, because we do not want to waste time going through mostly empty space when there are more exciting parts of the function to get to! rayPos+=0.01rayDir/(add+0.16); //If we get really far, we are outside of the range (limit of radial function goes to zero as radius goes to infinity) so we can safely break out of our loop to save time. if(distance(cameraPos,rayPos)>30.0){ break; } } float c = brightnessaccumulation; fragColor = vec4(0.4c,0.7*c,c,1.0); } </script> <canvas width = '600' height = '600' id = 'c'></canvas> <script type='module'> //Set up canvas let c = document.getElementById('c'); let ctx = c.getContext('2d'); //I first make an offscreen webgl then paste that to another canvas using drawImage. I don't know why but bearkirb said it would be faster, and he wouldn't stop annoying me until I did it so here we are. let c2 = new OffscreenCanvas(600,600); let gl = c2.getContext('webgl2'); for (let i = window.requestAnimationFrame(function() {}); i > 0; i--) {window.cancelAnimationFrame(i);} //Fetch shadercode and make new shaders const vertSource = document.getElementById('vertexShader').textContent, vertShader = gl.createShader(gl.VERTEX_SHADER); const fragSource = document.getElementById('fragShader').textContent, fragShader = gl.createShader(gl.FRAGMENT_SHADER); //Compile Stuff gl.shaderSource(vertShader,vertSource); gl.compileShader(vertShader); gl.shaderSource(fragShader,fragSource); gl.compileShader(fragShader); //Make new shader program const shaderProgram = gl.createProgram(); gl.attachShader(shaderProgram, vertShader); gl.attachShader(shaderProgram, fragShader); gl.linkProgram(shaderProgram); //Wierd webgl buffer stuff const positions = new Float32Array([-1, -1, -1, 3, 3, -1]), positionBuffer = gl.createBuffer(), coords = gl.getAttribLocation(shaderProgram, 'coords'); //Some global Variables, most are pushed to WebGL through uniforms let frames = 1, mouseX = 300, mouseY = 300; let n = 1.0, l = 0.0, m= 1.0; let brightness = 3.0, size = 80; //Because I have so many settings to push to uniforms (from the UI) I made this function to save space, because I access getUniformLocation so much. let locate = (name) => { return gl.getUniformLocation(shaderProgram, name); } const mousey = locate('mousey'), mousex = locate('mousex'), nloc = locate("qn"), lloc = locate("ql"), mloc = locate("qm"), typeloc = locate("rtype"), bloc = locate("b"), sloc = locate("sz"); gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW); gl.viewport(0, 0, 600, 600); gl.enableVertexAttribArray(coords); //Tells you what orbital you are on! let types = 'spdf', rtype = 0; let p = document.getElementById('d'), inputn = document.getElementById('inputn'), inputl = document.getElementById('inputl'), inputm = document.getElementById('inputm'); (function draw(){ gl.clearColor(0, 0, 0, 1); gl.uniform1f(mousey, mouseY); gl.uniform1f(mousex, mouseX); //Fetch variable values from html stuff, then send it to webgl. n = inputn.value; l = inputl.value; m = inputm.value; inputl.max = n-1; inputm.min = -l; inputm.max = l; brightness = document.getElementById('inputb').value; size = document.getElementById('inputs').value; rtype = document.getElementById('chem2').checked?1:document.getElementById('physics').checked?-1:0; gl.uniform1f(nloc, n); gl.uniform1f(mloc, m); gl.uniform1f(lloc, l); gl.uniform1f(typeloc, rtype); gl.uniform1f(bloc, brightness); gl.uniform1f(sloc, size); gl.useProgram(shaderProgram); gl.vertexAttribPointer(coords, 2, gl.FLOAT, false, 0, 0); gl.clear(gl.COLOR_BUFFER_BIT); gl.drawArrays(gl.TRIANGLES, 0, 3); p.innerHTML = `&emsp;Orbital: ${n}${types[l]}<br><br><br>&emsp;n: <br><br>&emsp;l: <br><br>&emsp;m:<br><br><br>&emsp;Render Type: <br><br><br><br><br><br><br><br>&emsp;Brightness:<br><br><br><br>&emsp;Size<br><br><br><br>`; //draw everything ctx.drawImage(c2,0,0); //Animate requestAnimationFrame(draw); })(); //Event listeners, and I shift them in case the screen is larger than 600 c.addEventListener("mousemove",(event)=>{ mouseX = event.pageX - c.getBoundingClientRect().left; mouseY = event.pageY - c.getBoundingClientRect().top; }); //<script> </script> </body> <!-- Without comments and whitespace, about 250 lines of code --> </html>
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgNv3kKn6CAw
Votes	5
Spin-Offs	0
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	{"id":"6509703024001024","title":"Contest: Underground - HTML Submissions","deleted":"false","official":"false"}
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Jake K.
Author Name	kaid_103000698141866290580261
Author ID	kaid_103000698141866290580261
Author Profile Access	PUBLIC

Archive Data

Added	2 months ago, 1729621277355
Updated	2 months ago, 1729621277355
Source Deleted	unknown