@ewanc26/noise-avatar 0.1.0 → 0.2.1

package/README.md

@@ -1,6 +1,6 @@
 # @ewanc26/noise-avatar
 
-Deterministic value-noise avatar generation from a string seed. Zero runtime dependencies, works in any environment with a Canvas API (browsers, jsdom).
+Deterministic value-noise avatar generation from a string seed. Thin opinionated wrapper around [`@ewanc26/noise`](../noise). Zero extra runtime dependencies, works in any environment with a Canvas API (browsers, jsdom).
 
 Part of the [`@ewanc26/pkgs`](https://github.com/ewanc26/pkgs) monorepo.
 
@@ -36,7 +36,7 @@ renderNoiseAvatar(canvas, 'Alice|Subscription');
 
 ### `renderNoiseAvatar(canvas, seed, options?)`
 
-Renders a deterministic value-noise texture onto `canvas`. Resizes the canvas to `options.displaySize` (default `64`).
+Renders a deterministic HSL value-noise texture onto `canvas` at `displaySize × displaySize` pixels.
 
 | Option | Type | Default | Description |
 |---|---|---|---|
@@ -48,19 +48,15 @@ Renders a deterministic value-noise texture onto `canvas`. Resizes the canvas to
 
 ### `noiseAvatarAction(canvas, seed, options?)`
 
-Svelte action wrapper around `renderNoiseAvatar`. Re-renders when `seed` changes via `update`.
+Svelte action wrapper. Re-renders when `seed` changes via `update`.
 
-### `hash32(str)`
+### Re-exported primitives
 
-djb2 hash — returns an unsigned 32-bit integer. Exported for custom seed construction.
+`hash32`, `makePrng`, `hslToRgb`, `makeValueNoiseSampler`, and `generateNoisePixels`
+are all re-exported from `@ewanc26/noise` for convenience.
 
-### `makePrng(seed)`
-
-Seeded LCG PRNG — returns a `() => number` producing floats in `[0, 1)`.
-
-### `hslToRgb(h, s, l)`
-
-Converts HSL (components in `[0, 1]`) to an RGB triple (`[0, 255]` each).
+For full control over dimensions, FBM octaves, and colour modes, use
+[`@ewanc26/noise`](../noise) directly.
 
 ## Licence
 

package/dist/index.cjs

@@ -20,90 +20,49 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  hash32: () => hash32,
-  hslToRgb: () => hslToRgb,
-  makePrng: () => makePrng,
+  generateNoisePixels: () => import_noise.generateNoisePixels,
+  hash32: () => import_noise.hash32,
+  hslToRgb: () => import_noise.hslToRgb,
+  makePrng: () => import_noise.makePrng,
+  makeValueNoiseSampler: () => import_noise.makeValueNoiseSampler,
   noiseAvatarAction: () => noiseAvatarAction,
   renderNoiseAvatar: () => renderNoiseAvatar
 });
 module.exports = __toCommonJS(index_exports);
-function hash32(str) {
-  let h = 5381;
-  for (let i = 0; i < str.length; i++) h = Math.imul(33, h) ^ str.charCodeAt(i);
-  return h >>> 0;
-}
-function makePrng(seed) {
-  let s = seed >>> 0;
-  return () => {
-    s = Math.imul(1664525, s) + 1013904223 >>> 0;
-    return s / 4294967296;
+var import_noise = require("@ewanc26/noise");
+var import_noise2 = require("@ewanc26/noise");
+function toRenderOptions(opts) {
+  const colorMode = {
+    type: "hsl",
+    hueRange: opts.hueRange,
+    saturationRange: opts.saturationRange,
+    lightnessRange: opts.lightnessRange
   };
-}
-function hslToRgb(h, s, l) {
-  const a = s * Math.min(l, 1 - l);
-  const f = (n) => {
-    const k = (n + h * 12) % 12;
-    return l - a * Math.max(-1, Math.min(k - 3, 9 - k, 1));
+  return {
+    size: opts.displaySize ?? 64,
+    gridSize: opts.gridSize,
+    colorMode
   };
-  return [Math.round(f(0) * 255), Math.round(f(8) * 255), Math.round(f(4) * 255)];
-}
-function smoothstep(t) {
-  return t * t * (3 - 2 * t);
 }
 function renderNoiseAvatar(canvas, seed, options = {}) {
-  const {
-    gridSize = 5,
-    displaySize = 64,
-    hueRange = 60,
-    saturationRange = [45, 70],
-    lightnessRange = [40, 70]
-  } = options;
-  canvas.width = displaySize;
-  canvas.height = displaySize;
-  const ctx = canvas.getContext("2d");
-  if (!ctx) return;
-  const seedNum = hash32(seed);
-  const rng = makePrng(seedNum);
-  const baseHue = seedNum % 360;
-  const G = gridSize + 1;
-  const grid = Array.from({ length: G * G }, () => rng());
-  const gridVal = (gx, gy) => grid[gy * G + gx];
-  const imageData = ctx.createImageData(displaySize, displaySize);
-  for (let py = 0; py < displaySize; py++) {
-    for (let px = 0; px < displaySize; px++) {
-      const fx = px / displaySize * gridSize;
-      const fy = py / displaySize * gridSize;
-      const gx = Math.floor(fx);
-      const gy = Math.floor(fy);
-      const tx = smoothstep(fx - gx);
-      const ty = smoothstep(fy - gy);
-      const v = (1 - ty) * ((1 - tx) * gridVal(gx, gy) + tx * gridVal(gx + 1, gy)) + ty * ((1 - tx) * gridVal(gx, gy + 1) + tx * gridVal(gx + 1, gy + 1));
-      const hue = (baseHue + v * hueRange) % 360;
-      const sat = saturationRange[0] + v * (saturationRange[1] - saturationRange[0]);
-      const light = lightnessRange[0] + v * (lightnessRange[1] - lightnessRange[0]);
-      const [r, g, b] = hslToRgb(hue / 360, sat / 100, light / 100);
-      const i = (py * displaySize + px) * 4;
-      imageData.data[i] = r;
-      imageData.data[i + 1] = g;
-      imageData.data[i + 2] = b;
-      imageData.data[i + 3] = 255;
-    }
-  }
-  ctx.putImageData(imageData, 0, 0);
+  (0, import_noise2.renderNoise)(canvas, seed, toRenderOptions(options));
 }
-function noiseAvatarAction(canvas, seed, options) {
-  renderNoiseAvatar(canvas, seed, options);
+function noiseAvatarAction(canvas, seed, options = {}) {
+  const params = { seed, ...toRenderOptions(options) };
+  const action = (0, import_noise2.noiseAction)(canvas, params);
   return {
     update(newSeed) {
-      renderNoiseAvatar(canvas, newSeed, options);
+      action.update({ seed: newSeed, ...toRenderOptions(options) });
     }
   };
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  generateNoisePixels,
   hash32,
   hslToRgb,
   makePrng,
+  makeValueNoiseSampler,
   noiseAvatarAction,
   renderNoiseAvatar
 });

package/dist/index.d.cts

@@ -1,31 +1,18 @@
+export { generateNoisePixels, hash32, hslToRgb, makePrng, makeValueNoiseSampler } from '@ewanc26/noise';
+
 /**
  * @ewanc26/noise-avatar
  *
- * Deterministic value-noise avatar generation.
+ * Opinionated avatar-flavoured wrapper around @ewanc26/noise.
  *
- * Renders a unique, colour-rich noise texture onto an HTMLCanvasElement
- * from an arbitrary string seed. The same seed always produces the same image.
- * Zero runtime dependencies; works in any environment with a Canvas API.
- */
-/**
- * djb2 hash — returns an unsigned 32-bit integer for any string.
- */
-declare function hash32(str: string): number;
-/**
- * Seeded LCG pseudo-random number generator.
- * Returns a function that produces floats in [0, 1).
- */
-declare function makePrng(seed: number): () => number;
-/**
- * Convert HSL (each component in [0, 1]) to an RGB triple ([0, 255] each).
- */
-declare function hslToRgb(h: number, s: number, l: number): [number, number, number];
-/**
- * Options for `renderNoiseAvatar`.
+ * Provides a fixed HSL colour mode and square-canvas defaults so callers
+ * don't have to think about noise options for the common avatar use-case.
+ * The underlying primitives are re-exported for consumers that want them.
  */
+
 interface NoiseAvatarOptions {
     /**
-     * Side length of the internal noise grid (higher = more detail).
+     * Side length of the noise grid.
      * @default 5
      */
     gridSize?: number;
@@ -35,7 +22,7 @@ interface NoiseAvatarOptions {
      */
     displaySize?: number;
     /**
-     * Hue spread (degrees) around the seed-derived base hue.
+     * Hue spread in degrees around the seed-derived base hue.
      * @default 60
      */
     hueRange?: number;
@@ -55,11 +42,12 @@ interface NoiseAvatarOptions {
  *
  * @param canvas  Target HTMLCanvasElement (will be resized to `displaySize`).
  * @param seed    Arbitrary string — same seed always produces the same image.
- * @param options Rendering options.
+ * @param options Avatar rendering options.
  */
 declare function renderNoiseAvatar(canvas: HTMLCanvasElement, seed: string, options?: NoiseAvatarOptions): void;
 /**
- * Create a Svelte action that renders a noise avatar and updates reactively.
+ * Svelte action that renders a noise avatar and updates reactively when
+ * `seed` changes.
  *
  * @example
  * ```svelte
@@ -70,4 +58,4 @@ declare function noiseAvatarAction(canvas: HTMLCanvasElement, seed: string, opti
     update(newSeed: string): void;
 };
 
-export { type NoiseAvatarOptions, hash32, hslToRgb, makePrng, noiseAvatarAction, renderNoiseAvatar };
+export { type NoiseAvatarOptions, noiseAvatarAction, renderNoiseAvatar };

package/dist/index.d.ts

@@ -1,31 +1,18 @@
+export { generateNoisePixels, hash32, hslToRgb, makePrng, makeValueNoiseSampler } from '@ewanc26/noise';
+
 /**
  * @ewanc26/noise-avatar
  *
- * Deterministic value-noise avatar generation.
+ * Opinionated avatar-flavoured wrapper around @ewanc26/noise.
  *
- * Renders a unique, colour-rich noise texture onto an HTMLCanvasElement
- * from an arbitrary string seed. The same seed always produces the same image.
- * Zero runtime dependencies; works in any environment with a Canvas API.
- */
-/**
- * djb2 hash — returns an unsigned 32-bit integer for any string.
- */
-declare function hash32(str: string): number;
-/**
- * Seeded LCG pseudo-random number generator.
- * Returns a function that produces floats in [0, 1).
- */
-declare function makePrng(seed: number): () => number;
-/**
- * Convert HSL (each component in [0, 1]) to an RGB triple ([0, 255] each).
- */
-declare function hslToRgb(h: number, s: number, l: number): [number, number, number];
-/**
- * Options for `renderNoiseAvatar`.
+ * Provides a fixed HSL colour mode and square-canvas defaults so callers
+ * don't have to think about noise options for the common avatar use-case.
+ * The underlying primitives are re-exported for consumers that want them.
  */
+
 interface NoiseAvatarOptions {
     /**
-     * Side length of the internal noise grid (higher = more detail).
+     * Side length of the noise grid.
      * @default 5
      */
     gridSize?: number;
@@ -35,7 +22,7 @@ interface NoiseAvatarOptions {
      */
     displaySize?: number;
     /**
-     * Hue spread (degrees) around the seed-derived base hue.
+     * Hue spread in degrees around the seed-derived base hue.
      * @default 60
      */
     hueRange?: number;
@@ -55,11 +42,12 @@ interface NoiseAvatarOptions {
  *
  * @param canvas  Target HTMLCanvasElement (will be resized to `displaySize`).
  * @param seed    Arbitrary string — same seed always produces the same image.
- * @param options Rendering options.
+ * @param options Avatar rendering options.
  */
 declare function renderNoiseAvatar(canvas: HTMLCanvasElement, seed: string, options?: NoiseAvatarOptions): void;
 /**
- * Create a Svelte action that renders a noise avatar and updates reactively.
+ * Svelte action that renders a noise avatar and updates reactively when
+ * `seed` changes.
  *
  * @example
  * ```svelte
@@ -70,4 +58,4 @@ declare function noiseAvatarAction(canvas: HTMLCanvasElement, seed: string, opti
     update(newSeed: string): void;
 };
 
-export { type NoiseAvatarOptions, hash32, hslToRgb, makePrng, noiseAvatarAction, renderNoiseAvatar };
+export { type NoiseAvatarOptions, noiseAvatarAction, renderNoiseAvatar };

package/dist/index.js

@@ -1,80 +1,43 @@
 // src/index.ts
-function hash32(str) {
-  let h = 5381;
-  for (let i = 0; i < str.length; i++) h = Math.imul(33, h) ^ str.charCodeAt(i);
-  return h >>> 0;
-}
-function makePrng(seed) {
-  let s = seed >>> 0;
-  return () => {
-    s = Math.imul(1664525, s) + 1013904223 >>> 0;
-    return s / 4294967296;
+import {
+  hash32,
+  makePrng,
+  hslToRgb,
+  makeValueNoiseSampler,
+  generateNoisePixels
+} from "@ewanc26/noise";
+import { renderNoise, noiseAction } from "@ewanc26/noise";
+function toRenderOptions(opts) {
+  const colorMode = {
+    type: "hsl",
+    hueRange: opts.hueRange,
+    saturationRange: opts.saturationRange,
+    lightnessRange: opts.lightnessRange
   };
-}
-function hslToRgb(h, s, l) {
-  const a = s * Math.min(l, 1 - l);
-  const f = (n) => {
-    const k = (n + h * 12) % 12;
-    return l - a * Math.max(-1, Math.min(k - 3, 9 - k, 1));
+  return {
+    size: opts.displaySize ?? 64,
+    gridSize: opts.gridSize,
+    colorMode
   };
-  return [Math.round(f(0) * 255), Math.round(f(8) * 255), Math.round(f(4) * 255)];
-}
-function smoothstep(t) {
-  return t * t * (3 - 2 * t);
 }
 function renderNoiseAvatar(canvas, seed, options = {}) {
-  const {
-    gridSize = 5,
-    displaySize = 64,
-    hueRange = 60,
-    saturationRange = [45, 70],
-    lightnessRange = [40, 70]
-  } = options;
-  canvas.width = displaySize;
-  canvas.height = displaySize;
-  const ctx = canvas.getContext("2d");
-  if (!ctx) return;
-  const seedNum = hash32(seed);
-  const rng = makePrng(seedNum);
-  const baseHue = seedNum % 360;
-  const G = gridSize + 1;
-  const grid = Array.from({ length: G * G }, () => rng());
-  const gridVal = (gx, gy) => grid[gy * G + gx];
-  const imageData = ctx.createImageData(displaySize, displaySize);
-  for (let py = 0; py < displaySize; py++) {
-    for (let px = 0; px < displaySize; px++) {
-      const fx = px / displaySize * gridSize;
-      const fy = py / displaySize * gridSize;
-      const gx = Math.floor(fx);
-      const gy = Math.floor(fy);
-      const tx = smoothstep(fx - gx);
-      const ty = smoothstep(fy - gy);
-      const v = (1 - ty) * ((1 - tx) * gridVal(gx, gy) + tx * gridVal(gx + 1, gy)) + ty * ((1 - tx) * gridVal(gx, gy + 1) + tx * gridVal(gx + 1, gy + 1));
-      const hue = (baseHue + v * hueRange) % 360;
-      const sat = saturationRange[0] + v * (saturationRange[1] - saturationRange[0]);
-      const light = lightnessRange[0] + v * (lightnessRange[1] - lightnessRange[0]);
-      const [r, g, b] = hslToRgb(hue / 360, sat / 100, light / 100);
-      const i = (py * displaySize + px) * 4;
-      imageData.data[i] = r;
-      imageData.data[i + 1] = g;
-      imageData.data[i + 2] = b;
-      imageData.data[i + 3] = 255;
-    }
-  }
-  ctx.putImageData(imageData, 0, 0);
+  renderNoise(canvas, seed, toRenderOptions(options));
 }
-function noiseAvatarAction(canvas, seed, options) {
-  renderNoiseAvatar(canvas, seed, options);
+function noiseAvatarAction(canvas, seed, options = {}) {
+  const params = { seed, ...toRenderOptions(options) };
+  const action = noiseAction(canvas, params);
   return {
     update(newSeed) {
-      renderNoiseAvatar(canvas, newSeed, options);
+      action.update({ seed: newSeed, ...toRenderOptions(options) });
     }
   };
 }
 export {
+  generateNoisePixels,
   hash32,
   hslToRgb,
   makePrng,
+  makeValueNoiseSampler,
   noiseAvatarAction,
   renderNoiseAvatar
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ewanc26/noise-avatar",
-  "version": "0.1.0",
-  "description": "Deterministic value-noise avatar generation from a string seed. Zero dependencies, works in browsers and Node.js.",
+  "version": "0.2.1",
+  "description": "Deterministic value-noise avatar generation from a string seed. Thin wrapper around @ewanc26/noise. Zero extra dependencies, works in any environment with a Canvas API.",
   "author": "Ewan Croft",
   "license": "AGPL-3.0-only",
   "type": "module",
@@ -26,8 +26,11 @@
     "canvas",
     "deterministic"
   ],
+  "dependencies": {
+    "@ewanc26/noise": "^0.1.1"
+  },
   "devDependencies": {
-    "tsup": "^8.5.0",
+    "tsup": "^8.5.1",
     "typescript": "^5.9.3"
   },
   "publishConfig": {