@pictogrammers/components 0.4.8 → 0.5.0

package/pg/inputPixelEditor/utils/bitmapToMask.ts

@@ -6,28 +6,38 @@ interface Edge {
 }
 
 interface Options {
+  x?: number;
+  y?: number;
   width?: number;
   height?: number;
   scale?: number;
   offsetX?: number;
   offsetY?: number;
+  include?: number[];
 }
 
 export function toIndex(x: number, y: number, width: number) {
   return y * width + x;
 }
 
+/**
+ * Convert a 2d array to a SVG path.
+ * @param data
+ * @param options
+ * @returns path string
+ */
 export default function bitmaskToPath(data: number[] | number[][], options: Options = {}) {
 
-  let bitmask: number[] | number[][],
+  let bitmask: number[],
     width: number,
     height: number,
     scale = 1,
     offsetX = 0,
-    offsetY = 0;
+    offsetY = 0,
+    include = [1];
 
   if (options.width) {
-    bitmask = data;
+    bitmask = data as number[]; // already flat
     width = options.width;
     height = bitmask.length / width;
     if (height % 1 !== 0) {
@@ -53,6 +63,10 @@ export default function bitmaskToPath(data: number[] | number[][], options: Opti
     offsetY = options.offsetY;
   }
 
+  if (options.include) {
+    include = options.include;
+  }
+
   // Naively copy into a new bitmask with a border of 1 to make sampling easier (no out of bounds checks)
   const newWidth = width + 2;
   const newHeight = height + 2;
@@ -65,7 +79,7 @@ export default function bitmaskToPath(data: number[] | number[][], options: Opti
 
   for (let y = 0; y < height; ++y) {
     for (let x = 0; x < width; ++x) {
-      bm[BMXYToIndex(x, y)] = bitmask[toIndex(x, y, width)];
+      bm[BMXYToIndex(x, y)] = include.includes(bitmask[toIndex(x, y, width)]) ? 1 : 0;
     }
   }
 
@@ -101,7 +115,7 @@ export default function bitmaskToPath(data: number[] | number[][], options: Opti
 
   for (let y = 0; y < height; ++y) {
     for (let x = 0; x < width; ++x) {
-      if (bm[BMXYToIndex(x, y)] == 1) {
+      if (bm[BMXYToIndex(x, y)] === 1) {
         const left = bm[BMXYToIndex(x - 1, y)];
         if (left == 0) {
           const edge = edges[EdgeYIndex(x, y)];
@@ -116,7 +130,7 @@ export default function bitmaskToPath(data: number[] | number[][], options: Opti
           UnionGroup(edge);
         }
         const right = bm[BMXYToIndex(x + 1, y)];
-        if (right == 0) {
+        if (right === 0) {
           const edge = edges[EdgeYIndex(x + 1, y)];
           SetEdge(edge, x + 1, y);
           if (bm[BMXYToIndex(x + 1, y + 1)]) {
@@ -129,7 +143,7 @@ export default function bitmaskToPath(data: number[] | number[][], options: Opti
           UnionGroup(edge);
         }
         const top = bm[BMXYToIndex(x, y - 1)];
-        if (top == 0) {
+        if (top === 0) {
           const edge: Edge = edges[EdgeXIndex(x, y)];
           SetEdge(edge, x, y);
           if (bm[BMXYToIndex(x + 1, y - 1)]) {
@@ -142,7 +156,7 @@ export default function bitmaskToPath(data: number[] | number[][], options: Opti
           UnionGroup(edge);
         }
         const bottom = bm[BMXYToIndex(x, y + 1)];
-        if (bottom == 0) {
+        if (bottom === 0) {
           const edge = edges[EdgeXIndex(x, y + 1)];
           SetEdge(edge, x + 1, y + 1);
           if (bm[BMXYToIndex(x - 1, y + 1)]) {

package/pg/inputPixelEditor/utils/blobToImage.ts

@@ -0,0 +1,11 @@
+export function blobToImage(blob) {
+  return new Promise(resolve => {
+    const url = URL.createObjectURL(blob)
+    let img = new Image()
+    img.onload = () => {
+      URL.revokeObjectURL(url)
+      resolve(img)
+    }
+    img.src = url
+  });
+}

package/pg/inputPixelEditor/utils/canvasToPngBuffer.ts

@@ -0,0 +1,12 @@
+export async function canvasToPngBuffer(canvas: HTMLCanvasElement): Promise<ArrayBuffer> {
+    const blob = await new Promise((resolve: BlobCallback) =>
+        canvas.toBlob(resolve, 'image/png')
+    );
+
+    // `canvas.toBlob` can return null, so guard it
+    if (!blob) {
+        throw new Error("Failed to convert canvas to Blob");
+    }
+
+    return await blob.arrayBuffer();
+}

package/pg/inputPixelEditor/utils/constants.ts

@@ -1 +1,55 @@
-export const WHITE = '#FFFFFF';
+export const WHITE = '#FFFFFF';
+
+export type Pixel = { x: number, y: number };
+
+export type Point = [number, number];
+
+export enum LayerType {
+  Pixel = 'pixel',
+  Reference = 'reference',
+  Pattern = 'pattern',
+  Linear = 'linear',
+  Radial = 'radial',
+}
+
+/**
+ * stop 0 to 1
+ * colorIndex
+ */
+export type GradientStop = [number, number];
+
+interface LayerPixel {
+  type: LayerType.Pixel;
+  path: string;
+  color: number;
+}
+
+interface LayerReference {
+  type: LayerType.Reference;
+  id: string;
+  position: Point;
+}
+
+interface LayerPattern {
+  type: LayerType.Pattern;
+  id: string;
+  path: string;
+  offset: Point;
+}
+
+interface LayerLinear {
+  type: LayerType.Linear;
+  start: Point;
+  end: Point;
+  stops: GradientStop[];
+  dither: 'bayer4' | 'bayer8' | 'bayer16';
+}
+
+interface LayerRadial {
+  type: LayerType.Radial;
+  start: Point;
+  end: Point;
+  stops: GradientStop[];
+  transform: [number, number, number, number, number, number];
+  dither: 'bayer4' | 'bayer8' | 'bayer16';
+}

package/pg/inputPixelEditor/utils/crc32.ts

@@ -0,0 +1,116 @@
+/**
+ * Compute CRC32 lookup tables as described at:
+ * https://github.com/komrad36/CRC#option-6-1-byte-tabular
+ *
+ * An iteration of CRC computation can be performed on 8 bits of input at once. By pre-computing a
+ * table of the values of CRC(?) for all 2^8 = 256 possible byte values, during the final
+ * computation we can replace a loop over 8 bits with a single lookup in the table.
+ *
+ * For further speedup, we can also pre-compute the values of CRC(?0) for all possible bytes when a
+ * zero byte is appended. Then we can process two bytes of input at once by computing CRC(AB) =
+ * CRC(A0) ^ CRC(B), using one lookup in the CRC(?0) table and one lookup in the CRC(?) table.
+ *
+ * The same technique applies for any number of bytes to be processed at once, although the speed
+ * improvements diminish.
+ *
+ * @param polynomial The binary representation of the polynomial to use (reversed, i.e. most
+ * significant bit represents x^0).
+ * @param numTables The number of bytes of input that will be processed at once.
+ */
+function crc32GenerateTables({
+  polynomial,
+  numTables,
+}: {
+  polynomial: number;
+  numTables: number;
+}): Uint32Array {
+  const table = new Uint32Array(256 * numTables);
+  for (let i = 0; i < 256; i++) {
+    let r = i;
+    r = ((r & 1) * polynomial) ^ (r >>> 1);
+    r = ((r & 1) * polynomial) ^ (r >>> 1);
+    r = ((r & 1) * polynomial) ^ (r >>> 1);
+    r = ((r & 1) * polynomial) ^ (r >>> 1);
+    r = ((r & 1) * polynomial) ^ (r >>> 1);
+    r = ((r & 1) * polynomial) ^ (r >>> 1);
+    r = ((r & 1) * polynomial) ^ (r >>> 1);
+    r = ((r & 1) * polynomial) ^ (r >>> 1);
+    table[i] = r;
+  }
+  for (let i = 256; i < table.length; i++) {
+    const value = table[i - 256]!;
+    table[i] = table[value & 0xff]! ^ (value >>> 8);
+  }
+  return table;
+}
+
+const CRC32_TABLE = crc32GenerateTables({ polynomial: 0xedb88320, numTables: 8 });
+
+/**
+ * Initialize a CRC32 to all 1 bits.
+ */
+function crc32Init(): number {
+  return ~0;
+}
+
+/**
+ * Update a streaming CRC32 calculation.
+ *
+ * For performance, this implementation processes the data 8 bytes at a time, using the algorithm
+ * presented at: https://github.com/komrad36/CRC#option-9-8-byte-tabular
+ */
+function crc32Update(prev: number, data: ArrayBufferView): number {
+  const byteLength = data.byteLength;
+  const view = new DataView(data.buffer, data.byteOffset, byteLength);
+  let r = prev;
+  let offset = 0;
+
+  // Process bytes one by one until we reach 4-byte alignment, which will speed up uint32 access.
+  const toAlign = -view.byteOffset & 3;
+  for (; offset < toAlign && offset < byteLength; offset++) {
+    r = CRC32_TABLE[(r ^ view.getUint8(offset)) & 0xff]! ^ (r >>> 8);
+  }
+  if (offset === byteLength) {
+    return r;
+  }
+
+  offset = toAlign;
+
+  // Process 8 bytes (2 uint32s) at a time.
+  let remainingBytes = byteLength - offset;
+  for (; remainingBytes >= 8; offset += 8, remainingBytes -= 8) {
+    r ^= view.getUint32(offset, true);
+    const r2 = view.getUint32(offset + 4, true);
+    r =
+      CRC32_TABLE[0 * 256 + ((r2 >>> 24) & 0xff)]! ^
+      CRC32_TABLE[1 * 256 + ((r2 >>> 16) & 0xff)]! ^
+      CRC32_TABLE[2 * 256 + ((r2 >>> 8) & 0xff)]! ^
+      CRC32_TABLE[3 * 256 + ((r2 >>> 0) & 0xff)]! ^
+      CRC32_TABLE[4 * 256 + ((r >>> 24) & 0xff)]! ^
+      CRC32_TABLE[5 * 256 + ((r >>> 16) & 0xff)]! ^
+      CRC32_TABLE[6 * 256 + ((r >>> 8) & 0xff)]! ^
+      CRC32_TABLE[7 * 256 + ((r >>> 0) & 0xff)]!;
+  }
+
+  // Process any remaining bytes one by one. (Perf note: inexplicably, using a temporary variable
+  // `i` rather than reusing `offset` here is faster in V8.)
+  for (let i = offset; i < byteLength; i++) {
+    r = CRC32_TABLE[(r ^ view.getUint8(i)) & 0xff]! ^ (r >>> 8);
+  }
+  return r;
+}
+
+/**
+ * Finalize a CRC32 by inverting the output value. An unsigned right-shift of 0 is used to ensure the result is a positive number.
+ */
+function crc32Final(prev: number): number {
+  return (prev ^ ~0) >>> 0;
+}
+
+/**
+ * Calculate a one-shot CRC32. If the data is being accumulated incrementally, use the functions
+ * `crc32Init`, `crc32Update`, and `crc32Final` instead.
+ */
+export function crc32(data: ArrayBufferView): number {
+  return crc32Final(crc32Update(crc32Init(), data));
+}

package/pg/inputPixelEditor/utils/diffMap.ts

@@ -0,0 +1,32 @@
+export function diffMap(map1, map2) {
+  // 1. Get all keys from both maps as Sets
+  const keys1 = new Set(map1.keys());
+  const keys2 = new Set(map2.keys());
+
+  // 2. Combine all unique keys into a single Set
+  const allKeys = new Set([...new Set(map1.keys()), ...new Set(map2.keys())]);
+
+  // 3. Filter the combined keys to find those not present in either original Set
+  const uniqueKeys = new Set();
+  for (const key of allKeys) {
+    if (!keys1.has(key) || !keys2.has(key)) {
+      uniqueKeys.add(key);
+    }
+  }
+
+  return uniqueKeys;
+}
+
+export function diffLeftMapPixels(map1: Map<string, number[]>, map2: Map<string, number[]>) {
+  const leftPixels: number[][] = [];
+
+  // Iterate over all keys in the first map
+  for (const key of map1.keys()) {
+    // If the second map does not have the current key, add it to the results
+    if (!map2.has(key)) {
+      leftPixels.push(map1.get(key) as number[]);
+    }
+  }
+
+  return leftPixels;
+}

package/pg/inputPixelEditor/utils/generateGradient.ts

@@ -0,0 +1,112 @@
+// Not used but included
+const byerMatrix2x2 = [
+  [0, 2],
+  [3, 1]
+];
+
+const bayerMatrix4x4 = [
+  [0, 8, 2, 10],
+  [12, 4, 14, 6],
+  [3, 11, 1, 9],
+  [15, 7, 13, 5]
+];
+
+const bayerMatrix8x8 = [
+  [0, 32, 8, 40, 2, 34, 10, 42],
+  [48, 16, 56, 24, 50, 18, 58, 26],
+  [12, 44, 4, 36, 14, 46, 6, 38],
+  [60, 28, 52, 20, 62, 30, 54, 22],
+  [3, 35, 11, 43, 1, 33, 9, 41],
+  [51, 19, 59, 27, 49, 17, 57, 25],
+  [15, 47, 7, 39, 13, 45, 5, 37],
+  [63, 31, 55, 23, 61, 29, 53, 21]
+];
+
+const bayerMatrix16x16 = [
+  [0, 128, 32, 160, 8, 136, 40, 168, 2, 130, 34, 162, 10, 138, 42, 170],
+  [192, 64, 224, 96, 200, 72, 232, 104, 194, 66, 226, 98, 202, 74, 234, 106],
+  [48, 176, 16, 144, 56, 184, 24, 152, 50, 178, 18, 146, 58, 186, 26, 154],
+  [240, 112, 208, 80, 248, 120, 216, 88, 242, 114, 210, 82, 250, 122, 218, 90],
+  [12, 140, 44, 172, 4, 132, 36, 164, 14, 142, 46, 174, 6, 134, 38, 166],
+  [204, 76, 236, 108, 196, 68, 228, 100, 206, 78, 238, 110, 198, 70, 230, 102],
+  [60, 188, 28, 156, 52, 180, 20, 148, 62, 190, 30, 158, 54, 182, 22, 150],
+  [252, 124, 220, 92, 244, 116, 212, 84, 254, 126, 222, 94, 246, 118, 214, 86],
+  [3, 131, 35, 163, 11, 139, 43, 171, 1, 129, 33, 161, 9, 137, 41, 169],
+  [195, 67, 227, 99, 203, 75, 235, 107, 193, 65, 225, 97, 201, 73, 233, 105],
+  [51, 179, 19, 147, 59, 187, 27, 155, 49, 177, 17, 145, 57, 185, 25, 153],
+  [243, 115, 211, 83, 251, 123, 219, 91, 241, 113, 209, 81, 249, 121, 217, 89],
+  [15, 143, 47, 175, 7, 135, 39, 167, 13, 141, 45, 173, 5, 133, 37, 165],
+  [207, 79, 239, 111, 199, 71, 231, 103, 205, 77, 237, 109, 197, 69, 229, 101],
+  [63, 191, 31, 159, 55, 183, 23, 151, 61, 189, 29, 157, 53, 181, 21, 149],
+  [255, 127, 223, 95, 247, 119, 215, 87, 253, 125, 221, 93, 245, 117, 213, 85]
+];
+
+// Normalize the Bayer matrix values to a 0-1 range
+const normalizeBayerMatrix = (matrix) => {
+    const maxVal = matrix.flat().reduce((max, val) => Math.max(max, val), 0);
+    return matrix.map(row => row.map(val => val / (maxVal + 1))); // +1 to ensure values are strictly less than 1
+};
+
+const normalizedBayerMatrix = normalizeBayerMatrix(bayerMatrix4x4);
+
+/**
+ * Applies Bayer dithering to an image data array between two specified colors.
+ * @param imageData The ImageData object containing pixel data.
+ * @param color1 The first color (e.g., [r, g, b]).
+ * @param color2 The second color (e.g., [r, g, b]).
+ * @returns The dithered ImageData object.
+ */
+function applyBayerDithering(
+    imageData,
+    color1,
+    color2
+) {
+    const { data, width, height } = imageData;
+    const matrixSize = normalizedBayerMatrix.length;
+
+    for (let y = 0; y < height; y++) {
+        for (let x = 0; x < width; x++) {
+            const i = (y * width + x) * 4; // Index for R component
+
+            // Calculate grayscale intensity (luminance) of the original pixel
+            const r = data[i];
+            const g = data[i + 1];
+            const b = data[i + 2];
+            const intensity = (0.299 * r + 0.587 * g + 0.114 * b) / 255; // Normalize to 0-1
+
+            // Get the threshold from the normalized Bayer matrix
+            const threshold = normalizedBayerMatrix[y % matrixSize][x % matrixSize];
+
+            // Assign color based on intensity and threshold
+            if (intensity > threshold) {
+                data[i] = color2[0];
+                data[i + 1] = color2[1];
+                data[i + 2] = color2[2];
+            } else {
+                data[i] = color1[0];
+                data[i + 1] = color1[1];
+                data[i + 2] = color1[2];
+            }
+        }
+    }
+    return imageData;
+}
+/*
+// Example usage (assuming you have an ImageData object from a canvas)
+const canvas = document.querySelector('canvas');
+const ctx = canvas.getContext('2d');
+
+const linearGradient = ctx.createLinearGradient(0, 0, canvas.width, 0); // x0, y0, x1, y1
+
+// Add color stops
+linearGradient.addColorStop(0, 'white'); // Start color at 0%
+linearGradient.addColorStop(1, 'black'); // End color at 100%
+
+// Apply the gradient to fillStyle and draw a rectangle
+ctx.fillStyle = linearGradient;
+ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+const originalImageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+const ditheredImageData = applyBayerDithering(originalImageData, [0, 0, 0], [255, 255, 255]);
+ctx.putImageData(ditheredImageData, 0, 0);
+*/

package/pg/inputPixelEditor/utils/getEllipsePixels.ts

@@ -1,28 +1,140 @@
-export default function getEllipsePixels(x0: number, y0: number, x1: number, y1: number) {
-  let a = Math.abs(x1 - x0), b = Math.abs(y1 - y0), b1 = b & 1; /* values of diameter */
-  let dx = 4 * (1 - a) * b * b, dy = 4 * (b1 + 1) * a * a; /* error increment */
-  let err = dx + dy + b1 * a * a, e2; /* error of 1.step */
-
-  if (x0 > x1) { x0 = x1; x1 += a; } /* if called with swapped points */
-  if (y0 > y1) y0 = y1; /* .. exchange them */
-  y0 += (b + 1) / 2; y1 = y0 - b1;   /* starting pixel */
-  a *= 8 * a; b1 = 8 * b * b;
+export function distance(x: number, y: number, ratio: number): number {
+	return Math.sqrt((Math.pow(y * ratio, 2)) + Math.pow(x, 2));
+}
+
+function filled(x: number, y: number, radius: number, ratio: number): boolean {
+  return distance(x, y, ratio) <= radius;
+}
+
+function thinfilled(x: number, y: number, radius: number, ratio: number): boolean {
+  return filled(x, y, radius, ratio) && !(
+    filled(x + 1, y, radius, ratio) &&
+    filled(x - 1, y, radius, ratio) &&
+    filled(x, y + 1, radius, ratio) &&
+    filled(x, y - 1, radius, ratio)
+  );
+}
+
+function isFilled(x: number, y: number, width: number, height: number): boolean {
+  const bounds = {
+    minX: 0,
+    maxX: width,
+    minY: 0,
+    maxY: height,
+  };
+
+  x = -.5 * (bounds.maxX - 2 * (x + .5));
+  y = -.5 * (bounds.maxY - 2 * (y + .5));
+
+  return thinfilled(x, y, (bounds.maxX / 2), bounds.maxX / bounds.maxY);
+}
+
+
+function betterCircle(x0: number, y0: number, x1: number, y1: number) {
+  const width = Math.abs(x0 - x1);
+  const height = Math.abs(y0 - y1);
+  const minX = Math.min(x0, x1);
+  const minY = Math.min(y0, y1);
+
   const pixels: { x: number, y: number }[] = [];
+
+  // Loop through bounding box
+  for (let y = 0; y < height; y++) {
+    for (let x = 0; x < width; x++) {
+      // Center coordinates relative to ellipse
+      const cx = -.5 * (width - 2 * (x + 0.5));
+      const cy = -.5 * (height - 2 * (y + 0.5));
+
+      // Use filled() instead of thinfilled() to fill the ellipse
+      if (filled(cx, cy, width / 2, width / height)) {
+        pixels.push({ x: x + minX, y: y + minY });
+      }
+    }
+  }
+
+  return pixels;
+}
+
+
+function ellipse(x0: number, y0: number, x1: number, y1: number) {
+  const pixels: { x: number, y: number }[] = [];
+
+  let a = Math.abs(x1 - x0),
+    b = Math.abs(y1 - y0),
+    b1 = b & 1;
+
+  let dx = 4 * (1.0 - a) * b * b,
+    dy = 4 * (b1 + 1) * a * a;
+
+  let err = dx + dy + b1 * a * a,
+    e2;
+
+  if (x0 > x1) {
+    x0 = x1;
+    x1 += a;
+  }
+  if (y0 > y1) y0 = y1;
+  y0 += (b + 1) >> 1;
+  y1 = y0 - b1;
+
+  a = 8 * a * a;
+  b1 = 8 * b * b;
+
+  // Outline drawing
   do {
-    pixels.push({ x: x1, y: y0 }); /*   I. Quadrant */
-    pixels.push({ x: x0, y: y0 }); /*  II. Quadrant */
-    pixels.push({ x: x0, y: y1 }); /* III. Quadrant */
-    pixels.push({ x: x1, y: y1 }); /*  IV. Quadrant */
+    pixels.push({ x: x1, y: y0 }); // I Quadrant
+    pixels.push({ x: x0, y: y0 }); // II Quadrant
+    pixels.push({ x: x0, y: y1 }); // III Quadrant
+    pixels.push({ x: x1, y: y1 }); // IV Quadrant
+
     e2 = 2 * err;
-    if (e2 <= dy) { y0++; y1--; err += dy += a; }  /* y step */
-    if (e2 >= dx || 2 * err > dy) { x0++; x1--; err += dx += b1; } /* x step */
+    if (e2 <= dy) {
+      y0++;
+      y1--;
+      err += dy += a;
+    }
+    if (e2 >= dx || 2 * err > dy) {
+      x0++;
+      x1--;
+      err += dx += b1;
+    }
   } while (x0 <= x1);
 
-  while (y0 - y1 < b) {  /* too early stop of flat ellipses a=1 */
-    pixels.push({ x: x0 - 1, y: y0 }); /* -> finish tip of ellipse */
+  while (y0 - y1 <= b) {
+    pixels.push({ x: x0 - 1, y: y0 });
     pixels.push({ x: x1 + 1, y: y0++ });
     pixels.push({ x: x0 - 1, y: y1 });
     pixels.push({ x: x1 + 1, y: y1-- });
   }
-  return pixels;
-}
+
+  // --- Fill interior ---
+  // Group pixels by row (y), then fill between minX and maxX
+  const rows: Record<number, { minX: number; maxX: number }> = {};
+  for (const p of pixels) {
+    if (!(p.y in rows)) {
+      rows[p.y] = { minX: p.x, maxX: p.x };
+    } else {
+      rows[p.y].minX = Math.min(rows[p.y].minX, p.x);
+      rows[p.y].maxX = Math.max(rows[p.y].maxX, p.x);
+    }
+  }
+
+  const filledPixels: { x: number; y: number }[] = [...pixels];
+  for (const y in rows) {
+    const { minX, maxX } = rows[y];
+    for (let x = minX; x <= maxX; x++) {
+      filledPixels.push({ x, y: parseInt(y) });
+    }
+  }
+
+  return filledPixels;
+}
+
+
+export default function getEllipsePixels(x0: number, y0: number, x1: number, y1: number) {
+  if (Math.abs(x0 - x1) === Math.abs(y0 - y1) && Math.abs(x0 - x1)) {
+    console.log('circle', Math.abs(x0 - x1), Math.abs(y0 - y1))
+    return betterCircle(x0, y0, x1 + 1, y1 + 1);
+  }
+  return ellipse(x0, y0, x1, y1);
+}

package/pg/inputPixelEditor/utils/getFloodFill.ts

@@ -0,0 +1,83 @@
+/**
+ * Represents a coordinate in the 2D array.
+ */
+type Coordinate = [number, number];
+
+/**
+ * Flood fills a 2D array starting from a specific coordinate to find all connected numbers
+ * that are within a specified set of target values.
+ *
+ * @param grid The 2D array (grid) of numbers.
+ * @param startX The starting x-coordinate.
+ * @param startY The starting y-coordinate.
+ * @param targetValues The set of numbers to search for (e.g., [1, 2, 5]).
+ * @returns A list of [x, y] coordinates that were found during the flood fill.
+ */
+export function getFloodFill(
+  grid: number[][],
+  startX: number,
+  startY: number,
+  targetValues: number[]
+): Coordinate[] {
+  // Use a Set for quick lookups of target values
+  const targets = new Set(targetValues);
+
+  // Check if starting coordinates are valid and if the value at the start is a target
+  if (
+    startY < 0 ||
+    startY >= grid.length ||
+    startX < 0 ||
+    startX >= grid[0].length ||
+    !targets.has(grid[startY][startX])
+  ) {
+    return [];
+  }
+
+  // Queue for Breadth-First Search (BFS)
+  const queue: Coordinate[] = [[startX, startY]];
+  // Set to keep track of visited coordinates to avoid cycles and redundant processing
+  const visited = new Set<string>();
+  const foundPixels: Coordinate[] = [];
+
+  // Helper to convert [x, y] to a string key for the 'visited' set
+  const toKey = (x: number, y: number) => `${x},${y}`;
+
+  // Mark the starting pixel as visited and add to found list
+  visited.add(toKey(startX, startY));
+  foundPixels.push([startX, startY]);
+
+  while (queue.length > 0) {
+    const [currentX, currentY] = queue.shift()!;
+    const currentValue = grid[currentY][currentX];
+
+    // Define potential neighbors (up, down, left, right)
+    const neighbors: Coordinate[] = [
+      [currentX + 1, currentY],
+      [currentX - 1, currentY],
+      [currentX, currentY + 1],
+      [currentX, currentY - 1],
+    ];
+
+    for (const [nextX, nextY] of neighbors) {
+      // Check bounds
+      if (
+        nextY >= 0 &&
+        nextY < grid.length &&
+        nextX >= 0 &&
+        nextX < grid[0].length
+      ) {
+        const neighborValue = grid[nextY][nextX];
+        const key = toKey(nextX, nextY);
+
+        // If the neighbor has a target value and has not been visited yet
+        if (targets.has(neighborValue) && !visited.has(key)) {
+          visited.add(key);
+          foundPixels.push([nextX, nextY]);
+          queue.push([nextX, nextY]);
+        }
+      }
+    }
+  }
+
+  return foundPixels;
+}