random/orbitals.html

<!DOCTYPE html5>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Orbitals</title>

    <script src="orbitals/legendre.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js"
      integrity="sha512-zhHQR0/H5SEBL3Wn6yYSaTTZej12z0hVZKOv3TwCUXT1z5qeqGcXJLLrbERYRScEDDpYIJhPC1fk31gqR783iQ=="
      crossorigin="anonymous" defer>
    </script>
    <script src="orbitals/rendering.js" defer></script>

    <style>
        body
        {
            background-color: black;
            color: white;
            font-family: "Arial";
        }

        h1
        {
            margin-top: 0px;
            padding-top: 50px;
            font-family: "Trebuchet MS";
        }

        p
        {
            margin-right: 100px;
            text-align: justify;
        }

        a
        {
            text-decoration: none;
        }

        i
        {
            font-family: Georgia, 'Times New Roman', Times, serif;
        }

        button 
        {
            width: 100px;
            height: 50px;
            background-color: rgb(57, 135, 224);
            color: white;
            border: 0px;
            font-weight: bold;
        }

        button:hover
        {
            background-color: rgb(33, 110, 199);
        }

        #screen
        {
            height: 95vh;
            width: 95vh;
        }
    </style>
</head>
<body>
    <div style="float: left; margin-right: 50px;">
        <canvas id="screen" width="500" height="500"></canvas>
    </div>

    <h1>What is this?</h1>

    <p>
        This little WebGL script visualizes the <a href="https://www.wikiwand.com/en/Spherical_harmonics">Spherical Harmonics</a>.
        A quick rundown about what that means:
    </p>
    <p>
        The <i>Spherical Harmonics</i> are results of a rather complex (pun not intended) function, commonly denoted with the capital letter Y.
        This function depends on two parameters: <i>l</i> and <i>m</i>. Y is defined for all <b>integers</b> <i>l</i> and <i>m</i> such that 0 &le; <i>m</i> &le; <i>l</i>.
        The function takes in two variables: &theta; and &phi;. The function essentially takes in a sphere and deforms it in a specific way.
    </p>
    <p>
        This tool plots this function. Since the results of the function are complex, it isn't really easy to plot the function in all its glory.
        (The function takes in two variables and spits out another two. We'd need 4D screens to see it in all its glory). 
        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.
    </p>
    <p>
        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.
    </p>
    <br>
    <br>
    <table>
        <tr>
            <td>Point distance</td>
            <td>--</td>
            <td><input type="range" min="0.01" max="0.1" step="0.005" value="0.05" id="stepSize" /></td>
            <td id="lstepSize"></td>
        </tr>
    
        <tr>
            <td><i>l</i></td>
            <td>--</td>
            <td><input type="range" min="0" max="10" step="1" value="2" id="l" /></td>
            <td id="ll"></td>
        </tr>

        <tr>
            <td><i>m</i></td>
            <td>--</td>
            <td><input type="range" min="-10" max="10" step="1" value="0" id="m" /></td>
            <td id="lm"></td>
        </tr>

        <tr><td><button onclick="createModel()">Create</button></td></tr>
    </table>
</body>
</html>
initial commit 2020-09-26 22:40:57 +00:00			`<!DOCTYPE html5>`
			`<html lang="en">`
			`<head>`
			`<meta charset="UTF-8">`
			`<meta name="viewport" content="width=device-width, initial-scale=1.0">`
			`<title>Orbitals</title>`

			`<script src="orbitals/legendre.js"></script>`
			`<script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js"`
			`integrity="sha512-zhHQR0/H5SEBL3Wn6yYSaTTZej12z0hVZKOv3TwCUXT1z5qeqGcXJLLrbERYRScEDDpYIJhPC1fk31gqR783iQ=="`
			`crossorigin="anonymous" defer>`
			`</script>`
			`<script src="orbitals/rendering.js" defer></script>`

			`<style>`
Updated layout 2020-09-27 01:07:05 +00:00			`body`
			`{`
			`background-color: black;`
			`color: white;`
			`font-family: "Arial";`
			`}`

			`h1`
			`{`
Fixed layout glitch 2020-09-27 01:11:06 +00:00			`margin-top: 0px;`
			`padding-top: 50px;`
Updated layout 2020-09-27 01:07:05 +00:00			`font-family: "Trebuchet MS";`
			`}`

			`p`
			`{`
			`margin-right: 100px;`
			`text-align: justify;`
			`}`

			`a`
			`{`
			`text-decoration: none;`
			`}`

			`i`
			`{`
			`font-family: Georgia, 'Times New Roman', Times, serif;`
			`}`

			`button`
			`{`
			`width: 100px;`
			`height: 50px;`
			`background-color: rgb(57, 135, 224);`
			`color: white;`
			`border: 0px;`
			`font-weight: bold;`
			`}`

			`button:hover`
			`{`
			`background-color: rgb(33, 110, 199);`
			`}`

initial commit 2020-09-26 22:40:57 +00:00			`#screen`
			`{`
Updated layout 2020-09-27 01:07:05 +00:00			`height: 95vh;`
			`width: 95vh;`
initial commit 2020-09-26 22:40:57 +00:00			`}`
			`</style>`
			`</head>`
			`<body>`
			`<div style="float: left; margin-right: 50px;">`
			`<canvas id="screen" width="500" height="500"></canvas>`
			`</div>`

			`<h1>What is this?</h1>`

			`<p>`
			`This little WebGL script visualizes the <a href="https://www.wikiwand.com/en/Spherical_harmonics">Spherical Harmonics</a>.`
			`A quick rundown about what that means:`
			`</p>`
			`<p>`
			`The <i>Spherical Harmonics</i> are results of a rather complex (pun not intended) function, commonly denoted with the capital letter Y.`
			`This function depends on two parameters: <i>l</i> and <i>m</i>. Y is defined for all <b>integers</b> <i>l</i> and <i>m</i> such that 0 ≤ <i>m</i> ≤ <i>l</i>.`
			`The function takes in two variables: θ and φ. The function essentially takes in a sphere and deforms it in a specific way.`
			`</p>`
			`<p>`
			`This tool plots this function. Since the results of the function are complex, it isn't really easy to plot the function in all its glory.`
			`(The function takes in two variables and spits out another two. We'd need 4D screens to see it in all its glory).`
			`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.`
			`</p>`
Added colouring 2020-09-27 12:49:01 +00:00			`<p>`
			`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.`
			`</p>`
initial commit 2020-09-26 22:40:57 +00:00			`<br>`
			`<br>`
			`<table>`
			`<tr>`
			`<td>Point distance</td>`
			`<td>--</td>`
			`<td><input type="range" min="0.01" max="0.1" step="0.005" value="0.05" id="stepSize" /></td>`
			`<td id="lstepSize"></td>`
			`</tr>`

			`<tr>`
Fixed layout glitch 2020-09-27 01:11:06 +00:00			`<td><i>l</i></td>`
initial commit 2020-09-26 22:40:57 +00:00			`<td>--</td>`
			`<td><input type="range" min="0" max="10" step="1" value="2" id="l" /></td>`
			`<td id="ll"></td>`
			`</tr>`

			`<tr>`
Fixed layout glitch 2020-09-27 01:11:06 +00:00			`<td><i>m</i></td>`
initial commit 2020-09-26 22:40:57 +00:00			`<td>--</td>`
			`<td><input type="range" min="-10" max="10" step="1" value="0" id="m" /></td>`
			`<td id="lm"></td>`
			`</tr>`

			`<tr><td><button onclick="createModel()">Create</button></td></tr>`
			`</table>`
			`</body>`
			`</html>`