update testing page to use public animation api

g-harel · g-harel · commit 967c080a09e4 · 2020-05-03T20:16:27.000-05:00
diff --git a/internal/animate/testing/index.html b/internal/animate/testing/index.html
@@ -13,11 +13,19 @@
             body * {
                 border: 1px solid #eee;
             }
+
+            .buttons {
+                display: flex;
+                flex-direction: column;
+            }
         </style>
     </head>
 
     <body>
-        <button id="toggle">TOGGLE<br />DEBUG</button>
+        <div class="buttons">
+            <button id="toggle">TOGGLE<br />DEBUG</button>
+            <button id="interact">INTERACT</button>
+        </div>
         <script src="./script.ts"></script>
     </body>
 </html>
diff --git a/internal/animate/testing/script.ts b/internal/animate/testing/script.ts
@@ -6,6 +6,7 @@ import {clear, drawInfo, drawClosed} from "../../render/canvas";
 import {genBlob} from "../../gen";
 import {rand} from "../../rand";
 import * as blobs2 from "../../../public/blobs";
+import * as blobs2Animate from "../../../public/animate";
 
 let animationSpeed = 2;
 let animationStart = 0.3;
@@ -24,6 +25,9 @@ const toggle = document.getElementById("toggle");
 if (toggle === null) throw new Error("no toggle");
 toggle.onclick = () => (debug = !debug);
 
+const interact = document.getElementById("interact") as any;
+if (toggle === null) throw new Error("no interact");
+
 const point = (x: number, y: number, ia: number, il: number, oa: number, ol: number): Point => {
     return {
         x: x * size,
@@ -255,6 +259,58 @@ const loopBetween = (percentage: number, a: Point[], b: Point[]): Point[] => {
     }
 };
 
+const animation = blobs2Animate.canvasPath();
+
+const loopAnimation = () => {
+    console.log("LOOP");
+
+    animation.transition(
+        {
+            duration: 2000,
+            blobOptions: {
+                extraPoints: 3,
+                randomness: 3,
+                seed: "blob1",
+                size: 200,
+            },
+        },
+        {
+            duration: 2000,
+            callback: loopAnimation,
+            blobOptions: {
+                extraPoints: 3,
+                randomness: 3,
+                seed: "blob2",
+                size: 200,
+            },
+        },
+    );
+};
+
+animation.transition({
+    duration: 100,
+    callback: loopAnimation,
+    blobOptions: {
+        extraPoints: 3,
+        randomness: 3,
+        seed: "start",
+        size: 200,
+    },
+});
+
+interact.onclick = () => {
+    animation.transition({
+        duration: 1000,
+        callback: loopAnimation,
+        blobOptions: {
+            extraPoints: 3,
+            randomness: 7,
+            seed: "onClick",
+            size: 200,
+        },
+    });
+};
+
 (() => {
     let percentage = animationStart;
 
@@ -276,6 +332,8 @@ const loopBetween = (percentage: number, a: Point[], b: Point[]): Point[] => {
         percentage += animationSpeed / 1000;
         percentage = mod(percentage, 1);
         if (animationSpeed > 0) requestAnimationFrame(renderFrame);
+
+        ctx.fill(animation.renderFrame());
     };
     renderFrame();
 })();
