121 lines
3.7 KiB
HTML
121 lines
3.7 KiB
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 ≤ <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>
|
|
<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> |