feat(pixel): add flood fill functions

thi-ng · Nov 1, 2021 · 65796b9 · 65796b9
1 parent 160d47a
commit 65796b9
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 6 deletions.
diff --git a/packages/grid-iterators/src/flood-fill.ts b/packages/grid-iterators/src/flood-fill.ts
@@ -1,5 +1,5 @@
 import type { Predicate } from "@thi.ng/api";
-import { BitField, defBitField } from "@thi.ng/bitfield";
+import { BitField, defBitField } from "@thi.ng/bitfield/bitfield";
 
 /**
  * Yields an iterator of 2D coordinates which would flood fill the space in

diff --git a/packages/pixel/README.md b/packages/pixel/README.md
@@ -57,9 +57,8 @@ Typedarray integer & float pixel buffers w/ customizable formats, blitting, dith
 - Customizable normal map generation (i.e. X/Y gradients plus static Z component)
 - XY full pixel & channel-only accessors
 - 12 packed integer and 6 floating point preset formats (see table below)
-- Ordered dithering w/ customizable Bayer matrix size and target color
-  steps (int formats only)
 - Declarative custom format & optimized code generation
+- Flood filling (solid or pattern)
 - HTML canvas creation & `ImageData` utilities
 
 ### Packed integer pixel formats
@@ -334,7 +333,7 @@ node --experimental-repl-await
 > const pixel = await import("@thi.ng/pixel");
 ```
 
-Package sizes (gzipped, pre-treeshake): ESM: 8.84 KB
+Package sizes (gzipped, pre-treeshake): ESM: 9.00 KB
 
 ## Dependencies
 

diff --git a/packages/pixel/src/flood-fill.ts b/packages/pixel/src/flood-fill.ts
@@ -0,0 +1,64 @@
+import { assert } from "@thi.ng/errors/assert";
+import { floodFill } from "@thi.ng/grid-iterators/flood-fill";
+import type { PackedBuffer } from "./packed.js";
+
+/**
+ * Fills pixel in the connected region around `x,y` with given color. Returns
+ * pixel buffer.
+ *
+ * @param img
+ * @param x
+ * @param y
+ * @param col
+ */
+export const floodFillSolid = (
+    img: PackedBuffer,
+    x: number,
+    y: number,
+    col: number
+) => {
+    const { pixels, width, height } = img;
+    const src = img.getAt(x, y);
+    for (let [xx, yy] of floodFill(
+        (i) => pixels[i] === src,
+        x,
+        y,
+        width,
+        height
+    )) {
+        pixels[yy * width + xx] = col;
+    }
+    return img;
+};
+
+/**
+ * Fills pixel in the connected region around `x,y` with the pattern defined by
+ * given `pattern` image (must be in same format as `img`). Returns updated
+ * pixel buffer.
+ *
+ * @param img
+ * @param x
+ * @param y
+ * @param pattern
+ */
+export const floodFillPattern = (
+    img: PackedBuffer,
+    x: number,
+    y: number,
+    pattern: PackedBuffer
+) => {
+    assert(img.format === pattern.format, "pattern must have same format");
+    const { pixels: dest, width, height } = img;
+    const { pixels: src, width: sw, height: sh } = pattern;
+    const srcCol = img.getAt(x, y);
+    for (let [xx, yy] of floodFill(
+        (i) => dest[i] === srcCol,
+        x,
+        y,
+        width,
+        height
+    )) {
+        dest[yy * width + xx] = src[(yy % sh) * sw + (xx % sw)];
+    }
+    return img;
+};
diff --git a/packages/pixel/src/index.ts b/packages/pixel/src/index.ts
@@ -3,6 +3,7 @@ export * from "./canvas.js";
 export * from "./convolve.js";
 export * from "./dominant-colors.js";
 export * from "./float.js";
+export * from "./flood-fill.js";
 export * from "./normal-map.js";
 export * from "./packed.js";
 export * from "./pyramid.js";

diff --git a/packages/pixel/tpl.readme.md b/packages/pixel/tpl.readme.md
@@ -38,9 +38,8 @@ ${pkg.description}
 - Customizable normal map generation (i.e. X/Y gradients plus static Z component)
 - XY full pixel & channel-only accessors
 - 12 packed integer and 6 floating point preset formats (see table below)
-- Ordered dithering w/ customizable Bayer matrix size and target color
-  steps (int formats only)
 - Declarative custom format & optimized code generation
+- Flood filling (solid or pattern)
 - HTML canvas creation & `ImageData` utilities
 
 ### Packed integer pixel formats