@biunow/agent-biuart 0.0.0-stage → 0.1.0

package/engine/demos/long_scroll/lib/world.js

@@ -0,0 +1,143 @@
+// 全片骨架：一条长画卷，N 个世界段首尾相接，花叔从左走到右（横向长卷）。
+// 每个世界段是一个文件 segments/<id>.js，调用 WORLD.add({...})；本文件负责：时间轴、主角行进、相机、画风边界、按边界裁开的主角、帽子上的收藏品。
+//
+// 段的接口（坐标都是「段内世界坐标」：x 从 0 到 w，地面线 GROUND=760 是全片统一的，跨边界时脚底在同一高度）：
+//   WORLD.add({
+//     id: '10_monet', year: 1899, name: '莫奈《睡莲》',            // 角标：年份＋名
+//     w: 2400,                                                      // 段宽（世界 px），≥ 1900；含走路与互动的空间
+//     hero: { walk: 'monet_walk', mat: 'monet', h: 300 },            // 走路帧库（demos/long_scroll/frames/<key>/），材质（XING.actor 的 mat），站立身高
+//     acts: [ { at: 1100, dur: 1.6, key: 'monet_throw', frame: u => 帧号, y: lx => 脚底y(可选) } ],   // 在段内 x=at 处停下做互动，dur 秒；frame(u) 返回该动作帧库的帧号（u=动作内秒）
+//     ground: lx => y,                                              // 可选：地面高度函数（桥面、台阶），两端必须回到 GROUND
+//     back(c, s), front(c, s),                                      // 画背景/前景。s = { camX(段内), t(全片秒), lt(进段后秒), hx(主角段内x), hy, act:{i, u}|null, W:1920, H:1080 }
+//                                                                   //   c 已经裁在本段的带里；世界坐标到屏幕 = lx - s.camX
+//     seam(c, y, sx, t),                                            // 可选：进入本段的那条边界怎么画（本段的签名语言：纸边、浪花、金箔、像素…），sx = 边界在屏幕上的 x
+//     item: { draw(c, x, y, s, t) , gotAt: 段内秒 }                  // 本段送给帽子的收藏品（用本段画风画），从 gotAt 起出现在帽子上，之后跟着他穿越所有世界
+//   });
+// 预览：index.html?film=demos/long_scroll&only=28_monet,14_8bit 只排这几段（世界从 0 开始）；?from=秒
+(() => {
+const W = 1920, H = 1080, { clamp, lerp, ss } = U;
+const WD = window.WORLD = { segs: [], GROUND: 760, V: +(new URLSearchParams(location.search).get('v') || 560), HERO_H: 300 };   // 步速：?v=560 可试更快的全片节奏
+WD.add = seg => { WD.segs.push(seg); };
+WD.START_X = 320;   // 开场主角从段内 x=320 起步（画面左侧留出世界）
+
+// 布局：按 FILM_ORDER（demos/long_scroll/eras.js 里）排；?only= 过滤
+WD.layout = () => {
+  const q = new URLSearchParams(location.search), only = q.get('only');
+  let segs = (window.FILM_ORDER || WD.segs.map(s => s.id)).map(id => WD.segs.find(s => s.id === id)).filter(Boolean);
+  if (only) { const set = only.split(','); segs = segs.filter(s => set.includes(s.id)); }
+  let x = 0, t = 0; const plan = [];
+  for (const s of segs) {
+    s.x0 = x; s.x1 = x + s.w;
+    // 主角时间表：段内按 acts 切成「走→停做动作→走」
+    const acts = (s.acts || []).slice().sort((a, b) => a.at - b.at); let lx = plan.length ? 0 : Math.min(WD.START_X, (acts[0] ? acts[0].at : s.w) - 60);   // 开场主角从画内起步，第 0 帧整个人可见（v1 审片：开头只露半个身子）
+    s.tIn = t;
+    for (const a of acts) { t += (a.at - lx) / (a.v || s.v || WD.V); plan.push({ seg: s, kind: 'walk', t0: t - (a.at - lx) / (a.v || s.v || WD.V), t1: t, x0: x + lx, x1: x + a.at });
+      plan.push({ seg: s, kind: 'act', act: a, t0: t, t1: t + a.dur, x0: x + a.at, x1: x + a.at + (a.dx || 0) }); t += a.dur; lx = a.at + (a.dx || 0); }
+    const tw = (s.w - lx) / (s.v || WD.V); plan.push({ seg: s, kind: 'walk', t0: t, t1: t + tw, x0: x + lx, x1: x + s.w }); t += tw;
+    s.tOut = t; x += s.w;
+  }
+  WD.plan = plan; WD.total = t + (window.FILM_TAIL || 0); WD.active = segs; return WD;
+};
+WD.heroAt = t => {
+  const p = WD.plan.find(q => t >= q.t0 && t < q.t1) || WD.plan[WD.plan.length - 1];
+  const u = clamp((t - p.t0) / Math.max(1e-6, p.t1 - p.t0));
+  const x = lerp(p.x0, p.x1, p.kind === 'walk' ? u : (p.act.move ? p.act.move(u) : u));
+  return { x, p, u: t - p.t0 };
+};
+const segAt = x => WD.active.find(s => x >= s.x0 && x < s.x1) || WD.active[WD.active.length - 1];
+// 边界线：轻微波浪（每条边界相位不同）
+WD.seamX = (s, y) => s.x0 + 22 * Math.sin(y * 0.011 + s.x0 * 0.001) + 8 * Math.sin(y * 0.047 + s.x0 * 0.003);
+const band = (c, a, b, camX) => { c.beginPath();
+  for (let y = -10; y <= H + 10; y += 20) c.lineTo(a ? WD.seamX(a, y) - camX : -60, y);
+  for (let y = H + 10; y >= -10; y -= 20) c.lineTo(b ? WD.seamX(b, y) - camX : W + 60, y);
+  c.closePath(); c.clip(); };
+
+WD.draw = (c, t) => {
+  if (!WD.plan) WD.layout();
+  const hero = WD.heroAt(t), hs = segAt(hero.x);
+  // 相机：主角在画面左 38%，做动作时镜头往前让出空间（act.lead 可调），平滑
+  const camX = WD.camAt(t);
+  const vis = WD.active.filter(s => s.x1 > camX - 80 && s.x0 < camX + W + 80);
+  const ctxFor = s => ({ camX: camX - s.x0, t, lt: t - s.tIn, hx: hero.x - s.x0, act: hero.p.seg === s && hero.p.kind === 'act' ? { a: hero.p.act, u: hero.u } : null, W, H, G: WD.GROUND });
+  // 背景
+  for (const s of vis) { const k = WD.active.indexOf(s), nx = WD.active[k + 1]; c.save(); band(c, k ? s : null, nx, camX); s.back(c, ctxFor(s)); c.restore(); }
+  // 主角：按边界裁开，每段用自己的画风帧
+  for (const s of vis) {
+    if (hero.x < s.x0 - 200 || hero.x > s.x1 + 200) continue;
+    const k = WD.active.indexOf(s), nx = WD.active[k + 1], S = ctxFor(s);
+    c.save(); band(c, k ? s : null, nx, camX);
+    WD.drawHero(c, s, S, hero);
+    c.restore();
+  }
+  // 前景
+  for (const s of vis) { if (!s.front) continue; const k = WD.active.indexOf(s), nx = WD.active[k + 1]; c.save(); band(c, k ? s : null, nx, camX); s.front(c, ctxFor(s)); c.restore(); }
+  // 边界本身（属于进入的那一段）
+  for (const s of vis) { const k = WD.active.indexOf(s); if (!k) continue; c.save(); for (let y = -10; y < H + 10; y += 6) { const sx = WD.seamX(s, y) - camX; if (sx < -120 || sx > W + 120) break; if (s.seam) s.seam(c, y, sx, t); else { c.fillStyle = '#f4ead2'; c.fillRect(sx - 6, y, 8 + U.hash(y, 3) * 6, 7); } } c.restore(); }
+  // 跨边界的颜料迸散
+  for (const s of WD.active) { const k = WD.active.indexOf(s); if (!k) continue; const tc = WD.crossT(s); const a = (t - tc) / 0.5; if (a > 0 && a < 1 && XING.burst) XING.burst(c, s.x0 - camX, WD.GROUND - WD.HERO_H * 0.5, a, 160, s.burst || 'monet', k + 3); }
+  // 角标：年份＋名（随所在段切换，切换时淡入）
+  if (window.FILM_LABEL !== false) WD.label(c, hs, t);
+};
+// 相机：只进不退（v1 审片：互动结尾镜头往回收 68–256px，17 段都有，读成「倒带」）。
+// 目标 = 主角 x − 720 ＋ 互动时向前让出的 lead（只升不降）；取历史最大值保证单调；再做高斯平滑（单调信号卷积正核仍单调），停与起都不顿。
+WD.camAt = t => {
+  if (!WD._cam) {
+    const R = 120, n = Math.ceil(WD.total * R) + 2, raw = new Float64Array(n), last = WD.active[WD.active.length - 1];
+    let mx = -1e9;
+    for (let k = 0; k < n; k++) { const tt = k / R, h = WD.heroAt(tt);
+      const lead = h.p.kind === 'act' ? (h.p.act.lead ?? 160) * ss(0, 0.6, h.u) : 0;
+      mx = Math.max(mx, h.x - 720 + lead); raw[k] = mx; }
+    const sig = 0.14 * R, K = Math.ceil(sig * 3), ker = []; let ks = 0; for (let j = -K; j <= K; j++) { const w = Math.exp(-j * j / (2 * sig * sig)); ker.push(w); ks += w; }
+    const sm = new Float64Array(n);
+    for (let k = 0; k < n; k++) { let a = 0; for (let j = -K; j <= K; j++) a += ker[j + K] * raw[clamp(k + j, 0, n - 1)]; sm[k] = clamp(a / ks, 0, Math.max(0, last.x1 - W)); }
+    WD._cam = { R, sm };
+  }
+  const { R, sm } = WD._cam, f = clamp(t * R, 0, sm.length - 1), k = Math.floor(f), u = f - k;
+  return sm[k] + (sm[Math.min(k + 1, sm.length - 1)] - sm[k]) * u;
+};
+WD.crossT = s => { const p = WD.plan.find(q => q.seg === s); return p ? p.t0 : 0; };
+// 第 k 个互动开始的全片时刻（段里的事件请用它或 s.act.u 定时，不要写死「进段后第几秒」——全片步速会在合成时统一调整）
+WD.actT = (s, k = 0) => { const ps = WD.plan.filter(q => q.seg === s && q.kind === 'act'); return ps[k] ? ps[k].t0 : s.tIn; };
+// 纪念品落帽时刻：item.atAct = 互动开始后第几秒（推荐）；旧写法 item.gotAt = 进段后第几秒（步速变了会错位）
+WD.itemT = g => g.item.atAct != null ? WD.actT(g, g.item.act || 0) + g.item.atAct : g.tIn + (g.item.gotAt ?? (g.tOut - g.tIn) * 0.7);
+
+// 主角：画风帧＋帽子上的收藏品
+WD.drawHero = (c, s, S, hero) => {
+  const H0 = s.hero || {}, h = H0.h || WD.HERO_H, lx = hero.x - s.x0;
+  const gy = (hero.p.kind === 'act' && hero.p.act.y) ? hero.p.act.y(lx, hero.u) : (s.ground ? s.ground(lx) : WD.GROUND);
+  let key = H0.walk, i;
+  const walked = WD.plan.filter(q => q.kind === 'walk' && q.t0 <= S.t).reduce((a, q) => a + Math.min(S.t, q.t1) - q.t0, 0);
+  if (hero.p.kind === 'act' && hero.p.seg === s) { key = hero.p.act.key || H0.walk; i = hero.p.act.frame ? hero.p.act.frame(hero.u) : 0; }
+  else { const n = XING.nFrames(key); i = Math.floor(walked * (H0.fps || 8.5) * WD.V / 330) % n; }   // 步频随步速同比例      // 步频：8.5 帧/秒，同一相位跨边界
+  const o = { x: hero.x - S.camX - s.x0 + s.x0 - s.x0, y: gy, h, mat: H0.mat || 'none', t: S.t, wx: hero.x, shadow: H0.shadow ?? 'rgba(0,0,0,.14)', flip: H0.flip };
+  o.x = lx - S.camX;
+  if (H0.draw) H0.draw(c, key, i, o, S); else XING.actor(c, key, i, o);
+  // 收藏品：按获得顺序叠在帽顶；每件用它来自的那个世界的画风画（纪念品集合）
+  // 段可以接管：s.hideHatItems(S) 返回 true 时这里不画（帽子被叫飞、摘帽放桌上时由段自己画，用 WD.drawHatStack）
+  if (window.FILM_HAT_ITEMS !== true) return;            // 帽上纪念品默认关闭，保持角色轮廓清晰
+  if (s.hideHatItems && s.hideHatItems(S)) return;
+  const [tx, ty] = XING.hatTop(key, i, o); WD.drawHatStack(c, tx, ty + 4, h, S.t);
+};
+// 在 (x, y) 处从下往上画到时刻 t 为止已获得的全部纪念品；返回堆顶 y。段接管帽子时调用它（例如帽子飞起时，传帽子的位置）
+WD.drawHatStack = (c, tx, y, h, t, rot = 0) => {
+  c.save(); c.translate(tx, y); c.rotate(rot); y = 0; tx = 0; const S = { t };
+  for (const g of WD.active) { if (!g.item) continue; const tg = WD.itemT(g); if (S.t < tg) continue;
+    const pop = ss(tg, tg + 0.25, S.t), sc = (g.item.s || 1) * (0.6 + 0.4 * pop) * h / 300;
+    const wob = Math.sin(S.t * 6 + g.x0) * 2 * ss(tg, tg + 0.3, S.t);
+    c.save(); c.translate(tx + wob, y); g.item.draw(c, 0, 0, sc, S.t); c.restore();
+    y -= (g.item.hgt || 26) * sc; }
+  c.restore(); return y;
+};
+
+WD.label = (c, s, t) => {
+  const a = ss(s.tIn, s.tIn + 0.35, t); if (!s.year) return;
+  const yr = typeof s.year === 'number' ? (s.year < 0 ? `${-s.year} BC` : String(s.year)) : s.year;
+  c.save(); c.globalAlpha = a; c.textAlign = 'right'; c.textBaseline = 'alphabetic';
+  c.font = '600 54px "Poppins-700", sans-serif'; const w1 = c.measureText(yr).width;
+  c.font = '30px "LXGWWenKai-500", sans-serif'; const w2 = c.measureText(s.name || '').width;
+  const bw = Math.max(w1, w2) + 48;                                 // 半透明纸片底：跨世界时角标始终可读（审片建议）
+  c.fillStyle = 'rgba(250,246,236,.78)'; c.beginPath(); c.roundRect(1890 - bw, 50, bw, 118, 14); c.fill();
+  c.fillStyle = 'rgba(30,30,40,.88)'; c.font = '600 54px "Poppins-700", sans-serif'; c.fillText(yr, 1866, 108);
+  c.font = '30px "LXGWWenKai-500", sans-serif'; c.fillText(s.name || '', 1866, 152); c.restore();
+};
+})();

package/engine/demos/long_scroll/lib/xing2_ding.js

@@ -0,0 +1,42 @@
+// 一组段共用的小工具（完整片子里 27_kirby、13_pop、14_8bit、25_ghibli、26_vaporwave、16_2026 共用；本示范只用到 14_8bit）。不改 world.js / crossing.js。
+// 段文件开头用 D4.need() 同步加载本文件（index.html 不用改）。
+//   D4.hero(seg, s)            复刻 world.js drawHero 的取帧逻辑：返回 { key, i, o:{x,y,h}, hat:[x,y], act, u }（屏幕坐标），front 里画道具对准手/帽子用
+//   D4.since(seg, s, k)        距本段第 k 个互动开始的秒数（互动前为负）——段内事件一律相对互动定时，步速改了也不错位
+//   D4.frameCanvas(key, i, tag, fn)   取第 i 帧的原图，交给 fn(g, im) 加工成新画布并缓存（画风材质：像素化、海报化、霓虹描边…）
+//   D4.drawFrame(c, key, i, o, cv)    按 XING.actor 的锚点规则把加工后的帧画到 (o.x, o.y)，cv.pad 为加工时四周留的边
+(() => {
+const D4 = window.D4 = {};
+D4.SCALE = {};    // 某些互动帧库（全身＋胸像、站＋坐混排）的 ref_h 被拉偏：按 key 整套补一个缩放，D4.hero 与 hero.draw 共用
+const { clamp } = U;
+D4.hero = (seg, s) => {
+  const WD = WORLD, hero = WD.heroAt(s.t), H0 = seg.hero || {};
+  let key = H0.walk, i;
+  if (hero.p.kind === 'act' && hero.p.seg === seg) { key = hero.p.act.key || H0.walk; i = hero.p.act.frame ? hero.p.act.frame(hero.u) : 0; }
+  else { const walked = WD.plan.filter(q => q.kind === 'walk' && q.t0 <= s.t).reduce((a, q) => a + Math.min(s.t, q.t1) - q.t0, 0); i = Math.floor(walked * (H0.fps || 8.5) * WD.V / 330) % XING.nFrames(key); }   // 与 world.js 同：步频随步速同比例
+  const lx = hero.x - seg.x0;
+  const gy = (hero.p.kind === 'act' && hero.p.seg === seg && hero.p.act.y) ? hero.p.act.y(lx, hero.u) : (seg.ground ? seg.ground(lx) : WD.GROUND);
+  const o = { x: lx - s.camX, y: gy, h: H0.h || WD.HERO_H, scale: D4.SCALE[key] || 1 };
+  return { key, i, o, lx, hat: XING.hatTop(key, i, o), act: hero.p.kind === 'act' && hero.p.seg === seg ? hero.p.act : null, u: hero.u };
+};
+const FC = {};
+D4.img = (key, i) => window.IMG[`demos/long_scroll/frames/${key}/${XING.SPR[key].meta.frames[i].file}`];
+D4.frameCanvas = (key, i, tag, fn) => {
+  const k = key + '|' + i + '|' + tag; if (FC[k]) return FC[k];
+  const im = D4.img(key, i); const cv = fn(im); FC[k] = cv; return cv;
+};
+D4.drawFrame = (c, key, i, o, cv, alpha) => {
+  const f = XING.SPR[key].meta.frames[i], s = o.h / XING.SPR[key].meta.ref_h * (o.scale || 1), pad = cv.pad || 0, k = cv.k || 1;
+  const fx = o.flip ? -1 : 1;
+  c.save(); if (alpha != null) c.globalAlpha *= alpha;
+  if (o.shadow) { c.fillStyle = o.shadow; c.beginPath(); c.ellipse(o.x, o.y + 2, o.h * 0.2, o.h * 0.035, 0, 0, Math.PI * 2); c.fill(); }
+  c.translate(o.x, o.y); c.scale(fx, 1);
+  if (cv.pixel) c.imageSmoothingEnabled = false;
+  c.drawImage(cv, -(f.ax + pad) * s, -(f.ay + pad) * s, cv.width / k * s, cv.height / k * s);
+  c.restore();
+};
+// 一个 im → 留边画布
+D4.padded = (im, pad) => { const cv = PAINT.canvas(im.width + 2 * pad, im.height + 2 * pad); cv.getContext('2d').drawImage(im, pad, pad); cv.pad = pad; return cv; };
+// 抛物线：从 a 到 b（u 0..1），返回 [x,y,u]
+D4.arc = (a, b, u, peak = 200) => { const e = clamp(u); return [a[0] + (b[0] - a[0]) * e, a[1] + (b[1] - a[1]) * e - Math.sin(e * Math.PI) * peak, e]; };
+D4.since = (seg, s, k = 0) => s.t - WORLD.actT(seg, k);
+})();

package/engine/demos/long_scroll/lib/xing2_jia.js

@@ -0,0 +1,114 @@
+// 一组段共用的小工具（完整片子里 01_cave 02_egypt 03_greek 20_dunhuang 17_ink 05_gothic 共用；本示范只用到 02_egypt）。各段文件开头用 XJ_LOAD 同步加载，不进 index.html。
+//   XJ.actor(c, key, i, o, name, proc)   用本段材质画主角帧：proc(g, w, h, i, img) 在「帧＋pad」画布上做该画风的材料处理，结果按 key/帧/name 缓存
+//   XJ.texInside(g, w, h, draw, op)      纹理只乘在角色上（纹理层 destination-in 剪影 → multiply 回去），白帽不变灰：纹理请用接近白的底
+//   XJ.ta(seg, s)                        互动内秒（全片时刻 − WORLD.actT(seg)；互动前为负）——段里所有事件都按它定时，步速改了也对得上
+//   XJ.hatNow(seg, s)                    互动进行中：帽顶在屏幕上的位置
+//   XJ.arc(p0, p1, q, lift)              两点间抛物线
+//   XJ.actFrame(table)                   [[秒, 帧], ...] → frame(u) 函数（u = 动作内秒）
+(() => {
+if (window.XJ) return;
+const { clamp, lerp } = U, P = PAINT, TAU = Math.PI * 2;
+const XJ = window.XJ = {};
+const MATS = {};
+XJ.mat = (key, i, name, proc, pad = 6) => {
+  const k = key + '|' + i + '|' + name; if (MATS[k]) return MATS[k];
+  const S = XING.SPR[key], im = S.imgs[i];
+  const out = P.canvas(im.width + 2 * pad, im.height + 2 * pad), g = out.getContext('2d', { willReadFrequently: true });
+  g.drawImage(im, pad, pad);
+  if (proc) proc(g, out.width, out.height, i, im, pad);
+  out.pad = pad; MATS[k] = out; return out;
+};
+XJ.actor = (c, key, i, o, name, proc) => {
+  XING.hatTop(key, i, o);                                   // 触发 crossing.js 里的 ensure（读帧、算帽顶）
+  const S = XING.SPR[key], f = S.meta.frames[i], im = XJ.mat(key, i, name, proc), pad = im.pad, s = o.h / S.meta.ref_h * (o.scale || 1);
+  const x0 = o.x - (f.ax + pad) * s, y0 = o.y - (f.ay + pad) * s;
+  c.save(); if (o.alpha != null) c.globalAlpha *= o.alpha;
+  if (o.shadow) { c.fillStyle = o.shadow; c.beginPath(); c.ellipse(o.x, o.y + 2, o.h * 0.2, o.h * 0.035, 0, 0, TAU); c.fill(); }
+  if (!o.lock) c.drawImage(im, x0, y0, im.width * s, im.height * s);
+  else {   // 脚底锁：上半身照常（平滑）；膝盖往下用一个连续的错切把下半段平移到 o.lock，鞋（底部 9%）整块平移满——支撑脚贴住地面不打滑
+    const iw = im.width, foot = f.ay + pad, cut = Math.max(0, foot - S.meta.ref_h * 0.4), full = foot - S.meta.ref_h * 0.09;
+    c.drawImage(im, 0, 0, iw, cut, x0, y0, iw * s, cut * s);
+    c.save(); c.beginPath(); c.rect(x0 - 200, y0 + cut * s, iw * s + 400, (full - cut) * s); c.clip();
+    c.translate(0, y0 + cut * s); c.transform(1, 0, o.lock / ((full - cut) * s), 1, 0, 0); c.drawImage(im, x0, -cut * s, iw * s, im.height * s); c.restore();
+    c.drawImage(im, 0, full, iw, im.height - full, x0 + o.lock, y0 + full * s, iw * s, (im.height - full) * s);
+  }
+  c.restore();
+};
+// 走路脚底锁的平移量（屏幕 px）。st = 每帧支撑脚相对锚点的 x（身高 300 时，从走路帧逐帧量出），fps = 该帧库在步速 330 时的帧率（与 hero.fps 一致）。
+// 原理：一个半周期（4 帧）里支撑脚的世界位置不变；平滑行进的身体相对它走了 V·τ，画里的脚相对锚点退了 st0−stj，两者之差就是这一刻该把脚挪回去的量。
+// 段两端 220px 内渐隐到 0（跨边界时两边帧库不同，避免左右半身错位）。
+XJ.walkLock = (seg, S, i, st, fps, h = 300) => {
+  if (S.act) return 0; const t = S.t, P0 = WORLD.plan.find(q => t >= q.t0 && t < q.t1); if (!P0 || P0.kind !== 'walk') return 0;
+  const walked = WORLD.plan.filter(q => q.kind === 'walk' && q.t0 <= t).reduce((a, q) => a + Math.min(t, q.t1) - q.t0, 0);
+  const rate = fps * WORLD.V / 330, ph = walked * rate, h0 = Math.floor(ph / 4) * 4, tau = (ph - h0) / rate;
+  const k0 = h0 % 8, n = st.length; const lock = ((st[k0 % n] - st[i % n]) * h / 300 - WORLD.V * tau);
+  const L = U.ss(0, 220, S.hx) * U.ss(0, 220, seg.w - S.hx);
+  return clamp(lock, -70, 40) * L;
+};
+XJ.texInside = (g, w, h, draw, op = 'multiply', alpha = 1, skipWhite = false) => {
+  const T = P.canvas(w, h), tg = T.getContext('2d');
+  draw(tg, w, h);
+  tg.globalCompositeOperation = 'destination-in'; tg.drawImage(g.canvas, 0, 0);
+  if (skipWhite) { tg.globalCompositeOperation = 'destination-out'; tg.drawImage(XJ.whiteMask(g, w, h), 0, 0); }   // 白帽白T不上做旧（角色设定：帽子纯白）
+  g.save(); g.globalCompositeOperation = op; g.globalAlpha = alpha; g.drawImage(T, 0, 0); g.restore();
+};
+// 逐像素改色（白帽护白等）：fn(r,g,b,a) → [r,g,b] 或 null
+XJ.remap = (g, w, h, fn) => { const d = g.getImageData(0, 0, w, h), q = d.data;
+  for (let k = 0; k < q.length; k += 4) { if (q[k + 3] < 8) continue; const r = fn(q[k], q[k + 1], q[k + 2], q[k + 3], (k >> 2) % w, (k >> 2) / w | 0); if (r) { q[k] = r[0]; q[k + 1] = r[1]; q[k + 2] = r[2]; if (r.length > 3) q[k + 3] = r[3]; } }
+  g.putImageData(d, 0, 0); };
+// 白色区域蒙版（亮且低饱和），给 texInside 挖掉
+XJ.whiteMask = (g, w, h) => { const d = g.getImageData(0, 0, w, h).data, M = P.canvas(w, h), mg = M.getContext('2d'), o = mg.createImageData(w, h);
+  for (let k = 0; k < w * h; k++) { const r = d[k * 4], gg = d[k * 4 + 1], b = d[k * 4 + 2], mx = Math.max(r, gg, b), mn = Math.min(r, gg, b); o.data[k * 4 + 3] = d[k * 4 + 3] > 100 && mx > 200 && mx - mn < 50 ? 255 : 0; }
+  mg.putImageData(o, 0, 0); return M; };
+// 帽区（上 frac）里的做旧斑点抹白：周围 5×5 有六成以上是白的、自身又不暗的像素＝白帽上的斑点 → 换成纯白（帽檐的勾线周围白不足六成，保留）
+XJ.cleanHat = (g, w, h, frac = 0.34, white = [250, 248, 242], R = 2, wmin = 205) => { const D = g.getImageData(0, 0, w, h), d = D.data, Y = Math.floor(h * frac), wt = new Uint8Array(w * Y);
+  for (let y = 0; y < Y; y++) for (let x = 0; x < w; x++) { const k = (y * w + x) * 4, mx = Math.max(d[k], d[k + 1], d[k + 2]), mn = Math.min(d[k], d[k + 1], d[k + 2]); wt[y * w + x] = d[k + 3] > 100 && mx > wmin && mx - mn < 45 ? 1 : 0; }
+  const need = Math.ceil((2 * R + 1) ** 2 * 0.55);
+  for (let y = R; y < Y - R; y++) for (let x = R; x < w - R; x++) { const k = (y * w + x) * 4; if (d[k + 3] < 100 || wt[y * w + x]) continue; const lum = d[k] * 0.3 + d[k + 1] * 0.59 + d[k + 2] * 0.11; if (lum < 95) continue;
+    let n = 0; for (let dy = -R; dy <= R; dy++) for (let dx = -R; dx <= R; dx++) n += wt[(y + dy) * w + x + dx]; if (n >= need) { d[k] = white[0]; d[k + 1] = white[1]; d[k + 2] = white[2]; } }
+  g.putImageData(D, 0, 0); };
+XJ.ta = (seg, s, k = 0) => s.t - WORLD.actT(seg, k);
+XJ.hatNow = (seg, s) => {
+  const a = s.act; if (!a) return null;
+  const key = a.a.key, i = a.a.frame ? a.a.frame(a.u) : 0, h = (seg.hero && seg.hero.h) || WORLD.HERO_H;
+  const x = s.hx - s.camX, y = a.a.y ? a.a.y(s.hx, a.u) : (seg.ground ? seg.ground(s.hx) : WORLD.GROUND);
+  return XING.hatTop(key, i, { x, y, h });
+};
+XJ.arc = (p0, p1, q, lift = 120) => [lerp(p0[0], p1[0], q), lerp(p0[1], p1[1], q) - 4 * lift * q * (1 - q)];
+// 停下/起步不再一帧刹死、一帧满速：互动开头 Tb 秒从步速匀减到 0、末尾 Tb 秒从 0 匀加回步速（镜头跟着他，所以镜头也是缓停缓起）。
+// extra(u) 可叠加互动自己的位移（如被甩飞），extraDx 是它的总位移。返回 { dx, move } 直接展开进 acts 项（并配 lead: 0，免得镜头先冲再倒带）。
+XJ.glide = (dur, Tb = 0.22, extra = null, extraDx = 0) => { const V = WORLD.V, d1 = V * Tb / 2, dx = 2 * d1 + extraDx;
+  const pos = u => (u < Tb ? V * (u - u * u / (2 * Tb)) : d1) + (u > dur - Tb ? V * (u - (dur - Tb)) ** 2 / (2 * Tb) : 0) + (extra ? extra(u) : 0);
+  return { dx, move: f => dx ? pos(f * dur) / dx : 0 }; };
+// 缓停/缓起窗口里不播互动帧，接着播走路帧：步频随速度降到 0 再升回来，与互动前后的走路相位首尾相接
+XJ.walkedAt = t => WORLD.plan.filter(q => q.kind === 'walk' && q.t0 <= t).reduce((a, q) => a + Math.min(t, q.t1) - q.t0, 0);
+XJ.glideWalk = (S, dur, fps, n = 8, Tb = 0.22, head = true, tail = true) => {
+  if (!S.act) return null; const u = S.act.u, V = WORLD.V, rate = fps * V / 330, ph0 = XJ.walkedAt(S.t - u) * rate, d1 = V * Tb / 2;
+  let ph = null;
+  if (head && u < Tb) ph = ph0 + (V * (u - u * u / (2 * Tb))) / V * rate;
+  else if (tail && u > dur - Tb) { const w = u - (dur - Tb); ph = ph0 - (d1 - V * w * w / (2 * Tb)) / V * rate; }
+  return ph == null ? null : ((Math.floor(ph) % n) + n) % n;
+};
+XJ.actFrame = tab => u => { let f = tab[0][1]; for (const [t0, fr] of tab) if (u >= t0) f = fr; return f; };
+// 只在本段可见范围内画：lx 世界坐标 → 屏幕
+XJ.vis = (s, lx, pad = 300) => lx - s.camX > -pad && lx - s.camX < s.W + pad;
+// 跨边界的颜料迸散：crossing.js 只有 monet / vg 两套颜色。这里只给本组的 burst 名（'jia_*'）换色，其余照旧交回原函数（不改 crossing.js）
+XJ.BURST = {
+  jia_cave: ['#9c3520', '#c9772f', '#21150d', '#d49a5a', '#74261a'],
+  jia_egypt: ['#1f4fa0', '#c0392b', '#2f8a5a', '#e0b030', '#1a1a1a'],
+  jia_greek: ['#1a1410', '#c8602a', '#e8d2b0', '#7a2a1a'],
+  jia_dunhuang: ['#2f5f8f', '#3f8f6e', '#a5452f', '#ecdfc4', '#d8b05a'],
+  jia_ink: ['#1a1a1a', '#3a3a3a', '#6a6a6a', '#9a9a9a', '#b8322a'],
+  jia_gothic: ['#e8c45a', '#1f3f9f', '#b8202a', '#f6e6a8', '#2f7a3a'],
+};
+if (XING.burst && !XING.burst.__jia) {
+  const orig = XING.burst;
+  XING.burst = (c, x, y, a, R, style, seed = 1) => {
+    const cols = XJ.BURST[style]; if (!cols) return orig(c, x, y, a, R, style, seed); if (a < 0 || a > 1) return;
+    const r = U.rng(seed); c.save(); c.lineCap = 'round';
+    for (let i = 0; i < 70; i++) { const ang = r() * TAU, sp = R * (0.55 + r() * 0.8), d = 150 + sp * U.ease.out(a), x1 = x + Math.cos(ang) * d, y1 = y + Math.sin(ang) * d * 0.8 + 120 * a * a;   // 从人身外一圈迸开，不压在他身上（审片：彩条留在白T上）
+      c.strokeStyle = cols[i % cols.length]; c.globalAlpha = 1 - a; c.lineWidth = 7 + r() * 6; c.beginPath(); c.moveTo(x1, y1); c.lineTo(x1 + Math.cos(ang) * 16, y1 + Math.sin(ang) * 10); c.stroke(); }
+    c.restore(); };
+  XING.burst.__jia = true;
+}
+})();

package/engine/demos/long_scroll/lib/xing2_yi.js

@@ -0,0 +1,133 @@
+// 一组段共用的小工具（完整片子里 06_renaissance / 32_rembrandt / 07_ukiyoe / 28_monet / 29_seurat / 09_postimp 共用；本示范只用到 28_monet）。
+// 不进 index.html：各段文件开头同步加载（if (!window.YI) …），哪一段先加载都行。
+//   YI.S(key)                         帧库（确保 XING 已算好 imgs/hat）
+//   YI.actor(c, key, i, o, mat)       画第 i 帧，mat = { name, fn(img)->canvas(可带 pad), atop(g, o, box) }：
+//                                     fn 是逐帧缓存的材质（滤镜、点彩重画…）；atop 每帧在精灵上 source-atop 叠（烛光、光斑）
+//   YI.toScreen(key, i, o, [px,py])   帧内像素坐标 → 屏幕坐标（手的位置、道具对齐）
+//   YI.hand(key, i, o, tbl)           tbl[i] = [px,py]（帧内像素）→ 屏幕坐标
+//   YI.fly(c, from, to, q, draw, o)   纪念品飞上帽子：抛物线＋放大＋旋转（落帽那一下由 world.js 的 pop 接住）
+(() => {
+const W = 1920, H = 1080, TAU = Math.PI * 2;
+const { clamp, lerp, ss } = U;
+const P = window.PAINT, X = window.XING;
+const Y = window.YI = {};
+
+// 帧库在不在（读目录列表，不发 404 请求——render.py 把 404 记成页面报错）
+let LIST = null;
+Y.has = k => { if (LIST == null) { const x = new XMLHttpRequest(); x.open('GET', 'demos/long_scroll/frames/', false); x.send(); LIST = x.status === 200 ? x.responseText : ''; } return LIST.includes(`"${k}/"`); };
+// 帽顶修正：举过头顶的手会骗过 XING 的「最上一行不透明像素」，用逐帧量出的白帽顶覆盖（帧内像素 [x,y]）
+Y.HATFIX = {};
+Y.fixHat = (key, arr) => { Y.HATFIX[key] = arr; };
+Y.S = key => { X.hatTop(key, 0, { x: 0, y: 0, h: 1 }); const S = X.SPR[key]; if (Y.HATFIX[key] && !S._yiFixed) { Y.HATFIX[key].forEach((p, i) => { if (p) S.hat[i] = p; }); S._yiFixed = true; } return S; };
+Y.hatTop = (key, i, o) => { Y.S(key); return X.hatTop(key, i, o); };
+const PROC = {};
+Y.proc = (key, i, mat) => {
+  const k = key + '|' + mat.name + '|' + i; if (PROC[k]) return PROC[k];
+  const S = Y.S(key), im = S.imgs[i]; const out = mat.fn(im); if (out.pad == null) out.pad = 0; return PROC[k] = out;
+};
+Y.geom = (key, i, o) => { const S = Y.S(key), f = S.meta.frames[i], s = o.h / S.meta.ref_h * (o.scale || 1); return { S, f, s }; };
+Y.toScreen = (key, i, o, p) => { const { f, s } = Y.geom(key, i, o), fx = o.flip ? -1 : 1; return [o.x + (p[0] - f.ax) * s * fx, o.y + (p[1] - f.ay) * s]; };
+Y.hand = (key, i, o, tbl) => Y.toScreen(key, i, o, tbl[i] || tbl[0]);
+
+Y.actor = (c, key, i, o, mat) => {
+  const { S, f, s } = Y.geom(key, i, o);
+  const im = mat && mat.fn ? Y.proc(key, i, mat) : S.imgs[i], pad = im.pad || 0, fx = o.flip ? -1 : 1;
+  const dw = im.width * s, dh = im.height * s, x0 = o.x - (f.ax + pad) * s * fx, y0 = o.y - (f.ay + pad) * s;
+  const left = o.flip ? x0 - dw : x0;
+  c.save(); if (o.alpha != null) c.globalAlpha *= o.alpha;
+  if (o.shadow) { c.fillStyle = o.shadow; c.beginPath(); c.ellipse(o.x, o.y + 2, o.h * 0.2, o.h * 0.035, 0, 0, TAU); c.fill(); }
+  if (mat && mat.atop) {
+    const Sc = P.scratch('yiActor'), g = Sc.getContext('2d'); g.setTransform(1, 0, 0, 1, 0, 0);
+    const bw = Math.ceil(dw) + 4, bh = Math.ceil(dh) + 4; g.clearRect(0, 0, bw + 4, bh + 4);
+    g.save(); g.translate(2, 2); if (o.flip) { g.translate(dw, 0); g.scale(-1, 1); } g.drawImage(im, 0, 0, dw, dh); g.restore();
+    g.save(); g.globalCompositeOperation = 'source-atop'; g.translate(2 - left, 2 - y0); mat.atop(g, o, { x: left, y: y0, w: dw, h: dh }); g.restore();
+    c.drawImage(Sc, 0, 0, bw, bh, left - 2, y0 - 2, bw, bh);
+  } else {
+    if (o.flip) { c.translate(left + dw, y0); c.scale(-1, 1); c.drawImage(im, 0, 0, dw, dh); }
+    else c.drawImage(im, left, y0, dw, dh);
+  }
+  c.restore();
+};
+
+// 生图爱把白帽白T画成米黄浅灰：低饱和的亮色拉回白（帽子定规是纯白）。lo = 起拉的亮度
+Y.whiten = (g, w, h, lo = 185, r = 251, gg = 249, b = 242, chroma = 52) => { const d = g.getImageData(0, 0, w, h), q = d.data;
+  for (let k = 0; k < q.length; k += 4) { const mx = Math.max(q[k], q[k + 1], q[k + 2]), mn = Math.min(q[k], q[k + 1], q[k + 2]); if (q[k + 3] > 0 && mx > lo && mx - mn < chroma) { const f = Math.min(1, (mx - lo) / (255 - lo) * 1.15); q[k] = lerp(q[k], r, f); q[k + 1] = lerp(q[k + 1], gg, f); q[k + 2] = lerp(q[k + 2], b, f); } }
+  g.putImageData(d, 0, 0); };
+// 段两端补边：画风边界是波浪线（±30px），会伸出段的 [0,w] 之外——把世界画布最边上 2px 拉宽铺到外面 80px，免得露黑
+Y.edge = (c, cv, camX, w) => { c.drawImage(cv, 0, 0, 2, cv.height, -camX - 80, 0, 82, cv.height); c.drawImage(cv, w - 2, 0, 2, cv.height, w - camX, 0, 80, cv.height); };
+// 纪念品飞上帽子时的落点＝当前那摞的顶（不是帽顶）：在草稿画布上空画一遍 drawHatStack 拿顶端高度
+Y.stackTop = (key, i, o, t) => { const [hx, hy] = Y.hatTop(key, i, o), g = P.scratch('yiStackProbe').getContext('2d'); g.setTransform(1, 0, 0, 1, 0, 0); g.globalAlpha = 0; const top = WORLD.drawHatStack(g, hx, hy + 4, o.h || 300, t); g.globalAlpha = 1; return [hx, hy + 4 + top]; };
+// 帽子拉回纯白：直接改帧库里的原帧（只改上部帽子那几成高度的低饱和亮色），之后 XING 的材质都从白帽子算起
+Y.whitenHat = (key, { frac = 0.42, lo = 150, chroma = 110 } = {}) => { const S = Y.S(key); if (S._yiWhite) return; S.imgs = S.imgs.map(im => { const cv = P.canvas(im.width, im.height), g = cv.getContext('2d', { willReadFrequently: true }); g.drawImage(im, 0, 0);
+  const hh = Math.round(im.height * frac); const d = g.getImageData(0, 0, im.width, hh), q = d.data;
+  for (let k = 0; k < q.length; k += 4) { const mx = Math.max(q[k], q[k + 1], q[k + 2]), mn = Math.min(q[k], q[k + 1], q[k + 2]); if (q[k + 3] > 0 && mx > lo && mx - mn < chroma && q[k + 2] >= q[k] - 20) { const f = Math.min(1, (mx - lo) / (255 - lo) * 1.3); q[k] = lerp(q[k], 252, f); q[k + 1] = lerp(q[k + 1], 251, f); q[k + 2] = lerp(q[k + 2], 248, f); } }
+  g.putImageData(d, 0, 0); return cv; }); S._yiWhite = true; };
+// 纪念品飞上帽子：from/to 屏幕坐标；q 0..1；draw(c, x, y, scale, rot)
+Y.fly = (c, from, to, q, draw, { arc = 160, grow = 0.8, spin = 0, s0 = 1, s1 = 1 } = {}) => {
+  const e = U.ease ? q : q; const x = lerp(from[0], to[0], e), y = lerp(from[1], to[1], e) - Math.sin(e * Math.PI) * arc;
+  const sc = lerp(s0, s1, e) * (1 + grow * Math.sin(e * Math.PI)); draw(c, x, y, sc, spin * e);
+};
+
+// 简单的抠精灵像素工具：返回精灵的 ImageData（缓存）
+const DATA = {};
+Y.data = (key, i) => { const k = key + i; if (DATA[k]) return DATA[k]; const im = Y.S(key).imgs[i], cv = P.canvas(im.width, im.height), g = cv.getContext('2d', { willReadFrequently: true }); g.drawImage(im, 0, 0); return DATA[k] = { w: im.width, h: im.height, d: g.getImageData(0, 0, im.width, im.height).data }; };
+
+// 烛火（伦勃朗段纪念品与段内道具共用）：x,y = 烛芯底；s 缩放；t 时间。只画火苗＋内焰＋芯
+Y.flame = (c, x, y, s, t, seed = 0) => {
+  const fl = 0.5 * P.noise(t * 2.2 + seed, 3.1) + 0.25 * P.noise(t * 6.5 + seed, 7.7), lean = fl * 0.5, hgt = (30 + 8 * P.noise(t * 5 + seed, 1.3)) * s;
+  c.save(); c.translate(x, y);
+  const outer = new Path2D(); outer.moveTo(-7 * s, 0); outer.bezierCurveTo(-9 * s, -hgt * 0.45, lean * hgt * 0.6 - 2 * s, -hgt * 0.75, lean * hgt, -hgt); outer.bezierCurveTo(lean * hgt * 0.6 + 2 * s, -hgt * 0.75, 9 * s, -hgt * 0.45, 7 * s, 0); outer.closePath();
+  const g1 = c.createRadialGradient(0, -hgt * 0.3, 1, 0, -hgt * 0.3, hgt * 0.9); g1.addColorStop(0, 'rgba(255,250,215,1)'); g1.addColorStop(0.5, 'rgba(255,200,90,.95)'); g1.addColorStop(1, 'rgba(230,110,30,.7)');
+  c.fillStyle = g1; c.fill(outer);
+  c.fillStyle = 'rgba(255,255,240,.95)'; c.beginPath(); c.ellipse(lean * hgt * 0.25, -hgt * 0.3, 2.6 * s, hgt * 0.22, lean * 0.3, 0, TAU); c.fill();
+  c.fillStyle = 'rgba(90,110,200,.55)'; c.beginPath(); c.ellipse(0, -2 * s, 3.5 * s, 3 * s, 0, 0, TAU); c.fill();
+  c.strokeStyle = '#2a1a10'; c.lineWidth = 1.6 * s; c.beginPath(); c.moveTo(0, 2 * s); c.lineTo(lean * 3 * s, -5 * s); c.stroke();
+  c.restore();
+};
+// 烛光晕（lighter）
+Y.glow = (c, x, y, r, a, col = '255,190,100') => { c.save(); c.globalCompositeOperation = 'lighter'; const g = c.createRadialGradient(x, y, 0, x, y, r); g.addColorStop(0, `rgba(${col},${a})`); g.addColorStop(0.4, `rgba(${col},${a * 0.4})`); g.addColorStop(1, `rgba(${col},0)`); c.fillStyle = g; c.fillRect(x - r, y - r, 2 * r, 2 * r); c.restore(); };
+Y.flick = (t, seed = 0) => 0.5 + 0.5 * (0.6 * P.noise(t * 2.2 + seed, 5.5) + 0.4 * P.noise(t * 7 + seed, 9.1));
+
+// ---------- 点彩（修拉）：P.pointillism 的「世界坐标版」——网格锚在世界上（相机横移时点不游动），任意尺寸画布，可只点不透明处 ----------
+// src 的 x=0 对应世界 x = gx0；alphaMin>0 时只在 src 不透明处下点（动态物件层）；rect=[x0,y0,x1,y1] 限定范围（src 坐标）
+const PICK = new Map();
+Y.dots = (c, src, { pal, comp = {}, pitch = 10, rad = 4.5, posJitter = 2.4, colorJitter = 40, compRate = 0.08, flicker = 0.07, fps = 6, t = 0, shimmer, white = 12, dark = 0, bleed = 45, gx0 = 0, alphaMin = 0, rect, palKey = 'p' } = {}) => {
+  const PAL = pal.map(v => typeof v === 'string' ? P.hex(v) : v);
+  let cache = PICK.get(palKey); if (!cache) { cache = new Map(); PICK.set(palKey, cache); }
+  const pick = (r, g, b) => { const key = (r >> 3) << 10 | (g >> 3) << 5 | (b >> 3); let v = cache.get(key); if (v) return v;
+    let best = 1e18, bi = 0, bj = 0, bw = 1;
+    for (let i = 0; i < PAL.length; i++) for (let j = i + 1; j < PAL.length; j++) { const pi = PAL[i], pj = PAL[j], ex = pi[0] - pj[0], ey = pi[1] - pj[1], ez = pi[2] - pj[2];
+      const w = clamp(((r - pj[0]) * ex + (g - pj[1]) * ey + (b - pj[2]) * ez) / (ex * ex + ey * ey + ez * ez + 1e-6), 0.2, 0.8);
+      const dr = pj[0] + w * ex - r, dg = pj[1] + w * ey - g, db = pj[2] + w * ez - b, d = dr * dr * 0.9 + dg * dg * 1.2 + db * db * 0.8 + (ex * ex + ey * ey + ez * ez) * 0.004;
+      if (d < best) { best = d; bi = i; bj = j; bw = w; } }
+    v = [bi, bj, bw]; cache.set(key, v); return v; };
+  const sw = src.width, sh = src.height, [rx0, ry0, rx1, ry1] = rect || [0, 0, sw, sh];
+  const sd = src.getContext('2d', { willReadFrequently: true }).getImageData(0, 0, sw, sh).data;
+  const at = (x, y) => (clamp(y | 0, 0, sh - 1) * sw + clamp(x | 0, 0, sw - 1)) * 4;
+  const L = (x, y) => { const k = at(x, y); return sd[k] * 0.3 + sd[k + 1] * 0.59 + sd[k + 2] * 0.11; };
+  const paths = PAL.map(() => new Path2D()), st = Math.floor(t * fps), ROWH = pitch * 0.866, hj = posJitter / 2;
+  for (let j = Math.max(0, Math.floor(ry0 / ROWH) - 1), y = j * ROWH; y < ry1 + ROWH; j++, y += ROWH) {
+    const off = (j % 2) * pitch / 2, i0 = Math.floor((gx0 + rx0 - off) / pitch) - 1, i1 = Math.ceil((gx0 + rx1 - off) / pitch) + 1;
+    for (let i = i0; i <= i1; i++) {
+      const jx = (U.hash(i, j * 7 + 1) - 0.5) * 2 * hj, jy = (U.hash(i * 3, j + 5) - 0.5) * 2 * hj, px = i * pitch + off + jx - gx0, py = y + jy;
+      if (px < rx0 - pitch || px > rx1 + pitch) continue;
+      const k = at(px, py); if (alphaMin && sd[k + 3] < alphaMin) continue;
+      const dj = (U.hash(i * 7 + 3, j * 11) - 0.5) * colorJitter;
+      const [a, bb, w] = pick(clamp(sd[k] + dj, 0, 255), clamp(sd[k + 1] + dj * 0.8, 0, 255), clamp(sd[k + 2] - dj * 0.6, 0, 255));
+      const hseed = shimmer && shimmer(px, py) ? U.hash(i + st * 977, j) : U.hash(i, j);
+      let idx = hseed < w ? a : bb; const h2 = U.hash(i * 5 + 2, j * 3 + 9);
+      if (h2 < compRate && comp[idx] != null) idx = comp[idx];
+      else if (U.hash(i * 13 + st * 31, j * 17) < flicker) idx = (U.hash(i, j + st) < w) ? bb : a;
+      else if (!alphaMin) { const dl = L(px, py) - L(px + 14, py + 6); if (Math.abs(dl) > bleed && h2 < 0.45) idx = dl > 0 ? white : dark; }
+      paths[idx].moveTo(px + rad, py); paths[idx].arc(px, py, rad, 0, TAU);
+    } }
+  paths.forEach((p, k) => { c.fillStyle = P.rgb(PAL[k]); c.fill(p); });
+};
+// 精灵 → 点阵（散开/聚回用）：按 pitch 采样不透明像素，返回 [{x,y,col,r1,r2,r3}]（帧内像素坐标）
+const DOTS = {};
+Y.spriteDots = (key, i, pitch, procCanvas) => { const k = key + i + '|' + pitch; if (DOTS[k]) return DOTS[k];
+  const im = procCanvas || Y.S(key).imgs[i], cv = P.canvas(im.width, im.height), g = cv.getContext('2d', { willReadFrequently: true }); g.drawImage(im, 0, 0); const d = g.getImageData(0, 0, im.width, im.height).data, out = [];
+  for (let y = 0, j = 0; y < im.height; y += pitch * 0.866, j++) for (let x = (j % 2) * pitch / 2; x < im.width; x += pitch) { const q = ((y | 0) * im.width + (x | 0)) * 4; if (d[q + 3] < 140) continue;
+    out.push({ x, y, col: `rgb(${d[q]},${d[q + 1]},${d[q + 2]})`, r1: U.hash(x | 0, y | 0), r2: U.hash(y | 0, (x | 0) + 7), r3: U.hash((x | 0) + 3, (y | 0) * 3) }); }
+  return DOTS[k] = out; };
+})();