@thi.ng/pixel - npm Package Compare versions

Comparing version 3.2.5 to 3.3.0

api.d.ts

@@ -1,2 +0,2 @@
-import type { FloatArray, Fn, Fn2, Fn3, FnN, FnU2, IGrid2D, IObjectOf, NumericArray, TypedArray, UintType } from "@thi.ng/api";
+import type { FloatArray, Fn, Fn2, Fn3, FnN3, FnU2, IGrid2D, IObjectOf, NumericArray, TypedArray, UintType } from "@thi.ng/api";
 /**
@@ -301,3 +301,3 @@ * ABGR 8bit lane/channel IDs
      */
-    fn: Fn<IPixelBuffer<FloatArray, NumericArray>, FnN>;
+    fn: Fn<IPixelBuffer<FloatArray, NumericArray>, FnN3>;
     /**
@@ -367,2 +367,13 @@ * Kernel size. If given as number, expands to `[size, size]`.
 export declare type FloatSampler = FnU2<number, NumericArray>;
+export interface Canvas2DOpts {
+    /**
+     * (Native) options passed to `canvas.getContext("2d")`
+     */
+    ctx: CanvasRenderingContext2DSettings;
+    /**
+     * If true, adds CSS rule to force canvas being displayed properly pixelated
+     * (no smoothing)
+     */
+    pixelated: boolean;
+}
 //# sourceMappingURL=api.d.ts.map

canvas.d.ts

@@ -1,2 +0,2 @@
-import type { CanvasContext, RawPixelBuffer } from "./api.js";
+import type { Canvas2DOpts, CanvasContext, RawPixelBuffer } from "./api.js";
 /**
@@ -10,4 +10,5 @@ * Creates a canvas element of given size, obtains its 2D drawing
  * @param parent -
+ * @param opts -
  */
-export declare const canvas2d: (width: number, height?: number, parent?: HTMLElement | undefined) => CanvasContext;
+export declare const canvas2d: (width: number, height?: number, parent?: HTMLElement | undefined, opts?: Partial<Canvas2DOpts>) => CanvasContext;
 /**
@@ -14,0 +15,0 @@ * Accepts either an existing canvas or creates a new one of given size.

canvas.js

@@ -10,4 +10,5 @@ import { isNumber } from "@thi.ng/checks/is-number";
  * @param parent -
+ * @param opts -
  */
-export const canvas2d = (width, height = width, parent) => {
+export const canvas2d = (width, height = width, parent, opts = {}) => {
     const canvas = document.createElement("canvas");
@@ -17,5 +18,6 @@ canvas.width = width;
     parent && parent.appendChild(canvas);
+    opts.pixelated && (canvas.style.imageRendering = "pixelated");
     return {
         canvas,
-        ctx: canvas.getContext("2d"),
+        ctx: canvas.getContext("2d", opts.ctx),
     };
@@ -22,0 +24,0 @@ };

CHANGELOG.md

 # Change Log
 
-- **Last updated**: 2021-11-21T17:09:28Z
+- **Last updated**: 2021-12-13T10:26:00Z
 - **Generator**: [thi.ng/monopub](https://thi.ng/monopub)
@@ -12,2 +12,15 @@
 
+## [3.3.0](https://github.com/thi-ng/umbrella/tree/@thi.ng/pixel@3.3.0) (2021-12-13)
+
+#### 🚀 Features
+
+- add 8/16/32bit support for defIndexed() ([b20a924](https://github.com/thi-ng/umbrella/commit/b20a924))
+  - add defIndexed8/16/32()
+  - update defIndexed() to decide about required bitdepth
+  - add/update docs strings
+- add MAXIMA convolution kernels ([d15caed](https://github.com/thi-ng/umbrella/commit/d15caed))
+  - add `MAXIMA4_CROSS`, `MAXIMA4_DIAG`
+  - add `MAXIMA8`
+- add Canvas2DOpts, update canvas2d() ([7ff99a2](https://github.com/thi-ng/umbrella/commit/7ff99a2))
+
 ## [3.2.0](https://github.com/thi-ng/umbrella/tree/@thi.ng/pixel@3.2.0) (2021-11-17)
@@ -14,0 +27,0 @@

convolve.d.ts

 import type { Fn, FnN3, NumericArray } from "@thi.ng/api";
-import type { ConvolutionKernelSpec, ConvolveOpts, KernelSpec, PoolTemplate } from "./api.js";
+import type { ConvolutionKernelSpec, ConvolveOpts, KernelFnSpec, KernelSpec, PoolTemplate } from "./api.js";
 import { FloatBuffer } from "./float.js";
@@ -108,2 +108,43 @@ /**
 export declare const UNSHARP_MASK5: KernelSpec;
+/**
+ * 3x3 convolution kernel to detect local maxima in a Von Neumann neighborhood.
+ * Returns in 1.0 if the center pixel is either higher valued than A & D or B & C,
+ * otherwise return zero.
+ *
+ * @remarks
+ * ```text
+ * |---|---|---|
+ * |   | A |   |
+ * |---|---|---|
+ * | B | X | C |
+ * |---|---|---|
+ * |   | D |   |
+ * |---|---|---|
+ * ```
+ *
+ * Also see {@link MAXIMA4_DIAG} for alternative.
+ */
+export declare const MAXIMA4_CROSS: KernelFnSpec;
+/**
+ * Similar to {@link MAXIMA4_CROSS}, a 3x3 convolution kernel to detect local
+ * maxima in a 45 degree rotated Von Neumann neighborhood. Returns in 1.0 if the
+ * center pixel is either higher valued than A & D or B & C, otherwise return
+ * zero.
+ *
+ * @remarks
+ * ```text
+ * |---|---|---|
+ * | A |   | B |
+ * |---|---|---|
+ * |   | X |   |
+ * |---|---|---|
+ * | C |   | D |
+ * |---|---|---|
+ * ```
+ */
+export declare const MAXIMA4_DIAG: KernelFnSpec;
+/**
+ * Union kernel of {@link MAXIMA4_CROSS} and {@link MAXIMA4_DIAG}.
+ */
+export declare const MAXIMA8: KernelFnSpec;
 //# sourceMappingURL=convolve.d.ts.map

convolve.js

@@ -317,1 +317,99 @@ import { isFunction } from "@thi.ng/checks/is-function";
 };
+const { min, max } = Math;
+/**
+ * 3x3 convolution kernel to detect local maxima in a Von Neumann neighborhood.
+ * Returns in 1.0 if the center pixel is either higher valued than A & D or B & C,
+ * otherwise return zero.
+ *
+ * @remarks
+ * ```text
+ * |---|---|---|
+ * |   | A |   |
+ * |---|---|---|
+ * | B | X | C |
+ * |---|---|---|
+ * |   | D |   |
+ * |---|---|---|
+ * ```
+ *
+ * Also see {@link MAXIMA4_DIAG} for alternative.
+ */
+export const MAXIMA4_CROSS = {
+    fn: (src) => {
+        const { data: pix, stride: [stride, rowStride], } = src;
+        const maxX = (src.width - 1) * stride;
+        const maxY = (src.height - 1) * rowStride;
+        return (x, y, channel) => {
+            const x0 = max(x - stride, channel);
+            const x2 = min(x + stride, maxX + channel);
+            const y0 = max(y - rowStride, 0);
+            const y2 = min(y + rowStride, maxY);
+            const c = pix[x + y];
+            return (c > pix[y + x0] && c > pix[y + x2]) ||
+                (c > pix[y0 + x] && c > pix[y2 + x])
+                ? 1
+                : 0;
+        };
+    },
+    size: 3,
+};
+/**
+ * Similar to {@link MAXIMA4_CROSS}, a 3x3 convolution kernel to detect local
+ * maxima in a 45 degree rotated Von Neumann neighborhood. Returns in 1.0 if the
+ * center pixel is either higher valued than A & D or B & C, otherwise return
+ * zero.
+ *
+ * @remarks
+ * ```text
+ * |---|---|---|
+ * | A |   | B |
+ * |---|---|---|
+ * |   | X |   |
+ * |---|---|---|
+ * | C |   | D |
+ * |---|---|---|
+ * ```
+ */
+export const MAXIMA4_DIAG = {
+    fn: (src) => {
+        const { data: pix, stride: [stride, rowStride], } = src;
+        const maxX = (src.width - 1) * stride;
+        const maxY = (src.height - 1) * rowStride;
+        return (x, y, channel) => {
+            const x0 = max(x - stride, channel);
+            const x2 = min(x + stride, maxX + channel);
+            const y0 = max(y - rowStride, 0);
+            const y2 = min(y + rowStride, maxY);
+            const c = pix[x + y];
+            return (c > pix[y0 + x0] && c > pix[y2 + x2]) ||
+                (c > pix[y0 + x2] && c > pix[y2 + x0])
+                ? 1
+                : 0;
+        };
+    },
+    size: 3,
+};
+/**
+ * Union kernel of {@link MAXIMA4_CROSS} and {@link MAXIMA4_DIAG}.
+ */
+export const MAXIMA8 = {
+    fn: (src) => {
+        const { data: pix, stride: [stride, rowStride], } = src;
+        const maxX = (src.width - 1) * stride;
+        const maxY = (src.height - 1) * rowStride;
+        return (x, y, channel) => {
+            const x0 = max(x - stride, channel);
+            const x2 = min(x + stride, maxX + channel);
+            const y0 = max(y - rowStride, 0);
+            const y2 = min(y + rowStride, maxY);
+            const c = pix[x + y];
+            return (c > pix[y + x0] && c > pix[y + x2]) ||
+                (c > pix[y0 + x] && c > pix[y2 + x]) ||
+                (c > pix[y0 + x0] && c > pix[y2 + x2]) ||
+                (c > pix[y0 + x2] && c > pix[y2 + x0])
+                ? 1
+                : 0;
+        };
+    },
+    size: 3,
+};

format/indexed.d.ts

@@ -14,3 +14,19 @@ import type { NumericArray } from "@thi.ng/api";
  */
+export declare const defIndexed8: (palette: NumericArray, isABGR?: boolean) => import("../api.js").IntFormat;
+/**
+ * Similar to {@link defIndexed8}, but for 16bit palette sizes and pixel buffers.
+ */
+export declare const defIndexed16: (palette: NumericArray, isABGR?: boolean) => import("../api.js").IntFormat;
+/**
+ * Similar to {@link defIndexed8}, but for 32bit palette sizes and pixel buffers.
+ */
+export declare const defIndexed32: (palette: NumericArray, isABGR?: boolean) => import("../api.js").IntFormat;
+/**
+ * Similar to {@link defIndexed8}, but dynamically decides about pixel buffer
+ * bit depth based on size of given palette.
+ *
+ * @param palette
+ * @param isABGR
+ */
 export declare const defIndexed: (palette: NumericArray, isABGR?: boolean) => import("../api.js").IntFormat;
 //# sourceMappingURL=indexed.d.ts.map

format/indexed.js

@@ -6,2 +6,14 @@ import { swapLane13 } from "@thi.ng/binary/swizzle";
 import { defIntFormat } from "./int-format.js";
+const __defIndexed = (type, size) => (palette, isABGR = false) => {
+    const n = palette.length;
+    assert(n > 0 && n <= 2 ** size, `invalid palette size: ${n}`);
+    palette = isABGR ? palette : palette.map(swapLane13);
+    return defIntFormat({
+        type,
+        size,
+        channels: [{ size, lane: Lane.RED }],
+        fromABGR: (x) => argminN(x, palette, distBGR),
+        toABGR: (x) => palette[x],
+    });
+};
 /**
@@ -19,14 +31,23 @@ * Creates an indexed color {@link IntFormat} using the provided palette (in
  */
-export const defIndexed = (palette, isABGR = false) => {
-    const n = palette.length;
-    assert(n > 0 && n <= 256, `invalid palette size: ${n}`);
-    palette = isABGR ? palette : palette.map(swapLane13);
-    return defIntFormat({
-        type: "u8",
-        size: 8,
-        channels: [{ size: 8, lane: Lane.RED }],
-        fromABGR: (x) => argminN(x, palette, distBGR),
-        toABGR: (x) => palette[x],
-    });
-};
+export const defIndexed8 = __defIndexed("u8", 8);
+/**
+ * Similar to {@link defIndexed8}, but for 16bit palette sizes and pixel buffers.
+ */
+export const defIndexed16 = __defIndexed("u16", 16);
+/**
+ * Similar to {@link defIndexed8}, but for 32bit palette sizes and pixel buffers.
+ */
+export const defIndexed32 = __defIndexed("u32", 32);
+/**
+ * Similar to {@link defIndexed8}, but dynamically decides about pixel buffer
+ * bit depth based on size of given palette.
+ *
+ * @param palette
+ * @param isABGR
+ */
+export const defIndexed = (palette, isABGR = false) => palette.length <= 0x100
+    ? defIndexed8(palette, isABGR)
+    : palette.length < 0x10000
+        ? defIndexed16(palette, isABGR)
+        : defIndexed32(palette, isABGR);
 const distBGR = (a, b) => Math.hypot(((a >> 16) & 0xff) - ((b >> 16) & 0xff), ((a >> 8) & 0xff) - ((b >> 8) & 0xff), (a & 0xff) - (b & 0xff));

package.json

 {
   "name": "@thi.ng/pixel",
-  "version": "3.2.5",
+  "version": "3.3.0",
   "description": "Typedarray integer & float pixel buffers w/ customizable formats, blitting, drawing, convolution",
@@ -37,19 +37,19 @@ "type": "module",
   "dependencies": {
-    "@thi.ng/api": "^8.3.2",
-    "@thi.ng/binary": "^3.1.2",
-    "@thi.ng/checks": "^3.1.2",
-    "@thi.ng/distance": "^2.1.5",
-    "@thi.ng/errors": "^2.1.2",
-    "@thi.ng/k-means": "^0.5.5",
-    "@thi.ng/math": "^5.1.2",
-    "@thi.ng/porter-duff": "^2.1.2"
+    "@thi.ng/api": "^8.3.3",
+    "@thi.ng/binary": "^3.1.3",
+    "@thi.ng/checks": "^3.1.3",
+    "@thi.ng/distance": "^2.1.6",
+    "@thi.ng/errors": "^2.1.3",
+    "@thi.ng/k-means": "^0.5.6",
+    "@thi.ng/math": "^5.2.0",
+    "@thi.ng/porter-duff": "^2.1.3"
   },
   "devDependencies": {
-    "@microsoft/api-extractor": "^7.18.19",
-    "@thi.ng/testament": "^0.2.2",
+    "@microsoft/api-extractor": "^7.19.2",
+    "@thi.ng/testament": "^0.2.3",
     "rimraf": "^3.0.2",
     "tools": "^0.0.1",
     "tslib": "^2.3.1",
-    "typedoc": "^0.22.9",
-    "typescript": "^4.5.2"
+    "typedoc": "^0.22.10",
+    "typescript": "^4.5.3"
   },
@@ -216,3 +216,3 @@ "keywords": [
   },
-  "gitHead": "32cf1a96854f9bb97aca65ffa05ca862ea377059\n"
+  "gitHead": "2db9dd34c0c2c60cbfde3dad0bca352b20292f5c\n"
 }

No alert changes

Improved metrics

Total package byte prevSize

164523

increased by4.14%

Lines of code

3007

increased by6.74%

Dependency changes

• [e-mail]/api@^8.3.3

• [e-mail]/binary@^3.1.3

• [e-mail]/checks@^3.1.3

• [e-mail]/distance@^2.1.6

• [e-mail]/errors@^2.1.3

• [e-mail]/k-means@^0.5.6

• [e-mail]/math@^5.2.0

• [e-mail]/porter-duff@^2.1.3