pixel-data-js 0.0.2 → 0.0.3

package/README.md

@@ -1,24 +1,60 @@
 # Pixel Data JS
 
-A library of functions for interacting with pixel data and ImageData objects.
+A **🔥Performance🔥** library of functions for interacting with pixel data and ImageData objects.
 This package is designed to be a tree-shake friendly list of functions.
 
+[Documentation](https://unstoppablecarl.github.io/pixel-data-js/)
+
 ## Installation
 
 `$ npm i pixel-data-js`
 
 
-## Example Usage
+## High-Performance Pixel Manipulation with `Uint32Array`
+
+The `ImageData.data` object is a `Uint8ClampedArray`.
+It is easy to use but, it is inefficient for heavy processing because every single pixel requires four separate write operations (Red, Green, Blue, and Alpha).
+By using a `Uint32Array` view, we can treat all four color channels as a single 32-bit integer, allowing us to update an entire pixel in a single CPU operation.
+
+## The Concept: 32-bit Packing
+A single pixel consists of four 8-bit channels (R, G, B, A). The entire color's data can fit into a single 32-bit unsigned integer `8 * 4 = 32` (`Color32`).
+
+## Example
+
+```ts
+import { packColor } from 'pixel-data-js'
+
+const ctx = canvas.getContext('2d')
+const imageData = ctx.getImageData(0, 0, width, height)
+
+// 1. Get the underlying buffer
+const buffer = imageData.data.buffer
+
+// 2. Create a 32-bit view of that same buffer
+const data32 = new Uint32Array(buffer)
+
+// 3. Write a single pixel (Red: 255, Green: 100, Blue: 0, Alpha: 255)
+// This is 4x faster than writing to imageData.data[i...i+3]
+data32[0] = packColor(255, 100, 0, 255)
+
+// 4. Push back to canvas
+ctx.putImageData(imageData, 0, 0)
+```
+### Color Integers
+
+You can define colors using the `AABBGGRR` (Little-Endian) to make a `Color32` object.
 
 
 ## Building
 
 `$ pnpm install`
+
 `$ pnpm run build`
 
 ## Testing
 
 `$ pnpm run test`
+
 `$ pnpm run test:mutation`
 
 ## Releases Automation

package/dist/index.dev.cjs

@@ -20,34 +20,50 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  base64DecodeArrayBuffer: () => base64DecodeArrayBuffer,
+  base64EncodeArrayBuffer: () => base64EncodeArrayBuffer,
   deserializeImageData: () => deserializeImageData,
   deserializeNullableImageData: () => deserializeNullableImageData,
+  deserializeRawImageData: () => deserializeRawImageData,
   serializeImageData: () => serializeImageData,
   serializeNullableImageData: () => serializeNullableImageData
 });
 module.exports = __toCommonJS(src_exports);
 
 // src/ImageData/serialization.ts
+function base64EncodeArrayBuffer(buffer) {
+  const binary = String.fromCharCode(...new Uint8Array(buffer));
+  return btoa(binary);
+}
+function base64DecodeArrayBuffer(encoded) {
+  const binary = atob(encoded);
+  const bytes = new Uint8ClampedArray(binary.length);
+  for (let i = 0; i < binary.length; i++) {
+    bytes[i] = binary.charCodeAt(i);
+  }
+  return bytes;
+}
 function serializeImageData(imageData) {
-  const binary = String.fromCharCode(...new Uint8Array(imageData.data.buffer));
-  const base64 = btoa(binary);
   return {
     width: imageData.width,
     height: imageData.height,
-    data: base64
+    data: base64EncodeArrayBuffer(imageData.data.buffer)
   };
 }
 function serializeNullableImageData(imageData) {
   if (!imageData) return null;
   return serializeImageData(imageData);
 }
+function deserializeRawImageData(serialized) {
+  return {
+    width: serialized.width,
+    height: serialized.height,
+    data: base64DecodeArrayBuffer(serialized.data)
+  };
+}
 function deserializeImageData(serialized) {
-  const binary = atob(serialized.data);
-  const bytes = new Uint8ClampedArray(binary.length);
-  for (let i = 0; i < binary.length; i++) {
-    bytes[i] = binary.charCodeAt(i);
-  }
-  return new ImageData(bytes, serialized.width, serialized.height);
+  const data = base64DecodeArrayBuffer(serialized.data);
+  return new ImageData(data, serialized.width, serialized.height);
 }
 function deserializeNullableImageData(serialized) {
   if (!serialized) return null;
@@ -55,8 +71,11 @@ function deserializeNullableImageData(serialized) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  base64DecodeArrayBuffer,
+  base64EncodeArrayBuffer,
   deserializeImageData,
   deserializeNullableImageData,
+  deserializeRawImageData,
   serializeImageData,
   serializeNullableImageData
 });

package/dist/index.dev.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/ImageData/serialization.ts"],"sourcesContent":["export * from './ImageData/serialization'\n","export type SerializedImageData = {\n  width: number,\n  height: number,\n  data: string,\n}\n\n/**\n * Serialize for use in JSON. Stored as base64 encoded string.\n */\nexport function serializeImageData<T extends ImageData>(imageData: T): SerializedImageData {\n  const binary = String.fromCharCode(...new Uint8Array(imageData.data.buffer))\n  const base64 = btoa(binary)\n\n  return {\n    width: imageData.width,\n    height: imageData.height,\n    data: base64,\n  }\n}\n\nexport function serializeNullableImageData<T extends ImageData | null>(imageData: T): T extends null ? null : SerializedImageData {\n  if (!imageData) return null as any\n\n  return serializeImageData(imageData) as any\n}\n\nexport function deserializeImageData<T extends SerializedImageData>(serialized: T): ImageData {\n  const binary = atob(serialized.data as string)\n  const bytes = new Uint8ClampedArray(binary.length)\n  for (let i = 0; i < binary.length; i++) {\n    bytes[i] = binary.charCodeAt(i)\n  }\n\n  return new ImageData(bytes, serialized.width, serialized.height) as any\n}\n\nexport function deserializeNullableImageData<T extends SerializedImageData | null>(serialized: T): T extends null ? null : ImageData {\n  if (!serialized) return null as any\n  return deserializeImageData(serialized) as any\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACSO,SAAS,mBAAwC,WAAmC;AACzF,QAAM,SAAS,OAAO,aAAa,GAAG,IAAI,WAAW,UAAU,KAAK,MAAM,CAAC;AAC3E,QAAM,SAAS,KAAK,MAAM;AAE1B,SAAO;AAAA,IACL,OAAO,UAAU;AAAA,IACjB,QAAQ,UAAU;AAAA,IAClB,MAAM;AAAA,EACR;AACF;AAEO,SAAS,2BAAuD,WAA2D;AAChI,MAAI,CAAC,UAAW,QAAO;AAEvB,SAAO,mBAAmB,SAAS;AACrC;AAEO,SAAS,qBAAoD,YAA0B;AAC5F,QAAM,SAAS,KAAK,WAAW,IAAc;AAC7C,QAAM,QAAQ,IAAI,kBAAkB,OAAO,MAAM;AACjD,WAAS,IAAI,GAAG,IAAI,OAAO,QAAQ,KAAK;AACtC,UAAM,CAAC,IAAI,OAAO,WAAW,CAAC;AAAA,EAChC;AAEA,SAAO,IAAI,UAAU,OAAO,WAAW,OAAO,WAAW,MAAM;AACjE;AAEO,SAAS,6BAAmE,YAAkD;AACnI,MAAI,CAAC,WAAY,QAAO;AACxB,SAAO,qBAAqB,UAAU;AACxC;","names":[]}
+{"version":3,"sources":["../src/index.ts","../src/ImageData/serialization.ts"],"sourcesContent":["export * from './ImageData/serialization'\n","import type { Base64EncodedUInt8Array, ImageDataLike, SerializedImageData } from '../_types'\n\nexport function base64EncodeArrayBuffer(buffer: ArrayBufferLike): Base64EncodedUInt8Array {\n  const binary = String.fromCharCode(...new Uint8Array(buffer))\n  return btoa(binary) as Base64EncodedUInt8Array\n}\n\nexport function base64DecodeArrayBuffer(encoded: Base64EncodedUInt8Array): Uint8ClampedArray {\n  const binary = atob(encoded)\n  const bytes = new Uint8ClampedArray(binary.length)\n  for (let i = 0; i < binary.length; i++) {\n    bytes[i] = binary.charCodeAt(i)\n  }\n  return bytes\n}\n\n/**\n * Serialize for use in JSON. Pixel data is stored as base64 encoded string.\n */\nexport function serializeImageData<T extends ImageDataLike>(imageData: T): SerializedImageData {\n  return {\n    width: imageData.width,\n    height: imageData.height,\n    data: base64EncodeArrayBuffer(imageData.data.buffer),\n  }\n}\n\nexport function serializeNullableImageData<T extends ImageDataLike | null>(imageData: T): T extends null ? null : SerializedImageData {\n  if (!imageData) return null as any\n\n  return serializeImageData(imageData) as any\n}\n\nexport function deserializeRawImageData<T extends SerializedImageData>(serialized: T): ImageDataLike {\n  return {\n    width: serialized.width,\n    height: serialized.height,\n    data: base64DecodeArrayBuffer(serialized.data as Base64EncodedUInt8Array),\n  }\n}\n\nexport function deserializeImageData<T extends SerializedImageData>(serialized: T): ImageData {\n  const data = base64DecodeArrayBuffer(serialized.data as Base64EncodedUInt8Array)\n\n  return new ImageData(data as ImageDataArray, serialized.width, serialized.height) as any\n}\n\nexport function deserializeNullableImageData<T extends SerializedImageData | null>(serialized: T): T extends null ? null : ImageData {\n  if (!serialized) return null as any\n  return deserializeImageData(serialized) as any\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACEO,SAAS,wBAAwB,QAAkD;AACxF,QAAM,SAAS,OAAO,aAAa,GAAG,IAAI,WAAW,MAAM,CAAC;AAC5D,SAAO,KAAK,MAAM;AACpB;AAEO,SAAS,wBAAwB,SAAqD;AAC3F,QAAM,SAAS,KAAK,OAAO;AAC3B,QAAM,QAAQ,IAAI,kBAAkB,OAAO,MAAM;AACjD,WAAS,IAAI,GAAG,IAAI,OAAO,QAAQ,KAAK;AACtC,UAAM,CAAC,IAAI,OAAO,WAAW,CAAC;AAAA,EAChC;AACA,SAAO;AACT;AAKO,SAAS,mBAA4C,WAAmC;AAC7F,SAAO;AAAA,IACL,OAAO,UAAU;AAAA,IACjB,QAAQ,UAAU;AAAA,IAClB,MAAM,wBAAwB,UAAU,KAAK,MAAM;AAAA,EACrD;AACF;AAEO,SAAS,2BAA2D,WAA2D;AACpI,MAAI,CAAC,UAAW,QAAO;AAEvB,SAAO,mBAAmB,SAAS;AACrC;AAEO,SAAS,wBAAuD,YAA8B;AACnG,SAAO;AAAA,IACL,OAAO,WAAW;AAAA,IAClB,QAAQ,WAAW;AAAA,IACnB,MAAM,wBAAwB,WAAW,IAA+B;AAAA,EAC1E;AACF;AAEO,SAAS,qBAAoD,YAA0B;AAC5F,QAAM,OAAO,wBAAwB,WAAW,IAA+B;AAE/E,SAAO,IAAI,UAAU,MAAwB,WAAW,OAAO,WAAW,MAAM;AAClF;AAEO,SAAS,6BAAmE,YAAkD;AACnI,MAAI,CAAC,WAAY,QAAO;AACxB,SAAO,qBAAqB,UAAU;AACxC;","names":[]}

package/dist/index.dev.js

@@ -1,32 +1,48 @@
 // src/ImageData/serialization.ts
+function base64EncodeArrayBuffer(buffer) {
+  const binary = String.fromCharCode(...new Uint8Array(buffer));
+  return btoa(binary);
+}
+function base64DecodeArrayBuffer(encoded) {
+  const binary = atob(encoded);
+  const bytes = new Uint8ClampedArray(binary.length);
+  for (let i = 0; i < binary.length; i++) {
+    bytes[i] = binary.charCodeAt(i);
+  }
+  return bytes;
+}
 function serializeImageData(imageData) {
-  const binary = String.fromCharCode(...new Uint8Array(imageData.data.buffer));
-  const base64 = btoa(binary);
   return {
     width: imageData.width,
     height: imageData.height,
-    data: base64
+    data: base64EncodeArrayBuffer(imageData.data.buffer)
   };
 }
 function serializeNullableImageData(imageData) {
   if (!imageData) return null;
   return serializeImageData(imageData);
 }
+function deserializeRawImageData(serialized) {
+  return {
+    width: serialized.width,
+    height: serialized.height,
+    data: base64DecodeArrayBuffer(serialized.data)
+  };
+}
 function deserializeImageData(serialized) {
-  const binary = atob(serialized.data);
-  const bytes = new Uint8ClampedArray(binary.length);
-  for (let i = 0; i < binary.length; i++) {
-    bytes[i] = binary.charCodeAt(i);
-  }
-  return new ImageData(bytes, serialized.width, serialized.height);
+  const data = base64DecodeArrayBuffer(serialized.data);
+  return new ImageData(data, serialized.width, serialized.height);
 }
 function deserializeNullableImageData(serialized) {
   if (!serialized) return null;
   return deserializeImageData(serialized);
 }
 export {
+  base64DecodeArrayBuffer,
+  base64EncodeArrayBuffer,
   deserializeImageData,
   deserializeNullableImageData,
+  deserializeRawImageData,
   serializeImageData,
   serializeNullableImageData
 };

package/dist/index.dev.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/ImageData/serialization.ts"],"sourcesContent":["export type SerializedImageData = {\n  width: number,\n  height: number,\n  data: string,\n}\n\n/**\n * Serialize for use in JSON. Stored as base64 encoded string.\n */\nexport function serializeImageData<T extends ImageData>(imageData: T): SerializedImageData {\n  const binary = String.fromCharCode(...new Uint8Array(imageData.data.buffer))\n  const base64 = btoa(binary)\n\n  return {\n    width: imageData.width,\n    height: imageData.height,\n    data: base64,\n  }\n}\n\nexport function serializeNullableImageData<T extends ImageData | null>(imageData: T): T extends null ? null : SerializedImageData {\n  if (!imageData) return null as any\n\n  return serializeImageData(imageData) as any\n}\n\nexport function deserializeImageData<T extends SerializedImageData>(serialized: T): ImageData {\n  const binary = atob(serialized.data as string)\n  const bytes = new Uint8ClampedArray(binary.length)\n  for (let i = 0; i < binary.length; i++) {\n    bytes[i] = binary.charCodeAt(i)\n  }\n\n  return new ImageData(bytes, serialized.width, serialized.height) as any\n}\n\nexport function deserializeNullableImageData<T extends SerializedImageData | null>(serialized: T): T extends null ? null : ImageData {\n  if (!serialized) return null as any\n  return deserializeImageData(serialized) as any\n}\n"],"mappings":";AASO,SAAS,mBAAwC,WAAmC;AACzF,QAAM,SAAS,OAAO,aAAa,GAAG,IAAI,WAAW,UAAU,KAAK,MAAM,CAAC;AAC3E,QAAM,SAAS,KAAK,MAAM;AAE1B,SAAO;AAAA,IACL,OAAO,UAAU;AAAA,IACjB,QAAQ,UAAU;AAAA,IAClB,MAAM;AAAA,EACR;AACF;AAEO,SAAS,2BAAuD,WAA2D;AAChI,MAAI,CAAC,UAAW,QAAO;AAEvB,SAAO,mBAAmB,SAAS;AACrC;AAEO,SAAS,qBAAoD,YAA0B;AAC5F,QAAM,SAAS,KAAK,WAAW,IAAc;AAC7C,QAAM,QAAQ,IAAI,kBAAkB,OAAO,MAAM;AACjD,WAAS,IAAI,GAAG,IAAI,OAAO,QAAQ,KAAK;AACtC,UAAM,CAAC,IAAI,OAAO,WAAW,CAAC;AAAA,EAChC;AAEA,SAAO,IAAI,UAAU,OAAO,WAAW,OAAO,WAAW,MAAM;AACjE;AAEO,SAAS,6BAAmE,YAAkD;AACnI,MAAI,CAAC,WAAY,QAAO;AACxB,SAAO,qBAAqB,UAAU;AACxC;","names":[]}
+{"version":3,"sources":["../src/ImageData/serialization.ts"],"sourcesContent":["import type { Base64EncodedUInt8Array, ImageDataLike, SerializedImageData } from '../_types'\n\nexport function base64EncodeArrayBuffer(buffer: ArrayBufferLike): Base64EncodedUInt8Array {\n  const binary = String.fromCharCode(...new Uint8Array(buffer))\n  return btoa(binary) as Base64EncodedUInt8Array\n}\n\nexport function base64DecodeArrayBuffer(encoded: Base64EncodedUInt8Array): Uint8ClampedArray {\n  const binary = atob(encoded)\n  const bytes = new Uint8ClampedArray(binary.length)\n  for (let i = 0; i < binary.length; i++) {\n    bytes[i] = binary.charCodeAt(i)\n  }\n  return bytes\n}\n\n/**\n * Serialize for use in JSON. Pixel data is stored as base64 encoded string.\n */\nexport function serializeImageData<T extends ImageDataLike>(imageData: T): SerializedImageData {\n  return {\n    width: imageData.width,\n    height: imageData.height,\n    data: base64EncodeArrayBuffer(imageData.data.buffer),\n  }\n}\n\nexport function serializeNullableImageData<T extends ImageDataLike | null>(imageData: T): T extends null ? null : SerializedImageData {\n  if (!imageData) return null as any\n\n  return serializeImageData(imageData) as any\n}\n\nexport function deserializeRawImageData<T extends SerializedImageData>(serialized: T): ImageDataLike {\n  return {\n    width: serialized.width,\n    height: serialized.height,\n    data: base64DecodeArrayBuffer(serialized.data as Base64EncodedUInt8Array),\n  }\n}\n\nexport function deserializeImageData<T extends SerializedImageData>(serialized: T): ImageData {\n  const data = base64DecodeArrayBuffer(serialized.data as Base64EncodedUInt8Array)\n\n  return new ImageData(data as ImageDataArray, serialized.width, serialized.height) as any\n}\n\nexport function deserializeNullableImageData<T extends SerializedImageData | null>(serialized: T): T extends null ? null : ImageData {\n  if (!serialized) return null as any\n  return deserializeImageData(serialized) as any\n}\n"],"mappings":";AAEO,SAAS,wBAAwB,QAAkD;AACxF,QAAM,SAAS,OAAO,aAAa,GAAG,IAAI,WAAW,MAAM,CAAC;AAC5D,SAAO,KAAK,MAAM;AACpB;AAEO,SAAS,wBAAwB,SAAqD;AAC3F,QAAM,SAAS,KAAK,OAAO;AAC3B,QAAM,QAAQ,IAAI,kBAAkB,OAAO,MAAM;AACjD,WAAS,IAAI,GAAG,IAAI,OAAO,QAAQ,KAAK;AACtC,UAAM,CAAC,IAAI,OAAO,WAAW,CAAC;AAAA,EAChC;AACA,SAAO;AACT;AAKO,SAAS,mBAA4C,WAAmC;AAC7F,SAAO;AAAA,IACL,OAAO,UAAU;AAAA,IACjB,QAAQ,UAAU;AAAA,IAClB,MAAM,wBAAwB,UAAU,KAAK,MAAM;AAAA,EACrD;AACF;AAEO,SAAS,2BAA2D,WAA2D;AACpI,MAAI,CAAC,UAAW,QAAO;AAEvB,SAAO,mBAAmB,SAAS;AACrC;AAEO,SAAS,wBAAuD,YAA8B;AACnG,SAAO;AAAA,IACL,OAAO,WAAW;AAAA,IAClB,QAAQ,WAAW;AAAA,IACnB,MAAM,wBAAwB,WAAW,IAA+B;AAAA,EAC1E;AACF;AAEO,SAAS,qBAAoD,YAA0B;AAC5F,QAAM,OAAO,wBAAwB,WAAW,IAA+B;AAE/E,SAAO,IAAI,UAAU,MAAwB,WAAW,OAAO,WAAW,MAAM;AAClF;AAEO,SAAS,6BAAmE,YAAkD;AACnI,MAAI,CAAC,WAAY,QAAO;AACxB,SAAO,qBAAqB,UAAU;AACxC;","names":[]}

package/dist/index.prod.cjs

@@ -20,34 +20,50 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  base64DecodeArrayBuffer: () => base64DecodeArrayBuffer,
+  base64EncodeArrayBuffer: () => base64EncodeArrayBuffer,
   deserializeImageData: () => deserializeImageData,
   deserializeNullableImageData: () => deserializeNullableImageData,
+  deserializeRawImageData: () => deserializeRawImageData,
   serializeImageData: () => serializeImageData,
   serializeNullableImageData: () => serializeNullableImageData
 });
 module.exports = __toCommonJS(src_exports);
 
 // src/ImageData/serialization.ts
+function base64EncodeArrayBuffer(buffer) {
+  const binary = String.fromCharCode(...new Uint8Array(buffer));
+  return btoa(binary);
+}
+function base64DecodeArrayBuffer(encoded) {
+  const binary = atob(encoded);
+  const bytes = new Uint8ClampedArray(binary.length);
+  for (let i = 0; i < binary.length; i++) {
+    bytes[i] = binary.charCodeAt(i);
+  }
+  return bytes;
+}
 function serializeImageData(imageData) {
-  const binary = String.fromCharCode(...new Uint8Array(imageData.data.buffer));
-  const base64 = btoa(binary);
   return {
     width: imageData.width,
     height: imageData.height,
-    data: base64
+    data: base64EncodeArrayBuffer(imageData.data.buffer)
   };
 }
 function serializeNullableImageData(imageData) {
   if (!imageData) return null;
   return serializeImageData(imageData);
 }
+function deserializeRawImageData(serialized) {
+  return {
+    width: serialized.width,
+    height: serialized.height,
+    data: base64DecodeArrayBuffer(serialized.data)
+  };
+}
 function deserializeImageData(serialized) {
-  const binary = atob(serialized.data);
-  const bytes = new Uint8ClampedArray(binary.length);
-  for (let i = 0; i < binary.length; i++) {
-    bytes[i] = binary.charCodeAt(i);
-  }
-  return new ImageData(bytes, serialized.width, serialized.height);
+  const data = base64DecodeArrayBuffer(serialized.data);
+  return new ImageData(data, serialized.width, serialized.height);
 }
 function deserializeNullableImageData(serialized) {
   if (!serialized) return null;
@@ -55,8 +71,11 @@ function deserializeNullableImageData(serialized) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  base64DecodeArrayBuffer,
+  base64EncodeArrayBuffer,
   deserializeImageData,
   deserializeNullableImageData,
+  deserializeRawImageData,
   serializeImageData,
   serializeNullableImageData
 });

package/dist/index.prod.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/ImageData/serialization.ts"],"sourcesContent":["export * from './ImageData/serialization'\n","export type SerializedImageData = {\n  width: number,\n  height: number,\n  data: string,\n}\n\n/**\n * Serialize for use in JSON. Stored as base64 encoded string.\n */\nexport function serializeImageData<T extends ImageData>(imageData: T): SerializedImageData {\n  const binary = String.fromCharCode(...new Uint8Array(imageData.data.buffer))\n  const base64 = btoa(binary)\n\n  return {\n    width: imageData.width,\n    height: imageData.height,\n    data: base64,\n  }\n}\n\nexport function serializeNullableImageData<T extends ImageData | null>(imageData: T): T extends null ? null : SerializedImageData {\n  if (!imageData) return null as any\n\n  return serializeImageData(imageData) as any\n}\n\nexport function deserializeImageData<T extends SerializedImageData>(serialized: T): ImageData {\n  const binary = atob(serialized.data as string)\n  const bytes = new Uint8ClampedArray(binary.length)\n  for (let i = 0; i < binary.length; i++) {\n    bytes[i] = binary.charCodeAt(i)\n  }\n\n  return new ImageData(bytes, serialized.width, serialized.height) as any\n}\n\nexport function deserializeNullableImageData<T extends SerializedImageData | null>(serialized: T): T extends null ? null : ImageData {\n  if (!serialized) return null as any\n  return deserializeImageData(serialized) as any\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACSO,SAAS,mBAAwC,WAAmC;AACzF,QAAM,SAAS,OAAO,aAAa,GAAG,IAAI,WAAW,UAAU,KAAK,MAAM,CAAC;AAC3E,QAAM,SAAS,KAAK,MAAM;AAE1B,SAAO;AAAA,IACL,OAAO,UAAU;AAAA,IACjB,QAAQ,UAAU;AAAA,IAClB,MAAM;AAAA,EACR;AACF;AAEO,SAAS,2BAAuD,WAA2D;AAChI,MAAI,CAAC,UAAW,QAAO;AAEvB,SAAO,mBAAmB,SAAS;AACrC;AAEO,SAAS,qBAAoD,YAA0B;AAC5F,QAAM,SAAS,KAAK,WAAW,IAAc;AAC7C,QAAM,QAAQ,IAAI,kBAAkB,OAAO,MAAM;AACjD,WAAS,IAAI,GAAG,IAAI,OAAO,QAAQ,KAAK;AACtC,UAAM,CAAC,IAAI,OAAO,WAAW,CAAC;AAAA,EAChC;AAEA,SAAO,IAAI,UAAU,OAAO,WAAW,OAAO,WAAW,MAAM;AACjE;AAEO,SAAS,6BAAmE,YAAkD;AACnI,MAAI,CAAC,WAAY,QAAO;AACxB,SAAO,qBAAqB,UAAU;AACxC;","names":[]}
+{"version":3,"sources":["../src/index.ts","../src/ImageData/serialization.ts"],"sourcesContent":["export * from './ImageData/serialization'\n","import type { Base64EncodedUInt8Array, ImageDataLike, SerializedImageData } from '../_types'\n\nexport function base64EncodeArrayBuffer(buffer: ArrayBufferLike): Base64EncodedUInt8Array {\n  const binary = String.fromCharCode(...new Uint8Array(buffer))\n  return btoa(binary) as Base64EncodedUInt8Array\n}\n\nexport function base64DecodeArrayBuffer(encoded: Base64EncodedUInt8Array): Uint8ClampedArray {\n  const binary = atob(encoded)\n  const bytes = new Uint8ClampedArray(binary.length)\n  for (let i = 0; i < binary.length; i++) {\n    bytes[i] = binary.charCodeAt(i)\n  }\n  return bytes\n}\n\n/**\n * Serialize for use in JSON. Pixel data is stored as base64 encoded string.\n */\nexport function serializeImageData<T extends ImageDataLike>(imageData: T): SerializedImageData {\n  return {\n    width: imageData.width,\n    height: imageData.height,\n    data: base64EncodeArrayBuffer(imageData.data.buffer),\n  }\n}\n\nexport function serializeNullableImageData<T extends ImageDataLike | null>(imageData: T): T extends null ? null : SerializedImageData {\n  if (!imageData) return null as any\n\n  return serializeImageData(imageData) as any\n}\n\nexport function deserializeRawImageData<T extends SerializedImageData>(serialized: T): ImageDataLike {\n  return {\n    width: serialized.width,\n    height: serialized.height,\n    data: base64DecodeArrayBuffer(serialized.data as Base64EncodedUInt8Array),\n  }\n}\n\nexport function deserializeImageData<T extends SerializedImageData>(serialized: T): ImageData {\n  const data = base64DecodeArrayBuffer(serialized.data as Base64EncodedUInt8Array)\n\n  return new ImageData(data as ImageDataArray, serialized.width, serialized.height) as any\n}\n\nexport function deserializeNullableImageData<T extends SerializedImageData | null>(serialized: T): T extends null ? null : ImageData {\n  if (!serialized) return null as any\n  return deserializeImageData(serialized) as any\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACEO,SAAS,wBAAwB,QAAkD;AACxF,QAAM,SAAS,OAAO,aAAa,GAAG,IAAI,WAAW,MAAM,CAAC;AAC5D,SAAO,KAAK,MAAM;AACpB;AAEO,SAAS,wBAAwB,SAAqD;AAC3F,QAAM,SAAS,KAAK,OAAO;AAC3B,QAAM,QAAQ,IAAI,kBAAkB,OAAO,MAAM;AACjD,WAAS,IAAI,GAAG,IAAI,OAAO,QAAQ,KAAK;AACtC,UAAM,CAAC,IAAI,OAAO,WAAW,CAAC;AAAA,EAChC;AACA,SAAO;AACT;AAKO,SAAS,mBAA4C,WAAmC;AAC7F,SAAO;AAAA,IACL,OAAO,UAAU;AAAA,IACjB,QAAQ,UAAU;AAAA,IAClB,MAAM,wBAAwB,UAAU,KAAK,MAAM;AAAA,EACrD;AACF;AAEO,SAAS,2BAA2D,WAA2D;AACpI,MAAI,CAAC,UAAW,QAAO;AAEvB,SAAO,mBAAmB,SAAS;AACrC;AAEO,SAAS,wBAAuD,YAA8B;AACnG,SAAO;AAAA,IACL,OAAO,WAAW;AAAA,IAClB,QAAQ,WAAW;AAAA,IACnB,MAAM,wBAAwB,WAAW,IAA+B;AAAA,EAC1E;AACF;AAEO,SAAS,qBAAoD,YAA0B;AAC5F,QAAM,OAAO,wBAAwB,WAAW,IAA+B;AAE/E,SAAO,IAAI,UAAU,MAAwB,WAAW,OAAO,WAAW,MAAM;AAClF;AAEO,SAAS,6BAAmE,YAAkD;AACnI,MAAI,CAAC,WAAY,QAAO;AACxB,SAAO,qBAAqB,UAAU;AACxC;","names":[]}

package/dist/index.prod.d.ts

@@ -1,14 +1,26 @@
+type ImageDataLike = {
+    width: number;
+    height: number;
+    data: Uint8ClampedArray;
+};
 type SerializedImageData = {
     width: number;
     height: number;
     data: string;
 };
+type Base64EncodedUInt8Array = string & {
+    readonly __brandBase64UInt8Array: unique symbol;
+};
+
+declare function base64EncodeArrayBuffer(buffer: ArrayBufferLike): Base64EncodedUInt8Array;
+declare function base64DecodeArrayBuffer(encoded: Base64EncodedUInt8Array): Uint8ClampedArray;
 /**
- * Serialize for use in JSON. Stored as base64 encoded string.
+ * Serialize for use in JSON. Pixel data is stored as base64 encoded string.
  */
-declare function serializeImageData<T extends ImageData>(imageData: T): SerializedImageData;
-declare function serializeNullableImageData<T extends ImageData | null>(imageData: T): T extends null ? null : SerializedImageData;
+declare function serializeImageData<T extends ImageDataLike>(imageData: T): SerializedImageData;
+declare function serializeNullableImageData<T extends ImageDataLike | null>(imageData: T): T extends null ? null : SerializedImageData;
+declare function deserializeRawImageData<T extends SerializedImageData>(serialized: T): ImageDataLike;
 declare function deserializeImageData<T extends SerializedImageData>(serialized: T): ImageData;
 declare function deserializeNullableImageData<T extends SerializedImageData | null>(serialized: T): T extends null ? null : ImageData;
 
-export { type SerializedImageData, deserializeImageData, deserializeNullableImageData, serializeImageData, serializeNullableImageData };
+export { base64DecodeArrayBuffer, base64EncodeArrayBuffer, deserializeImageData, deserializeNullableImageData, deserializeRawImageData, serializeImageData, serializeNullableImageData };

package/dist/index.prod.js

@@ -1,32 +1,48 @@
 // src/ImageData/serialization.ts
+function base64EncodeArrayBuffer(buffer) {
+  const binary = String.fromCharCode(...new Uint8Array(buffer));
+  return btoa(binary);
+}
+function base64DecodeArrayBuffer(encoded) {
+  const binary = atob(encoded);
+  const bytes = new Uint8ClampedArray(binary.length);
+  for (let i = 0; i < binary.length; i++) {
+    bytes[i] = binary.charCodeAt(i);
+  }
+  return bytes;
+}
 function serializeImageData(imageData) {
-  const binary = String.fromCharCode(...new Uint8Array(imageData.data.buffer));
-  const base64 = btoa(binary);
   return {
     width: imageData.width,
     height: imageData.height,
-    data: base64
+    data: base64EncodeArrayBuffer(imageData.data.buffer)
   };
 }
 function serializeNullableImageData(imageData) {
   if (!imageData) return null;
   return serializeImageData(imageData);
 }
+function deserializeRawImageData(serialized) {
+  return {
+    width: serialized.width,
+    height: serialized.height,
+    data: base64DecodeArrayBuffer(serialized.data)
+  };
+}
 function deserializeImageData(serialized) {
-  const binary = atob(serialized.data);
-  const bytes = new Uint8ClampedArray(binary.length);
-  for (let i = 0; i < binary.length; i++) {
-    bytes[i] = binary.charCodeAt(i);
-  }
-  return new ImageData(bytes, serialized.width, serialized.height);
+  const data = base64DecodeArrayBuffer(serialized.data);
+  return new ImageData(data, serialized.width, serialized.height);
 }
 function deserializeNullableImageData(serialized) {
   if (!serialized) return null;
   return deserializeImageData(serialized);
 }
 export {
+  base64DecodeArrayBuffer,
+  base64EncodeArrayBuffer,
   deserializeImageData,
   deserializeNullableImageData,
+  deserializeRawImageData,
   serializeImageData,
   serializeNullableImageData
 };

package/dist/index.prod.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/ImageData/serialization.ts"],"sourcesContent":["export type SerializedImageData = {\n  width: number,\n  height: number,\n  data: string,\n}\n\n/**\n * Serialize for use in JSON. Stored as base64 encoded string.\n */\nexport function serializeImageData<T extends ImageData>(imageData: T): SerializedImageData {\n  const binary = String.fromCharCode(...new Uint8Array(imageData.data.buffer))\n  const base64 = btoa(binary)\n\n  return {\n    width: imageData.width,\n    height: imageData.height,\n    data: base64,\n  }\n}\n\nexport function serializeNullableImageData<T extends ImageData | null>(imageData: T): T extends null ? null : SerializedImageData {\n  if (!imageData) return null as any\n\n  return serializeImageData(imageData) as any\n}\n\nexport function deserializeImageData<T extends SerializedImageData>(serialized: T): ImageData {\n  const binary = atob(serialized.data as string)\n  const bytes = new Uint8ClampedArray(binary.length)\n  for (let i = 0; i < binary.length; i++) {\n    bytes[i] = binary.charCodeAt(i)\n  }\n\n  return new ImageData(bytes, serialized.width, serialized.height) as any\n}\n\nexport function deserializeNullableImageData<T extends SerializedImageData | null>(serialized: T): T extends null ? null : ImageData {\n  if (!serialized) return null as any\n  return deserializeImageData(serialized) as any\n}\n"],"mappings":";AASO,SAAS,mBAAwC,WAAmC;AACzF,QAAM,SAAS,OAAO,aAAa,GAAG,IAAI,WAAW,UAAU,KAAK,MAAM,CAAC;AAC3E,QAAM,SAAS,KAAK,MAAM;AAE1B,SAAO;AAAA,IACL,OAAO,UAAU;AAAA,IACjB,QAAQ,UAAU;AAAA,IAClB,MAAM;AAAA,EACR;AACF;AAEO,SAAS,2BAAuD,WAA2D;AAChI,MAAI,CAAC,UAAW,QAAO;AAEvB,SAAO,mBAAmB,SAAS;AACrC;AAEO,SAAS,qBAAoD,YAA0B;AAC5F,QAAM,SAAS,KAAK,WAAW,IAAc;AAC7C,QAAM,QAAQ,IAAI,kBAAkB,OAAO,MAAM;AACjD,WAAS,IAAI,GAAG,IAAI,OAAO,QAAQ,KAAK;AACtC,UAAM,CAAC,IAAI,OAAO,WAAW,CAAC;AAAA,EAChC;AAEA,SAAO,IAAI,UAAU,OAAO,WAAW,OAAO,WAAW,MAAM;AACjE;AAEO,SAAS,6BAAmE,YAAkD;AACnI,MAAI,CAAC,WAAY,QAAO;AACxB,SAAO,qBAAqB,UAAU;AACxC;","names":[]}
+{"version":3,"sources":["../src/ImageData/serialization.ts"],"sourcesContent":["import type { Base64EncodedUInt8Array, ImageDataLike, SerializedImageData } from '../_types'\n\nexport function base64EncodeArrayBuffer(buffer: ArrayBufferLike): Base64EncodedUInt8Array {\n  const binary = String.fromCharCode(...new Uint8Array(buffer))\n  return btoa(binary) as Base64EncodedUInt8Array\n}\n\nexport function base64DecodeArrayBuffer(encoded: Base64EncodedUInt8Array): Uint8ClampedArray {\n  const binary = atob(encoded)\n  const bytes = new Uint8ClampedArray(binary.length)\n  for (let i = 0; i < binary.length; i++) {\n    bytes[i] = binary.charCodeAt(i)\n  }\n  return bytes\n}\n\n/**\n * Serialize for use in JSON. Pixel data is stored as base64 encoded string.\n */\nexport function serializeImageData<T extends ImageDataLike>(imageData: T): SerializedImageData {\n  return {\n    width: imageData.width,\n    height: imageData.height,\n    data: base64EncodeArrayBuffer(imageData.data.buffer),\n  }\n}\n\nexport function serializeNullableImageData<T extends ImageDataLike | null>(imageData: T): T extends null ? null : SerializedImageData {\n  if (!imageData) return null as any\n\n  return serializeImageData(imageData) as any\n}\n\nexport function deserializeRawImageData<T extends SerializedImageData>(serialized: T): ImageDataLike {\n  return {\n    width: serialized.width,\n    height: serialized.height,\n    data: base64DecodeArrayBuffer(serialized.data as Base64EncodedUInt8Array),\n  }\n}\n\nexport function deserializeImageData<T extends SerializedImageData>(serialized: T): ImageData {\n  const data = base64DecodeArrayBuffer(serialized.data as Base64EncodedUInt8Array)\n\n  return new ImageData(data as ImageDataArray, serialized.width, serialized.height) as any\n}\n\nexport function deserializeNullableImageData<T extends SerializedImageData | null>(serialized: T): T extends null ? null : ImageData {\n  if (!serialized) return null as any\n  return deserializeImageData(serialized) as any\n}\n"],"mappings":";AAEO,SAAS,wBAAwB,QAAkD;AACxF,QAAM,SAAS,OAAO,aAAa,GAAG,IAAI,WAAW,MAAM,CAAC;AAC5D,SAAO,KAAK,MAAM;AACpB;AAEO,SAAS,wBAAwB,SAAqD;AAC3F,QAAM,SAAS,KAAK,OAAO;AAC3B,QAAM,QAAQ,IAAI,kBAAkB,OAAO,MAAM;AACjD,WAAS,IAAI,GAAG,IAAI,OAAO,QAAQ,KAAK;AACtC,UAAM,CAAC,IAAI,OAAO,WAAW,CAAC;AAAA,EAChC;AACA,SAAO;AACT;AAKO,SAAS,mBAA4C,WAAmC;AAC7F,SAAO;AAAA,IACL,OAAO,UAAU;AAAA,IACjB,QAAQ,UAAU;AAAA,IAClB,MAAM,wBAAwB,UAAU,KAAK,MAAM;AAAA,EACrD;AACF;AAEO,SAAS,2BAA2D,WAA2D;AACpI,MAAI,CAAC,UAAW,QAAO;AAEvB,SAAO,mBAAmB,SAAS;AACrC;AAEO,SAAS,wBAAuD,YAA8B;AACnG,SAAO;AAAA,IACL,OAAO,WAAW;AAAA,IAClB,QAAQ,WAAW;AAAA,IACnB,MAAM,wBAAwB,WAAW,IAA+B;AAAA,EAC1E;AACF;AAEO,SAAS,qBAAoD,YAA0B;AAC5F,QAAM,OAAO,wBAAwB,WAAW,IAA+B;AAE/E,SAAO,IAAI,UAAU,MAAwB,WAAW,OAAO,WAAW,MAAM;AAClF;AAEO,SAAS,6BAAmE,YAAkD;AACnI,MAAI,CAAC,WAAY,QAAO;AACxB,SAAO,qBAAqB,UAAU;AACxC;","names":[]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "pixel-data-js",
   "type": "module",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "packageManager": "pnpm@10.30.0",
   "description": "JS Pixel and ImageData operations",
   "author": {

package/src/ImageData/read-write-pixels.ts

@@ -0,0 +1,36 @@
+import type { Color32, ImageDataLike } from '../_types'
+
+export function makeImageDataColor32Adapter(imageData: ImageDataLike) {
+  const data32 = new Uint32Array(imageData.data.buffer)
+
+  function inBounds(x: number, y: number) {
+    return x < 0 || x >= imageData.width || y < 0 || y >= imageData.height
+  }
+
+  function setPixel(
+    x: number,
+    y: number,
+    color: Color32,
+  ): void {
+    if (x < 0 || x >= imageData.width || y < 0 || y >= imageData.height) return
+    data32[y * imageData.width + x] = color
+  }
+
+  function getPixel(
+    x: number,
+    y: number,
+  ): Color32 | undefined {
+    if (x < 0 || x >= imageData.width || y < 0 || y >= imageData.height) return
+
+    return data32[y * imageData.width + x] as Color32
+  }
+
+  return {
+    inBounds,
+    imageData,
+    data32,
+    setPixel,
+    getPixel,
+  }
+}
+

package/src/ImageData/serialization.ts

@@ -1,37 +1,48 @@
-export type SerializedImageData = {
-  width: number,
-  height: number,
-  data: string,
+import type { Base64EncodedUInt8Array, ImageDataLike, SerializedImageData } from '../_types'
+
+export function base64EncodeArrayBuffer(buffer: ArrayBufferLike): Base64EncodedUInt8Array {
+  const binary = String.fromCharCode(...new Uint8Array(buffer))
+  return btoa(binary) as Base64EncodedUInt8Array
+}
+
+export function base64DecodeArrayBuffer(encoded: Base64EncodedUInt8Array): Uint8ClampedArray {
+  const binary = atob(encoded)
+  const bytes = new Uint8ClampedArray(binary.length)
+  for (let i = 0; i < binary.length; i++) {
+    bytes[i] = binary.charCodeAt(i)
+  }
+  return bytes
 }
 
 /**
- * Serialize for use in JSON. Stored as base64 encoded string.
+ * Serialize for use in JSON. Pixel data is stored as base64 encoded string.
  */
-export function serializeImageData<T extends ImageData>(imageData: T): SerializedImageData {
-  const binary = String.fromCharCode(...new Uint8Array(imageData.data.buffer))
-  const base64 = btoa(binary)
-
+export function serializeImageData<T extends ImageDataLike>(imageData: T): SerializedImageData {
   return {
     width: imageData.width,
     height: imageData.height,
-    data: base64,
+    data: base64EncodeArrayBuffer(imageData.data.buffer),
   }
 }
 
-export function serializeNullableImageData<T extends ImageData | null>(imageData: T): T extends null ? null : SerializedImageData {
+export function serializeNullableImageData<T extends ImageDataLike | null>(imageData: T): T extends null ? null : SerializedImageData {
   if (!imageData) return null as any
 
   return serializeImageData(imageData) as any
 }
 
-export function deserializeImageData<T extends SerializedImageData>(serialized: T): ImageData {
-  const binary = atob(serialized.data as string)
-  const bytes = new Uint8ClampedArray(binary.length)
-  for (let i = 0; i < binary.length; i++) {
-    bytes[i] = binary.charCodeAt(i)
+export function deserializeRawImageData<T extends SerializedImageData>(serialized: T): ImageDataLike {
+  return {
+    width: serialized.width,
+    height: serialized.height,
+    data: base64DecodeArrayBuffer(serialized.data as Base64EncodedUInt8Array),
   }
+}
+
+export function deserializeImageData<T extends SerializedImageData>(serialized: T): ImageData {
+  const data = base64DecodeArrayBuffer(serialized.data as Base64EncodedUInt8Array)
 
-  return new ImageData(bytes, serialized.width, serialized.height) as any
+  return new ImageData(data as ImageDataArray, serialized.width, serialized.height) as any
 }
 
 export function deserializeNullableImageData<T extends SerializedImageData | null>(serialized: T): T extends null ? null : ImageData {

package/src/_types.ts

@@ -0,0 +1,22 @@
+// ALL values are 0-255 (including alpha which in CSS is 0-1)
+export type RGBA = { r: number, g: number, b: number, a: number }
+
+// A 32-bit integer containing r,g,b,a data
+export type Color32 = number & { readonly __brandColor32: unique symbol };
+
+// ALL values are floats from 0-1
+export type RGBAFloat = RGBA & { readonly __brandRGBAFloat: unique symbol }
+
+export type ImageDataLike = {
+  width: number
+  height: number
+  data: Uint8ClampedArray
+}
+
+export type SerializedImageData = {
+  width: number,
+  height: number,
+  data: string,
+}
+
+export type Base64EncodedUInt8Array = string & { readonly __brandBase64UInt8Array: unique symbol }

package/src/color.ts

@@ -0,0 +1,79 @@
+import type { Color32, RGBA } from './_types'
+
+/**
+ * Packs RGBA into a 32-bit integer compatible with
+ * Little-Endian Uint32Array views on ImageData.
+ */
+export function packColor(r: number, g: number, b: number, a: number): Color32 {
+  return ((a << 24) | (b << 16) | (g << 8) | r) >>> 0 as Color32
+}
+
+export function packRGBA({ r, g, b, a }: RGBA): Color32 {
+  return ((a << 24) | (b << 16) | (g << 8) | r) >>> 0 as Color32
+}
+
+export const unpackRed = (packed: Color32): number => (packed >>> 0) & 0xFF
+export const unpackGreen = (packed: Color32): number => (packed >>> 8) & 0xFF
+export const unpackBlue = (packed: Color32): number => (packed >>> 16) & 0xFF
+export const unpackAlpha = (packed: Color32): number => (packed >>> 24) & 0xFF
+
+export function unpackColor(packed: Color32): RGBA {
+  return {
+    r: (packed >>> 0) & 0xFF,
+    g: (packed >>> 8) & 0xFF,
+    b: (packed >>> 16) & 0xFF,
+    a: (packed >>> 24) & 0xFF,
+  }
+}
+
+const SCRATCH_RGBA: RGBA = { r: 0, g: 0, b: 0, a: 0 }
+
+// uses a scratch arg for memory perf. Be careful about re-use.
+export function unpackColorTo(packed: Color32, scratch = SCRATCH_RGBA): RGBA {
+  scratch.r = (packed >>> 0) & 0xFF
+  scratch.g = (packed >>> 8) & 0xFF
+  scratch.b = (packed >>> 16) & 0xFF
+  scratch.a = (packed >>> 24) & 0xFF
+  return scratch
+}
+
+export function colorDistance(a: Color32, b: Color32): number {
+  const dr = (a & 0xFF) - (b & 0xFF)
+  const dg = ((a >>> 8) & 0xFF) - ((b >>> 8) & 0xFF)
+  const db = ((a >>> 16) & 0xFF) - ((b >>> 16) & 0xFF)
+  const da = ((a >>> 24) & 0xFF) - ((b >>> 24) & 0xFF)
+  return dr * dr + dg * dg + db * db + da * da
+}
+
+export function lerpColor32(a: Color32, b: Color32, t: number): Color32 {
+  const r = (a & 0xFF) + t * ((b & 0xFF) - (a & 0xFF))
+  const g = ((a >>> 8) & 0xFF) + t * (((b >>> 8) & 0xFF) - ((a >>> 8) & 0xFF))
+  const b_ = ((a >>> 16) & 0xFF) + t * (((b >>> 16) & 0xFF) - ((a >>> 16) & 0xFF))
+  const a_ = ((a >>> 24) & 0xFF) + t * (((b >>> 24) & 0xFF) - ((a >>> 24) & 0xFF))
+
+  return packColor(r, g, b_, a_)
+}
+
+// Convert 0xAABBGGRR to #RRGGBBAA
+export function color32ToHex(color: Color32): string {
+  const r = (color & 0xFF).toString(16).padStart(2, '0')
+  const g = ((color >>> 8) & 0xFF).toString(16).padStart(2, '0')
+  const b = ((color >>> 16) & 0xFF).toString(16).padStart(2, '0')
+  const a = ((color >>> 24) & 0xFF).toString(16).padStart(2, '0')
+  return `#${r}${g}${b}${a}`
+}
+
+/**
+ * Converts a 32-bit integer (0xAABBGGRR) to a CSS rgba() string.
+ * Example: 0xFF0000FF -> "rgba(255,0,0,1)"
+ */
+export function color32ToCssRGBA(color: Color32): string {
+  const r = color & 0xFF
+  const g = (color >>> 8) & 0xFF
+  const b = (color >>> 16) & 0xFF
+  const a = (color >>> 24) & 0xFF
+
+  const alpha = Number((a / 255).toFixed(3))
+
+  return `rgba(${r},${g},${b},${alpha})`
+}