🚀 demo + spring

packages/draw/drawSnake.ts

@@ -30,3 +30,39 @@ export const drawSnake = (
     ctx.restore();
   }
 };
+
+const lerp = (k: number, a: number, b: number) => (1 - k) * a + k * b;
+const clamp = (x: number, a: number, b: number) => Math.max(a, Math.min(b, x));
+
+export const drawSnakeLerp = (
+  ctx: CanvasRenderingContext2D,
+  snake0: Snake,
+  snake1: Snake,
+  k: number,
+  o: Options
+) => {
+  const m = 0.8;
+  const n = snake0.length / 2;
+  for (let i = 0; i < n; i++) {
+    const u = (i + 1) * 0.6;
+
+    const a = (1 - m) * (i / Math.max(n - 1, 1));
+    const ki = clamp((k - a) / m, 0, 1);
+
+    const x = lerp(ki, snake0[i * 2 + 0], snake1[i * 2 + 0]) - 2;
+    const y = lerp(ki, snake0[i * 2 + 1], snake1[i * 2 + 1]) - 2;
+
+    ctx.save();
+    ctx.fillStyle = o.colorSnake;
+    ctx.translate(x * o.sizeCell + u, y * o.sizeCell + u);
+    ctx.beginPath();
+    pathRoundedRect(
+      ctx,
+      o.sizeCell - u * 2,
+      o.sizeCell - u * 2,
+      (o.sizeCell - u * 2) * 0.25
+    );
+    ctx.fill();
+    ctx.restore();
+  }
+};

packages/draw/drawWorld.ts

@@ -1,9 +1,9 @@
 import { Grid, Color } from "@snk/compute/grid";
 import { drawGrid } from "./drawGrid";
 import { Snake } from "@snk/compute/snake";
-import { drawSnake } from "./drawSnake";
+import { drawSnake, drawSnakeLerp } from "./drawSnake";
 
-type Options = {
+export type Options = {
   colorDots: Record<Color, string>;
   colorEmpty: string;
   colorBorder: string;
@@ -62,3 +62,26 @@ export const drawWorld = (
   // drawCircleStack(ctx, stack, o);
   // ctx.restore();
 };
+
+export const drawLerpWorld = (
+  ctx: CanvasRenderingContext2D,
+  grid: Grid,
+  snake0: Snake,
+  snake1: Snake,
+  stack: Color[],
+  k: number,
+  o: Options
+) => {
+  ctx.save();
+
+  ctx.translate(1 * o.sizeCell, 2 * o.sizeCell);
+  drawGrid(ctx, grid, o);
+  drawSnakeLerp(ctx, snake0, snake1, k, o);
+
+  ctx.translate(0, (grid.height + 2) * o.sizeCell);
+
+  const max = grid.data.reduce((sum, x) => sum + +!!x, stack.length);
+  drawStack(ctx, stack, max, grid.width * o.sizeCell, o);
+
+  ctx.restore();
+};