oscillatory.net
this repo has no description
v1
+30
-16
tline_viz.html
+30
-16
tline_viz.html
···
21
21
h1 { font-size: 18px; margin: 0 0 10px; font-weight: 650; letter-spacing: 0.2px; }
22
22
.row { display: grid; grid-template-columns: 1fr; gap: 12px; }
23
23
.panel { background: var(--panel); border: 1px solid #1b2736; border-radius: 14px; padding: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.25); }
24
-
.controls { display: grid; grid-template-columns: repeat(12, 1fr); gap: 10px; align-items: end; }
25
-
.controls .btns { grid-column: span 4; display: flex; gap: 8px; flex-wrap: wrap; }
24
+
.controls { display: grid; grid-template-columns: 1fr; gap: 10px; align-items: end; }
26
25
button {
27
26
background: #162234; border: 1px solid #24364e; color: var(--ink);
28
27
padding: 8px 10px; border-radius: 10px; cursor: pointer; font-weight: 600;
···
35
34
padding: 6px 10px; color: var(--muted); font-size: 12px;
36
35
}
37
36
.pill b { color: var(--ink); font-weight: 650; }
38
-
.controls .readouts { grid-column: span 8; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
37
+
.controls .readouts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
38
+
.transport { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
39
39
label { font-size: 12px; color: var(--muted); display: grid; gap: 6px; }
40
40
input[type="number"], input[type="range"] {
41
41
width: 100%;
···
112
112
<div class="row">
113
113
<div class="panel">
114
114
<div class="controls">
115
-
<div class="btns">
116
-
<button id="startBtn">Start</button>
117
-
<button id="pauseBtn">Pause</button>
118
-
<button id="resetBtn">Reset</button>
119
-
<div class="toggle pill" title="When paused, move your mouse over the plot or the line to scrub time.">
120
-
<input id="scrubToggle" type="checkbox" />
121
-
<span>Scrub</span>
122
-
</div>
123
-
</div>
124
115
<div class="readouts">
125
116
<div class="pill"><span>t / τ<sub>d</sub>:</span> <b class="mono" id="tRead">0.000</b></div>
126
117
<div class="pill"><span>Γ<sub>L</sub>:</span> <b class="mono" id="gLRead">0.000</b></div>
···
162
153
163
154
<div class="divider"></div>
164
155
156
+
<div class="transport">
157
+
<button id="startBtn">Start</button>
158
+
<button id="pauseBtn">Pause</button>
159
+
<button id="resetBtn">Reset</button>
160
+
<div class="toggle pill" title="When paused, move your mouse over the plot or the line to scrub time.">
161
+
<input id="scrubToggle" type="checkbox" />
162
+
<span>Scrub</span>
163
+
</div>
164
+
</div>
165
+
165
166
<!-- Circuit canvas (top) -->
166
167
<canvas id="circuit" width="1100" height="260" aria-label="Circuit with wavefront highlight"></canvas>
167
168
···
253
254
}
254
255
255
256
let running = false;
257
+
let hasStarted = false;
256
258
let tNorm = 0; // time in units of tau_d (dimensionless)
257
259
let lastTS = null;
258
260
···
434
436
ctx.strokeStyle = theme.ink;
435
437
436
438
// Wires top/bottom
437
-
line(ctx, xSourceL, yTop, xTL0, yTop);
439
+
const swA = xSwitch - 18;
440
+
const swB = xSwitch + 18;
441
+
line(ctx, xSourceL, yTop, swA, yTop);
442
+
line(ctx, swB, yTop, xTL0, yTop);
438
443
line(ctx, xTL1, yTop, xLoad, yTop);
439
444
line(ctx, xLoad, yTop, xRight, yTop);
440
445
···
512
517
}
513
518
514
519
function drawSwitch(ctx, x, y, tn) {
515
-
// Simple open/closed depiction based on whether tn>0
520
+
// Open at t=0 with angled blade; close by rotating down onto right contact.
516
521
const closed = tn > 0;
517
522
ctx.strokeStyle = theme.ink;
518
523
ctx.lineWidth = 2;
···
525
530
// right contact
526
531
circleFill(ctx, b.x, b.y, 3.2, theme.ink);
527
532
528
-
// Always draw as an angled blade to keep the switch symbol visually clear.
529
533
if (closed) {
530
-
line(ctx, a.x + 1, a.y - 8, b.x, b.y);
534
+
// Closed switch: hard short contact-to-contact.
535
+
line(ctx, a.x, a.y, b.x, b.y);
531
536
} else {
532
537
line(ctx, a.x + 1, a.y - 1, b.x - 2, b.y - 14);
533
538
}
···
816
821
ensurePlotCanvasHeight(1 + dyn.launchedWaves.length);
817
822
const p = resizeCanvasToCSS(el.plot);
818
823
drawPlot(p.ctx, p.w, p.h, tNorm, dyn);
824
+
if (!hasStarted) {
825
+
el.pauseBtn.textContent = "Pause";
826
+
} else {
827
+
el.pauseBtn.textContent = running ? "Pause" : "Resume";
828
+
}
829
+
el.pauseBtn.disabled = !hasStarted;
819
830
}
820
831
821
832
function tick(ts) {
···
843
854
}
844
855
845
856
function start() {
857
+
hasStarted = true;
846
858
tNorm = 0;
847
859
running = true;
848
860
lastTS = null;
···
851
863
}
852
864
853
865
function pause() {
866
+
if (!hasStarted) return;
854
867
if (running) {
855
868
running = false;
856
869
lastTS = null;
···
867
880
868
881
function reset() {
869
882
running = false;
883
+
hasStarted = false;
870
884
lastTS = null;
871
885
tNorm = 0;
872
886
render();