@pixerate/editor 0.137.0 → 0.139.0

package/dist/{chunk-5FSRTP6E.js → chunk-PQFVLOMR.js}

@@ -40,6 +40,73 @@ function hash2(x, y, salt) {
 function rand01(seed, index, stream) {
   return hash2(index, stream, seed);
 }
+function randSigned(seed, index, stream) {
+  return rand01(seed, index, stream) * 2 - 1;
+}
+function seedFromString(text) {
+  let h = 2166136261;
+  for (let i = 0; i < text.length; i++) {
+    h ^= text.charCodeAt(i);
+    h = Math.imul(h, 16777619);
+  }
+  return mix32(h >>> 0);
+}
+var smooth = (t) => t * t * (3 - 2 * t);
+var Lattice = class {
+  constructor(px, py, salt) {
+    this.px = px;
+    this.py = py;
+    this.values = new Float32Array(px * py);
+    for (let j = 0; j < py; j++) for (let i = 0; i < px; i++) this.values[j * px + i] = hash2(i, j, salt);
+  }
+  px;
+  py;
+  values;
+  /** Value noise at (x, y) in lattice cells; wraps every `px` / `py` cells. */
+  at(x, y) {
+    const { px, py } = this;
+    const x0 = Math.floor(x);
+    const y0 = Math.floor(y);
+    const tx = smooth(x - x0);
+    const ty = smooth(y - y0);
+    const i0 = (x0 % px + px) % px;
+    const j0 = (y0 % py + py) % py;
+    const i1 = (i0 + 1) % px;
+    const j1 = (j0 + 1) % py;
+    const v = this.values;
+    const a = v[j0 * px + i0] + (v[j0 * px + i1] - v[j0 * px + i0]) * tx;
+    const b = v[j1 * px + i0] + (v[j1 * px + i1] - v[j1 * px + i0]) * tx;
+    return a + (b - a) * ty;
+  }
+};
+var TileableNoise = class {
+  constructor(size, cellsX, cellsY, octaves, salt) {
+    this.size = size;
+    let cx = Math.max(1, Math.round(cellsX));
+    let cy = Math.max(1, Math.round(cellsY));
+    for (let o = 0; o < octaves; o++) {
+      this.octaves.push(new Lattice(cx, cy, salt + o * 7919 | 0));
+      cx *= 2;
+      cy *= 2;
+    }
+  }
+  size;
+  octaves = [];
+  /** Fractal noise at pixel (x, y). */
+  at(x, y) {
+    let sum = 0;
+    let amp = 1;
+    let norm = 0;
+    const u = x / this.size;
+    const v = y / this.size;
+    for (const l of this.octaves) {
+      sum += l.at(u * l.px, v * l.py) * amp;
+      norm += amp;
+      amp *= 0.5;
+    }
+    return norm > 0 ? sum / norm : 0.5;
+  }
+};
 
 // src/paint/gradient-paint.ts
 var PAINT_GRADIENT_SPACES = ["pigment", "oklab", "srgb"];
@@ -1100,7 +1167,181 @@ function coverageTileCoord(key) {
   return tileCoord(key);
 }
 
+// src/paint/grain.ts
+var GRAIN_PATTERNS = ["smooth", "cold-pressed", "hot-pressed", "rough", "vellum", "laid", "ingres", "sanded", "canvas", "linen", "gesso"];
+var GRAIN_TILE = 256;
+var clamp01 = (v) => v < 0 ? 0 : v > 1 ? 1 : v;
+function patternHeights(pattern, n, seed) {
+  const out = new Float32Array(n * n);
+  const salt = Math.imul(seed | 0, 2654435761) + 17;
+  if (pattern === "smooth") return out.fill(1);
+  const noise = (cx, cy, oct, s = 0) => new TileableNoise(n, cx, cy, oct, salt + s);
+  const k = n / GRAIN_TILE;
+  switch (pattern) {
+    case "cold-pressed": {
+      const base = noise(20 * k, 20 * k, 4);
+      const fine = noise(64 * k, 64 * k, 2, 3);
+      for (let y = 0; y < n; y++)
+        for (let x = 0; x < n; x++) out[y * n + x] = clamp01((base.at(x, y) - 0.5) * 1.8 + 0.5 + (fine.at(x, y) - 0.5) * 0.5 + (hash2(x, y, salt) - 0.5) * 0.12);
+      break;
+    }
+    case "hot-pressed": {
+      const base = noise(40 * k, 40 * k, 3);
+      for (let y = 0; y < n; y++) for (let x = 0; x < n; x++) out[y * n + x] = clamp01((base.at(x, y) - 0.5) * 1.1 + 0.6 + (hash2(x, y, salt) - 0.5) * 0.08);
+      break;
+    }
+    case "rough": {
+      const base = noise(10 * k, 10 * k, 5);
+      const blot = noise(28 * k, 28 * k, 2, 5);
+      for (let y = 0; y < n; y++)
+        for (let x = 0; x < n; x++) out[y * n + x] = clamp01((base.at(x, y) - 0.5) * 2.4 + 0.5 + (blot.at(x, y) - 0.5) * 0.7 + (hash2(x, y, salt) - 0.5) * 0.15);
+      break;
+    }
+    case "vellum": {
+      const base = noise(40 * k, 40 * k, 3);
+      for (let y = 0; y < n; y++) for (let x = 0; x < n; x++) out[y * n + x] = clamp01((base.at(x, y) - 0.5) * 1.6 + 0.55 + (hash2(x, y, salt) - 0.5) * 0.2);
+      break;
+    }
+    case "laid": {
+      const pulp = noise(32 * k, 32 * k, 3);
+      const chain = n / 8;
+      for (let y = 0; y < n; y++) {
+        const laid = 0.5 + 0.5 * Math.cos(2 * Math.PI * y / 4);
+        for (let x = 0; x < n; x++) {
+          const c = Math.abs((x + 0.5) % chain - chain / 2) / (chain / 2);
+          const chainLine = c > 0.94 ? -0.35 : 0;
+          out[y * n + x] = clamp01(0.3 + 0.5 * laid + chainLine + (pulp.at(x, y) - 0.5) * 0.6);
+        }
+      }
+      break;
+    }
+    case "ingres": {
+      const fibres = noise(64 * k, 12 * k, 3);
+      const base = noise(16 * k, 16 * k, 3, 7);
+      for (let y = 0; y < n; y++)
+        for (let x = 0; x < n; x++) {
+          const g = hash2(x, y, salt ^ 85);
+          out[y * n + x] = clamp01((fibres.at(x, y) - 0.5) * 1.5 + (base.at(x, y) - 0.5) * 0.7 + 0.55 + (g < 0.1 ? -0.3 : 0));
+        }
+      break;
+    }
+    case "sanded": {
+      const grit = noise(96 * k, 96 * k, 2);
+      for (let y = 0; y < n; y++)
+        for (let x = 0; x < n; x++) {
+          const h = hash2(x, y, salt);
+          out[y * n + x] = clamp01((grit.at(x, y) - 0.5) * 2.4 + 0.5 + (h - 0.5) * 0.7);
+        }
+      break;
+    }
+    case "canvas":
+    case "linen": {
+      const period = (pattern === "canvas" ? 8 : 5) * k;
+      const threads = Math.max(2, 2 * Math.round(n / period / 2));
+      const p = n / threads;
+      const slub = noise(threads, threads, 2, 11);
+      for (let y = 0; y < n; y++)
+        for (let x = 0; x < n; x++) {
+          const fx = (x + 0.5) / p;
+          const fy = (y + 0.5) / p;
+          const cx = Math.floor(fx);
+          const cy = Math.floor(fy);
+          const warp = Math.sin(Math.PI * (fx - cx));
+          const weft = Math.sin(Math.PI * (fy - cy));
+          const top = (cx + cy) % 2 === 0 ? warp : weft;
+          const irregular = pattern === "linen" ? (slub.at(x, y) - 0.5) * 0.5 : 0;
+          out[y * n + x] = clamp01(0.2 + 0.7 * top + irregular + (hash2(x, y, salt) - 0.5) * 0.15);
+        }
+      break;
+    }
+    case "gesso": {
+      const streaks = noise(2 * k, 28 * k, 3);
+      const tooth = noise(64 * k, 64 * k, 2, 13);
+      for (let y = 0; y < n; y++)
+        for (let x = 0; x < n; x++) out[y * n + x] = clamp01((streaks.at(x, y) - 0.5) * 1.8 + (tooth.at(x, y) - 0.5) * 0.9 + 0.55);
+      break;
+    }
+  }
+  return out;
+}
+var rawCache = /* @__PURE__ */ new Map();
+function grainHeights(pattern, seed, size = GRAIN_TILE) {
+  const key = `${pattern}:${seed}:${size}`;
+  let h = rawCache.get(key);
+  if (!h) {
+    h = patternHeights(pattern, size, seed);
+    if (rawCache.size > 32) rawCache.delete(rawCache.keys().next().value);
+    rawCache.set(key, h);
+  }
+  return h;
+}
+var PaperGrain = class {
+  size = GRAIN_TILE;
+  heights;
+  scale;
+  mirror;
+  flat;
+  constructor(paper, media = "dry") {
+    const raw = grainHeights(paper.pattern, paper.seed);
+    const t = paper[media];
+    this.flat = paper.pattern === "smooth";
+    if (t.contrast === 1 && !t.invert) this.heights = raw;
+    else {
+      const out = new Float32Array(raw.length);
+      for (let i = 0; i < raw.length; i++) {
+        const v = clamp01((raw[i] - 0.5) * t.contrast + 0.5);
+        out[i] = t.invert ? 1 - v : v;
+      }
+      this.heights = out;
+    }
+    this.scale = paper.scale;
+    this.mirror = paper.tiling === "mirror";
+  }
+  /** Tile cell index for a coordinate in grain pixels (mirrored on odd tiles when mirroring). */
+  wrap(v) {
+    const n = this.size;
+    if (!this.mirror) return (v % n + n) % n;
+    const p = (v % (2 * n) + 2 * n) % (2 * n);
+    return p < n ? p : 2 * n - 1 - p;
+  }
+  /** Height 0..1 at document position (x, y). */
+  at(x, y) {
+    const u = x / this.scale - 0.5;
+    const v = y / this.scale - 0.5;
+    const x0 = Math.floor(u);
+    const y0 = Math.floor(v);
+    const fx = u - x0;
+    const fy = v - y0;
+    const n = this.size;
+    const h = this.heights;
+    const a = this.wrap(x0);
+    const b = this.wrap(x0 + 1);
+    const c = this.wrap(y0) * n;
+    const d = this.wrap(y0 + 1) * n;
+    const top = h[c + a] + (h[c + b] - h[c + a]) * fx;
+    const bot = h[d + a] + (h[d + b] - h[d + a]) * fx;
+    return top + (bot - top) * fy;
+  }
+};
+function grainCatch(h, depth, pressure) {
+  if (depth <= 0) return 1;
+  const t = depth * (0.75 - 0.65 * Math.min(1, Math.max(0, pressure)));
+  const u = clamp01((h - t + 0.18) / 0.36);
+  return 1 - depth + depth * u * u * (3 - 2 * u);
+}
+function strokeGrainCatch(h, depth, pressure) {
+  if (depth <= 0) return 1;
+  const p = Math.min(1, Math.max(0, pressure));
+  const amount = Math.min(1, depth * (1.4 - 0.6 * p));
+  const u = clamp01((h - 0.2 - 0.25 * (1 - p)) / 0.5);
+  return 1 - amount + amount * u * u * (3 - 2 * u);
+}
+
 // src/paint/path-stroke.ts
+var JITTER_SIZE = 1;
+var JITTER_ANGLE = 2;
+var JITTER_OPACITY = 3;
+var JITTER_SCATTER = 4;
 function lean(s) {
   if (typeof s.altitude === "number" && Number.isFinite(s.altitude)) {
     return { amount: 1 - Math.min(1, Math.max(0, s.altitude / (Math.PI / 2))), azimuth: s.azimuth ?? 0 };
@@ -1132,8 +1373,22 @@ function pathStrokeDabs(samples, options) {
     if (tilt.followAzimuth && l) angle = -l.azimuth;
     const roundness = Math.max(0.05, brush.roundness * (1 - 0.85 * (tilt.roundness ?? 0) * lean0));
     const op = brush.pressureOpacity ? pr : 1;
-    const params = { travel, index: index++, pressure: pr, lean: lean0, speed, direction: dir, time: time === null || t0 === null ? null : time - t0 };
-    return { x, y, radius: Math.max(0.5, size / 2), alpha: brush.flow, opacity: brush.opacity * op, angle, roundness, params };
+    const i = index++;
+    const params = { travel, index: i, pressure: pr, lean: lean0, speed, direction: dir, time: time === null || t0 === null ? null : time - t0 };
+    let diameter = size;
+    let opacity = brush.opacity * op;
+    const j = options.jitter;
+    if (j) {
+      if (j.size) diameter *= Math.max(0.05, 1 + j.size * randSigned(j.seed, i, JITTER_SIZE));
+      if (j.angle) angle += j.angle * Math.PI * randSigned(j.seed, i, JITTER_ANGLE);
+      if (j.opacity) opacity *= 1 - j.opacity * (randSigned(j.seed, i, JITTER_OPACITY) * 0.5 + 0.5);
+      if (j.scatter) {
+        const off = j.scatter * diameter * randSigned(j.seed, i, JITTER_SCATTER);
+        x += Math.sin(dir) * off;
+        y += Math.cos(dir) * off;
+      }
+    }
+    return { x, y, radius: Math.max(0.5, diameter / 2), alpha: brush.flow, opacity, angle, roundness, params };
   };
   const out = [];
   const pressure = (s) => typeof s.pressure === "number" && Number.isFinite(s.pressure) ? s.pressure : 1;
@@ -1202,6 +1457,17 @@ function pathStrokeCoverage(samples, options) {
       bounds = { x, y, width: Math.max(bounds.x + bounds.width, rect.x + rect.width) - x, height: Math.max(bounds.y + bounds.height, rect.y + rect.height) - y };
     }
   }
+  const grain = options.grain;
+  if (grain && grain.depth > 0 && dabs.length) {
+    const pressure = dabs.reduce((sum, d) => sum + (d.params?.pressure ?? 1), 0) / dabs.length;
+    for (const [key, t] of coverage.tiles) {
+      const { tx, ty } = tileCoord(key);
+      for (let y = 0, k = 0; y < TILE; y++) {
+        const gy = ty * TILE + y + 0.5;
+        for (let x = 0; x < TILE; x++, k++) if (t[k] > 0) t[k] *= strokeGrainCatch(grain.at(tx * TILE + x + 0.5, gy), grain.depth, pressure);
+      }
+    }
+  }
   return { coverage, bounds, dabs: dabs.length };
 }
 function paintPathStroke(surface, samples, options) {
@@ -1296,6 +1562,26 @@ function isBrushstrokeBrush(brush) {
   return !("tip" in brush) || !brush.tip || (brush.engine ?? "dab") === "dab";
 }
 var finite2 = (v) => typeof v === "number" && Number.isFinite(v);
+function brushCharacterOf(brush) {
+  if (!("tip" in brush) || !brush.tip) return { grain: 0, size: 0, angle: 0, opacity: 0, scatter: 0 };
+  const d = brush.dynamics ?? {};
+  const u = (v, hi = 1) => finite2(v) ? Math.min(hi, Math.max(0, v)) : 0;
+  return { grain: u(brush.grain), size: u(d.sizeJitter), angle: u(d.angleJitter), opacity: u(d.opacityJitter), scatter: u(d.scatter, 4) };
+}
+var papers = /* @__PURE__ */ new Map();
+function paperGrain(paper) {
+  const pattern = paper.pattern ?? "sanded";
+  const seed = finite2(paper.seed) ? Math.round(Math.abs(paper.seed)) : 1;
+  const scale = finite2(paper.scale) && paper.scale > 0 ? Math.min(8, Math.max(0.25, paper.scale)) : 1;
+  const key = `${pattern}:${seed}:${scale}`;
+  let g = papers.get(key);
+  if (!g) {
+    g = new PaperGrain({ pattern, seed, scale, tiling: "mirror", dry: { contrast: 1, invert: false }, wet: { contrast: 1, invert: false } });
+    if (papers.size > 16) papers.delete(papers.keys().next().value);
+    papers.set(key, g);
+  }
+  return g;
+}
 function renderBrushstroke(input, brush, options = {}) {
   const strokeOptions = brushstrokeStrokeOptions(brush);
   const samples = brushstrokeSamples(input);
@@ -1318,8 +1604,27 @@ function renderBrushstroke(input, brush, options = {}) {
   const area = (x1 - x0 + reach) * (y1 - y0 + reach);
   if (area * scale * scale > maxPixels) scale = Math.max(BRUSHSTROKE_MIN_SCALE, Math.sqrt(maxPixels / area));
   const scaled = samples.map((s) => ({ ...s, x: s.x * scale, y: s.y * scale }));
+  let character = {};
+  if (options.character) {
+    const c = brushCharacterOf(brush);
+    const ch = options.character;
+    const seed = finite2(ch.seed) ? ch.seed | 0 : hashString(JSON.stringify(input));
+    const jitter = c.size || c.angle || c.opacity || c.scatter ? { seed, size: c.size, angle: c.angle, opacity: c.opacity, scatter: c.scatter } : void 0;
+    const paper = ch.paper === null ? null : ch.paper ?? {};
+    const depth = paper ? Math.min(1, Math.max(0, (finite2(paper.depth) ? paper.depth : 0.5) * c.grain)) : 0;
+    let grain;
+    if (paper && depth > 0) {
+      const g = paperGrain(paper);
+      const ox = ch.origin?.x ?? 0;
+      const oy = ch.origin?.y ?? 0;
+      const k = (finite2(ch.unit) && ch.unit > 0 ? ch.unit : 1) / scale;
+      grain = { depth, at: (x, y) => g.at(ox + x * k, oy + y * k) };
+    }
+    character = { ...jitter ? { jitter } : {}, ...grain ? { grain } : {} };
+  }
   const { surface, bounds, dabs } = paintPathStroke(emptySurface(4), scaled, {
     ...strokeOptions,
+    ...character,
     brush: { ...tip, size: tip.size * scale },
     closed: options.closed ?? strokeOptions.closed,
     color,
@@ -1361,7 +1666,8 @@ function hashString(s, h = 2166136261) {
 function brushstrokeKey(input, brush, options = {}) {
   const path = JSON.stringify(input);
   const { brush: tip, ...rest } = brushstrokeStrokeOptions(brush);
-  const rest2 = JSON.stringify([tip, rest, options.paint ?? options.color ?? null, options.seed ?? 0, options.closed ?? false, options.maxPixels ?? null]);
+  const character = options.character ? [options.character, brushCharacterOf(brush)] : null;
+  const rest2 = JSON.stringify([tip, rest, options.paint ?? options.color ?? null, options.seed ?? 0, options.closed ?? false, options.maxPixels ?? null, ...character ? [character] : []]);
   const scale = finite2(options.scale) ? options.scale : 1;
   return `${hashString(path).toString(16)}:${path.length}:${hashString(rest2).toString(16)}:${scale}`;
 }
@@ -2012,6 +2318,9 @@ export {
   mix32,
   hash2,
   rand01,
+  randSigned,
+  seedFromString,
+  TileableNoise,
   PAINT_GRADIENT_SPACES,
   PAINT_GRADIENT_REPEATS,
   PAINT_GRADIENT_MAPPINGS,
@@ -2062,6 +2371,12 @@ export {
   applyStrokeToTile,
   applyStrokeToDeepTile,
   coverageTileCoord,
+  GRAIN_PATTERNS,
+  GRAIN_TILE,
+  grainHeights,
+  PaperGrain,
+  grainCatch,
+  strokeGrainCatch,
   pathStrokeDabs,
   pathStrokeCoverage,
   paintPathStroke,
@@ -2096,4 +2411,4 @@ export {
   cleanMixer,
   MixerStroke
 };
-//# sourceMappingURL=chunk-5FSRTP6E.js.map
+//# sourceMappingURL=chunk-PQFVLOMR.js.map