🚀 demo + spring

packages/gif-creator/__tests__/createGif.spec.ts

@@ -5,6 +5,8 @@ import { getBestRoute } from "@snk/compute/getBestRoute";
 import * as grids from "@snk/compute/__fixtures__/grid";
 import { snake3 as snake } from "@snk/compute/__fixtures__/snake";
 
+jest.setTimeout(20 * 1000);
+
 const drawOptions = {
   sizeBorderRadius: 2,
   sizeCell: 16,
@@ -15,7 +17,7 @@ const drawOptions = {
   colorSnake: "purple",
 };
 
-const gifOptions = { delay: 18 };
+const gifOptions = { frameDuration: 20, step: 1 };
 
 const dir = path.resolve(__dirname, "__snapshots__");
 

packages/gif-creator/index.ts

@@ -3,7 +3,7 @@ import * as path from "path";
 import { createCanvas } from "canvas";
 import { Grid, copyGrid, Color } from "@snk/compute/grid";
 import { Snake } from "@snk/compute/snake";
-import { drawWorld } from "@snk/draw/drawWorld";
+import { Options, drawLerpWorld } from "@snk/draw/drawWorld";
 import { step } from "@snk/compute/step";
 import * as tmp from "tmp";
 import * as execa from "execa";
@@ -11,15 +11,11 @@ import * as execa from "execa";
 export const createGif = async (
   grid0: Grid,
   chain: Snake[],
-  drawOptions: Parameters<typeof drawWorld>[4],
-  gifOptions: { delay: number }
+  drawOptions: Options,
+  gifOptions: { frameDuration: number; step: number }
 ) => {
-  let snake = chain[0];
-  const grid = copyGrid(grid0);
-  const stack: Color[] = [];
-
-  const width = drawOptions.sizeCell * (grid.width + 2);
-  const height = drawOptions.sizeCell * (grid.height + 4) + 100;
+  const width = drawOptions.sizeCell * (grid0.width + 2);
+  const height = drawOptions.sizeCell * (grid0.height + 4) + 100;
 
   const { name: dir, removeCallback: cleanUp } = tmp.dirSync({
     unsafeCleanup: true,
@@ -28,28 +24,41 @@ export const createGif = async (
   const canvas = createCanvas(width, height);
   const ctx = canvas.getContext("2d")!;
 
-  const writeImage = (i: number) => {
-    ctx.clearRect(0, 0, 99999, 99999);
-    ctx.fillStyle = "#fff";
-    ctx.fillRect(0, 0, 99999, 99999);
-    drawWorld(ctx, grid, snake, stack, drawOptions);
-
-    const buffer = canvas.toBuffer("image/png", {
-      compressionLevel: 0,
-      filters: canvas.PNG_FILTER_NONE,
-    });
-
-    const fileName = path.join(dir, `${i.toString().padStart(4, "0")}.png`);
-
-    fs.writeFileSync(fileName, buffer);
-  };
-
   try {
-    for (let i = 0; i < chain.length; i++) {
-      snake = chain[i];
+    const grid = copyGrid(grid0);
+    const stack: Color[] = [];
 
-      step(grid, stack, snake);
-      writeImage(i);
+    for (let i = 0; i < chain.length; i += 1) {
+      const snake0 = chain[i];
+      const snake1 = chain[Math.min(chain.length - 1, i + 1)];
+      step(grid, stack, snake0);
+
+      for (let k = 0; k < gifOptions.step; k++) {
+        ctx.clearRect(0, 0, 99999, 99999);
+        ctx.fillStyle = "#fff";
+        ctx.fillRect(0, 0, 99999, 99999);
+        drawLerpWorld(
+          ctx,
+          grid,
+          snake0,
+          snake1,
+          stack,
+          k / gifOptions.step,
+          drawOptions
+        );
+
+        const buffer = canvas.toBuffer("image/png", {
+          compressionLevel: 0,
+          filters: canvas.PNG_FILTER_NONE,
+        });
+
+        const fileName = path.join(
+          dir,
+          `${(i * gifOptions.step + k).toString().padStart(4, "0")}.png`
+        );
+
+        fs.writeFileSync(fileName, buffer);
+      }
     }
 
     const outFileName = path.join(dir, "out.gif");
@@ -60,7 +69,7 @@ export const createGif = async (
       [
         "convert",
         ["-loop", "0"],
-        ["-delay", gifOptions.delay.toString()],
+        ["-delay", gifOptions.frameDuration.toString()],
         ["-dispose", "2"],
         // ["-layers", "OptimizeFrame"],
         ["-compress", "LZW"],