diff --git a/.gitignore b/.gitignore index 600d2d3..aac946e 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ +.vs .vscode \ No newline at end of file diff --git a/orbitals.html b/orbitals.html index 0dec477..a0bee36 100644 --- a/orbitals.html +++ b/orbitals.html @@ -87,6 +87,10 @@ So this widget just plots the radius of the complex number. Think of complex numbers as points in 2D space. I plot the distance of that point from the origin.

+

+ Since this function can also return negative values, it is common to plot the absolute value, and colour regions according to their sign. + Here, green represents non-negative values and red represents negative values. +



diff --git a/orbitals/rendering.js b/orbitals/rendering.js index eb4f9b3..63ff958 100644 --- a/orbitals/rendering.js +++ b/orbitals/rendering.js @@ -46,7 +46,9 @@ function createModel() { for(var phi = -Math.PI; phi <= Math.PI; phi += stepSize) { - var length = Math.abs(Y(l, m, theta, phi)); + var length = Y(l, m, theta, phi); + var sign = Math.abs(length) / length; + length *= sign; var x = length * Math.sin(theta) * Math.cos(phi); var y = length * Math.sin(theta) * Math.sin(phi); @@ -55,6 +57,10 @@ function createModel() vertices.push(x); vertices.push(y); vertices.push(z); + + vertices.push((sign >= 0) ? 0.0 : 1.0); + vertices.push((sign >= 0) ? 1.0 : 0.0); + vertices.push(0.0); } } @@ -70,28 +76,38 @@ createModel(); var vertCode = 'attribute vec3 coordinates;' + + 'attribute vec3 color;' + 'uniform mat4 uModelMatrix;' + 'uniform mat4 uModelViewMatrix;' + 'uniform mat4 uProjectionMatrix;' + + 'varying vec3 fColor;' + 'void main(void) {' + ' gl_Position = uProjectionMatrix * uModelViewMatrix * uModelMatrix * vec4(coordinates, 1.0);' + ' gl_PointSize = 1.0;' + + ' fColor = color;' + '}'; var vertShader = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vertShader, vertCode); gl.compileShader(vertShader); +var error = gl.getShaderInfoLog(vertShader); +console.log(error); var fragCode = - 'void main(void) {' + 'gl_FragColor = vec4(0.2, 0.9, 0.2, 1.0);' + '}'; + 'varying mediump vec3 fColor; ' + + 'void main(void) {' + 'gl_FragColor = vec4(fColor, 1.0);' + '}'; var fragShader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(fragShader, fragCode); gl.compileShader(fragShader); +error = gl.getShaderInfoLog(fragShader); +console.log(error); var shaderProgram = gl.createProgram(); gl.attachShader(shaderProgram, vertShader); gl.attachShader(shaderProgram, fragShader); gl.linkProgram(shaderProgram); +error = gl.getProgramInfoLog(shaderProgram); +console.log(error); var modelMat = mat4.create() mat4.rotate(modelMat, modelMat, Math.PI / 2, [1.0, 0.0, 0]); @@ -99,6 +115,7 @@ mat4.rotate(modelMat, modelMat, Math.PI / 2, [1.0, 0.0, 0]); var viewMat = mat4.create(); mat4.translate(viewMat, viewMat, [0.0, 0.0, -3.0]); + function drawScene() { gl.clearColor(0, 0, 0, 1); @@ -124,11 +141,15 @@ function drawScene() gl.uniformMatrix4fv(gl.getUniformLocation(shaderProgram, "uModelMatrix"), false, modelMat); gl.uniformMatrix4fv(gl.getUniformLocation(shaderProgram, "uModelViewMatrix"), false, viewMat); gl.uniformMatrix4fv(gl.getUniformLocation(shaderProgram, "uProjectionMatrix"), false, projMat); - + var coord = gl.getAttribLocation(shaderProgram, "coordinates"); - - gl.vertexAttribPointer(coord, 3, gl.FLOAT, false, 0, 0); + var color = gl.getAttribLocation(shaderProgram, "color") + + gl.vertexAttribPointer(coord, 3, gl.FLOAT, false, 6 * 4, 0); gl.enableVertexAttribArray(coord); + + gl.vertexAttribPointer(color, 3, gl.FLOAT, false, 6 * 4, 3 * 4); + gl.enableVertexAttribArray(color); gl.viewport(0,0, gl.canvas.width, gl.canvas.height); gl.drawArrays(gl.POINTS, 0, vertices.length / 3);