-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathharmonic.html
140 lines (133 loc) · 9.86 KB
/
harmonic.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<html lang="EN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" type="text/css" href="styles.css">
<title>Interactive Harmonic Potential Well Simulation</title>
<script src="mathplus.js"></script>
<script src="https://cdn.jsdelivr.net/npm/p5@1.0.0/lib/p5.js"></script>
</head>
<body>
<div id="containment">
<img id="burger" class="w3-btn w3-purple w3-card-4 w3-hover-deep-purple" src="./textures/burger.svg" width="5%" onClick="baropen()"/>
<div id="sidebar" class="w3-sidebar w3-animate-opacity w3-khaki">
<div id="navibar" class="w3-bar w3-khaki w3-card-4">
<a href="index.html" class="w3-btn w3-bar-item w3-wide w3-large w3-ripple w3-purple w3-hover-deep-purple w3-bar-item">Home</a>
<span class="w3-bar-item"><b>Harmonic Well</b>
<input type="button" class="helpButton w3-card-2 w3-ripple w3-round w3-purple w3-hover-deep-purple" value="?" onClick="helpopen('Introduction')"/>
</span>
</div>
<div class="w3-container w3-red"><b>Position</b> Arrowheads correspond to units of distance.</div>
<div class="w3-container w3-blue"><b>Real</b> Axis of Wavefunction
<input type="button" class="helpButton w3-card-2 w3-ripple w3-round w3-aqua w3-hover-blue" value="?" onClick="helpopen('Wavefunctions')"/></div>
<div class="w3-container w3-green"><b>Imaginary</b> Axis of Wavefunction<input type="button" class="helpButton w3-card-2 w3-ripple w3-round w3-aqua w3-hover-blue" value="?" onClick="helpopen('Complex')"/></div>
<div class="w3-container w3-orange"><input id="showMOM" type="checkbox" autocomplete="off"/><b>Momentum</b> Display Momentum Wavefunction<input type="button" class="helpButton w3-card-2 w3-ripple w3-round w3-aqua w3-hover-blue" value="?" onClick="helpopen('momentum')"/></div>
<div class="w3-container">Play Speed(1=RealTime):</br>
<input id="timeAcc" type="number" step="0.2" value="1" autocomplete="off" style="width:4em"/>
<input id="timeRes" type="button" class="w3-btn w3-card-4 w3-ripple w3-round w3-purple w3-hover-deep-purple" value="time=0" onClick="resetTime()"/>
</div>
<div class="w3-container">
<span class="label">X Scaling:</span>
<input id="scaleSlider" class="usrinput" type="range" min="0.1" max="2" value="1" step="0.1" autocomplete="off"/>
</div>
<div class="w3-container">
<span class="label">Y Scaling:</span>
<input id="yScaleSlider" class="usrinput" type="range" min="0.5" max="2" value="1" step="0.1" autocomplete="off"/>
</div>
<div class="w3-container">
<span id="LLabel" class="label">Length of X Axis: 5</span>
<input id="xSizeIn" type="range" class="usrinput" min="1" step="0.1" value="5" max="10" autocomplete="off"/>
</div>
<div class="w3-container">
<span id="massLabel" class="label">Mass: 3</span>
<input id="massSlider" class="usrinput" type="range" min="0.1" max="30" value="3" step="0.1" autocomplete="off"/>
</div>
<div class="w3-container">
<span id="KLabel" class="label">Spring "K": 6</span>
<input id="KSlider" class="usrinput" type="range" min="0.1" max="20" value="6" step="0.1" autocomplete="off"/>
</div>
<div id="freqEq" class="w3-bar">
<img class="w3-bar-item" src="./equations/frequency.gif" alt="frequency equals omega_nought over 2pi"/>
<img class="w3-bar-item" src="./equations/omeganought.gif" alt="omega_nought equals the squareroot of K/m"/>
</div>
<div class="w3-container">
<div class="w3-red w3-container w3-card-4">
<div class="w3-container">
<span class="label">*No. of points:</span>
<input id="detailIn" type="number" class="usrinput" style="width: 5em;" min="1" step="10" value="256" autocomplete="off"/>
</div>
<div id="psiequation" class="w3-bar w3-panel w3-small w3-deep-orange w3-card-4 w3-round-large">
<img class="w3-bar-item" src="./equations/psi.gif" alt="psi equals the sum of coefficents multiplied by their corresponding n-ket"/>
<input type="button" class="helpButton w3-card-2 w3-ripple w3-round w3-aqua w3-hover-blue" value="?-n" onClick="helpopen('QuantumNumbers')"/>
<input type="button" class="helpButton w3-card-2 w3-ripple w3-round w3-aqua w3-hover-blue" value="?-c" onClick="helpopen('Coefficients')"/>
</div>
<div class="w3-green w3-panel w3-card-4">
<div><input type="radio" name="coeffMode" value="manual" checked autocomplete="off"/>
*Manually Input Coefficients:<input type="button" class="helpButton w3-card-2 w3-ripple w3-round w3-aqua w3-hover-blue" value="?" onClick="helpopen('Manual','QHO')"/></div>
<input id="cInput" value="1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1" autocomplete="off"/>
</div>
<div class="w3-teal w3-panel w3-card-4">
<div><input type="radio" name="coeffMode" value="function" autocomplete="off"/>
Define <b>C</b>n=<b>f</b>(n,t,u,w)<input type="button" class="helpButton w3-card-2 w3-ripple w3-round w3-aqua w3-hover-blue" value="?" onClick="helpopen('FunkMode')"/></div>
<div id="maxNLabel"><b>*</b>Max value of n: 16</div>
<input id="maxNSlider" type="range" min="0" max="64" value="16" step="1" autocomplete="off"/>
<div id="Udiv">
<div id="Ulabel"><b>u</b> = 1 + 0i</div>
<input id="sliderURe" type="range" min="-10" max="10" value="1" step="0.1" autocomplete="off"/>
<input id="sliderUIm" type="range" min="-10" max="10" value="0" step="0.1" autocomplete="off"/>
</div>
<div id="Wdiv">
<div id="Wlabel"><b>w</b> = 1 + 0i</div>
<input id="sliderWRe" type="range" min="-10" max="10" value="1" step="0.1" autocomplete="off"/>
<input id="sliderWIm" type="range" min="-10" max="10" value="0" step="0.1" autocomplete="off"/>
</div>
<div><b>*f</b>(n,t,u,w)=<input id="fInput" value="exp(-((n-u)^2)/(2*w^2))" autocomplete="off"/></div>
</div>
<div class="w3-panel">
<input id="cButton" type="button" class="w3-btn w3-card-4 w3-ripple w3-round w3-khaki w3-hover-deep-orange" value="Apply" onClick="buttFunk()"/>
*Needs "Apply"
</div>
</div>
</div>
<div>
<select id="setters">
<option value="maxReU">Real U Slider: Max</option>
<option value="minReU">Real U Slider: Min</option>
<option value="maxImU">Imaginary U Slider: Max</option>
<option value="minImU">Imaginary U Slider: Min</option>
<option value="maxReW">Real W Slider: Max</option>
<option value="minReW">Real W Slider: Min</option>
<option value="maxImW">Imaginary W Slider: Max</option>
<option value="minImW">Imaginary W Slider: Min</option>
<option value="massMax">Mass Slider: Max</option>
<option value="massMin">Mass Slider: Min</option>
<option value="springMax">Spring Slider: Max</option>
<option value="springMin">Spring Slider: Min</option>
<option value="maxNMax">Max N Slider: Max</option>
</select>
<div>
<input id="setVal" type="number" step="1" value="1" autocomplete="off"/>
<input id="setBut" type="button" class="w3-btn w3-card-4 w3-ripple w3-round w3-purple w3-hover-deep-purple" value="Set" onClick="advSetting()"/>
</div>
</div>
</div>
<img id="sideclose" class="w3-btn w3-card-4 w3-ripple w3-purple w3-hover-deep-purple w3-bar-item" src="./textures/doublearrow.svg" onClick="barclose()"/>
</div>
<div id="helpPanelIntroduction" style="display:none" class="help-panel w3-panel w3-card-4 w3-blue w3-display-middle w3-display-container">
<h3>Help- "Harmonic Well"</h3>
<img id="eqNket" src="./equations/QHOnket.gif"/>
<p>That is a truly horrifying looking equation isn't it, but everything before the "H" is just a constant number to scale it properly. The Hn(x) means the nth Hermite Polynomial which is a special function with n-1 bends in it. (The square root part is also just scaling.) The last part is called a gaussian distribution and it just flattens the function as it gets further from 0.</p>
<p>This quantum system can be thought of as a quantum analogue to a pendulum or a spring.</p>
<p>In all the simulations on this site, the particle we are looking at is only allowed to move in one dimension which is represented by the Red axis. Left/Right</p>
<p>The reason it is called the "harmonic" potential is because its the basis for systems with resonant frequencies. If you drive a spring at the correct frequency, you get more energy out and pendulums have a specific frequency they swing at, hence their famous use in clocks. The further away from the middle, or "equilibrium", the particle wants to go, the more energy it needs to put in to go further.</p>
<p>The specific equation is E=Kx²÷2 :x=position; E=energy</p>
<p>The number K is called the spring constant, because it corresponds to the strength of a spring's restoring force. If you increase this number you should notice the particle becoming more confined to the middle. It is important not to confuse this with the other k often seen in quantum mechanics which is the wavenumber and corresponds to momentum. I will use upper case K for spring constant and lower case k for wavenumber.</p>
<p>See Also: Simple Harmonic Motion, Hooke's Law</p>
<input id="helpClose" type="button" class="w3-btn w3-card-4 w3-ripple w3-display-topright w3-purple w3-hover-deep-purple" value="X" onClick="helpclose('Introduction')"/>
</div>
<script src="harmonicSketch.js"></script>
<script src="panels.js"></script>
</body>
</html>