🚀 imrpove algorithm

packages/demo/demo.outside.ts

@@ -0,0 +1,42 @@
+import "./menu";
+import { createCanvas } from "./canvas";
+import { grid } from "./sample";
+import type { Color } from "@snk/types/grid";
+import { createOutside, isOutside } from "@snk/compute/outside";
+
+const { canvas, ctx, draw, highlightCell } = createCanvas(grid);
+document.body.appendChild(canvas);
+
+let k = 0;
+
+const onChange = () => {
+  ctx.clearRect(0, 0, 9999, 9999);
+
+  draw(grid, [] as any, []);
+
+  const outside = createOutside(grid, k as Color);
+
+  for (let x = outside.width; x--; )
+    for (let y = outside.height; y--; )
+      if (isOutside(outside, x, y)) highlightCell(x, y);
+};
+
+onChange();
+
+const inputK = document.createElement("input") as any;
+inputK.type = "range";
+inputK.value = 0;
+inputK.step = 1;
+inputK.min = 0;
+inputK.max = 4;
+inputK.style.width = "90%";
+inputK.style.padding = "20px 0";
+inputK.addEventListener("input", () => {
+  k = +inputK.value;
+  onChange();
+});
+document.body.append(inputK);
+window.addEventListener("click", (e) => {
+  if (e.target === document.body || e.target === document.body.parentElement)
+    inputK.focus();
+});