Repository navigation
Expand file tree
/
Copy pathvisualphase.html
More file actions
221 lines (207 loc) · 12.5 KB
/
Copy pathvisualphase.html
File metadata and controls
221 lines (207 loc) · 12.5 KB
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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Laser Pulse Simulator</title>
<link rel="icon" type="image/png" href="https://raw.githubusercontent.com/visuphy/visuphy.github.io/refs/heads/main/favicon.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="/header.css">
<link rel="stylesheet" href="/footer.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<div id="header-placeholder"></div>
<h1>
<div class="h1-title-group">
<span class="h1-title">Laser Pulse Simulator</span>
<div class="h1-copyright">
© <span id="copyrightYear"></span> <a href="https://github.com/visuphy" target="_blank" title="Visit VisuPhy on GitHub">VisuPhy</a>
</div>
</div>
<div class="h1-info">
<div class="info-item">
<span class="info-label">About and discussion</span>
<div class="info-content">
<a href="." target="_blank" title="About and Discussion">
<i class="fa-solid fa-file-invoice"></i>
</a>
</div>
</div>
<div class="info-item">
<span class="info-label">Source</span>
<div class="info-content">
<a href="https://github.com/visuphy/LaserPulseSimulator" target="_blank" title="View Source on GitHub">
<i class="fab fa-github"></i>
</a>
</div>
</div>
<div class="info-item">
<span class="info-label">Original Author</span>
<div class="info-content">
<a href="https://github.com/Hussein-Tofaili" target="_blank">Hussein-Tofaili</a>
</div>
</div>
<div class="info-item">
<span class="info-label">Other Contributors</span>
<div class="info-content">
<span class="info-none">none</span>
</div>
</div>
</div>
</h1>
<div class="container">
<div class="controls">
<div class="plot-container">
<h3>Spectrum & spectral phase</h3>
<canvas id="spectrumChart"></canvas>
<div class="checkbox-group">
<input type="checkbox" id="showSpectralPhase" checked>
<label for="showSpectralPhase">Show Spectral Phase Φ(ω)</label>
</div>
<div class="spectrum-mode-selector">
<label><input type="radio" name="spectrumMode" value="gaussian" id="gaussianModeRadio" checked> Gaussian S(ω)</label>
<label><input type="radio" name="spectrumMode" value="custom" id="customModeRadio"> Custom S(ω)</label>
</div>
<small id="customSpectrumHelpText" class="plot-note" hidden>
Drag the red points to shape a smooth spectral intensity S(ω).
</small>
</div>
<h2>Controls</h2>
<div class="slider-columns-container">
<div class="slider-column"> <div class="slider-group" id="omega0SliderGroup"> <label for="omega0" id="omega0_label">Central angular frequency ω₀</label>
<div class="slider-input-wrapper">
<input type="range" id="omega0" min="1" max="12" value="5" step="any"> <input type="number" id="omega0_val" min="1" max="12" value="5" step="any" aria-label="Central angular frequency value">
</div>
<div class="checkbox-group-inline" id="autoOmega0Group" hidden> <input type="checkbox" id="autoOmega0Custom" checked>
<label for="autoOmega0Custom" style="font-size: 0.85em; font-weight: normal;">Auto-calculate from S(ω)</label>
</div>
<small id="omega0_custom_note" hidden>ω₀ sets the phase reference. Uncheck "Auto-calculate" for manual input.</small>
</div>
<button id="resetCustomSpectrumButton" hidden>Reset Custom Spectrum to Zero</button>
<div id="gaussianControls"> <div class="slider-group">
<label for="delta_omega">Spectral intensity bandwidth (Δω, FWHM):</label>
<div class="slider-input-wrapper">
<input type="range" id="delta_omega" min="0.2" max="5" value="2" step="0.1">
<input type="number" id="delta_omega_val" min="0.2" max="5" value="2" step="0.1">
</div>
</div>
</div>
</div>
<div class="slider-column phase-controls"> <h3>Spectral phase coefficients</h3>
<p class="phase-formula"><span>Φ(ω) = c₀ + c₁δω</span><span>+ ½c₂δω² + ⅙c₃δω³</span></p>
<p class="phase-reference">Here δω = ω − ω₀.</p>
<div class="phase-grid">
<div class="slider-group">
<label for="phi0">c₀ · Constant phase</label>
<div class="slider-input-wrapper">
<input type="range" id="phi0" min="-6.3" max="6.3" value="0" step="0.1">
<input type="number" id="phi0_val" min="-6.3" max="6.3" value="0" step="0.1">
</div>
</div>
<div class="slider-group">
<label for="phi1">c₁ · Group delay</label>
<div class="slider-input-wrapper">
<input type="range" id="phi1" min="-5" max="5" value="0" step="0.1">
<input type="number" id="phi1_val" min="-5" max="5" value="0" step="0.1">
</div>
</div>
<div class="slider-group">
<label for="phi2">c₂ · GDD</label>
<div class="slider-input-wrapper">
<input type="range" id="phi2" min="-4" max="4" value="0" step="0.1">
<input type="number" id="phi2_val" min="-4" max="4" value="0" step="0.1">
</div>
</div>
<div class="slider-group">
<label for="phi3">c₃ · TOD</label>
<div class="slider-input-wrapper">
<input type="range" id="phi3" min="-12" max="12" value="0" step="0.2">
<input type="number" id="phi3_val" min="-12" max="12" value="0" step="0.2">
</div>
</div>
</div>
</div>
</div>
<form id="axisControls" class="axis-controls" novalidate>
<div class="panel-heading">
<h3>Plot limits</h3>
<label class="auto-time-toggle"><input id="autoTimeLimits" type="checkbox" checked> Auto time</label>
</div>
<div class="axis-grid">
<span></span><span class="axis-column-label">Minimum</span><span class="axis-column-label">Maximum</span>
<span class="axis-symbol" title="Angular frequency">ω</span>
<input id="omegaMin" aria-label="Minimum angular frequency" type="number" min="0" step="any" value="1" required>
<input id="omegaMax" aria-label="Maximum angular frequency" type="number" min="0" step="any" value="12" required>
<span class="axis-symbol" title="Time, shared by all time plots">t</span>
<input id="timeMin" aria-label="Minimum time" type="number" step="any" value="-20" required>
<input id="timeMax" aria-label="Maximum time" type="number" step="any" value="20" required>
</div>
<div class="axis-actions">
<button type="submit">Apply</button>
<button type="button" id="fitSpectrum">Fit spectrum</button>
<button type="button" id="resetAxes">Reset</button>
</div>
<p id="axisError" class="error-message" role="alert"></p>
<p id="timeLimitsHint" class="plot-note">Fits the pulse when frequency limits or ω₀ change; other controls keep this view fixed.</p>
</form>
<p id="calculationStatus" class="calculation-status" role="status" aria-live="polite"></p>
<details class="calculation-details">
<summary>How the pulse is calculated</summary>
<p>A(ω) = √S(ω). The complex field is F(t) = ∫ A(ω) exp[iΦ(ω) − iωt] dω / (2π), over nonnegative angular frequencies. E(t) = Re F(t).</p>
<p>The numerical sum includes amplitudes down to 0.01% of the spectral peak. Seven illustrative waves span the intensity FWHM; custom spectra use the outermost half-maximum crossings.</p>
<p>Custom spectra use a smooth cubic curve through the control points. The same curve determines the spectrum, centroid, FWHM, and pulse calculation.</p>
<p>Pulse intensity is proportional to |F(t)|². The optional E(t)² trace shows carrier oscillations; its cycle average is |F(t)|² / 2 for a slowly varying envelope. Units and the overall intensity scale are arbitrary.</p>
<p>ω<sub>inst</sub>(t) = −Im[F′(t) / F(t)]. Frequency is hidden below 10<sup>−6</sup> of the transform-limited peak intensity, where the field phase becomes unreliable.</p>
</details>
</div>
<div class="plots">
<div class="plot-container individual-waves">
<h3>Individual cosine waves <span class="plot-formula">A(ω) cos[Φ(ω) − ωt]</span></h3>
<canvas id="individualCosinesChart"></canvas>
<p class="plot-note">Seven waves across the FWHM. Arrows indicate the rest of the spectrum.</p>
<div class="checkbox-group">
<input type="checkbox" id="showPeakConnector">
<label for="showPeakConnector">Show Peak Connector Line</label>
</div>
</div>
<div class="plot-container">
<h3>Electric field E(t) <span class="plot-formula">Sum of the waves</span></h3>
<canvas id="sumCosinesChart"></canvas>
<div class="checkbox-group plot-action-row">
<input type="checkbox" id="showEnvelopeE" checked>
<label for="showEnvelopeE">Show E(t) Envelope</label>
<button type="button" id="fitTime" class="icon-button" aria-label="Fit the time axis around the pulse" title="Fit the shared time axis around the pulse">
<svg viewBox="0 0 16 16" width="15" height="15" aria-hidden="true" focusable="false"
fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
<path d="M6 2.5H2.5V6"/><path d="M10 2.5H13.5V6"/>
<path d="M6 13.5H2.5V10"/><path d="M10 13.5H13.5V10"/>
</svg>
<span>Fit</span>
</button>
</div>
</div>
<div class="plot-container">
<h3>Pulse intensity <span class="plot-formula">I(t) ∝ |F(t)|²</span></h3>
<canvas id="sumIntensityChart"></canvas>
<p class="plot-note" id="intensityWidth"></p>
<div class="checkbox-group">
<input type="checkbox" id="showFieldSquared">
<label for="showFieldSquared">Also show instantaneous E(t)²</label>
</div>
</div>
<div class="plot-container">
<h3>Instantaneous angular frequency <span class="plot-formula">ω<sub>inst</sub>(t)</span></h3>
<canvas id="instantaneousFrequencyChart"></canvas>
<p class="plot-note">Frequency is shown where the pulse has appreciable intensity; gaps mark a weak or zero field.</p>
</div>
</div>
</div>
<script src="pulse-math.js"></script>
<script src="script.js"></script>
<div id="footer-placeholder"></div>
<!-- Script to include Header/Footer -->
<script src="/layout.js" defer></script>
</body>
</html>