@arraypress/covers 1.1.0 → 1.4.0

package/src/effects/optics.d.ts

@@ -1,10 +0,0 @@
-// Light on the lens and the film.
-import type { Effect } from './index.js';
-import type { RenderContext } from '../render/context.js';
-
-/** The `vignette` effect's filter primitives. */
-export function vignette(fx: Extract<Effect, { kind: 'vignette' }>, ctx: RenderContext): string;
-/** The `lightLeak` effect's filter primitives. */
-export function lightLeak(fx: Extract<Effect, { kind: 'lightLeak' }>, ctx: RenderContext): string;
-/** The `lensFlare` effect's filter primitives. */
-export function lensFlare(fx: Extract<Effect, { kind: 'lensFlare' }>, ctx: RenderContext): string;

package/src/effects/optics.js

@@ -1,213 +0,0 @@
-/**
- * Light on the lens and the film, as SVG filters: `vignette` (edges
- * darkened, or lightened, by shape, size, softness and colour),
- * `lightLeak` (warm light fogging the film from an edge) and `lensFlare`
- * (a soft glow at the light, ghosts along the line through the centre,
- * an optional anamorphic streak).
- *
- * Their light is drawn from small greyscale images (a radial falloff
- * computed here) that the filter scales and tints, so they stay smooth at
- * any size and cost no more at 3000 px than at 300.
- *
- * @module effects/optics
- */
-
-import { attrs, num } from '../svg.js';
-import { len } from '../geometry.js';
-import { encodePng, pngUri } from '../png.js';
-import { createRng } from '../rng.js';
-import { rgb, mat } from './util.js';
-import { fraction, smoothstep } from './buffer.js';
-
-/** @type {Map<string, string>} */
-const SPRITES = new Map();
-
-/**
- * A greyscale sprite from a radial profile, cached: `profile(r)` for r
- * from 0 (centre) to 1 (edge of the square).
- *
- * @param {string} key
- * @param {(r: number) => number} profile
- * @param {number} [size=96]
- * @param {number} [aspect=1] - Width over height of the sprite's pixels.
- * @returns {string} A data URI.
- */
-function sprite(key, profile, size = 96, aspect = 1) {
-  const id = `${key}:${size}:${aspect}`;
-  const hit = SPRITES.get(id);
-  if (hit) return hit;
-  const w = Math.round(size * Math.max(1, aspect));
-  const h = Math.round(size / Math.min(1, aspect));
-  const px = new Uint8Array(w * h);
-  for (let y = 0; y < h; y++) {
-    for (let x = 0; x < w; x++) {
-      const r = Math.hypot(((x + 0.5) / w) * 2 - 1, ((y + 0.5) / h) * 2 - 1);
-      px[y * w + x] = Math.round(255 * Math.min(1, Math.max(0, profile(r))));
-    }
-  }
-  const uri = pngUri(encodePng(px, w, h, 1));
-  SPRITES.set(id, uri);
-  return uri;
-}
-
-/** The sprites flares and leaks are drawn from. */
-const GLOW = () => sprite('glow', (r) => Math.exp(-6 * r * r) * (1 - smoothstep(0.85, 1, r)));
-const GHOST = () => sprite('ghost', (r) => (1 - smoothstep(0.78, 0.96, r)) * (0.55 + 0.45 * smoothstep(0.3, 0.9, r)));
-const RING = () => sprite('ring', (r) => Math.exp(-(((r - 0.86) / 0.05) ** 2)));
-const SOFT = () => sprite('soft', (r) => 1 - smoothstep(0, 1, r));
-const STREAK = () => sprite('streak', (r) => Math.exp(-5 * r * r) * (1 - smoothstep(0.9, 1, r)), 64, 8);
-
-/**
- * One sprite placed and tinted: an feImage over a box, its grey becoming
- * the alpha of a colour (light, for adding up).
- *
- * @param {string} href
- * @param {{ x: number, y: number, width: number, height: number }} box
- * @param {[number, number, number]} c - 0–1 channels.
- * @param {number} o - Opacity.
- * @param {string} result
- * @returns {string}
- */
-function light(href, box, c, o, result) {
-  return `<feImage${attrs({ href, ...box, preserveAspectRatio: 'none' })}/>`
-    + `<feColorMatrix type="matrix" values="${mat([0, 0, 0, 0, c[0], 0, 0, 0, 0, c[1], 0, 0, 0, 0, c[2], o, 0, 0, 0, 0])}" color-interpolation-filters="sRGB" result="${result}"/>`;
-}
-
-/**
- * Lights added together, screened over the layer and kept to its shape.
- *
- * @param {string[]} names - Their results.
- * @returns {string}
- */
-function screenOn(names) {
-  let out = '';
-  let acc = names[0];
-  for (let i = 1; i < names.length; i++) {
-    out += `<feComposite in="${acc}" in2="${names[i]}" operator="arithmetic" k2="1" k3="1" result="la${i}"/>`;
-    acc = `la${i}`;
-  }
-  return `${out}<feBlend in="${acc}" in2="SourceGraphic" mode="screen"/><feComposite in2="SourceAlpha" operator="in"/>`;
-}
-
-/**
- * `vignette`: `shape` (`'ellipse'` following the canvas, `'circle'`, or
- * `'rect'`, a soft rounded rectangle), `size` (where it starts, 0–1 of
- * the way to the corners), `softness` (0–1), `amount` (0–1) and `color`
- * (black; white for a faded print), about `center`.
- *
- * @param {import('./index.js').Effect & { kind: 'vignette' }} fx
- * @param {import('../render/context.js').RenderContext} ctx
- * @returns {string}
- */
-export function vignette(fx, ctx) {
-  const { width: W, height: H } = ctx;
-  const shape = fx.shape ?? 'ellipse';
-  if (!['ellipse', 'circle', 'rect'].includes(shape)) throw new TypeError(`Unknown vignette shape "${shape}" (ellipse, circle, rect)`);
-  const size = fx.size ?? 0.55;
-  const soft = Math.max(0.02, fx.softness ?? 0.6);
-  const [cx, cy] = fraction(/** @type {any} */ (fx.center), [0.5, 0.5]);
-  // The image covers the canvas; distance 1 is a corner (from the centre).
-  const n = 128;
-  const ax = shape === 'circle' ? Math.max(W, H) / Math.hypot(W, H) * Math.SQRT2 : 1;
-  const px = new Uint8Array(n * n);
-  for (let j = 0; j < n; j++) {
-    for (let i = 0; i < n; i++) {
-      let u = ((i + 0.5) / n - cx) * 2;
-      let v = ((j + 0.5) / n - cy) * 2;
-      if (shape === 'circle') { u *= (W / Math.max(W, H)) * ax; v *= (H / Math.max(W, H)) * ax; }
-      const d = shape === 'rect' ? (Math.abs(u) ** 6 + Math.abs(v) ** 6) ** (1 / 6) : Math.hypot(u, v) / Math.SQRT2;
-      px[j * n + i] = Math.round(255 * smoothstep(size, size + soft * (1.15 - size) + 0.05, d));
-    }
-  }
-  const [r, g, b] = rgb(fx.color ?? '#000000');
-  const a = fx.amount ?? 0.6;
-  return `<feImage${attrs({ href: pngUri(encodePng(px, n, n, 1)), x: 0, y: 0, width: W, height: H, preserveAspectRatio: 'none' })}/>`
-    + `<feColorMatrix type="matrix" values="${mat([0, 0, 0, 0, r, 0, 0, 0, 0, g, 0, 0, 0, 0, b, a, 0, 0, 0, 0])}" color-interpolation-filters="sRGB" result="vg"/>`
-    + '<feComposite in="vg" in2="SourceGraphic" operator="atop"/>';
-}
-
-/**
- * `lightLeak`: warm light fogging the film from an `edge` (`'left'`,
- * `'right'`, `'top'`, `'bottom'`, or seeded), a few soft blobs in
- * `colors`, screened on at `intensity`.
- *
- * @param {import('./index.js').Effect & { kind: 'lightLeak' }} fx
- * @param {import('../render/context.js').RenderContext} ctx
- * @returns {string}
- */
-export function lightLeak(fx, ctx) {
-  const { width: W, height: H } = ctx;
-  const rng = createRng(`leak:${fx.seed ?? ctx.rng.int(1, 9999)}`);
-  const edge = fx.edge ?? rng.pick(['left', 'right', 'top', 'bottom']);
-  if (!['left', 'right', 'top', 'bottom'].includes(edge)) throw new TypeError(`Unknown lightLeak edge "${edge}" (left, right, top, bottom)`);
-  const colors = (fx.colors ?? ['#ff4d1a', '#ff9a2e', '#ffd36b', '#ff2a5c']).map(rgb);
-  const k = fx.intensity ?? 0.85;
-  const across = edge === 'left' || edge === 'right';
-  const long = across ? H : W;
-  const short = across ? W : H;
-  const count = 3 + rng.int(0, 2);
-  let out = '';
-  const names = [];
-  for (let i = 0; i < count; i++) {
-    const along = rng.range(-0.1, 1.1) * long;
-    const depth = rng.range(-0.18, 0.12) * short;
-    const rl = rng.range(0.35, 0.75) * long;
-    const rs = rng.range(0.25, 0.55) * short * (i === 0 ? 1.4 : 1);
-    const x = across ? (edge === 'left' ? depth : W - depth) : along;
-    const y = across ? along : (edge === 'top' ? depth : H - depth);
-    const box = across ? { x: x - rs, y: y - rl, width: 2 * rs, height: 2 * rl } : { x: x - rl, y: y - rs, width: 2 * rl, height: 2 * rs };
-    out += light(SOFT(), box, colors[i % colors.length], k * rng.range(0.55, 1), `lk${i}`);
-    names.push(`lk${i}`);
-  }
-  // The hot core at the very edge.
-  const core = across ? { x: (edge === 'left' ? 0 : W) - short * 0.12, y: rng.range(0.1, 0.6) * H, width: short * 0.24, height: H * 0.5 } : { x: rng.range(0.1, 0.6) * W, y: (edge === 'top' ? 0 : H) - short * 0.12, width: W * 0.5, height: short * 0.24 };
-  out += light(GLOW(), core, [1, 0.85, 0.62], k * 0.55, 'lkc');
-  names.push('lkc');
-  return out + screenOn(names);
-}
-
-/**
- * `lensFlare`: a light at `at` (fractions), its glow (`size`), a faint
- * halo ring, ghosts along the line through the centre (seeded sizes and
- * tints), an anamorphic `streak` when asked, all at `intensity` and
- * tinted toward `color`.
- *
- * @param {import('./index.js').Effect & { kind: 'lensFlare' }} fx
- * @param {import('../render/context.js').RenderContext} ctx
- * @returns {string}
- */
-export function lensFlare(fx, ctx) {
-  const { width: W, height: H } = ctx;
-  const rng = createRng(`flare:${fx.seed ?? ctx.rng.int(1, 9999)}`);
-  const [fx0, fy0] = fraction(/** @type {any} */ (fx.at), [0.78, 0.22]);
-  const sx = fx0 * W;
-  const sy = fy0 * H;
-  const size = len(fx.size, ctx.canvas, '22vmin');
-  const k = fx.intensity ?? 0.8;
-  const tint = rgb(fx.color ?? '#ffd9a8');
-  /** @param {number} r @returns {[number, number, number]} A tint nudged toward a hue. */
-  const nudge = (r) => /** @type {[number, number, number]} */ (tint.map((v, i) => Math.min(1, v * (0.7 + 0.6 * [r, 1 - r, 0.5 + r / 2][i]))));
-  const box = (/** @type {number} */ x, /** @type {number} */ y, /** @type {number} */ r) => ({ x: x - r, y: y - r, width: 2 * r, height: 2 * r });
-  let out = light(GLOW(), box(sx, sy, size), tint, k, 'f0');
-  const names = ['f0'];
-  out += light(GLOW(), box(sx, sy, size * 0.22), [1, 1, 1], k, 'f1');
-  names.push('f1');
-  out += light(RING(), box(sx, sy, size * 1.6), nudge(0.7), k * 0.12, 'f2');
-  names.push('f2');
-  // Ghosts: along the line from the light through the centre and beyond.
-  const dx = W / 2 - sx;
-  const dy = H / 2 - sy;
-  const ghosts = fx.ghosts ?? 6;
-  for (let i = 0; i < ghosts; i++) {
-    const t = [0.35, 0.62, 0.9, 1.25, 1.55, 1.9, 2.2, 0.15][i % 8] + rng.range(-0.05, 0.05);
-    const r = size * rng.range(0.07, 0.32);
-    out += light(GHOST(), box(sx + dx * t, sy + dy * t, r), nudge(rng.next()), k * rng.range(0.05, 0.16), `g${i}`);
-    names.push(`g${i}`);
-  }
-  if (fx.streak) {
-    const s = typeof fx.streak === 'number' ? fx.streak : 1;
-    out += light(STREAK(), { x: sx - W * 0.7 * s, y: sy - size * 0.06, width: W * 1.4 * s, height: size * 0.12 }, [0.75, 0.85, 1], k * 0.7, 'fs');
-    names.push('fs');
-  }
-  return out + screenOn(names);
-}

package/src/effects/options.d.ts

@@ -1,6 +0,0 @@
-// Every effect kind's options, with descriptions.
-
-/** Options every effect takes. */
-export const EFFECT_COMMON: Readonly<Record<string, string>>;
-/** Each kind's options: name → description. */
-export const EFFECT_OPTIONS: Readonly<Record<string, Readonly<Record<string, string>>>>;

package/src/effects/options.js

@@ -1,106 +0,0 @@
-/**
- * Every effect kind's options, with one-line descriptions. `defineRecipe`
- * rejects kinds and options not listed here, `scripts/schema.mjs` builds
- * the JSON Schema's autocomplete from it, and the README's table follows
- * it. Add an option to an effect, add it here.
- *
- * @module effects/options
- */
-
-/** Options every effect takes. @type {Record<string, string>} */
-export const EFFECT_COMMON = {
-  kind: 'The effect.',
-  mask: '{ gradient: linear | radial | band, from, to, center, angle, aspect, invert, ease } or { layers, invert }: where the effect applies.',
-  colorSpace: 'sRGB (default) | linearRGB: where filter primitives do their arithmetic.',
-  pad: 'Filter region padding, a fraction of the canvas.',
-};
-
-const BLUR_CENTRE = 'Centre, [x, y] fractions. Default [0.5, 0.5].';
-
-/** @type {Record<string, Record<string, string>>} */
-export const EFFECT_OPTIONS = {
-  // 1.1's first set.
-  blur: { radius: 'Length.', x: 'Length (an axis-aligned blur).', y: 'Length.', edge: 'duplicate: hold the edge.' },
-  motion: { angle: 'Degrees.', length: 'Length: the blur along the angle (a standard deviation).', spread: 'Length across.' },
-  shadow: { x: 'Length.', y: 'Length.', blur: 'Length.', color: 'Colour.', opacity: '0–1.', spread: 'Length.' },
-  glow: { x: 'Length.', y: 'Length.', blur: 'Length.', color: 'Colour.', opacity: '0–1.', spread: 'Length.' },
-  border: { width: 'Length.', color: 'Colour.', line: 'true or a colour: the cut line.', lineWidth: 'Length.', shape: 'die | circle', cx: 'Length.', cy: 'Length.' },
-  wear: { rough: 'Length.', uneven: '0–1.', specks: '0–1.', seed: 'Number.' },
-  rough: { scale: 'Length.', frequency: 'Number or [x, y].', octaves: 'Number.', seed: 'Number.' },
-  warp: { scale: 'Length.', frequency: 'Number or [x, y].', octaves: 'Number.', seed: 'Number.' },
-  xerox: { rough: 'Length.', dropout: '0–1.', seed: 'Number.' },
-  photocopy: { ink: 'Colour.', contrast: 'Number.', lift: 'Number.', noise: '0–1.', frequency: 'Number.', seed: 'Number.' },
-  duotone: { colors: 'Two or more, shadows first.', contrast: 'Number.' },
-  grayscale: { slope: 'Number.', intercept: 'Number.', contrast: 'Number.', brightness: 'Number.', black: 'Input black point, 0–1.', white: 'Input white point, 0–1.', gamma: 'Midtones (>1 lighter).', output: '[lo, hi] output range, 0–1.' },
-  levels: { slope: 'Number.', intercept: 'Number.', contrast: 'Number.', brightness: 'Number.', black: 'Input black point, 0–1.', white: 'Input white point, 0–1.', gamma: 'Midtones (>1 lighter).', output: '[lo, hi] output range, 0–1.' },
-  saturate: { amount: 'Number (1 unchanged).' },
-  matrix: { values: '20 numbers.' },
-  grit: { amount: '0–1.', frequency: 'Number.', seed: 'Number.' },
-  halftone: { ink: 'Colour.', cell: 'Length.', angle: 'Degrees.', contrast: 'Number.', lift: 'Number.', softness: 'Number.', shape: 'dot (default) | line | square | diamond | cross' },
-  dither: { ink: 'Colour.', paper: 'Colour.', cell: 'Length.', contrast: 'Number.', brightness: 'Number.', pixelate: 'Boolean.', weights: '[r, g, b].', matrix: 'bayer4 | bayer8' },
-  threshold: { level: '0–1.', ink: 'Colour.', paper: 'Colour or none.' },
-  filter: { markup: 'Raw filter primitives.' },
-  extrude: { depth: 'Length.', angle: 'Degrees.', offset: '[x, y] lengths.', steps: 'Number.', color: 'Colour.', to: 'Colour.' },
-
-  // Blurs.
-  zoom: { center: BLUR_CENTRE, amount: '0–0.95: how much of the way to the centre each point is smeared. Default 0.2.' },
-  spin: { center: BLUR_CENTRE, angle: 'Degrees of rotation. Default 12.' },
-  tilt: { center: 'A point on the sharp line, [x, y] fractions.', angle: 'Degrees (0: a horizontal band).', width: 'Length: half the sharp band. Default "8vmin".', falloff: 'Length over which the blur grows. Default "22vmin".', radius: 'Length: the strongest blur. Default "1.4vmin".', saturate: 'Number (the miniature look: 1.2).' },
-  lens: { radius: 'Length: the aperture. Default "1.2vmin".', blades: '0 (round) or 3–12 sides.', rotation: 'Degrees.', highlights: 'Boost of the bright parts (bokeh). Default 1.', threshold: '0–1: what counts as a highlight. Default 0.75.' },
-
-  // Distortions.
-  wave: { amplitude: 'Length.', wavelength: 'Length.', angle: 'Degrees the wave travels.', phase: '0–1 of a period.', shape: 'sine | triangle | square' },
-  ripple: { center: BLUR_CENTRE, amplitude: 'Length.', wavelength: 'Length.', phase: '0–1.', radius: 'Length it fades out by.' },
-  twirl: { center: BLUR_CENTRE, angle: 'Degrees at the centre. Default 180.', radius: 'Length.' },
-  bulge: { center: BLUR_CENTRE, amount: '0–1.', radius: 'Length.' },
-  pinch: { center: BLUR_CENTRE, amount: '0–1.', radius: 'Length.' },
-  fisheye: { center: BLUR_CENTRE, amount: '0–1. Default 0.6.' },
-  glass: { texture: 'frosted | reeded | pebbled', size: 'Length: grain, rib or lump.', amount: 'Frosted, pebbled: a length; reeded: 0–1.', angle: 'Reeded: rib angle, degrees.', shade: 'Reeded: rib shading, 0–1.', seed: 'Number or string.' },
-  displace: { amount: 'Length.', map: '{ layers }: displace by their luminance (default seeded noise).', mode: 'gradient (default) | channels', size: 'Noise: length.', octaves: 'Noise detail.', seed: 'Number or string.' },
-  kaleidoscope: { segments: 'Wedges. Default 8.', center: BLUR_CENTRE, angle: 'Degrees: where the source wedge starts (default -90, up).', scale: 'Zoom of the source. Default 1.' },
-  mirror: { keep: 'left | right | top | bottom | top-left | top-right | bottom-left | bottom-right', at: 'The mirror line: a fraction, or [x, y].' },
-  stretch: { at: '0–1: the row or column.', direction: 'down | up | left | right', length: '0–1 of the way to the edge.', fade: '0–1.' },
-  sort: { direction: 'horizontal | vertical', threshold: '[lo, hi] luminance, 0–1.', by: 'luma | hue | saturation', reverse: 'Boolean.', length: '0–1: break runs at seeded lengths.', seed: 'Number or string.' },
-
-  // Colour.
-  curves: { points: '[[in, out], …] 0–1, all channels.', red: 'Points.', green: 'Points.', blue: 'Points.' },
-  gradientMap: { colors: 'Shadows to highlights.', stops: 'Positions, 0–1.', space: 'srgb | oklab' },
-  posterize: { levels: 'Tones per channel. Default 4.' },
-  invert: { amount: '0–1. Default 1.' },
-  hue: { angle: 'Degrees.', saturation: '-1–1.', lightness: '-1–1.' },
-  vibrance: { amount: '-1–1. Default 0.5.', saturation: '-1–1.' },
-  colorBalance: { shadows: '[r, g, b], -1–1.', midtones: '[r, g, b].', highlights: '[r, g, b].' },
-  channelMixer: { red: '[r, g, b, constant].', green: 'Row.', blue: 'Row.', monochrome: 'Boolean.', gray: 'Row (monochrome).' },
-  sepia: { amount: '0–1.' },
-  look: { name: 'fade | crossProcess | bleachBypass | tealOrange | warmFilm | coolFilm | noir', amount: '0–1.' },
-
-  // Light.
-  bloom: { threshold: '0–1.', radius: 'Length.', intensity: 'Number.', color: 'Tint.' },
-  halation: { threshold: '0–1.', radius: 'Length.', intensity: 'Number.', color: 'Default red-orange.' },
-  vignette: { shape: 'ellipse | circle | rect', size: '0–1: where it starts.', softness: '0–1.', amount: '0–1.', color: 'Default black.', center: BLUR_CENTRE },
-  lightLeak: { edge: 'left | right | top | bottom (default seeded)', colors: 'Colours.', intensity: 'Number.', seed: 'Number or string.' },
-  lensFlare: { at: 'The light, [x, y] fractions.', size: 'Length.', intensity: 'Number.', color: 'Tint.', ghosts: 'Count. Default 6.', streak: 'true or a width factor: an anamorphic streak.', seed: 'Number or string.' },
-  rays: { center: 'The light, [x, y] fractions (default the brightest patch).', threshold: '0–1.', length: 'How far rays reach, a fraction of the frame. Default 0.5.', intensity: 'Number.', color: 'Tint.' },
-
-  // Texture and print.
-  grain: { amount: '0–1.', size: 'Length.', color: 'Boolean: colour grain.', seed: 'Number.' },
-  dust: { amount: '0–1.', scratches: 'Count.', color: 'light | dark | mixed', seed: 'Number or string.' },
-  paper: { texture: 'paper | canvas', scale: 'Length.', amount: '0–1.', angle: 'Light azimuth, degrees.', seed: 'Number.' },
-  scanlines: { spacing: 'Length.', thickness: '0–1.', amount: '0–1.' },
-  crt: { mask: 'aperture | shadow', size: 'Length: a triad.', amount: '0–1.', scanlines: '0–1.', curvature: '0–1.' },
-  vhs: { shift: 'Length: chroma shift.', bleed: 'Length: chroma smear.', jitter: 'Length.', tracking: '0–1.', noise: '0–1.', seed: 'Number or string.' },
-  jpeg: { quality: '1–100. Default 12.', block: 'Length: a JPEG pixel.', passes: 'Re-saves, 1–8.', subsample: 'Boolean. Default true.' },
-  newsprint: { cell: 'Length: the screen.', angles: '[c, m, y, k] degrees.', paper: 'Colour.', gain: 'Dot gain, 0–0.3.', gcr: '0–1.' },
-
-  // Digital.
-  chromatic: { amount: 'Length.', angle: 'Degrees (directional).', mode: 'directional (default) | radial', center: BLUR_CENTRE },
-  rgbSplit: { amount: 'Length.', angle: 'Degrees.' },
-  glitch: { amount: '0–1.', shift: 'Length.', slices: 'Count.', blocks: 'Count.', seed: 'Number or string.' },
-  pixelate: { size: 'Length.', shape: 'square | hex' },
-  mosaic: { size: 'Length.', shape: 'square | hex' },
-  ascii: { cell: 'Length.', ramp: 'Characters, sparse to dense.', color: 'source | a colour.', background: 'Colour or none.', invert: 'Boolean.', contrast: 'Number.' },
-  emboss: { angle: 'Degrees.', amount: 'Number.', radius: 'Length.', color: 'Boolean: over the layer.' },
-  edges: { radius: 'Length.', amount: 'Number.', style: 'ink | glow', color: 'Ink colour.', mono: 'Boolean.' },
-  sketch: { radius: 'Length.', darkness: '0–1.', color: 'Boolean: coloured pencil.' },
-  sharpen: { amount: 'Number.', radius: 'Length.' },
-};

package/src/effects/pixels.d.ts

@@ -1,24 +0,0 @@
-// Effects computed on pixels: draw, process, mix through the mask, embed.
-import type { Markup } from '../render/context.js';
-import type { Pixels } from './buffer.js';
-
-/** The most pixels an effect works on. */
-export const MAX_PIXELS: number;
-
-/** What a pixel effect returns. */
-export interface PixelResult {
-  data: Uint8ClampedArray;
-  width: number;
-  height: number;
-  /** Embed as PNG even when opaque. */
-  lossless?: boolean;
-  /** Smaller than the layer: scaled up nearest-neighbour. */
-  pixelated?: boolean;
-}
-
-/** A layer's markup as RGBA pixels, `w`×`h` over its canvas; undefined where nothing can draw. */
-export function drawLayer(m: Markup, ctx: object, w: number, h: number): Promise<Uint8ClampedArray | undefined>;
-/** The raster size for a layer (its pixels as shown, capped). */
-export function rasterSize(ctx: object, cap?: number): { w: number; h: number; scale: number };
-/** Run a pixel effect on a layer's markup; undefined where nothing can draw pixels. */
-export function pixelEffect(fx: { mask?: import('./mask.js').EffectMask }, m: Markup, ctx: object, run: (img: Pixels) => PixelResult | Uint8ClampedArray | Promise<PixelResult | Uint8ClampedArray>, o?: { cap?: number }): Promise<Markup | undefined>;

package/src/effects/pixels.js

@@ -1,138 +0,0 @@
-/**
- * Effects computed on pixels, where SVG filters can't do them (spin and
- * zoom blur, bokeh, distortions, pixel sorting, ASCII…): the layer is
- * drawn once at the pixels it's shown at (sharp in Node, tiled past a few
- * megapixels; a canvas in a page), processed here on a typed array, mixed
- * with the original through the effect's `mask`, and embedded back as one
- * image (JPEG where it's opaque, PNG where it isn't or where flat colour
- * matters), cropped to what it paints. Where nothing can draw pixels (a
- * Worker) the caller falls back to the effect's filter, if it has one.
- *
- * @module effects/pixels
- */
-
-import { attrs, num } from '../svg.js';
-import { pixelsOf, encodePixels } from '../raster/index.js';
-import { svgPixels } from '../render/tiles.js';
-import { toBase64 } from '../platform/bytes.js';
-import { nearest } from './buffer.js';
-import { maskGrid, lerpPixels } from './mask.js';
-
-/** The most pixels an effect works on (about 3550²); past that it works smaller and the image scales up. */
-export const MAX_PIXELS = 12.6e6;
-
-/**
- * What a pixel effect returns: the processed pixels, at the layer's
- * raster size or (with `pixelated`) a grid of cells scaled up crisp.
- *
- * @typedef {object} PixelResult
- * @property {Uint8ClampedArray} data
- * @property {number} width
- * @property {number} height
- * @property {boolean} [lossless] - Embed as PNG even when opaque (flat colour).
- * @property {boolean} [pixelated] - Smaller than the layer: scaled up nearest-neighbour.
- */
-
-/**
- * A layer's markup as pixels, `w`×`h` over its canvas.
- *
- * @param {{ defs: string, body: string }} m
- * @param {any} ctx
- * @param {number} w
- * @param {number} h
- * @returns {Promise<Uint8ClampedArray | undefined>} RGBA, or undefined where nothing can draw.
- */
-export async function drawLayer(m, ctx, w, h) {
-  const sx = w / ctx.width;
-  const sy = h / ctx.height;
-  const doc = `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}" viewBox="0 0 ${w} ${h}">${m.defs ? `<defs>${m.defs}</defs>` : ''}<g transform="scale(${num(sx, 6)} ${num(sy, 6)})">${m.body}</g></svg>`;
-  try {
-    const out = ctx.sharp ? await svgPixels(ctx.sharp, doc, w, h) : await pixelsOf(doc, w, h);
-    return out ? new Uint8ClampedArray(out.buffer, out.byteOffset, out.byteLength) : undefined;
-  } catch {
-    return undefined;
-  }
-}
-
-/**
- * The raster size for a layer: its pixels as shown (`ctx.res` per unit),
- * at most {@link MAX_PIXELS} (or the effect's own cap).
- *
- * @param {any} ctx
- * @param {number} [cap=MAX_PIXELS]
- * @returns {{ w: number, h: number, scale: number }}
- */
-export function rasterSize(ctx, cap = MAX_PIXELS) {
-  const res = Math.min(ctx.res ?? 1, Math.sqrt(cap / (ctx.width * ctx.height)));
-  const w = Math.max(1, Math.round(ctx.width * res));
-  const h = Math.max(1, Math.round(ctx.height * res));
-  return { w, h, scale: Math.sqrt((w / ctx.width) * (h / ctx.height)) };
-}
-
-/**
- * Run a pixel effect on a layer's markup.
- *
- * @param {any} fx - The effect (its `mask` is applied here).
- * @param {{ defs: string, body: string }} m - The layer so far.
- * @param {any} ctx
- * @param {(img: import('./buffer.js').Pixels) => PixelResult | Uint8ClampedArray | Promise<PixelResult | Uint8ClampedArray>} run
- * @param {{ cap?: number }} [o]
- * @returns {Promise<{ defs: string, body: string } | undefined>} Undefined where nothing can draw pixels.
- */
-export async function pixelEffect(fx, m, ctx, run, o = {}) {
-  const { w, h, scale } = rasterSize(ctx, o.cap);
-  const data = await drawLayer(m, ctx, w, h);
-  if (!data) return undefined;
-  let opaque = true;
-  for (let i = 3; i < data.length; i += 4) if (data[i] !== 255) { opaque = false; break; }
-  const img = { data, width: w, height: h, scale, opaque };
-  const got = await run(img);
-  /** @type {PixelResult} */
-  let res = got instanceof Uint8ClampedArray ? { data: got, width: w, height: h } : got;
-  if (fx.mask) {
-    const grid = await maskGrid(fx.mask, ctx, { x: 0, y: 0, width: ctx.width, height: ctx.height }, w, h);
-    if (grid) {
-      const full = res.width === w && res.height === h ? res.data : nearest(res.data, res.width, res.height, w, h);
-      res = { data: lerpPixels(data, full, grid), width: w, height: h, lossless: res.lossless };
-    }
-  }
-  return embed(res, ctx);
-}
-
-/**
- * Pixels as an `<image>` over the layer's canvas, cropped to what's painted.
- *
- * @param {PixelResult} res
- * @param {any} ctx
- * @returns {Promise<{ defs: string, body: string }>}
- */
-async function embed(res, ctx) {
-  const { data, width: w, height: h } = res;
-  let x0 = w; let y0 = h; let x1 = -1; let y1 = -1;
-  let opaque = true;
-  for (let y = 0; y < h; y++) {
-    for (let x = 0; x < w; x++) {
-      const a = data[(y * w + x) * 4 + 3];
-      if (a !== 255) opaque = false;
-      if (!a) continue;
-      if (x < x0) x0 = x;
-      if (x > x1) x1 = x;
-      if (y < y0) y0 = y;
-      if (y > y1) y1 = y;
-    }
-  }
-  if (x1 < 0) return { defs: '', body: '' };
-  let crop = data;
-  const cw = x1 - x0 + 1;
-  const ch = y1 - y0 + 1;
-  if (cw !== w || ch !== h) {
-    crop = new Uint8ClampedArray(cw * ch * 4);
-    for (let y = 0; y < ch; y++) crop.set(data.subarray(((y0 + y) * w + x0) * 4, ((y0 + y) * w + x1 + 1) * 4), y * cw * 4);
-  }
-  const { mime, bytes } = await encodePixels(crop, cw, ch, { opaque, lossless: res.lossless || res.pixelated }, ctx.sharp);
-  const kx = ctx.width / w;
-  const ky = ctx.height / h;
-  const crisp = res.pixelated ? { 'image-rendering': 'pixelated', style: 'image-rendering:pixelated' } : {};
-  const image = `<image${attrs({ x: num(x0 * kx, 4), y: num(y0 * ky, 4), width: num(cw * kx, 4), height: num(ch * ky, 4), preserveAspectRatio: 'none', ...crisp, href: `data:${mime};base64,${toBase64(bytes)}` })}/>`;
-  return { defs: '', body: image };
-}

package/src/effects/polar.d.ts

@@ -1,10 +0,0 @@
-// Blurs about a centre, on pixels.
-import type { Effect } from './index.js';
-import type { Pixels } from './buffer.js';
-
-/** `spin`: a rotational blur. */
-export function spin(img: Pixels, fx: Extract<Effect, { kind: 'spin' }>): Uint8ClampedArray;
-/** `zoom`: a radial blur toward the centre. */
-export function zoom(img: Pixels, fx: Extract<Effect, { kind: 'zoom' }>): Uint8ClampedArray;
-/** `rays`: god rays from a light. */
-export function rays(img: Pixels, fx: Extract<Effect, { kind: 'rays' }>): Uint8ClampedArray;