@biunow/agent-biuart 0.0.0-stage → 0.1.0

package/engine/lib/medium.js

@@ -0,0 +1,258 @@
+// 媒介层：把「干净的形」过一遍真实的画材，而不是在扁平矢量上盖噪点。2026-10-16 新增，新风格演示（38–54）用。
+//   MEDIUM.figure(c, o)            有体量的着衣人物：钟形袍＋披风褶＋袖＋手＋简化脸（视线是主角）。只给原创平面/壁画/细密画一类明确选择的风格用
+//   MEDIUM.plaster(key, o)         灰泥墙底：低频湿干色差＋颗粒＋针孔＋接缝（壁画「一天的活」边），缓存
+//   MEDIUM.fresco(c, plate, o)     壁画通道：色粉被石灰吃进去（轻糊＋粉白罩）＋灰泥相乘＋针孔提亮＋接缝
+//   MEDIUM.silk(key, o)            绢/纸底：经纬丝纹＋泛黄晕边，缓存
+//   MEDIUM.outline(c, path, o)     轮廓线：可变线宽、颜色可偏（赭褐、群青、墨），不是纯黑
+//   MEDIUM.flat(c, path, fill, o)  掐丝珐琅式平涂：同色块里有顺笔向的短条＋粗而不均的深群青轮廓（高更）
+//   MEDIUM.broken(src, o)          破碎色笔触重绘：把干净的画布重画成一笔一笔的印象派（明处偏暖、暗处偏冷的互补抖动），返回新画布，调用方缓存
+//   MEDIUM.hatchFill(c, path, o)   在路径内按方向排线（木刻/铜版/细密画暗部）
+// 约定：所有随机走种子；plate 是画好的 1920×1080 离屏画布；通道函数不改 plate。
+(() => {
+let W = 1920, H = 1080; U.onStage((w, h) => { W = w; H = h; });
+const P = window.PAINT, { clamp, lerp, rng, ss } = U, TAU = Math.PI * 2;
+const M = window.MEDIUM = {};
+
+const hex = h => P.hex(h);
+const mixc = (a, b, t) => P.mix(typeof a === 'string' ? hex(a) : a, typeof b === 'string' ? hex(b) : b, t);
+const css = (c, a = 1) => P.rgb(typeof c === 'string' ? hex(c) : c, a);
+M.css = css; M.mix = mixc;
+
+// ---------- 灰泥 ----------
+// 壁画不是纸：石灰层有低频的湿干色差、细颗粒、针孔；一天的活（giornata）之间有一道几乎看不见的接缝。
+M.plaster = (key, { base = '#d9cdb4', seams = [], seed = 7, pits = 1400, mottle = 0.07 } = {}) => P.cached('plaster_' + key, W, H, (g) => {
+  const r = rng(seed), im = g.createImageData(W, H), d = im.data, b = hex(base);
+  for (let y = 0; y < H; y++) for (let x = 0; x < W; x++) {
+    const i = (y * W + x) * 4;
+    const m = P.fbm(x * 0.0035 + seed, y * 0.0035, 4) * mottle * 255 + P.fbm(x * 0.02, y * 0.02 + seed, 3) * 0.035 * 255;
+    const f = (r() - 0.5) * 16;                                   // 细颗粒
+    d[i] = clamp(b[0] + m + f, 0, 255); d[i + 1] = clamp(b[1] + m + f, 0, 255); d[i + 2] = clamp(b[2] + m * 0.9 + f, 0, 255); d[i + 3] = 255;
+  }
+  g.putImageData(im, 0, 0);
+  for (let i = 0; i < pits; i++) {                                // 针孔：暗点＋右下一侧的亮边
+    const x = r() * W, y = r() * H, s = 0.6 + r() * 1.9;
+    g.fillStyle = `rgba(70,55,40,${0.12 + r() * 0.22})`; g.beginPath(); g.arc(x, y, s, 0, TAU); g.fill();
+    g.fillStyle = 'rgba(255,250,235,.28)'; g.beginPath(); g.arc(x + s * 0.7, y + s * 0.7, s * 0.55, 0, TAU); g.fill();
+  }
+  g.lineCap = 'round';
+  for (const sm of seams) {                                       // 接缝：[[x,y],...] 折线；一条亮脊＋一条暗线，两侧底色略差
+    g.strokeStyle = 'rgba(80,62,45,.22)'; g.lineWidth = 1.6; g.beginPath(); sm.forEach((p, k) => k ? g.lineTo(p[0], p[1]) : g.moveTo(p[0], p[1])); g.stroke();
+    g.strokeStyle = 'rgba(255,248,230,.34)'; g.lineWidth = 1.4; g.beginPath(); sm.forEach((p, k) => k ? g.lineTo(p[0], p[1] + 2) : g.moveTo(p[0], p[1] + 2)); g.stroke();
+  }
+});
+
+// 壁画通道：plate（干净的形）→ 画面。
+// ① 轻糊（色粉被湿灰泥吃进去，边缘不锐）② 石灰粉白罩（screen 低 α，整体粉、哑）③ 灰泥相乘（底色差、颗粒）④ 针孔和接缝提亮
+M.fresco = (c, plate, { ground, chalk = 0.10, soften = 0.8, plasterAlpha = 0.55, sat = 0.9, tone = null } = {}) => {
+  c.save();
+  c.filter = `blur(${soften}px) saturate(${sat})`; c.drawImage(plate, 0, 0); c.filter = 'none';
+  c.globalCompositeOperation = 'screen'; c.fillStyle = `rgba(236,226,206,${chalk})`; c.fillRect(0, 0, W, H);
+  c.globalCompositeOperation = 'multiply'; c.globalAlpha = plasterAlpha; c.drawImage(ground, 0, 0);
+  c.globalCompositeOperation = 'soft-light'; c.globalAlpha = 0.5; c.drawImage(ground, 0, 0);
+  if (tone) { c.globalCompositeOperation = 'multiply'; c.globalAlpha = 1; c.fillStyle = tone; c.fillRect(0, 0, W, H); }
+  c.restore();
+};
+
+// ---------- 绢 / 纸底 ----------
+M.silk = (key, { base = '#c9a85e', seed = 3, warp = 0.5, vig = 0.5, fleck = 1800 } = {}) => P.cached('silk_' + key, W, H, (g) => {
+  const r = rng(seed), b = hex(base);
+  const gr = g.createLinearGradient(0, 0, 0, H); gr.addColorStop(0, css(mixc(b, [255, 240, 200], 0.18))); gr.addColorStop(1, css(mixc(b, [120, 80, 30], 0.12)));
+  g.fillStyle = gr; g.fillRect(0, 0, W, H);
+  g.globalAlpha = 0.5; g.drawImage(P.texture('silk' + key, base, { scale: 0.003, amt: 14, grain: 5, seed }), 0, 0); g.globalAlpha = 1;
+  for (let x = 0; x < W; x += 3) { g.fillStyle = `rgba(90,60,20,${(0.02 + r() * 0.045) * warp})`; g.fillRect(x, 0, 1, H); }       // 经线
+  for (let y = 0; y < H; y += 3) { g.fillStyle = `rgba(255,236,170,${(0.015 + r() * 0.04) * warp})`; g.fillRect(0, y, W, 1); }     // 纬线
+  for (let i = 0; i < fleck; i++) { g.fillStyle = r() < 0.5 ? 'rgba(80,55,25,.10)' : 'rgba(255,240,200,.14)'; g.fillRect(r() * W, r() * H, 1 + r() * 4, 1); }
+  const v = g.createRadialGradient(W / 2, H / 2, H * 0.45, W / 2, H / 2, W * 0.75); v.addColorStop(0, 'rgba(80,50,15,0)'); v.addColorStop(1, `rgba(80,50,15,${vig * 0.5})`);
+  g.fillStyle = v; g.fillRect(0, 0, W, H);
+});
+
+// ---------- 线 ----------
+// 沿 pts 画变宽线：w 为 [起,中,尾] 宽度，col 颜色。不是纯黑——给素描红土/群青/墨色。
+M.outline = (c, pts, { w = [1, 3, 1], col = '#4a3322', a = 0.9, closed = false, jitter = 0, seed = 1 } = {}) => {
+  const r = rng(seed), n = pts.length;
+  c.save(); c.lineCap = 'round'; c.lineJoin = 'round'; c.strokeStyle = typeof col === 'string' ? col : css(col, a); c.globalAlpha = a;
+  const seg = closed ? n : n - 1;
+  for (let i = 0; i < seg; i++) {
+    const A = pts[i], B = pts[(i + 1) % n], q = i / Math.max(1, seg - 1);
+    c.lineWidth = q < 0.5 ? lerp(w[0], w[1], q * 2) : lerp(w[1], w[2], (q - 0.5) * 2);
+    c.beginPath(); c.moveTo(A[0] + (r() - .5) * jitter, A[1] + (r() - .5) * jitter); c.lineTo(B[0] + (r() - .5) * jitter, B[1] + (r() - .5) * jitter); c.stroke();
+  }
+  c.restore();
+};
+
+M.hatchFill = (c, path, { ang = 0.9, gap = 5, col = 'rgba(40,30,20,.35)', lw = 1, bounds = [0, 0, W, H], seed = 1 } = {}) => {
+  const r = rng(seed); c.save(); c.clip(path); c.strokeStyle = col; c.lineWidth = lw; c.beginPath();
+  const [bx, by, bw, bh] = bounds, R = Math.hypot(bw, bh), cx = bx + bw / 2, cy = by + bh / 2, ca = Math.cos(ang), sa = Math.sin(ang);
+  for (let k = -R; k < R; k += gap) { const j = (r() - .5) * 1.2; c.moveTo(cx + ca * -R - sa * (k + j), cy + sa * -R + ca * (k + j)); c.lineTo(cx + ca * R - sa * (k + j), cy + sa * R + ca * (k + j)); }
+  c.stroke(); c.restore();
+};
+
+// ---------- 掐丝珐琅式平涂（高更/综合主义）----------
+// path: Path2D；fill: 色；o.streak: 笔向（弧度），o.vari: 色差幅度；o.line: 轮廓色（深群青/紫黑，不是纯黑），o.lw: 轮廓宽
+// 平涂不等于平：同一色块里有顺笔向的明暗短条（看得见刷子），轮廓粗而不均。每块用 o.seed 固定笔触，确定性。
+M.flat = (c, path, fill, { streak = 0.7, vari = 18, line = '#1d2a52', lw = 6, seed = 1, bounds = [0, 0, W, H], n = 46, la = 0.95 } = {}) => {
+  const r = rng(seed * 131), f = typeof fill === 'string' ? hex(fill) : fill;
+  c.save(); c.fillStyle = css(f); c.fill(path); c.clip(path);
+  const [bx, by, bw, bh] = bounds;
+  c.lineCap = 'round';
+  for (let i = 0; i < n; i++) {
+    const x = bx + r() * bw, y = by + r() * bh, L = 40 + r() * 120, a = streak + (r() - .5) * 0.25, d = (r() - .5) * 2 * vari;
+    c.strokeStyle = css([f[0] + d, f[1] + d * 0.8, f[2] + d * 0.7], 0.55); c.lineWidth = 8 + r() * 22;
+    c.beginPath(); c.moveTo(x, y); c.lineTo(x + Math.cos(a) * L, y + Math.sin(a) * L); c.stroke();
+  }
+  c.restore();
+  if (lw) { c.save(); c.strokeStyle = line; c.globalAlpha = la; c.lineWidth = lw; c.lineJoin = 'round'; c.lineCap = 'round'; c.stroke(path); c.restore(); }
+};
+
+// ---------- 破碎色笔触重绘（印象派：毕沙罗/西斯莱/瓜尔迪/雷诺阿）----------
+// src：画好的干净画布（可比舞台宽，如拖动的天空）；返回新画布（调用方缓存）。
+// 每个采样点画一小笔：沿 angleFn(x,y) 方向、两头尖的弯笔，颜色＝该点颜色按「明暗＋冷暖互补」抖动——
+// 亮处偏暖黄/粉、暗处偏冷紫/蓝（不是单纯明度噪声）；随机跳过一些点让底色透出；笔序确定性打乱，所以厚笔压薄笔。
+// o: cell 采样间距, len 笔长, wid 笔宽, passes 遍数（第二遍更小更碎）, angle(x,y)→弧度, seed, warm/cool 互补抖动色, sat 饱和度增益
+M.broken = (src, { cell = 9, len = 26, wid = 8, passes = 2, angle = () => 0, seed = 1, warm = [255, 226, 160], cool = [120, 120, 190], jit = 22, skip = 0.1, sat = 1.06, base = true } = {}) => {
+  const w = src.width, h = src.height, out = P.canvas(w, h), g = out.getContext('2d');
+  const sg = src.getContext('2d', { willReadFrequently: true }), d = sg.getImageData(0, 0, w, h).data, r = rng(seed * 977);
+  if (base) { g.filter = 'blur(6px)'; g.drawImage(src, -14, -14, w + 28, h + 28); g.filter = 'none'; }   // 外扩 14px 再糊：边缘不留半透明圈（左缘一排缺口小圆点就是这么来的）
+  g.lineCap = 'round';
+  for (let pass = 0; pass < passes; pass++) {
+    const cs = cell * (pass ? 0.62 : 1), L = len * (pass ? 0.6 : 1), Wd = wid * (pass ? 0.6 : 1), pts = [];
+    for (let y = 0; y < h + cs; y += cs) for (let x = 0; x < w + cs; x += cs) pts.push([x + (r() - .5) * cs, y + (r() - .5) * cs]);
+    for (let i = pts.length - 1; i > 0; i--) { const j = (r() * (i + 1)) | 0; [pts[i], pts[j]] = [pts[j], pts[i]]; }
+    for (const [x, y] of pts) {
+      if (r() < skip) continue;
+      const xi = clamp(x | 0, 0, w - 1), yi = clamp(y | 0, 0, h - 1), k = (yi * w + xi) * 4;
+      if (d[k + 3] < 8) continue;
+      let R = d[k], G = d[k + 1], B = d[k + 2];
+      const lum = (R * 0.3 + G * 0.59 + B * 0.11) / 255, t2 = (r() - 0.5) * 2;
+      const tint = lum > 0.55 ? warm : cool, tm = Math.abs(t2) * 0.22 * (lum > 0.55 ? lum : 1 - lum);
+      R = lerp(R, tint[0], tm) + t2 * jit * 0.5; G = lerp(G, tint[1], tm) + t2 * jit * 0.45; B = lerp(B, tint[2], tm) + t2 * jit * 0.4;
+      const mx = (R + G + B) / 3; R = mx + (R - mx) * sat; G = mx + (G - mx) * sat; B = mx + (B - mx) * sat;
+      const a = angle(x, y) + (r() - .5) * 0.35, l = L * (0.6 + r() * 0.8), wd = Wd * (0.6 + r() * 0.7), bend = (r() - .5) * 0.5 * l;
+      const cx = Math.cos(a), sx = Math.sin(a);
+      g.strokeStyle = `rgb(${clamp(R, 0, 255) | 0},${clamp(G, 0, 255) | 0},${clamp(B, 0, 255) | 0})`; g.globalAlpha = 0.9; g.lineWidth = wd;
+      g.beginPath(); g.moveTo(x - cx * l / 2, y - sx * l / 2); g.quadraticCurveTo(x - sx * bend, y + cx * bend, x + cx * l / 2, y + sx * l / 2); g.stroke();
+    }
+  }
+  g.globalAlpha = 1; return out;
+};
+
+// ---------- 有体量的着衣人物 ----------
+// o: x,y（脚底中心）, h（全高）, robe:[亮,中,暗], under（内衣露出色）, mantle（披风色组或 null）, skin, hair,
+//    face（-1 朝左／1 朝右）, lean（髋以上前倾，弧度，朝 face 方向为正）, bow（低头 0..1）, gaze:[x,y]（看向哪，画眼珠）,
+//    hands:[[x,y],[x,y]]（两只手的目标点，null 则自然下垂）, sway（衣摆摆动 0..1）, halo（金色光环，默认无）, line（轮廓色）
+// 画法：袍＝钟形多边形＋沿宽度的明暗渐变＋数条褶线（暗线＋相邻亮线）；袖＝两段式（肩→肘→手）的变宽带；头＝椭圆＋发＋眼（视线）。
+// 不画五官细节：吉卜力式大眼、乔托式「杏仁眼斜视」都靠眼珠偏向 gaze 表达关系。
+M.figure = (c, o) => {
+  const { x, y, h, face = 1, lean = 0, bow = 0, sway = 0, hands = [null, null], gaze = null, halo = false } = o;
+  const robe = (o.robe || ['#d98a78', '#b85a4c', '#7a3a34']).map(hex), under = hex(o.under || '#e7d9b0'), skin = hex(o.skin || '#e0b48c'), hairC = hex(o.hair || '#5a3a24'), line = o.line || '#4a2f22';
+  const mantle = o.mantle ? o.mantle.map(hex) : null, seed = o.seed || 1, r = rng(seed * 97);
+  const hipY = y - h * 0.42, sh = h * 0.2;
+  const cs = Math.cos(lean * face), sn = Math.sin(lean * face);
+  const up = (dx, dy) => [x + dx * cs - dy * sn * face, hipY + dx * sn * face + dy * cs];          // 髋为原点、绕髋前倾
+  const shL = up(-h * 0.15, -h * 0.30), shR = up(h * 0.15, -h * 0.30), neck = up(0, -h * 0.335);
+  const head = [neck[0] + face * h * 0.014 * bow, neck[1] - h * 0.088 + h * 0.025 * bow];
+  const hw = h * 0.078, hh = h * 0.094;
+  c.save(); c.lineJoin = 'round'; c.lineCap = 'round';
+
+  // 地面影
+  c.fillStyle = 'rgba(40,28,18,.22)'; c.beginPath(); c.ellipse(x + face * h * 0.03, y + 3, h * 0.22, h * 0.03, 0, 0, TAU); c.fill();
+
+  // --- 袍身 ---
+  const hemW = h * (0.25 * (o.hemK || 1) + 0.012 * sway), waistW = h * 0.115, sw = Math.sin(o.t * 2.3 + seed) * sway * h * 0.012 || 0;
+  const body = new Path2D();
+  body.moveTo(shL[0], shL[1]); body.lineTo(neck[0] - h * 0.03, neck[1] + 4); body.lineTo(neck[0] + h * 0.03, neck[1] + 4); body.lineTo(shR[0], shR[1]);
+  body.quadraticCurveTo(shR[0] + h * 0.02, hipY - h * 0.1, x + waistW, hipY + h * 0.05);
+  body.quadraticCurveTo(x + hemW * 0.9 + sw, y - h * 0.18, x + hemW + sw, y);
+  body.quadraticCurveTo(x, y + h * 0.018, x - hemW + sw, y);
+  body.quadraticCurveTo(x - hemW * 0.9 + sw, y - h * 0.18, x - waistW, hipY + h * 0.05);
+  body.quadraticCurveTo(shL[0] - h * 0.02, hipY - h * 0.1, shL[0], shL[1]); body.closePath();
+  const lx = x - face * h * 0.2, gr = c.createLinearGradient(lx, 0, x + face * h * 0.26, 0);               // 光从背后一侧来：亮在 -face 侧
+  gr.addColorStop(0, css(robe[0])); gr.addColorStop(0.3, css(robe[0])); gr.addColorStop(0.52, css(robe[1])); gr.addColorStop(0.82, css(robe[2])); gr.addColorStop(1, css(robe[2]));
+  c.fillStyle = gr; c.fill(body);
+  // 褶：先铺软的明暗大面（模糊），再压一条细硬折痕——乔托的衣褶是「大面渐变＋少数硬边」，不是排线
+  const nF = 5, folds = [];
+  for (let i = 0; i < nF; i++) { const q = (i + 0.5) / nF - 0.5; folds.push({ x0: x + q * h * 0.22 + (r() - .5) * h * 0.02, x1: x + q * hemW * 2 * 0.92 + sw * (0.4 + Math.abs(q)), cy: y - h * (0.22 + r() * 0.12), k: 0.7 + r() * 0.6 }); }
+  c.save(); c.clip(body);
+  c.filter = `blur(${Math.max(2, h * 0.012)}px)`;
+  for (const f of folds) { c.strokeStyle = css(robe[2], 0.34 * f.k); c.lineWidth = h * 0.05 * f.k; c.beginPath(); c.moveTo(f.x0, hipY - h * 0.1); c.quadraticCurveTo(f.x0 + (f.x1 - f.x0) * 0.2 + face * h * 0.015, f.cy, f.x1, y - h * 0.01); c.stroke();
+    c.strokeStyle = css(robe[0], 0.3 * f.k); c.lineWidth = h * 0.035 * f.k; c.beginPath(); c.moveTo(f.x0 - face * h * 0.04, hipY - h * 0.1); c.quadraticCurveTo(f.x0 + (f.x1 - f.x0) * 0.2 - face * h * 0.03, f.cy, f.x1 - face * h * 0.045, y - h * 0.01); c.stroke(); }
+  c.filter = 'none';
+  for (const f of folds) { c.strokeStyle = css(robe[2], 0.5); c.lineWidth = h * 0.0065; c.beginPath(); c.moveTo(f.x0, hipY - h * 0.1); c.quadraticCurveTo(f.x0 + (f.x1 - f.x0) * 0.2 + face * h * 0.015, f.cy, f.x1, y - h * 0.01); c.stroke(); }
+  // 膝/腰的受力：两处弧形暗影（衣料被撑起的地方）
+  c.filter = `blur(${h * 0.02}px)`; c.fillStyle = css(robe[2], 0.22); c.beginPath(); c.ellipse(x + face * h * 0.04, hipY + h * 0.12, h * 0.07, h * 0.16, 0.2 * face, 0, TAU); c.fill(); c.filter = 'none';
+  // 腰带/内衣下摆
+  c.fillStyle = css(under, 0.95); c.beginPath(); c.moveTo(x - hemW * 0.5 + sw, y); c.quadraticCurveTo(x + sw, y - h * 0.05, x + hemW * 0.5 + sw, y); c.quadraticCurveTo(x + sw, y + h * 0.015, x - hemW * 0.5 + sw, y); c.fill();
+  c.restore();
+  c.strokeStyle = line; c.globalAlpha = 0.75; c.lineWidth = Math.max(1.6, h * 0.007); c.stroke(body); c.globalAlpha = 1;
+
+  // --- 披风：从背侧肩斜过身体盖到对侧髋，厚重的大褶 ---
+  if (mantle) {
+    const back = face > 0 ? shL : shR, front = face > 0 ? shR : shL, sideX = face;
+    const mp = new Path2D();
+    mp.moveTo(back[0] - sideX * h * 0.03, back[1] - h * 0.03);
+    mp.quadraticCurveTo(neck[0], neck[1] - h * 0.015, front[0] + sideX * h * 0.015, front[1] + h * 0.02);
+    mp.quadraticCurveTo(front[0] - sideX * h * 0.02, hipY, x - sideX * hemW * 0.05 + sw, y - h * 0.01);
+    mp.quadraticCurveTo(x - sideX * hemW * 0.5 + sw, y + h * 0.022, x - sideX * hemW * 1.02 + sw, y);
+    mp.quadraticCurveTo(back[0] - sideX * h * 0.16, hipY, back[0] - sideX * h * 0.03, back[1] - h * 0.03); mp.closePath();
+    const mg = c.createLinearGradient(x - h * 0.2, 0, x + h * 0.26, 0); mg.addColorStop(0, css(mantle[0])); mg.addColorStop(0.5, css(mantle[1])); mg.addColorStop(1, css(mantle[2]));
+    c.fillStyle = mg; c.fill(mp);
+    c.save(); c.clip(mp);
+    for (let i = 0; i < 5; i++) {
+      const q = i / 4, sx = lerp(back[0], front[0], q), ex = x + (q - 0.45) * hemW * 1.8 + sw;
+      c.strokeStyle = css(mantle[2], 0.5); c.lineWidth = h * 0.011; c.beginPath(); c.moveTo(sx, lerp(back[1], front[1], q) + h * 0.03); c.quadraticCurveTo(sx + sideX * h * 0.03, hipY + h * 0.03, ex, y - h * 0.01); c.stroke();
+      c.strokeStyle = css(mantle[0], 0.4); c.lineWidth = h * 0.006; c.beginPath(); c.moveTo(sx - sideX * h * 0.012, lerp(back[1], front[1], q) + h * 0.03); c.quadraticCurveTo(sx + sideX * h * 0.02, hipY + h * 0.03, ex - sideX * h * 0.014, y - h * 0.01); c.stroke();
+    }
+    c.restore(); c.strokeStyle = line; c.globalAlpha = 0.7; c.lineWidth = Math.max(1.6, h * 0.007); c.stroke(mp); c.globalAlpha = 1;
+  }
+
+  // --- 袖与手：肩→肘→手，肘按「向外下方」弯 ---
+  const sleeveCol = mantle ? mantle : robe;
+  const arm = (S, T, k) => {
+    if (!T) T = [S[0] + (k ? 1 : -1) * h * 0.05, S[1] + h * 0.26];
+    const L1 = h * 0.17, L2 = h * 0.16, dx = T[0] - S[0], dy = T[1] - S[1], dist = Math.min(Math.hypot(dx, dy), L1 + L2 - 1), a = Math.atan2(dy, dx);
+    const ca = Math.acos(clamp((L1 * L1 + dist * dist - L2 * L2) / (2 * L1 * dist), -1, 1)), side = (T[0] > x ? 1 : -1) * (k ? 1 : -1) || 1;
+    const el = [S[0] + Math.cos(a + ca * -side) * L1, S[1] + Math.sin(a + ca * -side) * L1];
+    const hd = [S[0] + Math.cos(a) * dist, S[1] + Math.sin(a) * dist];
+    const w0 = h * 0.078, w1 = h * 0.058, w2 = h * 0.04;
+    const pts = [S, el, hd], nx = i => { const A = pts[Math.max(0, i - 1)], B = pts[Math.min(2, i + 1)], d = Math.hypot(B[0] - A[0], B[1] - A[1]) || 1; return [-(B[1] - A[1]) / d, (B[0] - A[0]) / d]; };
+    const W3 = [w0, w1, w2], L = [], R = [];
+    for (let i = 0; i < 3; i++) { const n = nx(i); L.push([pts[i][0] + n[0] * W3[i] / 2, pts[i][1] + n[1] * W3[i] / 2]); R.push([pts[i][0] - n[0] * W3[i] / 2, pts[i][1] - n[1] * W3[i] / 2]); }
+    const sp = new Path2D(); sp.moveTo(...L[0]); sp.quadraticCurveTo(...L[1], ...L[2]); sp.lineTo(...R[2]); sp.quadraticCurveTo(...R[1], ...R[0]); sp.closePath();
+    const sg = c.createLinearGradient(S[0] - h * 0.05, S[1], hd[0] + h * 0.05, hd[1]); sg.addColorStop(0, css(sleeveCol[0])); sg.addColorStop(1, css(sleeveCol[1]));
+    c.fillStyle = sg; c.fill(sp); c.strokeStyle = line; c.globalAlpha = 0.7; c.lineWidth = Math.max(1.4, h * 0.006); c.stroke(sp); c.globalAlpha = 1;
+    c.strokeStyle = css(sleeveCol[2], 0.4); c.lineWidth = h * 0.007; c.beginPath(); c.moveTo(el[0], el[1]); c.quadraticCurveTo(el[0] + h * 0.01, el[1] + h * 0.03, hd[0] - h * 0.005, hd[1] - h * 0.04); c.stroke();
+    c.fillStyle = css(skin); c.strokeStyle = line; c.globalAlpha = 0.8; c.lineWidth = Math.max(1.2, h * 0.005);
+    // 手：掌＋拇指＋并拢的三指，朝向沿前臂方向（托物时看得出是手，不是圆片）
+    c.save(); c.translate(hd[0], hd[1]); c.rotate(a);
+    c.beginPath(); c.ellipse(h * 0.012, 0, h * 0.028, h * 0.022, 0, 0, TAU); c.fill(); c.stroke();
+    c.beginPath(); c.ellipse(h * 0.04, h * 0.002, h * 0.026, h * 0.012, 0.08, 0, TAU); c.fill(); c.stroke();
+    c.beginPath(); c.ellipse(h * 0.012, -h * 0.022 * (k ? 1 : -1), h * 0.016, h * 0.008, 0.5 * (k ? 1 : -1), 0, TAU); c.fill(); c.stroke();
+    c.restore(); c.globalAlpha = 1;
+  };
+  arm(face > 0 ? shL : shR, hands[0], 0); arm(face > 0 ? shR : shL, hands[1], 1);
+
+  // --- 头 ---
+  if (halo) { c.fillStyle = 'rgba(214,170,70,.95)'; c.beginPath(); c.arc(head[0], head[1], hh * 1.55, 0, TAU); c.fill(); c.strokeStyle = 'rgba(120,80,30,.8)'; c.lineWidth = 2; c.stroke(); }
+  c.fillStyle = css(hairC); c.beginPath(); c.ellipse(head[0] - face * hw * 0.1, head[1] - hh * 0.12, hw * 1.12, hh * 1.06, 0, 0, TAU); c.fill();
+  const fg = c.createLinearGradient(head[0] - hw, head[1], head[0] + hw, head[1]); fg.addColorStop(0, css(mixc(skin, [255, 235, 205], 0.25))); fg.addColorStop(1, css(mixc(skin, [90, 50, 30], 0.35)));
+  c.fillStyle = fg; c.beginPath(); c.ellipse(head[0] + face * hw * 0.1, head[1] + hh * 0.1 + h * 0.008 * bow, hw * 0.92, hh * 0.92, 0, 0, TAU); c.fill();
+  c.strokeStyle = line; c.globalAlpha = 0.65; c.lineWidth = Math.max(1.2, h * 0.005); c.stroke(); c.globalAlpha = 1;
+  // 眼：杏仁形，眼珠偏向 gaze；鼻：一道暗线；口：短线
+  const ey = head[1] + hh * 0.12 + h * 0.01 * bow, ex = head[0] + face * hw * 0.22;
+  let gx = 0, gy = 0; if (gaze) { const dd = Math.hypot(gaze[0] - ex, gaze[1] - ey) || 1; gx = (gaze[0] - ex) / dd; gy = (gaze[1] - ey) / dd; }
+  [-1, 1].forEach(sd => {
+    const px = ex + sd * hw * 0.38 * (face > 0 ? 1 : 1) - 0, ew = hw * 0.26;
+    c.fillStyle = '#f4ead4'; c.beginPath(); c.ellipse(px, ey, ew, ew * 0.5, 0, 0, TAU); c.fill();
+    c.fillStyle = '#2a1c14'; c.beginPath(); c.arc(px + gx * ew * 0.45, ey + gy * ew * 0.25, ew * 0.42, 0, TAU); c.fill();
+    c.strokeStyle = line; c.lineWidth = Math.max(1, h * 0.0045); c.beginPath(); c.ellipse(px, ey, ew, ew * 0.5, 0, Math.PI * 1.05, Math.PI * 1.95); c.stroke();
+  });
+  c.strokeStyle = css(hairC, 0.85); c.lineWidth = Math.max(1.4, h * 0.006); [-1, 1].forEach(sd => { const px = ex + sd * hw * 0.38; c.beginPath(); c.moveTo(px - hw * 0.26, ey - hh * 0.2 + (sd * face > 0 ? 1 : 0) * 2); c.quadraticCurveTo(px, ey - hh * 0.34, px + hw * 0.26, ey - hh * 0.18); c.stroke(); });
+  c.fillStyle = css(mixc(skin, [90, 40, 25], 0.28), 0.5); c.beginPath(); c.ellipse(head[0] + face * hw * 0.5, head[1] + hh * 0.55, hw * 0.3, hh * 0.2, 0, 0, TAU); c.fill();      // 颧红/阴影
+  c.fillStyle = css(skin); c.beginPath(); c.ellipse(head[0] - face * hw * 0.82, head[1] + hh * 0.2, hw * 0.14, hh * 0.24, 0, 0, TAU); c.fill();
+  if (o.beard) { c.fillStyle = css(mixc(hairC, [190, 180, 165], 0.45), 0.96); c.beginPath(); c.moveTo(head[0] - hw * 0.8, head[1] + hh * 0.28); c.quadraticCurveTo(head[0] - hw * 0.7, head[1] + hh * 1.35, head[0], head[1] + hh * 1.55); c.quadraticCurveTo(head[0] + hw * 0.7, head[1] + hh * 1.35, head[0] + hw * 0.8, head[1] + hh * 0.28); c.quadraticCurveTo(head[0] + hw * 0.35, head[1] + hh * 0.62, head[0], head[1] + hh * 0.6); c.quadraticCurveTo(head[0] - hw * 0.35, head[1] + hh * 0.62, head[0] - hw * 0.8, head[1] + hh * 0.28); c.fill(); }
+  c.strokeStyle = css(mixc(skin, [60, 30, 20], 0.5), 0.8); c.lineWidth = Math.max(1, h * 0.0045);
+  c.beginPath(); c.moveTo(ex + face * hw * 0.04, ey + hh * 0.08); c.lineTo(ex + face * hw * 0.08, ey + hh * 0.42); c.lineTo(ex - face * hw * 0.05, ey + hh * 0.46); c.stroke();
+  c.beginPath(); c.moveTo(ex - hw * 0.14, ey + hh * 0.7); c.quadraticCurveTo(ex, ey + hh * 0.74, ex + hw * 0.14, ey + hh * 0.68); c.stroke();
+  c.restore();
+};
+})();

package/engine/lib/motion.js

@@ -0,0 +1,111 @@
+// 动效时间库 MO：缓动、弹簧、步进、错开、拍号。全部是「时间 → 数值」的纯函数，不读时钟，确定性。
+// 来源：YouTube 解说动画语法 8 支示范片（references/09-视频动画语法.md）。约定：p 是 0..1 的进度，t/lt 是秒。
+//   选缓动的一句话：讲解（3b1b/白板）用 smooth/sineInOut 两端都停稳；发布会用 appleOut/弹簧；动态文字用 expoOut＋弹簧；
+//   拼贴（Vox）相机用 sineInOut 或长尾 longTail，纸片按 12fps 步进；Kurzgesagt 动作用 k75，循环用 easyEase。
+(() => {
+const { clamp, lerp } = U;
+const MO = window.MO = {};
+
+// 画布尺寸 U.setStage / U.onStage 在 util.js（比本文件先加载的 paint/brush/render/post 也要登记）。
+
+// ---------- 时间片 ----------
+MO.seg = (t, a, b) => clamp((t - a) / (b - a));                          // [a,b] → 0..1
+MO.at = (t, t0, dur) => clamp((t - t0) / dur);                           // [t0, t0+dur] → 0..1
+MO.anim = (lt, start, dur, ease = MO.smooth) => ease(clamp((lt - start) / dur));
+// 步进时间：把连续时间量化成 fps 步。拼贴纸片/打字/荧光笔「一拍二」= 12fps；故事型角色 24fps；相机仍按 60fps 平滑。
+MO.step = (t, fps = 12) => Math.floor(t * fps + 1e-6) / fps;
+
+// ---------- manim 缓动（3b1b/manim rate_functions.py） ----------
+// smooth = 6t⁵−15t⁴+10t³：两端速度、加速度都为 0。讲解类片子的默认缓动。
+MO.smooth = t => { t = clamp(t); return t * t * t * (10 - 15 * t + 6 * t * t); };
+const sig = x => 1 / (1 + Math.exp(-x));
+MO.smoothCE = (t, inflection = 10) => { const e = sig(-inflection / 2); return clamp((sig(inflection * (t - 0.5)) - e) / (1 - 2 * e)); };   // ManimCE 版
+MO.thereAndBack = t => MO.smooth(t < 0.5 ? 2 * t : 2 * (1 - t));          // Indicate 用：去了又回
+MO.rushInto = t => 2 * MO.smooth(t / 2);                                  // 慢起、冲进终点
+MO.rushFrom = t => 2 * MO.smooth(t / 2 + 0.5) - 1;                        // 冲出、慢收
+MO.doubleSmooth = t => t < 0.5 ? 0.5 * MO.smooth(2 * t) : 0.5 * (1 + MO.smooth(2 * t - 1));
+MO.wiggle = (t, wiggles = 2) => MO.thereAndBack(t) * Math.sin(wiggles * Math.PI * t);
+// manim LaggedStart(lag_ratio=r)：n 个子动画里第 i 个在总进度 p 下的局部进度。总长 = 1+(n-1)·r 个单位，第 i 个占 [i·r, i·r+1]。
+MO.lagged = (i, n, p, r = 0.05) => clamp(p * (1 + (n - 1) * r) - i * r);
+
+// ---------- 常用解析缓动（AE / CSS 名字） ----------
+MO.linear = p => p;
+MO.sineInOut = p => -(Math.cos(Math.PI * p) - 1) / 2;
+MO.cubicIn = p => p * p * p;
+MO.cubicOut = p => 1 - Math.pow(1 - p, 3);
+MO.cubicInOut = p => p < .5 ? 4 * p * p * p : 1 - Math.pow(-2 * p + 2, 3) / 2;
+MO.quartOut = p => 1 - Math.pow(1 - p, 4);
+MO.quintOut = p => 1 - Math.pow(1 - p, 5);
+MO.quintInOut = p => p < .5 ? 16 * p ** 5 : 1 - Math.pow(-2 * p + 2, 5) / 2;
+MO.expoIn = p => p <= 0 ? 0 : Math.pow(2, 10 * p - 10);
+MO.expoOut = p => p >= 1 ? 1 : 1 - Math.pow(2, -10 * p);                // 动效设计最常用的「快出慢停」
+MO.expoInOut = p => p <= 0 ? 0 : p >= 1 ? 1 : p < .5 ? Math.pow(2, 20 * p - 10) / 2 : (2 - Math.pow(2, -20 * p + 10)) / 2;
+// backOut 过冲：s=1.70158 约 10%；2.2 约 13%；2.6 约 17%；3.5 约 23%
+MO.backOut = (p, s = 1.70158) => { const q = p - 1; return 1 + (s + 1) * q * q * q + s * q * q; };
+// 弹性落定：overshoot 一次再回（贴纸「啪」地落下）
+MO.elasticOut = p => p <= 0 ? 0 : p >= 1 ? 1 : Math.pow(2, -10 * p) * Math.sin((p * 10 - 0.75) * (2 * Math.PI / 3)) + 1;
+
+// ---------- CSS cubic-bezier(x1,y1,x2,y2)：牛顿法由 x 求参数，再取 y ----------
+MO.bezier = (x1, y1, x2, y2) => {
+  const cx = 3 * x1, bx = 3 * (x2 - x1) - cx, ax = 1 - cx - bx;
+  const cy = 3 * y1, by = 3 * (y2 - y1) - cy, ay = 1 - cy - by;
+  const X = s => ((ax * s + bx) * s + cx) * s, Y = s => ((ay * s + by) * s + cy) * s, dX = s => (3 * ax * s + 2 * bx) * s + cx;
+  return p => {
+    if (p <= 0) return 0; if (p >= 1) return 1;
+    let s = p; for (let k = 0; k < 8; k++) { const e = X(s) - p, d = dX(s); if (Math.abs(e) < 1e-6 || Math.abs(d) < 1e-6) break; s -= e / d; }
+    s = clamp(s); return Y(s);
+  };
+};
+MO.appleOut = MO.bezier(0.25, 0.1, 0.25, 1);        // CSS `ease`：苹果官网/发布会过渡
+MO.emphasized = MO.bezier(0.2, 0, 0, 1);            // Material 3 emphasized：长尾减速
+MO.k75 = MO.bezier(0.75, 0, 0.25, 1);               // Kurzgesagt「其他动作用 75% influence」（y1 调研 §6.2）
+MO.easyEase = MO.bezier(0.333, 0, 0.667, 1);        // AE Easy Ease：循环动作
+MO.longTail = MO.bezier(0.33, 0, 0.2, 1);           // Vox「沿线追过去」「拉出揭示」：起步快、长尾落定（y2 调研）
+
+// ---------- 弹簧 ----------
+// SwiftUI 参数化（WWDC23 Animate with springs）：stiffness=(2π/duration)²，damping=4π(1-bounce)/duration → ζ=1-bounce，ω=2π/duration。
+// 返回 0→1 的位移（可 >1 = 过冲）。t 单位秒。发布会 UI 用它：.smooth(bounce 0) / .snappy(0.15) / .bouncy(0.3)。
+MO.spring = (t, { duration = 0.5, bounce = 0, v0 = 0 } = {}) => {
+  if (t <= 0) return 0;
+  const w = 2 * Math.PI / duration, z = 1 - bounce;
+  let x;                                                                 // x = 剩余位移（1→0）
+  if (Math.abs(z - 1) < 1e-4) x = Math.exp(-w * t) * (1 + (w - v0) * t);
+  else if (z < 1) { const wd = w * Math.sqrt(1 - z * z); x = Math.exp(-z * w * t) * (Math.cos(wd * t) + ((z * w - v0) / wd) * Math.sin(wd * t)); }
+  else { const r = Math.sqrt(z * z - 1), a = -w * (z - r), b = -w * (z + r); const A = (-v0 - b) / (a - b); x = A * Math.exp(a * t) + (1 - A) * Math.exp(b * t); }
+  return 1 - x;
+};
+MO.smoothSpring = t => MO.spring(t, { duration: 0.5, bounce: 0 });
+MO.snappy = t => MO.spring(t, { duration: 0.5, bounce: 0.15 });
+MO.bouncy = t => MO.spring(t, { duration: 0.5, bounce: 0.3 });
+// 频率/衰减参数化的欠阻尼弹簧阶跃响应（动态文字用）：freq Hz、decay 1/s。
+//   freq 3 / decay 6 第一次过冲 ≈37%（砸进来的大字）；2.5 / 9 ≈16%（常规弹入）；2.2 / 10 ≈8%（主词落定）
+MO.springHz = (t, freq = 2.5, decay = 9) => t <= 0 ? 0 : 1 - Math.exp(-decay * t) * Math.cos(2 * Math.PI * freq * t);
+// 到位后的余振（Dan Ebberts 惯性回弹）：amp·sin(2πft)/e^(decay·t)。换姿势的身体挤压、屏幕震动都用它。
+MO.settle = (t, amp, freq = 3, decay = 5) => t <= 0 ? 0 : amp * Math.sin(2 * Math.PI * freq * t) / Math.exp(decay * t);
+
+// ---------- 镜头动作时长（什么时候用哪一种，见 references/镜头语言.md） ----------
+// 两类：过渡（缓推 push、找下一件 glide、拉远 pull，0.6–1.5s 缓入缓出）是默认；重音（快推 punch、快移 pan、砸入 slam）留给揭晓、数字、反转。
+// 过渡的数取自参考片实测：Vox 推进 1.0–1.5s、找卡 0.5–0.9s、拉出约 1s；3b1b 推镜约 1s。
+// 重音的数：一支「每镜匀速推近 7.5%」被判像 PPT 的片子，改成停住→0.28s 快推→停住后被认可；但 2026-10-12 诺奖短片每 2 秒一次快推，被判「太多、太快、不 smooth」。
+// 时长常量集中在这里，CAM.track / MD / 各片段都读它；要改节奏改这里，别在片段里另写一套。
+MO.PULSE = { punch: 0.28, pan: 0.30, slam: 0.17, k: 0.25, kMin: 0.18, kMax: 0.32, push: 0.9, glide: 0.7, pull: 1.1 };
+// 砸入曲线：k = 0..1（砸入进度）→ 缩放。1.55 → 0.94（前 60%，3 帧砸下）→ 1.0（后 40%，2 帧回弹）。k≤0 返回 1.55（还没落下）。
+MO.slamK = (k, from = 1.55, under = 0.94) => k <= 0 ? from : k < 0.6 ? from - (from - under) * (k / 0.6) : k < 1 ? under + (1 - under) * ((k - 0.6) / 0.4) : 1;
+// 某个元素在 at 这一帧砸进来：返回它此刻的缩放（at 之前 = 0，元素还不该画）。o: {dur=0.17, from=1.55, under=0.94}
+MO.slam = (t, at, o = {}) => t < at ? 0 : MO.slamK((t - at) / (o.dur || MO.PULSE.slam), o.from, o.under);
+// 动作进度：at 起 dur 秒内按 ease 从 0 走到 1，之后停在 1（默认快推的时长和曲线；缓推写 MO.pulse(t, at, MO.PULSE.push, MO.sineInOut)）
+MO.pulse = (t, at, dur = MO.PULSE.punch, ease = MO.cubicInOut) => ease(clamp((t - at) / dur));
+
+// ---------- 持续微动 ----------
+// 只给环境层（星闪、粒子、远景云）和艺术风格画面用。解说片的主体、标签、卡片落定后停住，不加浮动、呼吸。
+// 漂浮：两频正弦叠加。周期避开 5s 左右（HIG：~0.2Hz 的持续摆动让人不适）
+MO.float = (t, amp = 6, period = 4, ph = 0) => amp * (0.75 * Math.sin(2 * Math.PI * t / period + ph) + 0.25 * Math.sin(2 * Math.PI * t / (period * 0.53) + ph * 1.7));
+
+// ---------- 反查与拍号 ----------
+// 缓动的反函数（二分）：「线头/计数在什么时刻到达 y」。例：折线按 smooth 画，求画到某个 x 的时刻（t3 镜 2 的事件标注）。
+MO.invert = (ease, y, iters = 30) => { let a = 0, b = 1; for (let i = 0; i < iters; i++) { const m = (a + b) / 2; if (ease(m) < y) a = m; else b = m; } return (a + b) / 2; };
+// 拍 → 秒
+MO.beat = (n, bpm = 120) => n * 60 / bpm;
+// 揭开那一帧落在拍上：段起点 = 小节线 − 揭开点 × 转场时长（y5：zoom 揭开点 .55、色带 .6、push 到 90% 位移在 .58）
+MO.onBeat = (barTime, revealP, trDur) => barTime - revealP * trDur;
+})();

package/engine/lib/paint.js

@@ -0,0 +1,200 @@
+// 纯代码绘画工具库：噪声、纹理、手绘线、风格渲染器（笔触/色点/马赛克/网点/像素/切面）、共享编舞。
+// 约定：所有随机都用种子；「抖动线条」按 boilFps 换种子（手绘动画的 boiling line），其余保持帧间稳定。
+(() => {
+let W = 1920, H = 1080; U.onStage((w, h) => { W = w; H = h; });   // 画布尺寸跟 U.setStage 走（默认 1920×1080）
+const P = window.PAINT = {};
+const { clamp, lerp, ease, rng } = U;
+
+// ---------- 画布 ----------
+P.canvas = (w = W, h = H) => { const c = document.createElement('canvas'); c.width = w; c.height = h; return c; };
+const CACHE = {};
+P.cached = (key, w, h, fn) => { if (!CACHE[key]) { const c = P.canvas(w, h); fn(c.getContext('2d'), c); CACHE[key] = c; } return CACHE[key]; };
+P.scratch = (key) => { if (!CACHE['s_' + key]) CACHE['s_' + key] = P.canvas(); return CACHE['s_' + key]; };
+
+// ---------- 噪声 ----------
+const perm = new Uint8Array(512); { const r = rng(1337); const p = [...Array(256).keys()]; for (let i = 255; i > 0; i--) { const j = (r() * (i + 1)) | 0; [p[i], p[j]] = [p[j], p[i]]; } for (let i = 0; i < 512; i++) perm[i] = p[i & 255]; }
+const fade = t => t * t * t * (t * (t * 6 - 15) + 10);
+const grad = (h, x, y) => { const u = (h & 1) ? x : -x, v = (h & 2) ? y : -y; return (h & 4) ? u + v * 0.5 : u * 0.5 + v; };
+P.noise = (x, y) => {                                   // Perlin 2D，约 [-1,1]
+  const X = Math.floor(x) & 255, Y = Math.floor(y) & 255; x -= Math.floor(x); y -= Math.floor(y);
+  const u = fade(x), v = fade(y), a = perm[X] + Y, b = perm[X + 1] + Y;
+  return lerp(lerp(grad(perm[a], x, y), grad(perm[b], x - 1, y), u), lerp(grad(perm[a + 1], x, y - 1), grad(perm[b + 1], x - 1, y - 1), u), v);
+};
+P.fbm = (x, y, o = 4) => { let s = 0, a = 0.5, f = 1; for (let i = 0; i < o; i++) { s += a * P.noise(x * f, y * f); a *= 0.5; f *= 2; } return s; };
+
+// ---------- 颜色 ----------
+P.hex = h => { h = h.replace('#', ''); if (h.length === 3) h = h.split('').map(x => x + x).join(''); const n = parseInt(h, 16); return [n >> 16 & 255, n >> 8 & 255, n & 255]; };
+P.rgb = (c, a = 1) => `rgba(${c[0] | 0},${c[1] | 0},${c[2] | 0},${a})`;
+P.mix = (a, b, t) => [lerp(a[0], b[0], t), lerp(a[1], b[1], t), lerp(a[2], b[2], t)];
+P.jitter = (c, r, amt) => [c[0] + (r() - .5) * amt, c[1] + (r() - .5) * amt, c[2] + (r() - .5) * amt];
+
+// ---------- 纹理（缓存） ----------
+// 纸/墙/岩石：底色 + 多层噪声斑驳 + 细颗粒
+P.texture = (key, base, opt = {}) => P.cached('tex_' + key, W, H, (g) => {
+  const { scale = 0.004, amt = 26, grain = 14, dark = null, seed = 1 } = opt;
+  const img = g.createImageData(W, H), d = img.data, b = P.hex(base), r = rng(seed);
+  const dk = dark ? P.hex(dark) : null;
+  for (let y = 0; y < H; y++) for (let x = 0; x < W; x++) {
+    const n = P.fbm(x * scale + seed, y * scale, 5), gr = (r() - .5) * grain;
+    const i = (y * W + x) * 4;
+    let c = b;
+    if (dk) c = P.mix(b, dk, clamp(n * 1.2 + 0.25));
+    d[i] = c[0] + n * amt + gr; d[i + 1] = c[1] + n * amt + gr; d[i + 2] = c[2] + n * amt * 0.8 + gr; d[i + 3] = 255;
+  }
+  g.putImageData(img, 0, 0);
+});
+// 颗粒噪点叠层（扁平插画的 grain、旧印刷）：透明底上的随机点
+P.grain = (key, density = 0.08, col = [0, 0, 0], alpha = 0.18) => P.cached('grain_' + key, W, H, (g) => {
+  const img = g.createImageData(W, H), d = img.data, r = rng(key.length * 97 + 3);
+  for (let i = 0; i < W * H; i++) if (r() < density) { d[i * 4] = col[0]; d[i * 4 + 1] = col[1]; d[i * 4 + 2] = col[2]; d[i * 4 + 3] = 255 * alpha * (0.4 + r() * 0.6); }
+  g.putImageData(img, 0, 0);
+});
+// 龟裂纹（古典油画）：随机游走的细裂线网
+P.craquelure = (key, alpha = 0.35) => P.cached('crack_' + key, W, H, (g) => {
+  const r = rng(77); g.strokeStyle = `rgba(40,25,10,${alpha})`; g.lineWidth = 0.8;
+  for (let k = 0; k < 900; k++) {
+    let x = r() * W, y = r() * H, a = r() * Math.PI * 2; g.beginPath(); g.moveTo(x, y);
+    for (let s = 0; s < 6 + r() * 10; s++) { a += (r() - .5) * 1.6; x += Math.cos(a) * (6 + r() * 14); y += Math.sin(a) * (6 + r() * 14); g.lineTo(x, y); }
+    g.stroke();
+  }
+});
+
+// ---------- 手绘线 ----------
+// 把折线/曲线采样后加噪声抖动；boil = 当前时间换种子的频率（0 = 不抖）
+P.boilSeed = (t, fps = 12) => Math.floor(t * fps);
+P.roughPath = (c, pts, { amp = 2, seed = 1, closed = false, step = 6 } = {}) => {
+  const r = rng(seed);
+  // 先按 step 重采样
+  const out = [];
+  const N = closed ? pts.length : pts.length - 1;
+  for (let i = 0; i < N; i++) {
+    const a = pts[i], b = pts[(i + 1) % pts.length], L = Math.hypot(b[0] - a[0], b[1] - a[1]), n = Math.max(1, Math.round(L / step));
+    for (let k = 0; k < n; k++) { const q = k / n; out.push([lerp(a[0], b[0], q) + (r() - .5) * amp, lerp(a[1], b[1], q) + (r() - .5) * amp]); }
+  }
+  if (!closed) out.push([pts[pts.length - 1][0] + (r() - .5) * amp, pts[pts.length - 1][1] + (r() - .5) * amp]);
+  c.beginPath(); out.forEach((p, i) => i ? c.lineTo(p[0], p[1]) : c.moveTo(p[0], p[1])); if (closed) c.closePath();
+};
+// 三次贝塞尔采样成点列（便于 roughPath / 变形）
+P.bez = (p0, p1, p2, p3, n = 24) => { const o = []; for (let i = 0; i <= n; i++) { const t = i / n, u = 1 - t; o.push([u * u * u * p0[0] + 3 * u * u * t * p1[0] + 3 * u * t * t * p2[0] + t * t * t * p3[0], u * u * u * p0[1] + 3 * u * u * t * p1[1] + 3 * u * t * t * p2[1] + t * t * t * p3[1]]); } return o; };
+// SVG path 字符串 → Path2D（写复杂轮廓最省事）
+P.path = (d) => new Path2D(d);
+
+// ---------- 风格渲染器（对一张底稿 canvas 做「重画」） ----------
+// 1) 流场笔触（梵高/印象派）：在抖动网格上取底稿颜色，沿 angle(x,y,t) 画短笔触，带深色描边
+//    cap：宽笔（width ≥ 30）密排时圆头会连成一排排「人头/鹅卵石」（迁移测试 D 蓝色时期），改 'butt'。
+//    boil：只给母题区域沸腾，静止区（地板、道具、角色）boil=0 种子固定——全屏 8fps 换种子读成满屏闪烁（迁移测试 C 莫奈）。
+P.strokes = (dst, src, { cell = 12, len = 22, width = 7, angle, seed = 1, t = 0, boil = 8, outline = 0.35, outlineCol = [20, 25, 60], outlineMix = 0.55, jitterCol = 18, mask, alphaMask = false, palette, cap = 'round' } = {}) => {
+  const sd = src.getContext('2d').getImageData(0, 0, W, H).data;
+  const r = rng(seed * 1000 + P.boilSeed(t, boil));
+  dst.lineCap = cap;
+  for (let y = 0; y < H + cell; y += cell) for (let x = 0; x < W + cell; x += cell) {
+    const px = x + (r() - .5) * cell, py = y + (r() - .5) * cell;
+    const ix = clamp(px | 0, 0, W - 1), iy = clamp(py | 0, 0, H - 1), i = (iy * W + ix) * 4;
+    if (mask && !mask(px, py)) continue;
+    if (alphaMask && sd[i + 3] < 200) continue;
+    let col = [sd[i], sd[i + 1], sd[i + 2]];
+    const pc = palette ? palette(px, py, col, r) : null; if (pc) col = pc;       // 区域色板：从色组里抽一个颜色
+    const a = angle ? angle(px, py, t) : 0, l = len * (0.7 + r() * 0.6);
+    const dx = Math.cos(a) * l / 2, dy = Math.sin(a) * l / 2;
+    if (outline > 0) { dst.strokeStyle = P.rgb(P.mix(col, outlineCol, outlineMix), outline); dst.lineWidth = width + 2.5; dst.beginPath(); dst.moveTo(px - dx, py - dy); dst.lineTo(px + dx, py + dy); dst.stroke(); }
+    dst.strokeStyle = P.rgb(pc ? col : P.jitter(col, r, jitterCol)); dst.lineWidth = width;
+    dst.beginPath(); dst.moveTo(px - dx, py - dy); dst.lineTo(px + dx, py + dy); dst.stroke();
+  }
+};
+// 色组工具：给一组 hex 和权重，返回按随机数抽色的函数（配 strokes 的 palette 用）；mixBase 把底稿色混进来保留明暗
+P.swatch = (hexes, mixBase = 0.35) => { const cs = hexes.map(P.hex); return (col, r) => { const k = cs[(r() * cs.length) | 0]; return P.mix(k, col, mixBase); }; };
+// 2) 色点（印象派）：椭圆短点，颜色带冷暖偏移、大小不一。注意这不是点彩——修拉的点彩是「等大点＋纯色板视觉混色」，用 P.pointillism（lib/render.js）
+P.dabs = (dst, src, { cell = 10, size = 9, seed = 2, t = 0, boil = 8, angle = -0.6, shift = 22 } = {}) => {
+  const sd = src.getContext('2d').getImageData(0, 0, W, H).data, r = rng(seed * 1000 + P.boilSeed(t, boil));
+  for (let y = 0; y < H + cell; y += cell) for (let x = 0; x < W + cell; x += cell) {
+    const px = x + (r() - .5) * cell * 1.2, py = y + (r() - .5) * cell * 1.2;
+    const i = (clamp(py | 0, 0, H - 1) * W + clamp(px | 0, 0, W - 1)) * 4;
+    const warm = r() < 0.5 ? [shift, shift * 0.5, -shift] : [-shift * 0.6, 0, shift];
+    dst.fillStyle = `rgb(${sd[i] + warm[0]},${sd[i + 1] + warm[1]},${sd[i + 2] + warm[2]})`;
+    dst.beginPath(); dst.ellipse(px, py, size * (0.8 + r() * 0.6), size * 0.45, angle + (r() - .5) * 0.5, 0, Math.PI * 2); dst.fill();
+  }
+};
+// 3) 马赛克：带缝隙的小石块，颜色取中心，略有抖动与倒角
+P.mosaic = (dst, src, { tile = 14, grout = '#3b352e', seed = 3, jitter = 0.25 } = {}) => {
+  const sd = src.getContext('2d').getImageData(0, 0, W, H).data, r = rng(seed);
+  dst.fillStyle = grout; dst.fillRect(0, 0, W, H);
+  for (let y = 0; y < H; y += tile) { const off = (y / tile) % 2 ? tile * 0.5 * jitter : 0; for (let x = -tile; x < W; x += tile) {
+    const cx = x + off + tile / 2, cy = y + tile / 2, i = (clamp(cy | 0, 0, H - 1) * W + clamp(cx | 0, 0, W - 1)) * 4;
+    const c = P.jitter([sd[i], sd[i + 1], sd[i + 2]], r, 14), s = tile * (0.82 + r() * 0.1);
+    dst.fillStyle = P.rgb(c); dst.fillRect(cx - s / 2 + (r() - .5) * 1.5, cy - s / 2 + (r() - .5) * 1.5, s, s);
+    dst.fillStyle = 'rgba(255,255,255,.12)'; dst.fillRect(cx - s / 2, cy - s / 2, s, 2);
+  } }
+};
+// 4) 网点（本戴点）：颜色取中心，半径随暗度
+P.halftone = (dst, src, { cell = 14, paper = '#f4ecd8', seed = 4 } = {}) => {
+  const sd = src.getContext('2d').getImageData(0, 0, W, H).data;
+  dst.fillStyle = paper; dst.fillRect(0, 0, W, H);
+  for (let y = 0; y < H + cell; y += cell) for (let x = 0; x < W + cell; x += cell) {
+    const cx = x + ((y / cell) % 2) * cell / 2, i = (clamp(y | 0, 0, H - 1) * W + clamp(cx | 0, 0, W - 1)) * 4;
+    const L = (sd[i] * .3 + sd[i + 1] * .59 + sd[i + 2] * .11) / 255;
+    dst.fillStyle = `rgb(${sd[i]},${sd[i + 1]},${sd[i + 2]})`;
+    dst.beginPath(); dst.arc(cx, y, cell * 0.72 * (0.3 + (1 - L) * 0.9), 0, Math.PI * 2); dst.fill();
+  }
+};
+// 5) 像素：最近邻降采样，可选调色板量化
+P.pixelate = (dst, src, { size = 8, palette } = {}) => {
+  const w = Math.ceil(W / size), h = Math.ceil(H / size), s = P.scratch('px'), g = s.getContext('2d');
+  g.imageSmoothingEnabled = false; g.clearRect(0, 0, w, h); g.drawImage(src, 0, 0, w, h);
+  if (palette) { const pal = palette.map(P.hex), im = g.getImageData(0, 0, w, h), d = im.data;
+    for (let i = 0; i < d.length; i += 4) { let best = 0, bd = 1e9; for (let k = 0; k < pal.length; k++) { const q = pal[k], dd = (d[i] - q[0]) ** 2 + (d[i + 1] - q[1]) ** 2 + (d[i + 2] - q[2]) ** 2; if (dd < bd) { bd = dd; best = k; } } d[i] = pal[best][0]; d[i + 1] = pal[best][1]; d[i + 2] = pal[best][2]; }
+    g.putImageData(im, 0, 0); }
+  dst.imageSmoothingEnabled = false; dst.drawImage(s, 0, 0, w, h, 0, 0, w * size, h * size); dst.imageSmoothingEnabled = true;
+};
+// 6) 立体主义切面：抖动三角网，每块取「偏移视角」的颜色做线性渐变，描暗边
+P.facets = (dst, src, { nx = 22, ny = 13, seed = 5, t = 0, shiftAmt = 26, edge = 'rgba(40,30,20,.45)' } = {}) => {
+  const sd = src.getContext('2d').getImageData(0, 0, W, H).data, r = rng(seed);
+  const pts = []; for (let j = 0; j <= ny; j++) for (let i = 0; i <= nx; i++) { const e = i === 0 || j === 0 || i === nx || j === ny; pts.push([i / nx * W + (e ? 0 : (r() - .5) * W / nx * .9), j / ny * H + (e ? 0 : (r() - .5) * H / ny * .9)]); }
+  const col = (x, y) => { const i = (clamp(y | 0, 0, H - 1) * W + clamp(x | 0, 0, W - 1)) * 4; return [sd[i], sd[i + 1], sd[i + 2]]; };
+  for (let j = 0; j < ny; j++) for (let i = 0; i < nx; i++) {
+    const a = pts[j * (nx + 1) + i], b = pts[j * (nx + 1) + i + 1], c2 = pts[(j + 1) * (nx + 1) + i], d2 = pts[(j + 1) * (nx + 1) + i + 1];
+    for (const tri of (r() < .5 ? [[a, b, d2], [a, d2, c2]] : [[a, b, c2], [b, d2, c2]])) {
+      const cx = (tri[0][0] + tri[1][0] + tri[2][0]) / 3, cy = (tri[0][1] + tri[1][1] + tri[2][1]) / 3;
+      const sh = Math.sin(t * 3 + cx * 0.01) * shiftAmt * r();
+      const c0 = col(cx + sh, cy), c1 = P.mix(c0, [60, 45, 30], 0.35);
+      const g = dst.createLinearGradient(tri[0][0], tri[0][1], tri[2][0], tri[2][1]); g.addColorStop(0, P.rgb(P.mix(c0, [255, 250, 235], 0.12))); g.addColorStop(1, P.rgb(c1));
+      dst.fillStyle = g; dst.beginPath(); tri.forEach((p, k) => k ? dst.lineTo(p[0], p[1]) : dst.moveTo(p[0], p[1])); dst.closePath(); dst.fill();
+      dst.strokeStyle = edge; dst.lineWidth = 1.5; dst.stroke();
+    }
+  }
+};
+
+// ---------- 共享编舞：16 个时代用同一套动作曲线，各自用自己的画法画出来 ----------
+// lt = 本段局部时间（秒）。返回 0..1 或角度，时代代码按需取用。
+// 端杯循环（全片时间）：2.4s 一轮——0.9s 举到嘴边、停 0.7s 喝、0.8s 放回
+P.cupCycle = (t, period = 2.4) => { const q = ((t % period) + period) % period;
+  if (q < 0.9) return 0.5 - 0.5 * Math.cos(q / 0.9 * Math.PI); if (q < 1.6) return 1; return 0.5 + 0.5 * Math.cos((q - 1.6) / 0.8 * Math.PI); };
+P.choreo = (lt, t) => ({
+  cupG: P.cupCycle(t),                                         // 按全片时间的端杯（跨段连续：速通片换段时姿势不重置）
+  cup: 0.5 - 0.5 * Math.cos(Math.min(1, lt / 0.9) * Math.PI),   // 端杯：0=在桌上 1=在嘴边（约 0.9s 举起）
+  sip: Math.max(0, Math.sin(lt * 6)) * 0.15,                    // 喝时头部微仰
+  tail: Math.sin(t * 5.2) * 0.35 + Math.sin(t * 11) * 0.08,      // 猫尾摆（弧度）
+  blink: (t % 2.3) > 2.18 ? 1 : 0,                              // 眨眼
+  ear: Math.max(0, Math.sin(t * 9)) > 0.97 ? 1 : 0,
+  breathe: Math.sin(t * 4) * 0.012,
+  steam: t,                                                     // 热气用全局时间
+});
+
+// ---------- 通用元素 ----------
+// 热气：几条随时间上行的正弦曲线（风格化的 S 形可传 width/color）
+P.steam = (c, t, x, y, { h = 80, n = 3, color = 'rgba(255,255,255,.8)', width = 4, spread = 16, wobble = 10, seed = 1 } = {}) => {
+  c.save(); c.lineCap = 'round'; c.lineWidth = width;
+  for (let k = 0; k < n; k++) {
+    const ox = (k - (n - 1) / 2) * spread, ph = t * 3 + k * 2.1 + seed;
+    const g = c.createLinearGradient(0, y, 0, y - h); g.addColorStop(0, color); g.addColorStop(1, 'rgba(255,255,255,0)'); c.strokeStyle = g;
+    c.beginPath(); for (let s = 0; s <= 20; s++) { const q = s / 20; const xx = x + ox + Math.sin(ph - q * 5) * wobble * q, yy = y - q * h; s ? c.lineTo(xx, yy) : c.moveTo(xx, yy); } c.stroke();
+  }
+  c.restore();
+};
+// 粒子：给定种子与时间，返回确定的粒子位置（飘落/上浮）
+P.particles = (n, seed, t, { x0 = 0, x1 = W, y0 = -40, y1 = H + 40, speed = 80, drift = 30, life = 6 } = {}) => {
+  const r = rng(seed), out = [];
+  for (let i = 0; i < n; i++) { const bx = lerp(x0, x1, r()), ph = r() * life, sp = speed * (0.6 + r() * 0.8), q = ((t + ph) % life) / life;
+    out.push({ x: bx + Math.sin((t + ph) * 1.7 + i) * drift, y: lerp(y0, y1, q), a: r() * Math.PI * 2 + t * (r() - .5) * 3, s: 0.6 + r() * 0.8, q, i }); }
+  return out;
+};
+})();