pixi-effects 0.36.0 → 0.37.0

package/dist/{chunk-G3DX65HO.js → chunk-SBR75G73.js}

@@ -1,4 +1,4 @@
-import { describeLayer, collectPropKeys } from './chunk-2JFFKHXO.js';
+import { describeLayer, collectPropKeys } from './chunk-32MMNDDN.js';
 import { suggestName, warnUnknownOptions } from './chunk-BXOCEZ4U.js';
 import * as PIXI from 'pixi.js';
 import { Rectangle, Container, FillGradient, Text, Color, GraphicsPath, Sprite, Texture, Graphics, Assets, Filter, GlProgram, defaultFilterVert, GpuProgram, UniformGroup, TextStyle, CanvasTextMetrics } from 'pixi.js';
@@ -971,6 +971,17 @@ function noise(x, seed = 0) {
   const u = f * f * f * (f * (f * 6 - 15) + 10);
   return a + (b - a) * u;
 }
+function noise2(x, y, seed = 0) {
+  if (!Number.isFinite(x) || !Number.isFinite(y)) return 0;
+  const i = Math.floor(x), j = Math.floor(y);
+  const fx = x - i, fy = y - j;
+  const s = fold(seed) * 668265261;
+  const corner = (a, b) => mix2(Math.imul((a | 0) + s, 2654435761) ^ Math.imul((b | 0) + 2135587861, 2246822507)) / 2147483648 - 1;
+  const ux = fx * fx * fx * (fx * (fx * 6 - 15) + 10), uy = fy * fy * fy * (fy * (fy * 6 - 15) + 10);
+  const top = corner(i, j) + (corner(i + 1, j) - corner(i, j)) * ux;
+  const bottom = corner(i, j + 1) + (corner(i + 1, j + 1) - corner(i, j + 1)) * ux;
+  return top + (bottom - top) * uy;
+}
 
 // src/expr/Parser.ts
 var FUNCS = {
@@ -5718,18 +5729,311 @@ function resolveDim(v, scope) {
   if (typeof v === "number") return v;
   return evaluateExpr(v, scope);
 }
+var MAX_SIZE = 8192;
+var MIN_RESOLUTION = 0.25;
+var MAX_RESOLUTION = 4;
+var NOT_PURE = /\bMath\s*\.\s*random\s*\(|\bDate\s*\.\s*now\s*\(|\bperformance\s*\.\s*now\s*\(|\bnew\s+Date\s*\(/;
+function seeded(seed) {
+  let a = seed >>> 0;
+  return () => {
+    a = a + 1831565813 >>> 0;
+    let t = a;
+    t = Math.imul(t ^ t >>> 15, t | 1);
+    t ^= t + Math.imul(t ^ t >>> 7, t | 61);
+    return ((t ^ t >>> 14) >>> 0) / 4294967296;
+  };
+}
+function offscreen(width, height) {
+  const c = document.createElement("canvas");
+  c.width = Math.max(1, Math.round(width));
+  c.height = Math.max(1, Math.round(height));
+  c.getContext("2d", { willReadFrequently: true });
+  return c;
+}
+var CanvasSequence = class extends Sequence {
+  canvas = null;
+  w = 1;
+  h = 1;
+  res = 1;
+  fps = 30;
+  layerW = 1;
+  layerH = 1;
+  seed = 0;
+  smoothing = true;
+  drawFn = null;
+  state;
+  /** The current value of every param: what keyframes move (`params.amount`). */
+  carrier = {};
+  failed = false;
+  warnedDraw = false;
+  warnedPaths = /* @__PURE__ */ new Set();
+  lastKey = "";
+  lastLocal = 0;
+  get canvasSpec() {
+    return this.spec;
+  }
+  pathRouters() {
+    return { params: (path) => this.resolveParam(path) };
+  }
+  async build() {
+    const spec = this.canvasSpec;
+    const who = describeLayer(spec);
+    if (this.duration === void 0) this.duration = this.parent?.duration ?? this.root.duration;
+    const scope = buildScope(this, this.parent, this.root);
+    this.layerW = this.size("width", spec.width, scope, this.parent?.width ?? this.root.width, who);
+    this.layerH = this.size("height", spec.height, scope, this.parent?.height ?? this.root.height, who);
+    const r = spec.resolution;
+    if (r === void 0) this.res = 1;
+    else if (typeof r === "number" && Number.isFinite(r) && r >= MIN_RESOLUTION && r <= MAX_RESOLUTION) this.res = r;
+    else {
+      this.res = typeof r === "number" && Number.isFinite(r) ? Math.min(MAX_RESOLUTION, Math.max(MIN_RESOLUTION, r)) : 1;
+      console.warn(`pixi-effects: ${who}: resolution must be a number from ${MIN_RESOLUTION} to ${MAX_RESOLUTION} (canvas pixels per layer pixel), got ${JSON.stringify(r)}: ${this.res} is used`);
+    }
+    const longest = Math.max(this.layerW, this.layerH);
+    if (longest * this.res > MAX_SIZE) {
+      const fitted = MAX_SIZE / longest;
+      console.warn(`pixi-effects: ${who}: ${this.layerW}\xD7${this.layerH} at resolution ${this.res} would be a canvas of ${Math.round(longest * this.res)} pixels, more than ${MAX_SIZE}: resolution ${Math.round(fitted * 1e3) / 1e3} is used (lower the size or the resolution)`);
+      this.res = fitted;
+    }
+    this.w = Math.max(1, Math.round(this.layerW * this.res));
+    this.h = Math.max(1, Math.round(this.layerH * this.res));
+    this.fps = this.root.frameRate ?? 30;
+    this.seed = typeof spec.seed === "number" && Number.isFinite(spec.seed) ? Math.floor(spec.seed) : 0;
+    this.smoothing = spec.smoothing !== false;
+    const params = spec.params;
+    if (params !== void 0) {
+      if (params === null || typeof params !== "object" || Array.isArray(params)) {
+        console.warn(`pixi-effects: ${who}: params must be an object of numbers, got ${JSON.stringify(params)}: ignored`);
+      } else {
+        const bad = [];
+        for (const [k, v] of Object.entries(params)) {
+          if (typeof v === "number" && Number.isFinite(v)) this.carrier[k] = v;
+          else bad.push(`"${k}"`);
+        }
+        if (bad.length) console.warn(`pixi-effects: ${who}: params ${bad.join(", ")} ${bad.length > 1 ? "are" : "is"} not a number, so ${bad.length > 1 ? "they are" : "it is"} ignored (params holds numbers that keyframes can animate as 'params.<name>')`);
+      }
+    }
+    if (typeof spec.draw === "function") {
+      this.drawFn = spec.draw;
+      if (NOT_PURE.test(spec.draw.toString())) {
+        console.warn(`pixi-effects: ${who}: draw calls Math.random, Date.now, performance.now or new Date, so it is not deterministic: the same frame would draw differently in playback, in a seek and in an export. Use info.random() (seeded), or derive the value from t`);
+      }
+    } else {
+      this.failed = true;
+      console.warn(`pixi-effects: ${who}: a canvas layer needs draw: (ctx, t, info) => { \u2026 } (a function that draws the picture at time t); the layer is drawn as a checkerboard`);
+    }
+    this.canvas = document.createElement("canvas");
+    this.canvas.width = this.w;
+    this.canvas.height = this.h;
+    const sprite = new Sprite({ texture: Texture.from(this.canvas), label: spec.name });
+    if (!this.smoothing) sprite.texture.source.scaleMode = "nearest";
+    sprite.width = this.layerW;
+    sprite.height = this.layerH;
+    this.target = sprite;
+    this.intrinsicWidth = this.layerW;
+    this.intrinsicHeight = this.layerH;
+    this.buildFilters();
+    if (typeof spec.setup === "function" && !this.failed) {
+      try {
+        this.state = await spec.setup(this.info(0));
+      } catch (e) {
+        this.failed = true;
+        this.say(`setup failed: ${e instanceof Error ? e.message : String(e)}; the layer is drawn as a checkerboard`);
+      }
+    }
+    this.drawAt(0);
+  }
+  async awaitFrameAt(local) {
+    this.drawAt(Math.max(0, Math.min(local, this.duration ?? local)));
+  }
+  size(name, v, scope, fallback, who) {
+    if (v === void 0) return fallback;
+    const n = typeof v === "number" ? v : evaluateExpr(v, scope);
+    if (!Number.isFinite(n) || n < 1) {
+      console.warn(`pixi-effects: ${who}: ${name} must be a number of pixels of at least 1 (or an expression), got ${JSON.stringify(v)}: ${fallback} is used`);
+      return fallback;
+    }
+    if (n > MAX_SIZE) {
+      console.warn(`pixi-effects: ${who}: ${name} ${n} is more than ${MAX_SIZE}: ${MAX_SIZE} is used`);
+      return MAX_SIZE;
+    }
+    return n;
+  }
+  say(why) {
+    if (this.warnedDraw) return;
+    this.warnedDraw = true;
+    console.warn(`pixi-effects: ${describeLayer(this.spec)}: ${why}`);
+  }
+  info(local) {
+    const duration = this.duration ?? 0;
+    const start = this.absoluteStart ?? this.at;
+    return {
+      frame: Math.round(local * this.fps),
+      duration,
+      progress: duration > 0 ? local / duration : 0,
+      width: this.layerW,
+      height: this.layerH,
+      resolution: this.res,
+      frameRate: this.fps,
+      params: { ...this.carrier },
+      state: this.state,
+      random: seeded(this.seed),
+      start,
+      time: start + local,
+      canvas: offscreen
+    };
+  }
+  /** Resolve `params.amount` for the keyframe pipeline; a name nobody declared is said once and dropped. */
+  resolveParam(path) {
+    if (path in this.carrier && !path.includes(".")) return { target: this.carrier, prop: path };
+    if (!this.warnedPaths.has(path)) {
+      this.warnedPaths.add(path);
+      const guess = suggestName(path.split(".")[0], Object.keys(this.carrier));
+      console.warn(`pixi-effects: ${describeLayer(this.spec)}: keyframe path params.${path} names no param "${path}"${guess ? `; did you mean "${guess}"?` : ""} (declare it in params with a starting value); skipped`);
+    }
+    return null;
+  }
+  drawAt(local) {
+    const c = this.canvas;
+    if (!c) return;
+    const ctx = c.getContext("2d");
+    if (!ctx) {
+      this.say("this browser gave no 2D context for the layer's canvas, so nothing can be drawn");
+      return;
+    }
+    const key = `${local}|${this.absoluteStart ?? this.at}|${JSON.stringify(this.carrier)}`;
+    if (key === this.lastKey) return;
+    this.lastKey = key;
+    this.lastLocal = local;
+    if (!this.paint(ctx, c, local)) this.lastKey = "";
+    this.target?.texture.source.update();
+  }
+  /** Draws one frame of the layer into `ctx` (the layer's own canvas, or the scratch one of the determinism check). false: `draw` threw. */
+  paint(ctx, c, local) {
+    const hasReset = "reset" in ctx && typeof ctx.reset === "function";
+    const fresh = () => {
+      if (hasReset) ctx.reset();
+      else {
+        ctx.setTransform(1, 0, 0, 1, 0, 0);
+        ctx.clearRect(0, 0, c.width, c.height);
+      }
+    };
+    fresh();
+    if (this.failed || !this.drawFn) {
+      this.checkerboard(ctx, c);
+      return true;
+    }
+    if (!hasReset) ctx.save();
+    let ok = true;
+    try {
+      ctx.scale(this.res, this.res);
+      ctx.imageSmoothingEnabled = this.smoothing;
+      this.drawFn(ctx, local, this.info(local));
+    } catch (e) {
+      if (!hasReset) {
+        ctx.restore();
+        ctx.save();
+      }
+      fresh();
+      this.say(`draw threw at ${local.toFixed(2)} s: ${e instanceof Error ? e.message : String(e)}; that frame is drawn as a checkerboard (the other frames are tried again)`);
+      this.checkerboard(ctx, c);
+      ok = false;
+    }
+    if (!hasReset) ctx.restore();
+    return ok;
+  }
+  /**
+   * Draws each of `times` in two orders and returns the moments where the pictures differ (a draw that uses Math.random, the clock or state that outlives the call), with how much
+   * (channel values that differ, the largest difference out of 255), and how long a draw took. One draw of every moment comes first and is thrown away: a browser can draw a canvas
+   * made in `setup` differently the first time it is used as a source, and a cache a draw fills on its first call is fine. The layer's own canvas is not touched (everything is drawn in a scratch canvas).
+   * A layer that failed, or a draw that throws, is reported in `threw`.
+   */
+  checkDeterminism(times) {
+    const none = { differs: [], drawMs: 0, threw: [] };
+    if (!this.canvas) return none;
+    if (this.failed || !this.drawFn) return { ...none, threw: [...times] };
+    const scratch = document.createElement("canvas");
+    scratch.width = this.w;
+    scratch.height = this.h;
+    const ctx = scratch.getContext("2d", { willReadFrequently: true });
+    if (!ctx) return none;
+    const keep = this.w * this.h * 4 * times.length <= 96e6;
+    const read2 = () => ctx.getImageData(0, 0, scratch.width, scratch.height).data;
+    const hash = (d) => {
+      let h = 2166136261;
+      for (let i = 0; i < d.length; i++) {
+        h ^= d[i];
+        h = Math.imul(h, 16777619);
+      }
+      return h >>> 0;
+    };
+    const ms = [];
+    const threw = /* @__PURE__ */ new Set();
+    const once = (t, timed) => {
+      const from = performance.now();
+      if (!this.paint(ctx, scratch, t)) threw.add(t);
+      if (timed) {
+        ctx.getImageData(0, 0, 1, 1);
+        ms.push(performance.now() - from);
+      }
+      return read2();
+    };
+    for (const t of times) once(t, false);
+    const first = times.map((t) => {
+      const d = once(t, true);
+      return keep ? d.slice() : hash(d);
+    });
+    const second = [...times].reverse().map((t) => once(t, false)).reverse();
+    scratch.width = scratch.height = 1;
+    const differs = [];
+    times.forEach((t, i) => {
+      const a = first[i], b = second[i];
+      if (typeof a === "number") {
+        if (a !== hash(b)) differs.push({ t, pixels: -1, maxDiff: -1 });
+        return;
+      }
+      let pixels = 0, maxDiff = 0;
+      for (let k = 0; k < a.length; k++) {
+        const d = Math.abs(a[k] - b[k]);
+        if (d) {
+          pixels++;
+          if (d > maxDiff) maxDiff = d;
+        }
+      }
+      if (pixels) differs.push({ t, pixels, maxDiff });
+    });
+    ms.sort((x, y) => x - y);
+    return { differs: differs.filter((d) => !threw.has(d.t)), drawMs: ms.length ? ms[Math.floor(ms.length / 2)] : 0, threw: times.filter((t) => threw.has(t)) };
+  }
+  checkerboard(ctx, c) {
+    const s = 32;
+    for (let y = 0; y < c.height; y += s) for (let x = 0; x < c.width; x += s) {
+      ctx.fillStyle = x / s + y / s & 1 ? "#ff00ff" : "#220022";
+      ctx.fillRect(x, y, s, s);
+    }
+  }
+  destroy() {
+    const texture = this.target?.texture;
+    if (this.canvas) {
+      this.canvas.width = this.canvas.height = 1;
+      this.canvas = null;
+    }
+    super.destroy();
+    texture?.destroy(true);
+  }
+};
 
 // src/core/Composition.ts
 var _CompositionSequence = null;
 async function getCompositionSequence() {
   if (!_CompositionSequence) {
-    _CompositionSequence = (await import('./Composition-BMRCE5FH.js')).CompositionSequence;
+    _CompositionSequence = (await import('./Composition-5KZETM4J.js')).CompositionSequence;
   }
   return _CompositionSequence;
 }
 var _SpansSequence = null;
 async function getSpansSequence() {
-  if (!_SpansSequence) _SpansSequence = (await import('./Spans-MWP2FX3T.js')).SpansSequence;
+  if (!_SpansSequence) _SpansSequence = (await import('./Spans-FSSO2HGX.js')).SpansSequence;
   return _SpansSequence;
 }
 var staticTypes = {
@@ -5741,6 +6045,7 @@ var staticTypes = {
   camera: CameraSequence,
   light: LightSequence,
   shader: ShaderSequence,
+  canvas: CanvasSequence,
   null: NullSequence
 };
 var registry2 = {};
@@ -5774,6 +6079,6 @@ async function buildSequenceTree(specs, parent, root) {
   return out;
 }
 
-export { CameraSequence, DEFAULT_FOV, DEG3 as DEG, EXPRESSION_NAMES, FALLOFFS, LIGHT_KINDS, LIGHT_PROPS, LightSequence, MANY_BLURRED, MAX_BLUR, MAX_CASTERS, MAX_LIGHTS, MIN_BLUR, NEAR, NullSequence, SHADOW_TAPS, Sequence, TextSequence, bindClock, bindCounterKeyframes, blurRadius, buildScope, buildSequenceTree, cameraBasis, checkEase, clockTable, contentLength, createTimeline, ensureFilterLibrary, evaluateExpr, flattenSvgPath, focusProblems, homeCamera, homeDistance, layerInitialZ, layerToWorld, lengthen, lightLevel, noise, packLights, parseEase, parseSpring, projectLayer, projectPoint, rand, random, registerSequenceType, remapOf, resolveAt, resolveNumber, spansMeta, springDuration, timeRemapOf };
-//# sourceMappingURL=chunk-G3DX65HO.js.map
-//# sourceMappingURL=chunk-G3DX65HO.js.map
+export { CameraSequence, DEFAULT_FOV, DEG3 as DEG, EXPRESSION_NAMES, FALLOFFS, LIGHT_KINDS, LIGHT_PROPS, LightSequence, MANY_BLURRED, MAX_BLUR, MAX_CASTERS, MAX_LIGHTS, MIN_BLUR, NEAR, NullSequence, SHADOW_TAPS, Sequence, TextSequence, bindClock, bindCounterKeyframes, blurRadius, buildScope, buildSequenceTree, cameraBasis, checkEase, clockTable, contentLength, createTimeline, ensureFilterLibrary, evaluateExpr, flattenSvgPath, focusProblems, homeCamera, homeDistance, layerInitialZ, layerToWorld, lengthen, lightLevel, noise, noise2, packLights, parseEase, parseSpring, projectLayer, projectPoint, rand, random, registerSequenceType, remapOf, resolveAt, resolveNumber, spansMeta, springDuration, timeRemapOf, trimPolylines };
+//# sourceMappingURL=chunk-SBR75G73.js.map
+//# sourceMappingURL=chunk-SBR75G73.js.map