-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathring.html
151 lines (143 loc) · 10.2 KB
/
ring.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
141
142
143
144
145
146
147
148
149
150
151
<!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 Particle In A Ring Simulation</title>
<script src="mathplus.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>Particle In A Ring</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="1" 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="massLabel" class="label">Mass: 5</span>
<input id="massSlider" class="usrinput" type="range" min="0.1" max="50" value="5" step="0.1" autocomplete="off"/>
</div>
<div class="w3-container">
<span id="RLabel" class="label">Radius: 2</span>
<input id="RSlider" class="usrinput" type="range" min="1" max="20" value="5" step="0.1" autocomplete="off"/>
</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')"/></div>
<input id="cInput" value="1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1" autocomplete="off"/>
<div class="w3-panel">
<input id="autoInput" type="checkbox" autocomplete="off"/>Smart Mode
<input type="button" class="helpButton w3-card-2 w3-ripple w3-round w3-purple w3-hover-deep-purple" value="?" onClick="helpopen('SmartMode')"/>
<div id="autoOff" class="w3-disabled">
<input id="startN" type="number" step="1" value="0" style="width:3em;" autocomplete="off"/>
Start N
</div>
</div>
</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="minNLabel"><b>*</b>Min value of n: 16</div>
<input id="minNSlider" type="range" min="-32" max="0" value="0" step="1" autocomplete="off"/>
<div id="maxNLabel"><b>*</b>Max value of n: 16</div>
<input id="maxNSlider" type="range" min="0" max="32" 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="radiusMax">Radius Slider: Max</option>
<option value="radiusMin">Radius Slider: Min</option>
<option value="minNMin">Min N Slider: Min</option>
<option value="minNMax">Min N Slider: Max</option>
<option value="maxNMin">Max N 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="helpPanelSmartMode" style="display:none" class="help-panel w3-panel w3-card-4 w3-blue w3-display-middle w3-display-container">
<h3>Help- "Smart Mode"</h3>
<p>Automatically spreads out coefficients around 0.</p>
<p>If you type in an even number of coefficients then it skips over 0.</p>
<p>So if you type [4,1i,2,-1] then these will apply to states where n=-2,-1,1,2</p>
<p>And if you type [1,2i,-1,3,-2] then these will apply to states where n=-2,-1,0,1,2</p>
<p>All other states have their coefficient set to zero.</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('SmartMode')"/>
</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- "Particle In A Ring"</h3>
<img id="eqNket" src="./equations/RINGnket.gif"/>
<p>In this situation you have wavefunction that's confined to a circle. This simulation is the closest to what's called a "free particle" which just means something moving uninfluenced in a vacuum.</p>
<p>In this simulation there are both positive and negative values for "n" which correspond to the particle moving in opposite directions. In the other simulations this doesn't happen because there are endpoints to the region where the particle can be. Those endpoints mean that n=3 and n=-3 states have the same energy. We call states with different "quantum numbers", but equal energy "degenerate" states.</p>
<p>Something interesting in this simulation is seeing the particle move in two directions at once. If you type any number of 1s in the manual coeficients box (with smart mode on) you should see that the forward and backward states cancel out and the particle doesn't really have a definite motion in either direction.</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="ringSketch.js"></script>
<script src="panels.js"></script>
</body>
</html>