diff --git a/orbitals.html b/orbitals.html index a0bee36..ca99b2f 100644 --- a/orbitals.html +++ b/orbitals.html @@ -63,6 +63,72 @@ height: 95vh; width: 95vh; } + + table + { + padding-right: 3em; + border-right: 2px solid rgb(200, 200, 200); + height: 100px; + } + + #controls { + display: inline-flex; + } + + .switch { + position: relative; + display: inline-block; + width: 60px; + height: 34px; + margin-left: 3em; + margin-right: 10px; + } + + .switch input { + opacity: 0; + width: 0; + height: 0; + } + + input:checked + .slider { + background-color: #2196F3; + } + + input:focus + .slider { + box-shadow: 0 0 1px #2196F3; + } + + input:checked + .slider:before { + -webkit-transform: translateX(26px); + -ms-transform: translateX(26px); + transform: translateX(26px); + } + + .slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #ccc; + -webkit-transition: .4s; + transition: .4s; + border-radius: 34px; + } + + .slider:before { + position: absolute; + content: ""; + height: 26px; + width: 26px; + left: 4px; + bottom: 4px; + background-color: white; + -webkit-transition: .4s; + transition: .4s; + border-radius: 50%; + } @@ -93,29 +159,37 @@



- - - - - - - - - - - - - - +
+
Point distance--
l--
+ + + + + + + + + + + + + - - - - - - + + + + + + - -
Point distance--
l--
m--
m--
+ + + + + Toggle orthographic projection + \ No newline at end of file diff --git a/orbitals/rendering.js b/orbitals/rendering.js index ee7c39f..0c39915 100644 --- a/orbitals/rendering.js +++ b/orbitals/rendering.js @@ -23,6 +23,13 @@ function HSVtoRGB(h, s, v) { }; } +var ortho = false; + +function changeProjection(e) +{ + ortho = !ortho; +} + var canvas = document.querySelector('#screen'); canvas.height = canvas.clientHeight; canvas.width = canvas.clientHeight; @@ -131,7 +138,10 @@ function drawScene() const zFar = 100.0; const projMat = mat4.create(); - mat4.perspective(projMat, fov, aspect, zNear, zFar); + if(ortho) + mat4.ortho(projMat, -1.0, 1.0, -1.0, 1.0, zNear, zFar); + else + mat4.perspective(projMat, fov, aspect, zNear, zFar); mat4.rotate(viewMat, viewMat, 0.05, [0.0, 1.0, 0.0]);