Skip to content

Commit b111687

Browse files
drewyoungrendrewyoungren
authored
Merge pull request #1566 from ccnmtl/fix-fix-modding-t
Fix the fix for modding t in animations
2 parents a78794a + dbae577 commit b111687

File tree

7 files changed

+186
-26
lines changed

7 files changed

+186
-26
lines changed

‎media/src/form-components/PlayButtons.svelte‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@
55
play = () => {},
66
pause,
77
rew,
8+
clicker = () => {},
9+
playMode = 'loop',
810
// animate,
911
} = $props();
1012
</script>
@@ -32,6 +34,15 @@
3234
<button class="btn rewbtn" onclick={rew} aria-label="rewind">
3335
<i class="fa fa-fast-backward"></i>
3436
</button>
37+
<button class="btn modebtn" onclick={clicker} aria-label="play mode">
38+
{#if playMode == 'loop'}
39+
<i class="fa fa-retweet"></i>
40+
{:else if playMode == 'once'}
41+
<i class="fa fa-arrow-right"></i>
42+
{:else}
43+
<i class="fa fa-arrows-alt-h"></i>
44+
{/if}
45+
</button>
3546
</div>
3647

3748
<style>
@@ -43,4 +54,11 @@
4354
.btn {
4455
color: white;
4556
}
57+
.modebtn {
58+
width: 3em; /* or px if you prefer */
59+
text-align: center;
60+
}
61+
/* .modebtn:hover {
62+
border: 1px solid white;
63+
} */
4664
</style>

‎media/src/objects/Curve.svelte‎

Lines changed: 34 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@
4444
camera,
4545
gridStep,
4646
selected = $bindable(false),
47+
playMode = 'loop',
4748
} = $props();
4849
4950
title = title || `Curve ${++titleIndex}`;
@@ -163,15 +164,42 @@
163164
164165
let last;
165166
167+
function playModeCycle() {
168+
if (playMode == 'once') {
169+
playMode = 'loop';
170+
} else if (playMode == 'loop') {
171+
playMode = 'bounce';
172+
} else {
173+
playMode = 'once';
174+
}
175+
}
176+
177+
let modeSign = 1;
178+
166179
const update = (dt = 0) => {
167-
const { a, b } = params;
180+
// const { a, b } = params;
168181
169182
if (vizOptions.TNB) {
170-
tau += dt / arrows.v.speed / (B - A);
183+
tau += (modeSign * dt) / arrows.v.speed / (B - A);
171184
} else {
172-
tau += dt / (B - A);
185+
tau += (modeSign * dt) / (B - A);
173186
}
174-
tau %= 1;
187+
if (tau > 1) {
188+
if (playMode == 'loop') {
189+
tau %= 1;
190+
} else if (playMode == 'once') {
191+
tau = 1;
192+
animation = false;
193+
} else {
194+
modeSign = -1;
195+
tau = 2 - tau;
196+
}
197+
}
198+
if (tau <= 0) {
199+
modeSign = 1;
200+
tau *= -1;
201+
}
202+
175203
// const T = A + (B - A) * tau;
176204
177205
// uncomment this if we want aVal to be animated:
@@ -663,6 +691,8 @@
663691
animation = false;
664692
update();
665693
}}
694+
{playMode}
695+
clicker={playModeCycle}
666696
/>
667697
668698
{#if isDynamic}

‎media/src/objects/Function.svelte‎

Lines changed: 39 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,7 @@
6767
animate,
6868
camera,
6969
onClose = () => {},
70+
playMode = 'loop',
7071
} = $props();
7172
7273
// $inspect(camera);
@@ -577,6 +578,16 @@
577578
*/
578579
let isDynamic = $derived(dependsOn(params, 't'));
579580
581+
function playModeCycle() {
582+
if (playMode == 'once') {
583+
playMode = 'loop';
584+
} else if (playMode == 'loop') {
585+
playMode = 'bounce';
586+
} else {
587+
playMode = 'once';
588+
}
589+
}
590+
580591
$effect(() => {
581592
[params.z, params.a, params.b, params.c, params.d];
582593
untrack(updateSurface);
@@ -607,9 +618,25 @@
607618
if (selected) untrack(flash);
608619
});
609620
621+
let modeSign = 1;
622+
610623
const update = function (dt) {
611-
tau += dt / (t1 - t0);
612-
tau %= 1;
624+
tau += (modeSign * dt) / (t1 - t0);
625+
if (tau > 1) {
626+
if (playMode == 'loop') {
627+
tau %= 1;
628+
} else if (playMode == 'once') {
629+
tau = 1;
630+
animation = false;
631+
} else {
632+
modeSign = -1;
633+
tau = 2 - tau;
634+
}
635+
}
636+
if (tau <= 0) {
637+
modeSign = 1;
638+
tau *= -1;
639+
}
613640
614641
evolveSurface(tVal);
615642
@@ -799,26 +826,25 @@
799826
boxMesh.add(boxMeshEdges);
800827
801828
const updateBoxes = function () {
802-
const { a, b, c, d} = params;
829+
const { a, b, c, d } = params;
803830
try {
804-
[
831+
[
805832
math.evaluate(a),
806833
math.evaluate(b),
807834
math.evaluate(c),
808835
math.evaluate(d),
809836
];
810837
} catch (e) {
811-
console.error("Can't show integral boxes on nonconstant bounds",e);
838+
console.error("Can't show integral boxes on nonconstant bounds", e);
812839
return;
813840
}
814841
815842
const [A, B, C, D] = [
816-
math.evaluate(a),
817-
math.evaluate(b),
818-
math.evaluate(c),
819-
math.evaluate(d),
820-
];
821-
843+
math.evaluate(a),
844+
math.evaluate(b),
845+
math.evaluate(c),
846+
math.evaluate(d),
847+
];
822848
823849
// const t = T0 + tau * (T1 - T0);
824850
@@ -1181,6 +1207,8 @@
11811207
evolveSurface(tVal);
11821208
render();
11831209
}}
1210+
{playMode}
1211+
clicker={playModeCycle}
11841212
/>
11851213
<!-- </div> -->
11861214
{/if}

‎media/src/objects/Point.svelte‎

Lines changed: 31 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@
4545
selectObject,
4646
animate,
4747
onClose = () => {},
48+
playMode = 'loop',
4849
} = $props();
4950
5051
let tau = $state(0);
@@ -106,6 +107,16 @@
106107
let isDynamic = $derived(dependsOn(params, 't'));
107108
let isDiscrete = $derived(dependsOn(params, 'n'));
108109
110+
function playModeCycle() {
111+
if (playMode == 'once') {
112+
playMode = 'loop';
113+
} else if (playMode == 'loop') {
114+
playMode = 'bounce';
115+
} else {
116+
playMode = 'once';
117+
}
118+
}
119+
109120
$effect(() => {
110121
params;
111122
updatePoint();
@@ -213,9 +224,25 @@
213224
214225
// texString1 = `t = ${Math.round(100 * T) / 100}`;
215226
227+
let modeSign = 1;
228+
216229
const update = (dt = 0) => {
217-
tau += dt / (t1 - t0);
218-
tau %= 1;
230+
tau += (modeSign * dt) / (t1 - t0);
231+
if (tau > 1) {
232+
if (playMode == 'loop') {
233+
tau %= 1;
234+
} else if (playMode == 'once') {
235+
tau = 1;
236+
animation = false;
237+
} else {
238+
modeSign = -1;
239+
tau = 2 - tau;
240+
}
241+
}
242+
if (tau <= 0) {
243+
modeSign = 1;
244+
tau *= -1;
245+
}
219246
updatePoint(tVal);
220247
};
221248
// Start animating if animation changes (e.g. animating scene published)
@@ -308,6 +335,8 @@
308335
tau = 0;
309336
update();
310337
}}
338+
{playMode}
339+
clicker={playModeCycle}
311340
/>
312341
<!-- </div> -->
313342
{/if}

‎media/src/objects/Surface.svelte‎

Lines changed: 32 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@
6868
selectObject,
6969
selectPoint,
7070
animate = () => {},
71+
playMode = 'loop',
7172
} = $props();
7273
7374
let rNum = 10;
@@ -588,9 +589,36 @@
588589
}
589590
};
590591
592+
let modeSign = 1;
593+
594+
function playModeCycle() {
595+
if (playMode == 'once') {
596+
playMode = 'loop';
597+
} else if (playMode == 'loop') {
598+
playMode = 'bounce';
599+
} else {
600+
playMode = 'once';
601+
}
602+
}
603+
591604
const update = function (dt = 0) {
592-
tau += dt / (t1 - t0);
593-
tau %= 1;
605+
tau += (modeSign * dt) / (t1 - t0);
606+
607+
if (tau > 1) {
608+
if (playMode == 'loop') {
609+
tau %= 1;
610+
} else if (playMode == 'once') {
611+
tau = 1;
612+
animation = false;
613+
} else {
614+
modeSign = -1;
615+
tau = 2 - tau;
616+
}
617+
}
618+
if (tau <= 0) {
619+
modeSign = 1;
620+
tau *= -1;
621+
}
594622
595623
if (isDynamic) evolveSurface(tVal);
596624
if (isRhoDynamic) {
@@ -1062,6 +1090,8 @@
10621090
tau = 0;
10631091
update();
10641092
}}
1093+
{playMode}
1094+
clicker={playModeCycle}
10651095
/>
10661096
{/if}
10671097

‎media/src/objects/Vector.svelte‎

Lines changed: 31 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@
5959
render,
6060
onClose,
6161
gridStep,
62+
playMode = 'loop',
6263
} = $props();
6364
6465
let minimize = $state(false);
@@ -143,6 +144,16 @@
143144
let isDynamic = $derived(dependsOn(params, 't'));
144145
let isDiscrete = $derived(dependsOn(params, 'n'));
145146
147+
function playModeCycle() {
148+
if (playMode == 'once') {
149+
playMode = 'loop';
150+
} else if (playMode == 'loop') {
151+
playMode = 'bounce';
152+
} else {
153+
playMode = 'once';
154+
}
155+
}
156+
146157
$effect(updateVector);
147158
148159
// recolor on demand
@@ -250,13 +261,25 @@
250261
return valuation;
251262
};
252263
253-
const update = (dt = 0) => {
254-
const { t0, t1 } = params;
255-
const A = math.parse(t0).evaluate();
256-
const B = math.parse(t1).evaluate();
264+
let modeSign = 1;
257265
258-
tau += dt / (B - A);
259-
tau %= 1;
266+
const update = (dt = 0) => {
267+
tau += (modeSign * dt) / (t1 - t0);
268+
if (tau > 1) {
269+
if (playMode == 'loop') {
270+
tau %= 1;
271+
} else if (playMode == 'once') {
272+
tau = 1;
273+
animation = false;
274+
} else {
275+
modeSign = -1;
276+
tau = 2 - tau;
277+
}
278+
}
279+
if (tau <= 0) {
280+
modeSign = 1;
281+
tau *= -1;
282+
}
260283
261284
updateVector(tVal);
262285
};
@@ -363,6 +386,8 @@
363386
tau = 0;
364387
update();
365388
}}
389+
{playMode}
390+
clicker={playModeCycle}
366391
/>
367392
<!-- </div> -->
368393
{/if}

‎media/src/stories/FluxIntegral.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@
4646
// const currentTime = $tickTock;
4747
last = last || $tickTock;
4848
tau += $tickTock - last;
49-
tau %= 1;
49+
if (tau > 1) tau %= 1;
5050
updateTau(tau);
5151
last = $tickTock;
5252
}

0 commit comments

Comments
 (0)