Add bounce/loop/once button

Author: drewyoungren

media/src/form-components/PlayButtons.svelte

@@ -55,6 +55,10 @@
         color: white;
     }
     .modebtn {
-        width: 1rem;
+        width: 3em; /* or px if you prefer */
+        text-align: center;
     }
+    /* .modebtn:hover {
+        border: 1px solid white;
+    } */
 </style>

media/src/objects/Curve.svelte

@@ -44,6 +44,7 @@
         camera,
         gridStep,
         selected = $bindable(false),
+        playMode = 'loop',
     } = $props();
 
     title = title || `Curve ${++titleIndex}`;
@@ -163,15 +164,42 @@
 
     let last;
 
+    function playModeCycle() {
+        if (playMode == 'once') {
+            playMode = 'loop';
+        } else if (playMode == 'loop') {
+            playMode = 'bounce';
+        } else {
+            playMode = 'once';
+        }
+    }
+
+    let modeSign = 1;
+
     const update = (dt = 0) => {
-        const { a, b } = params;
+        // const { a, b } = params;
 
         if (vizOptions.TNB) {
-            tau += dt / arrows.v.speed / (B - A);
+            tau += (modeSign * dt) / arrows.v.speed / (B - A);
         } else {
-            tau += dt / (B - A);
+            tau += (modeSign * dt) / (B - A);
         }
-        if (tau > 1) tau %= 1;
+        if (tau > 1) {
+            if (playMode == 'loop') {
+                tau %= 1;
+            } else if (playMode == 'once') {
+                tau = 1;
+                animation = false;
+            } else {
+                modeSign = -1;
+                tau = 2 - tau;
+            }
+        }
+        if (tau <= 0) {
+            modeSign = 1;
+            tau *= -1;
+        }
+
         // const T = A + (B - A) * tau;
 
         // uncomment this if we want aVal to be animated:
@@ -663,6 +691,8 @@
                     animation = false;
                     update();
                 }}
+                {playMode}
+                clicker={playModeCycle}
             />
 
             {#if isDynamic}

media/src/objects/Function.svelte

@@ -67,6 +67,7 @@
         animate,
         camera,
         onClose = () => {},
+        playMode = 'loop',
     } = $props();
 
     // $inspect(camera);
@@ -577,6 +578,16 @@
      */
     let isDynamic = $derived(dependsOn(params, 't'));
 
+    function playModeCycle() {
+        if (playMode == 'once') {
+            playMode = 'loop';
+        } else if (playMode == 'loop') {
+            playMode = 'bounce';
+        } else {
+            playMode = 'once';
+        }
+    }
+
     $effect(() => {
         [params.z, params.a, params.b, params.c, params.d];
         untrack(updateSurface);
@@ -607,9 +618,25 @@
         if (selected) untrack(flash);
     });
 
+    let modeSign = 1;
+
     const update = function (dt) {
-        tau += dt / (t1 - t0);
-        if (tau > 1) tau %= 1;
+        tau += (modeSign * dt) / (t1 - t0);
+        if (tau > 1) {
+            if (playMode == 'loop') {
+                tau %= 1;
+            } else if (playMode == 'once') {
+                tau = 1;
+                animation = false;
+            } else {
+                modeSign = -1;
+                tau = 2 - tau;
+            }
+        }
+        if (tau <= 0) {
+            modeSign = 1;
+            tau *= -1;
+        }
 
         evolveSurface(tVal);
 
@@ -1180,6 +1207,8 @@
                         evolveSurface(tVal);
                         render();
                     }}
+                    {playMode}
+                    clicker={playModeCycle}
                 />
                 <!-- </div> -->
             {/if}

media/src/objects/Point.svelte

@@ -45,7 +45,7 @@
         selectObject,
         animate,
         onClose = () => {},
-        playMode = 'bounce',
+        playMode = 'loop',
     } = $props();
 
     let tau = $state(0);
@@ -107,10 +107,6 @@
     let isDynamic = $derived(dependsOn(params, 't'));
     let isDiscrete = $derived(dependsOn(params, 'n'));
 
-    /**
-     * @type "once"|"loop"|"bounce"
-     */
-    // let playMode = $state('loop');
     function playModeCycle() {
         if (playMode == 'once') {
             playMode = 'loop';

media/src/objects/Surface.svelte

@@ -68,6 +68,7 @@
         selectObject,
         selectPoint,
         animate = () => {},
+        playMode = 'loop',
     } = $props();
 
     let rNum = 10;
@@ -588,9 +589,36 @@
         }
     };
 
+    let modeSign = 1;
+
+    function playModeCycle() {
+        if (playMode == 'once') {
+            playMode = 'loop';
+        } else if (playMode == 'loop') {
+            playMode = 'bounce';
+        } else {
+            playMode = 'once';
+        }
+    }
+
     const update = function (dt = 0) {
-        tau += dt / (t1 - t0);
-        if (tau > 1) tau %= 1;
+        tau += (modeSign * dt) / (t1 - t0);
+
+        if (tau > 1) {
+            if (playMode == 'loop') {
+                tau %= 1;
+            } else if (playMode == 'once') {
+                tau = 1;
+                animation = false;
+            } else {
+                modeSign = -1;
+                tau = 2 - tau;
+            }
+        }
+        if (tau <= 0) {
+            modeSign = 1;
+            tau *= -1;
+        }
 
         if (isDynamic) evolveSurface(tVal);
         if (isRhoDynamic) {
@@ -1062,6 +1090,8 @@
                         tau = 0;
                         update();
                     }}
+                    {playMode}
+                    clicker={playModeCycle}
                 />
             {/if}
 

media/src/objects/Vector.svelte

@@ -59,6 +59,7 @@
         render,
         onClose,
         gridStep,
+        playMode = 'loop',
     } = $props();
 
     let minimize = $state(false);
@@ -143,6 +144,16 @@
     let isDynamic = $derived(dependsOn(params, 't'));
     let isDiscrete = $derived(dependsOn(params, 'n'));
 
+    function playModeCycle() {
+        if (playMode == 'once') {
+            playMode = 'loop';
+        } else if (playMode == 'loop') {
+            playMode = 'bounce';
+        } else {
+            playMode = 'once';
+        }
+    }
+
     $effect(updateVector);
 
     // recolor on demand
@@ -250,13 +261,25 @@
         return valuation;
     };
 
-    const update = (dt = 0) => {
-        const { t0, t1 } = params;
-        const A = math.parse(t0).evaluate();
-        const B = math.parse(t1).evaluate();
+    let modeSign = 1;
 
-        tau += dt / (B - A);
-        if (tau > 1) tau %= 1;
+    const update = (dt = 0) => {
+        tau += (modeSign * dt) / (t1 - t0);
+        if (tau > 1) {
+            if (playMode == 'loop') {
+                tau %= 1;
+            } else if (playMode == 'once') {
+                tau = 1;
+                animation = false;
+            } else {
+                modeSign = -1;
+                tau = 2 - tau;
+            }
+        }
+        if (tau <= 0) {
+            modeSign = 1;
+            tau *= -1;
+        }
 
         updateVector(tVal);
     };
@@ -363,6 +386,8 @@
                         tau = 0;
                         update();
                     }}
+                    {playMode}
+                    clicker={playModeCycle}
                 />
                 <!-- </div> -->
             {/if}