{
  "path": "/projects/noise",
  "site": "at://did:plc:ofrbh253gwicbkc5nktqepol/site.standard.publication/3mfyq5mpohw25",
  "tags": [
    "pkgs",
    "typescript",
    "website"
  ],
  "$type": "site.standard.document",
  "title": "@ewanc26/noise",
  "description": "Generic deterministic value-noise generation. Arbitrary dimensions, multi-octave FBM, multiple colour modes. Zero dependencies, works in browsers and Node.js.",
  "publishedAt": "2026-03-13T00:00:00.000Z",
  "textContent": "@ewanc26/noise is the underlying noise engine extracted from @ewanc26/noise-avatar. It generates deterministic value-noise pixel data from an arbitrary string seed — same seed always produces the same output. It supports arbitrary canvas dimensions, multi-octave fractal Brownian motion (FBM), and several colour modes. Zero runtime dependencies; works anywhere with a Uint8ClampedArray — browsers, Node.js, and workers.\n\nPart of the @ewanc26/pkgs monorepo.\n\nInstall\n\nShips as both ESM and CJS with full TypeScript type definitions.\n\nUsage\n\nRaw pixels (no DOM required)\n\nCanvas\n\nSvelte action\n\nThe action re-renders reactively whenever params changes.\n\nAPI\n\ngenerateNoisePixels(width, height, seed, options?)\n\nGenerates raw RGBA pixel data with no canvas or DOM required. Returns a Uint8ClampedArray of length width  height  4.\n\nrenderNoise(canvas, seed, options?)\n\nRenders noise onto an existing HTMLCanvasElement, resizing it to width/height/size first.\n\nnoiseAction(canvas, params)\n\nSvelte action wrapper around renderNoise. Params: { seed, ...NoiseOptions, width?, height?, size? }.\n\nNoise options\n\n| Option | Type | Default | Description |\n|---|---|---|---|\n| gridSize | number | 5 | Noise grid resolution |\n| octaves | number | 1 | FBM octave count — 1 = plain value noise |\n| persistence | number | 0.5 | FBM amplitude falloff per octave |\n| lacunarity | number | 2 | FBM frequency multiplier per octave |\n| colorMode | ColorMode | { type: 'hsl' } | How noise values map to colours |\n\nRender options\n\n| Option | Type | Default | Description |\n|---|---|---|---|\n| width | number | 64 | Canvas width in pixels |\n| height | number | 64 | Canvas height in pixels |\n| size | number | — | Shorthand to set width and height equally |\n\nColour modes\n\n{ type: 'hsl' } — hue is derived from the seed, and the noise value shifts hue, saturation, and lightness within configurable ranges.\n\n| Option | Type | Default |\n|---|---|---|\n| hueRange | number | 60 |\n| saturationRange | [number, number] | [45, 70] |\n| lightnessRange | [number, number] | [40, 70] |\n\n{ type: 'grayscale' } — noise value maps directly to luminance.\n\n| Option | Type | Default |\n|---|---|---|\n| range | [number, number] | [0, 255] |\n\n{ type: 'palette', colors } — noise value interpolates smoothly through an ordered list of RGB colours.\n\nCore primitives\n\n| Export | Description |\n|---|---|\n| hash32(str) | djb2 hash → unsigned 32-bit integer |\n| makePrng(seed) | Seeded LCG PRNG → () => float in [0, 1) |\n| hslToRgb(h, s, l) | HSL (components in [0, 1]) → RGB triple ([0, 255]) |\n| makeValueNoiseSampler(gridSize, rng) | Returns (nx, ny) → float in [0, 1] value-noise sampler |\n\nExamples\n\nRelation to noise-avatar\n\n@ewanc26/noise-avatar is a thin opinionated wrapper around this package. It fixes the colour mode to HSL and defaults to a square 64×64 canvas, so you don't have to think about noise options for the common avatar use-case. Use @ewanc26/noise directly when you need non-square dimensions, FBM octaves, or grayscale/palette colour modes.\n\nLicence\n\nAGPL-3.0-only — see the pkgs monorepo.",
  "canonicalUrl": "https://docs.ewancroft.uk/projects/noise"
}