oscillatory.net
this repo has no description
1<!doctype html>
2<html lang="en">
3<head>
4 <meta charset="utf-8" />
5 <meta name="viewport" content="width=device-width,initial-scale=1" />
6 <title>Transmission line visualizer</title>
7 <link rel="stylesheet" type="text/css" href="style.css" />
8</head>
9<body>
10 <div class="wrap">
11 <h1>Transmission line visualizer</h1>
12
13 <div class="row">
14 <div class="panel">
15 <div class="controls">
16 <div class="readouts">
17 <div class="pill"><span>t / τ<sub>d</sub>:</span> <b class="mono" id="tRead">0.000</b></div>
18 <div class="pill"><span>Γ<sub>L</sub>:</span> <b class="mono" id="gLRead">0.000</b></div>
19 <div class="pill"><span>V<sub>S</sub>:</span> <b class="mono" id="vsRead">0.000 V</b></div>
20 <div class="pill"><span>V<sub>L</sub>:</span> <b class="mono" id="vlRead">0.000 V</b></div>
21 </div>
22 </div>
23
24 <div class="cfg-vert">
25 <div class="cfg-inputs-row">
26 <div class="cfg-row"><span>V<sub>g</sub> =</span><input id="Vg" type="number" step="0.1" value="5.0" /><span>V</span></div>
27 <div class="cfg-row"><span>R<sub>g</sub> =</span><input id="Rg" type="number" step="0.1" value="20.0" /><span>(Ω)</span></div>
28 <div class="cfg-row load-row">
29 <span>Load</span>
30 <select id="loadType">
31 <option value="open">Open (∞)</option>
32 <option value="R" selected>R (Ω)</option>
33 <option value="short">Short (0)</option>
34 <option value="C">C (pF)</option>
35 <option value="L">L (nH)</option>
36 </select>
37 <input id="loadValue" type="number" step="0.1" value="30.0" />
38 <span id="loadUnit">Ω</span>
39 </div>
40 </div>
41 <div class="cfg-panels-row">
42 <div class="cfg-extra">
43 <label><span class="lbl">Time scale — <span id="secPerTauRead" class="mono">2.5</span> s per τ<sub>d</sub></span>
44 <input id="secPerTau" type="range" min="0.5" max="6" step="0.1" value="2.5" />
45 </label>
46 <label><span class="lbl">Segments (N)</span>
47 <input id="segCount" type="number" min="1" max="10" step="1" value="1" />
48 </label>
49 <label><span class="lbl">Z<sub>0</sub> per segment (Ω)</span>
50 <div id="segZ0List" class="seg-z0-list"></div>
51 </label>
52 <div id="junctionList" class="junction-list"></div>
53 </div>
54 <div class="cfg-extra">
55 <label><span class="lbl">τ<sub>d</sub> (real-time delay for C/L values)</span>
56 <div class="tau-d-row">
57 <input id="tauD" type="number" min="0.001" step="0.1" value="1" />
58 <span class="unit-lbl">ns</span>
59 </div>
60 </label>
61 <label><span class="lbl">Reflection termination tolerance (% of |V<sub>1</sub>|)</span>
62 <input id="reflectTol" type="number" min="0" step="0.1" value="1" />
63 </label>
64 <label><span class="lbl">Signal shape</span>
65 <select id="riseMode">
66 <option value="step">Step (instantaneous)</option>
67 <option value="linear">Linear ramp (trapezoidal)</option>
68 <option value="exp">Smooth S-curve (erf)</option>
69 </select>
70 </label>
71 <label><span class="lbl">Rise time constant τ<sub>r</sub> / τ<sub>d</sub></span>
72 <input id="riseTau" type="number" min="0.01" max="5" step="0.01" value="0.1" disabled />
73 </label>
74 </div>
75 </div>
76 </div>
77
78 <div class="divider"></div>
79
80 <div class="transport">
81 <button id="startBtn">Start</button>
82 <button id="pauseBtn">Pause</button>
83 <button id="resetBtn">Reset</button>
84 </div>
85
86 <!-- Probe canvas: voltage at source node vs time -->
87 <canvas id="probe" width="600" height="300" style="width:600px;margin:0 auto;" aria-label="Probe — voltage at source node vs time"></canvas>
88
89 <div class="divider"></div>
90
91 <!-- Circuit canvas -->
92 <canvas id="circuit" width="1100" height="260" aria-label="Circuit with wavefront highlight"></canvas>
93
94 <div class="divider"></div>
95
96 <!-- Plot canvas (bottom) -->
97 <canvas id="plot" width="1100" height="360" aria-label="Voltage vs z plot with incident and reflected waves"></canvas>
98
99 <div class="legend">
100 <div class="key"><span class="swatch"></span> incident</div>
101 <div class="key"><span class="swatch ref"></span> reflected</div>
102 <div class="key"><span class="swatch sum"></span> total (incident + reflected)</div>
103 <div class="small">Axes: horizontal is position <span class="mono">z</span> (0 → ℓ). Vertical is voltage.</div>
104 </div>
105
106 <div class="eq-panel">
107 <div class="eq-lines">
108 <div>\[\Gamma_L = \dfrac{R_L - Z_0}{R_L + Z_0}, \quad \Gamma_S = \dfrac{R_g - Z_0}{R_g + Z_0}\]</div>
109 <div>\[V_1 = V_g \dfrac{Z_0}{R_g + Z_0}\]</div>
110 <div>\[V_{2k} = \Gamma_L V_{2k-1},\quad k \ge 1\]</div>
111 <div>\[V_{2k+1} = \Gamma_S V_{2k},\quad k \ge 1\]</div>
112 </div>
113 <div class="eq-title">Computed Values</div>
114 <div id="derivedValues" class="calc-values mono"></div>
115 <div id="waveValues" class="wave-values mono"></div>
116 </div>
117 </div>
118 </div>
119 </div>
120
121<script>
122 window.MathJax = {
123 tex: { inlineMath: [['\\(', '\\)'], ['$', '$']] },
124 svg: { fontCache: 'global' }
125 };
126</script>
127<script defer src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>
128<script src="utils.js"></script>
129<script src="physics.js"></script>
130<script src="render.js"></script>
131<script src="app.js"></script>
132</body>
133</html>