@arraypress/covers 1.1.0 → 1.3.1

package/src/effects/digital.js

@@ -1,216 +0,0 @@
-/**
- * Digital damage: `chromatic` aberration (an RGB split along a direction,
- * as a filter; or radial, red and blue scaled apart toward the corners as
- * a cheap lens does, on pixels), `glitch` (channel shift, torn slices and
- * displaced blocks, seeded) and `pixelate` (square cells, or hexagons).
- *
- * @module effects/digital
- */
-
-import { num } from '../svg.js';
-import { len } from '../geometry.js';
-import { createRng } from '../rng.js';
-import { mat } from './util.js';
-import { px, pointPx, seedFor, premultiplied, unpremultiply } from './buffer.js';
-
-/**
- * `chromatic` along a direction (and `rgbSplit`): red moved `amount` (a
- * length) along `angle`, blue the other way, green kept.
- *
- * @param {import('./index.js').Effect & { kind: 'chromatic' | 'rgbSplit' }} fx
- * @param {import('../render/context.js').RenderContext} ctx
- * @returns {string}
- */
-export function chromatic(fx, ctx) {
-  const d = len(fx.amount, ctx.canvas, '0.5vmin');
-  const a = ((fx.angle ?? 0) * Math.PI) / 180;
-  const dx = Math.cos(a) * d;
-  const dy = Math.sin(a) * d;
-  /** @param {number} c @returns {string} One channel alone, at the source's alpha. */
-  const only = (c) => mat([c === 0 ? 1 : 0, 0, 0, 0, 0, 0, c === 1 ? 1 : 0, 0, 0, 0, 0, 0, c === 2 ? 1 : 0, 0, 0, 0, 0, 0, 1, 0]);
-  return `<feColorMatrix in="SourceGraphic" type="matrix" values="${only(0)}"/><feOffset dx="${num(dx)}" dy="${num(dy)}" result="cr"/>`
-    + `<feColorMatrix in="SourceGraphic" type="matrix" values="${only(1)}" result="cg"/>`
-    + `<feColorMatrix in="SourceGraphic" type="matrix" values="${only(2)}"/><feOffset dx="${num(-dx)}" dy="${num(-dy)}" result="cb"/>`
-    + '<feComposite in="cr" in2="cg" operator="arithmetic" k2="1" k3="1"/><feComposite in2="cb" operator="arithmetic" k2="1" k3="1"/>';
-}
-
-/**
- * `chromatic` with `mode: 'radial'`: red scaled out from `center` and blue
- * in, `amount` apart at the corners.
- *
- * @param {import('./buffer.js').Pixels} img
- * @param {import('./index.js').Effect & { kind: 'chromatic' }} fx
- * @param {any} ctx
- * @returns {Uint8ClampedArray}
- */
-export function chromaticRadial(img, fx, ctx) {
-  const { width: w, height: h } = img;
-  const src = premultiplied(img);
-  const [cx0, cy0] = pointPx(fx.center, img);
-  const cx = cx0 - 0.5;
-  const cy = cy0 - 0.5;
-  const reach = Math.max(Math.hypot(cx, cy), Math.hypot(w - cx, cy), Math.hypot(cx, h - cy), Math.hypot(w - cx, h - cy));
-  const k = px(fx.amount, ctx, img, '0.6vmin') / reach;
-  const out = new Uint8ClampedArray(src.length);
-  /** @param {number} x @param {number} y @param {number} c @returns {number} One channel, bilinear, edge held. */
-  const at = (x, y, c) => {
-    x = Math.min(w - 1, Math.max(0, x));
-    y = Math.min(h - 1, Math.max(0, y));
-    const x0 = x | 0;
-    const y0 = y | 0;
-    const x1 = Math.min(w - 1, x0 + 1);
-    const y1 = Math.min(h - 1, y0 + 1);
-    const fx0 = x - x0;
-    const fy0 = y - y0;
-    const top = src[(y0 * w + x0) * 4 + c] * (1 - fx0) + src[(y0 * w + x1) * 4 + c] * fx0;
-    const bot = src[(y1 * w + x0) * 4 + c] * (1 - fx0) + src[(y1 * w + x1) * 4 + c] * fx0;
-    return top + (bot - top) * fy0;
-  };
-  for (let y = 0, i = 0; y < h; y++) {
-    for (let x = 0; x < w; x++, i += 4) {
-      const dx = x - cx;
-      const dy = y - cy;
-      out[i] = at(cx + dx * (1 - k), cy + dy * (1 - k), 0);
-      out[i + 1] = src[i + 1];
-      out[i + 2] = at(cx + dx * (1 + k), cy + dy * (1 + k), 2);
-      out[i + 3] = Math.max(src[i + 3], at(cx + dx * (1 - k), cy + dy * (1 - k), 3), at(cx + dx * (1 + k), cy + dy * (1 + k), 3));
-    }
-  }
-  return img.opaque ? out : unpremultiply(out);
-}
-
-/**
- * `glitch`, seeded: the channels split by `shift` (a length), `slices`
- * of the frame torn sideways (wrapping), `blocks` copied from elsewhere,
- * some with their channels swapped; `amount` (0–1) scales it all.
- *
- * @param {import('./buffer.js').Pixels} img
- * @param {import('./index.js').Effect & { kind: 'glitch' }} fx
- * @param {any} ctx
- * @returns {Uint8ClampedArray}
- */
-export function glitch(img, fx, ctx) {
-  const { data, width: w, height: h } = img;
-  const rng = createRng(`glitch:${seedFor(fx, ctx)}`);
-  const amount = Math.min(1, Math.max(0, fx.amount ?? 0.5));
-  const shift = Math.round(px(fx.shift, ctx, img, '0.8vmin') * (0.5 + amount));
-  const wrap = (/** @type {number} */ x) => ((x % w) + w) % w;
-  // Channel split, wrapping round.
-  const out = new Uint8ClampedArray(data.length);
-  for (let y = 0; y < h; y++) {
-    const row = y * w;
-    for (let x = 0; x < w; x++) {
-      const i = (row + x) * 4;
-      out[i] = data[(row + wrap(x - shift)) * 4];
-      out[i + 1] = data[i + 1];
-      out[i + 2] = data[(row + wrap(x + shift)) * 4 + 2];
-      out[i + 3] = data[i + 3];
-    }
-  }
-  const u32 = new Uint32Array(out.buffer);
-  const line = new Uint32Array(w);
-  // Slices torn sideways.
-  const slices = fx.slices ?? Math.round(4 + 14 * amount);
-  for (let s = 0; s < slices; s++) {
-    const y0 = rng.int(0, h - 1);
-    const sh = Math.max(1, Math.round(h * rng.range(0.004, 0.06)));
-    const off = Math.round(w * rng.range(0.01, 0.22) * amount * (rng.chance() ? 1 : -1));
-    const swap = rng.chance(0.12);
-    for (let y = y0; y < Math.min(h, y0 + sh); y++) {
-      line.set(u32.subarray(y * w, y * w + w));
-      for (let x = 0; x < w; x++) u32[y * w + x] = line[wrap(x - off)];
-      if (swap) for (let x = 0; x < w; x++) { const i = (y * w + x) * 4; const r = out[i]; out[i] = out[i + 2]; out[i + 2] = out[i + 1]; out[i + 1] = r; }
-    }
-  }
-  // Blocks lifted from one place and dropped in another.
-  const blocks = fx.blocks ?? Math.round(2 + 10 * amount);
-  for (let b = 0; b < blocks; b++) {
-    const bw = Math.round(w * rng.range(0.04, 0.3));
-    const bh = Math.round(h * rng.range(0.01, 0.08));
-    const sx = rng.int(0, w - 1);
-    const sy = rng.int(0, Math.max(0, h - bh));
-    const dx = rng.int(0, w - 1);
-    const dy = Math.min(h - bh, Math.max(0, sy + Math.round(h * rng.range(-0.05, 0.05))));
-    const tone = rng.chance(0.35);
-    for (let y = 0; y < bh; y++) {
-      for (let x = 0; x < bw; x++) {
-        const v = u32[(sy + y) * w + wrap(sx + x)];
-        const o = (dy + y) * w + wrap(dx + x);
-        u32[o] = v;
-        if (tone) { const i = o * 4; out[i] = out[i] & 0xe0; out[i + 1] = out[i + 1] & 0xe0; out[i + 2] = 255 - out[i + 2]; }
-      }
-    }
-  }
-  return out;
-}
-
-/**
- * `pixelate` (and `mosaic`): cells of `size` (a length), `shape`
- * `'square'` (each the average of what it covers, embedded at one pixel a
- * cell and scaled up crisp) or `'hex'`.
- *
- * @param {import('./buffer.js').Pixels} img
- * @param {import('./index.js').Effect & { kind: 'pixelate' | 'mosaic' }} fx
- * @param {any} ctx
- * @returns {import('./pixels.js').PixelResult}
- */
-export function pixelate(img, fx, ctx) {
-  const { width: w, height: h } = img;
-  const size = Math.max(1, px(fx.size, ctx, img, '2.4vmin'));
-  const shape = fx.shape ?? 'square';
-  if (shape !== 'square' && shape !== 'hex') throw new TypeError(`Unknown pixelate shape "${shape}" (square, hex)`);
-  const src = premultiplied(img);
-  if (shape === 'square') {
-    const cols = Math.max(1, Math.round(w / size));
-    const rows = Math.max(1, Math.round(h / size));
-    const acc = new Float64Array(cols * rows * 5);
-    for (let y = 0; y < h; y++) {
-      const cy = Math.min(rows - 1, ((y * rows) / h) | 0);
-      for (let x = 0; x < w; x++) {
-        const c = (cy * cols + Math.min(cols - 1, ((x * cols) / w) | 0)) * 5;
-        const i = (y * w + x) * 4;
-        acc[c] += src[i]; acc[c + 1] += src[i + 1]; acc[c + 2] += src[i + 2]; acc[c + 3] += src[i + 3]; acc[c + 4]++;
-      }
-    }
-    const out = new Uint8ClampedArray(cols * rows * 4);
-    for (let c = 0; c < cols * rows; c++) {
-      const n = acc[c * 5 + 4] || 1;
-      for (let k = 0; k < 4; k++) out[c * 4 + k] = acc[c * 5 + k] / n;
-    }
-    return { data: img.opaque ? out : unpremultiply(out), width: cols, height: rows, pixelated: true };
-  }
-  // Pointy-top hexagons, `size` across.
-  const s = size / Math.sqrt(3);
-  const qOff = Math.ceil(h / (1.5 * s)) + 2;
-  const qn = Math.ceil(w / (Math.sqrt(3) * s)) + qOff + 4;
-  const rn = Math.ceil(h / (1.5 * s)) + 4;
-  const ids = new Int32Array(w * h);
-  const acc = new Float64Array(qn * rn * 5);
-  for (let y = 0; y < h; y++) {
-    for (let x = 0; x < w; x++) {
-      const fq = ((Math.sqrt(3) / 3) * (x + 0.5) - (y + 0.5) / 3) / s;
-      const fr = ((2 / 3) * (y + 0.5)) / s;
-      const fz = -fq - fr;
-      let q = Math.round(fq);
-      let r = Math.round(fr);
-      const z = Math.round(fz);
-      const dq = Math.abs(q - fq);
-      const dr = Math.abs(r - fr);
-      const dz = Math.abs(z - fz);
-      if (dq > dr && dq > dz) q = -r - z;
-      else if (dr > dz) r = -q - z;
-      const id = (r + 1) * qn + (q + qOff);
-      ids[y * w + x] = id;
-      const i = (y * w + x) * 4;
-      const c = id * 5;
-      acc[c] += src[i]; acc[c + 1] += src[i + 1]; acc[c + 2] += src[i + 2]; acc[c + 3] += src[i + 3]; acc[c + 4]++;
-    }
-  }
-  const out = new Uint8ClampedArray(w * h * 4);
-  for (let p = 0; p < ids.length; p++) {
-    const c = ids[p] * 5;
-    const n = acc[c + 4] || 1;
-    for (let k = 0; k < 4; k++) out[p * 4 + k] = acc[c + k] / n;
-  }
-  return { data: img.opaque ? out : unpremultiply(out), width: w, height: h, lossless: true };
-}

package/src/effects/distort.d.ts

@@ -1,20 +0,0 @@
-// Distortions on pixels.
-import type { Effect } from './index.js';
-import type { Pixels } from './buffer.js';
-
-/** `wave`. */
-export function wave(img: Pixels, fx: Extract<Effect, { kind: 'wave' }>, ctx: object): Uint8ClampedArray;
-/** `ripple`. */
-export function ripple(img: Pixels, fx: Extract<Effect, { kind: 'ripple' }>, ctx: object): Uint8ClampedArray;
-/** `twirl`. */
-export function twirl(img: Pixels, fx: Extract<Effect, { kind: 'twirl' }>, ctx: object): Uint8ClampedArray;
-/** `bulge` and `pinch`. */
-export function bulge(img: Pixels, fx: Extract<Effect, { kind: 'bulge' | 'pinch' }>, ctx: object): Uint8ClampedArray;
-/** `fisheye`. */
-export function fisheye(img: Pixels, fx: Extract<Effect, { kind: 'fisheye' }>): Uint8ClampedArray;
-/** `kaleidoscope`. */
-export function kaleidoscope(img: Pixels, fx: Extract<Effect, { kind: 'kaleidoscope' }>): Uint8ClampedArray;
-/** `glass`. */
-export function glass(img: Pixels, fx: Extract<Effect, { kind: 'glass' }>, ctx: object): Uint8ClampedArray;
-/** `displace`. */
-export function displace(img: Pixels, fx: Extract<Effect, { kind: 'displace' }>, ctx: object): Promise<Uint8ClampedArray>;

package/src/effects/distort.js

@@ -1,314 +0,0 @@
-/**
- * Distortions on pixels, each an inverse map (every output pixel reads
- * from where the distortion says it came from, bilinear, the edge held):
- * `wave`, `ripple` (rings on water), `twirl`, `bulge` and `pinch`,
- * `fisheye` (barrel distortion over the frame), `kaleidoscope` (a wedge
- * folded round a centre, the frame filled by reflection), `glass`
- * (frosted, reeded or pebbled glass in front of the layer) and `displace`
- * (by seeded noise, or by the luminance of layers: a texture, a photo,
- * type).
- *
- * @module effects/distort
- */
-
-import { px, pointPx, remap, noiseField, seedFor, gaussian, luma, smoothstep } from './buffer.js';
-import { drawLayer } from './pixels.js';
-
-/** @param {any} fx @param {import('./buffer.js').Pixels} img @returns {[number, number]} The centre in pixel coordinates. */
-const centre = (fx, img) => { const [x, y] = pointPx(fx.center, img); return [x - 0.5, y - 0.5]; };
-
-/** Wave shapes, one period over 0–1, -1–1. @type {Record<string, (t: number) => number>} */
-const WAVES = {
-  sine: (t) => Math.sin(2 * Math.PI * t),
-  triangle: (t) => 1 - 4 * Math.abs(t - Math.floor(t + 0.5)),
-  square: (t) => (t - Math.floor(t) < 0.5 ? 1 : -1),
-};
-
-/**
- * `wave`: the layer displaced across a wave travelling at `angle`
- * (degrees, 0 along x): `amplitude`, `wavelength`, `phase` (0–1 of a
- * period), `shape` (`'sine'`, `'triangle'`, `'square'`).
- *
- * @param {import('./buffer.js').Pixels} img
- * @param {import('./index.js').Effect & { kind: 'wave' }} fx
- * @param {any} ctx
- * @returns {Uint8ClampedArray}
- */
-export function wave(img, fx, ctx) {
-  const A = px(fx.amplitude, ctx, img, '1.5vmin');
-  const L = Math.max(1, px(fx.wavelength, ctx, img, '14vmin'));
-  const shape = WAVES[fx.shape ?? 'sine'];
-  if (!shape) throw new TypeError(`Unknown wave shape "${fx.shape}" (${Object.keys(WAVES).join(', ')})`);
-  const a = ((fx.angle ?? 0) * Math.PI) / 180;
-  const ux = Math.cos(a);
-  const uy = Math.sin(a);
-  const ph = fx.phase ?? 0;
-  return remap(img, (x, y, at) => {
-    const d = A * shape((x * ux + y * uy) / L + ph);
-    at[0] = x - uy * d;
-    at[1] = y + ux * d;
-  });
-}
-
-/**
- * `ripple`: rings on water round `center`: `amplitude`, `wavelength`,
- * `phase`, fading out by `radius`.
- *
- * @param {import('./buffer.js').Pixels} img
- * @param {import('./index.js').Effect & { kind: 'ripple' }} fx
- * @param {any} ctx
- * @returns {Uint8ClampedArray}
- */
-export function ripple(img, fx, ctx) {
-  const [cx, cy] = centre(fx, img);
-  const A = px(fx.amplitude, ctx, img, '0.8vmin');
-  const L = Math.max(1, px(fx.wavelength, ctx, img, '6vmin'));
-  const R = Math.max(1, px(fx.radius, ctx, img, '70vmin'));
-  const ph = fx.phase ?? 0;
-  return remap(img, (x, y, at) => {
-    const dx = x - cx;
-    const dy = y - cy;
-    const r = Math.sqrt(dx * dx + dy * dy) || 1e-6;
-    const d = A * Math.sin(2 * Math.PI * (r / L - ph)) * (1 - smoothstep(0, R, r));
-    at[0] = x + (dx / r) * d;
-    at[1] = y + (dy / r) * d;
-  });
-}
-
-/**
- * `twirl`: turned `angle` degrees at `center`, less and less out to
- * `radius`, where it stops.
- *
- * @param {import('./buffer.js').Pixels} img
- * @param {import('./index.js').Effect & { kind: 'twirl' }} fx
- * @param {any} ctx
- * @returns {Uint8ClampedArray}
- */
-export function twirl(img, fx, ctx) {
-  const [cx, cy] = centre(fx, img);
-  const R = Math.max(1, px(fx.radius, ctx, img, '45vmin'));
-  const turn = ((fx.angle ?? 180) * Math.PI) / 180;
-  return remap(img, (x, y, at) => {
-    const dx = x - cx;
-    const dy = y - cy;
-    const r = Math.sqrt(dx * dx + dy * dy);
-    if (r >= R) { at[0] = x; at[1] = y; return; }
-    const k = 1 - r / R;
-    const t = -turn * k * k;
-    const c = Math.cos(t);
-    const s = Math.sin(t);
-    at[0] = cx + dx * c - dy * s;
-    at[1] = cy + dx * s + dy * c;
-  });
-}
-
-/**
- * `bulge` and `pinch`: magnified (or shrunk) toward `center` within
- * `radius`, by `amount` (0–1; `pinch` is a bulge the other way), smooth at
- * the edge.
- *
- * @param {import('./buffer.js').Pixels} img
- * @param {import('./index.js').Effect & { kind: 'bulge' | 'pinch' }} fx
- * @param {any} ctx
- * @returns {Uint8ClampedArray}
- */
-export function bulge(img, fx, ctx) {
-  const [cx, cy] = centre(fx, img);
-  const R = Math.max(1, px(fx.radius, ctx, img, '35vmin'));
-  const amt = (fx.kind === 'pinch' ? -1 : 1) * (fx.amount ?? 0.5);
-  const a = Math.max(-1, Math.min(0.95, amt));
-  return remap(img, (x, y, at) => {
-    const dx = x - cx;
-    const dy = y - cy;
-    const d = Math.sqrt(dx * dx + dy * dy) / R;
-    if (d >= 1) { at[0] = x; at[1] = y; return; }
-    const f = 1 - a * (1 - d) * (1 - d);
-    at[0] = cx + dx * f;
-    at[1] = cy + dy * f;
-  });
-}
-
-/**
- * `fisheye`: barrel distortion over the whole frame, `amount` 0–1 (the
- * centre swells, the edges bow; the corners stay put).
- *
- * @param {import('./buffer.js').Pixels} img
- * @param {import('./index.js').Effect & { kind: 'fisheye' }} fx
- * @returns {Uint8ClampedArray}
- */
-export function fisheye(img, fx) {
-  const [cx, cy] = centre(fx, img);
-  const Rn = Math.hypot(img.width, img.height) / 2;
-  const th = Math.max(1e-3, Math.min(0.99, fx.amount ?? 0.6)) * (Math.PI / 2) * 0.92;
-  const norm = 1 / Math.tan(th);
-  return remap(img, (x, y, at) => {
-    const dx = x - cx;
-    const dy = y - cy;
-    const r = Math.sqrt(dx * dx + dy * dy);
-    if (!r) { at[0] = x; at[1] = y; return; }
-    const f = (Math.tan((r / Rn) * th) * norm * Rn) / r;
-    at[0] = cx + dx * f;
-    at[1] = cy + dy * f;
-  });
-}
-
-/** @param {number} v @param {number} n @returns {number} A coordinate reflected back into 0–(n-1). */
-function reflect(v, n) {
-  const p = 2 * (n - 1) || 1;
-  const m = ((v % p) + p) % p;
-  return m > n - 1 ? p - m : m;
-}
-
-/**
- * `kaleidoscope`: the wedge of `360 / segments` from `angle` (degrees, 0 =
- * right, clockwise; default up) round `center`, folded round it with every
- * other copy reflected; `scale` zooms the source (below 1 shows more of
- * it). Beyond the layer's edge the source is reflected, so the frame fills.
- *
- * @param {import('./buffer.js').Pixels} img
- * @param {import('./index.js').Effect & { kind: 'kaleidoscope' }} fx
- * @returns {Uint8ClampedArray}
- */
-export function kaleidoscope(img, fx) {
-  const { width: w, height: h } = img;
-  const [cx, cy] = centre(fx, img);
-  const n = Math.max(2, Math.round(fx.segments ?? 8));
-  const phi = (2 * Math.PI) / n;
-  const a0 = ((fx.angle ?? -90) * Math.PI) / 180;
-  const k = 1 / Math.max(0.05, fx.scale ?? 1);
-  return remap(img, (x, y, at) => {
-    const dx = x - cx;
-    const dy = y - cy;
-    const r = Math.sqrt(dx * dx + dy * dy) * k;
-    let t = (Math.atan2(dy, dx) - a0) % (2 * phi);
-    if (t < 0) t += 2 * phi;
-    if (t > phi) t = 2 * phi - t;
-    at[0] = reflect(cx + r * Math.cos(a0 + t), w);
-    at[1] = reflect(cy + r * Math.sin(a0 + t), h);
-  });
-}
-
-/**
- * `glass`: the layer through glass. `texture` `'frosted'` (fine scatter),
- * `'reeded'` (fluted ribs `size` wide at `angle`, each a narrow lens, with
- * `shade` on their edges) or `'pebbled'` (soft rounded lumps); `amount`
- * is how far light bends, `seed` the texture.
- *
- * @param {import('./buffer.js').Pixels} img
- * @param {import('./index.js').Effect & { kind: 'glass' }} fx
- * @param {any} ctx
- * @returns {Uint8ClampedArray}
- */
-export function glass(img, fx, ctx) {
-  const { width: w, height: h } = img;
-  const texture = fx.texture ?? 'frosted';
-  if (texture === 'reeded') return reeded(img, fx, ctx);
-  if (texture !== 'frosted' && texture !== 'pebbled') throw new TypeError(`Unknown glass texture "${texture}" (frosted, reeded, pebbled)`);
-  const frosted = texture === 'frosted';
-  const size = Math.max(1, px(fx.size, ctx, img, frosted ? '0.25vmin' : '5vmin'));
-  const amount = px(fx.amount, ctx, img, frosted ? '0.7vmin' : '1.6vmin');
-  const seed = seedFor(fx, ctx);
-  const nx = noiseField(w, h, size, seed, frosted ? 2 : 3);
-  const ny = noiseField(w, h, size, seed + 7919, frosted ? 2 : 3);
-  const out = remap(img, (x, y, at) => {
-    const i = y * w + x;
-    at[0] = x + nx[i] * amount;
-    at[1] = y + ny[i] * amount;
-  });
-  // Frost also scatters: a touch of softness.
-  return frosted ? gaussian(out, w, h, 4, Math.max(0.5, size * 0.4)) : out;
-}
-
-/**
- * Reeded (fluted) glass: ribs, each a cylinder lens that shows its strip
- * of the layer narrowed (and, past `amount` 0.5, mirrored), lit at its
- * edges by `shade`.
- *
- * @param {import('./buffer.js').Pixels} img
- * @param {any} fx
- * @param {any} ctx
- * @returns {Uint8ClampedArray}
- */
-function reeded(img, fx, ctx) {
-  const size = Math.max(2, px(fx.size, ctx, img, '3.2vmin'));
-  const k = 1 - 2 * Math.min(1, Math.max(0, fx.amount ?? 0.35));
-  const shade = fx.shade ?? 0.25;
-  const a = ((fx.angle ?? 0) * Math.PI) / 180;
-  const ux = Math.cos(a);
-  const uy = Math.sin(a);
-  const out = remap(img, (x, y, at) => {
-    const s = (x * ux + y * uy) / size;
-    const u = s - Math.floor(s) - 0.5;
-    const d = (u * k - u) * size;
-    at[0] = x + ux * d;
-    at[1] = y + uy * d;
-  });
-  const { width: w, height: h } = img;
-  // Fluted glass is never quite sharp.
-  gaussian(out, w, h, 4, size * 0.05);
-  if (!shade) return out;
-  for (let y = 0, i = 0; y < h; y++) {
-    for (let x = 0; x < w; x++, i += 4) {
-      const s = (x * ux + y * uy) / size;
-      const u = s - Math.floor(s) - 0.5;
-      // Bright on one shoulder, dark in the groove.
-      const l = 1 + shade * (0.6 * Math.sin(u * Math.PI * 2 + 0.6) - 0.8 * Math.abs(u) ** 3 * 8 + 0.3);
-      out[i] *= l; out[i + 1] *= l; out[i + 2] *= l;
-    }
-  }
-  return out;
-}
-
-/**
- * `displace`: moved by a map, `amount` at most. The map is seeded noise
- * (`size`, `octaves`, `seed`) or `map: { layers }`, their luminance
- * (`mode: 'gradient'`, the default, bends the layer along the map's
- * slopes like light through a surface; `'channels'` moves by red along x
- * and green along y, as Photoshop's Displace).
- *
- * @param {import('./buffer.js').Pixels} img
- * @param {import('./index.js').Effect & { kind: 'displace' }} fx
- * @param {any} ctx
- * @returns {Promise<Uint8ClampedArray>}
- */
-export async function displace(img, fx, ctx) {
-  const { width: w, height: h } = img;
-  const amount = px(fx.amount, ctx, img, '2vmin');
-  /** @type {Float32Array} */
-  let dx;
-  /** @type {Float32Array} */
-  let dy;
-  if (fx.map?.layers && ctx.stack) {
-    const parts = await ctx.stack(fx.map.layers, { tag: 'dm' });
-    const m = await drawLayer({ defs: parts.map((/** @type {any} */ p) => p.defs).join(''), body: parts.map((/** @type {any} */ p) => p.body).join('') }, ctx, w, h);
-    if (!m) return img.data;
-    dx = new Float32Array(w * h);
-    dy = new Float32Array(w * h);
-    if (fx.mode === 'channels') {
-      for (let i = 0, p = 0; p < dx.length; i += 4, p++) { dx[p] = (m[i] - 128) / 128; dy[p] = (m[i + 1] - 128) / 128; }
-    } else {
-      const l = new Float32Array(w * h);
-      for (let i = 0, p = 0; p < l.length; i += 4, p++) l[p] = (luma(m, i) * m[i + 3]) / (255 * 255);
-      gaussian(l, w, h, 1, Math.max(1, amount / 6));
-      // Slopes, scaled so a full-height edge moves `amount`.
-      const k = Math.max(1, amount / 2);
-      for (let y = 0; y < h; y++) {
-        for (let x = 0; x < w; x++) {
-          const p = y * w + x;
-          dx[p] = (l[y * w + Math.min(w - 1, x + 1)] - l[y * w + Math.max(0, x - 1)]) * k;
-          dy[p] = (l[Math.min(h - 1, y + 1) * w + x] - l[Math.max(0, y - 1) * w + x]) * k;
-        }
-      }
-    }
-  } else {
-    const size = Math.max(1, px(fx.size, ctx, img, '12vmin'));
-    const seed = seedFor(fx, ctx);
-    dx = noiseField(w, h, size, seed, fx.octaves ?? 3);
-    dy = noiseField(w, h, size, seed + 7919, fx.octaves ?? 3);
-  }
-  return remap(img, (x, y, at) => {
-    const p = y * w + x;
-    at[0] = x + dx[p] * amount;
-    at[1] = y + dy[p] * amount;
-  });
-}

package/src/effects/dither.d.ts

@@ -1,8 +0,0 @@
-// An ordered (Bayer) dither.
-import type { Effect } from './index.js';
-import type { RenderContext, Markup } from '../render/context.js';
-
-/** The `dither` effect's filter primitives. */
-export function dither(fx: Extract<Effect, { kind: 'dither' }>, ctx: RenderContext): string;
-/** The dither on pixels (the layer drawn once per cell, thresholded, embedded nearest-neighbour); undefined where nothing can rasterise. */
-export function ditherRaster(fx: Extract<Effect, { kind: 'dither' }>, m: Markup, ctx: RenderContext, id: string): Promise<Markup | undefined>;