@biunow/agent-biuart 0.0.0-stage → 0.1.0

package/engine/demos/long_scroll/segments/02_egypt.js

@@ -0,0 +1,234 @@
+// 02_egypt · 古埃及墓室壁画（约公元前 1350 年，新王国）—— 横向「分栏壁画」世界
+// 世界＝墓室墙上的三层分栏（register）：顶上 kheker 饰带＋彩块边；上栏是美杜姆群鹅、有翼日盘、纸莎草丛里惊飞的水鸟（内巴蒙猎禽图的母题）和象形文字栏；
+// 540 处一道彩块分栏线（地平线）；中栏是他走的这一层（供桌、尖底罐、蓝莲花）；760 处彩块地线；下栏是尼罗河之字形水纹、游鱼、蓝莲。
+// 画法沿用 scenes/02_egypt.js：灰泥墙底＋平涂色块＋深色勾线＋四色彩块边框＋象形字库＋整幅 multiply 壁画表面（斑驳、发丝裂纹、颗粒）。
+// 活：水纹流动、鱼游、水鸟扑翅、群鹅点头啄食、纸莎草摇、日盘脉动。
+// 互动：圣甲虫推着太阳球从前面滚来，他埃及舞者式跳起让开，球和圣甲虫从他脚下滚过去、一路滚出画外；他回头看、得意地叉腰。
+// 圣甲虫推着球走开，帽子保持纯白，不累积纪念品
+if (!window.XJ) { const x = new XMLHttpRequest(); x.open('GET', 'demos/long_scroll/lib/xing2_jia.js', false); x.send(); (0, eval)(x.responseText + '\n//# sourceURL=demos/long_scroll/lib/xing2_jia.js'); }
+(() => {
+const { clamp, lerp, rng, ss } = U, P = PAINT, TAU = Math.PI * 2, H = 1080, W = 1920;
+const w = 2100, OX = 160, WW = w + 2 * OX, G = WORLD.GROUND, REG = 540;
+const WALK = { st: [49.0, 23.6, -1.4, -53.7, 51.4, 27.0, -22.6, -55.4], fps: 12.6 };   // 支撑脚 x（身高300）与步速330时的帧率，从走路帧逐帧量出
+const K = { walk: 'egypt_walk8', act: 'egypt_dodge' };
+const AT = 1000, DUR = 1.6;
+const AX = AT + WORLD.V * 0.11;   // 他互动时实际站的位置（XJ.glide 缓停滑过的那一小段之后）
+const T_HIT = 0.6, V_SC = 650;     // 互动内秒：球滚到他脚下；圣甲虫速度（px/s，与步速无关）。加快甲虫并拉长腾空时间，让整只甲虫在角色落地前通过
+const C = { wall: [234, 220, 184], wall2: [216, 197, 151], line: '#2a1810', rule: '#9a2b22', red: '#b8322a', blue: '#2a58a8', green: '#2e8a55', yellow: '#e2b13a', black: '#231a14',
+  gold: '#e0ab38', cream: '#f2ead6', white: '#f6f2e8', terra: '#d4936a', lapis: '#2c56b0', turq: '#3fa6a0', water: '#2f5fa8', papy: '#3f8a4a', papyL: '#7ab45a' };
+const BAND = [C.red, C.blue, C.yellow, C.green];
+const poly = (g, pts, close = true) => { g.beginPath(); pts.forEach((p, i) => i ? g.lineTo(p[0], p[1]) : g.moveTo(p[0], p[1])); if (close) g.closePath(); };
+const fs = (g, fill, stroke, lw = 2.5) => { if (fill) { g.fillStyle = fill; g.fill(); } if (stroke) { g.strokeStyle = stroke; g.lineWidth = lw; g.stroke(); } };
+
+// ---------- 象形文字（字形取自 scenes/02_egypt.js） ----------
+const GL = {
+  ankh: { h: 60, cols: [C.blue, C.green, C.black, C.red], d(g) { g.lineWidth = 3.6; g.beginPath(); g.ellipse(0, -17, 8, 11, 0, 0, 7); g.moveTo(-16, -3); g.lineTo(16, -3); g.moveTo(0, -5); g.lineTo(0, 29); g.stroke(); } },
+  sun: { h: 40, cols: [C.black, C.blue, C.red], d(g) { g.lineWidth = 3; g.beginPath(); g.arc(0, 0, 15, 0, 7); g.stroke(); g.beginPath(); g.arc(0, 0, 4, 0, 7); g.fill(); } },
+  bread: { h: 26, cols: [C.red, C.blue, C.green], d(g) { g.beginPath(); g.arc(0, 9, 19, Math.PI, 0); g.closePath(); g.stroke(); g.beginPath(); g.moveTo(-12, 4); g.lineTo(12, 4); g.stroke(); } },
+  reed: { h: 62, cols: [C.black, C.green, C.red], d(g) { g.beginPath(); g.moveTo(-2, 29); g.quadraticCurveTo(-11, 0, 1, -29); g.quadraticCurveTo(7, -2, 4, 29); g.stroke(); g.beginPath(); g.moveTo(1, -29); g.quadraticCurveTo(9, -31, 10, -24); g.stroke(); } },
+  owl: { h: 60, cols: [C.black, C.blue], d(g) { g.beginPath(); g.ellipse(3, 6, 12, 19, 0.1, 0, 7); g.stroke(); g.beginPath(); g.arc(-2, -18, 10, 0, 7); g.stroke(); g.beginPath(); g.arc(-6, -19, 2.4, 0, 7); g.arc(2, -19, 2.4, 0, 7); g.fill(); g.beginPath(); g.moveTo(-2, -14); g.lineTo(-3, -9); g.moveTo(9, 22); g.lineTo(18, 29); g.moveTo(-3, 24); g.lineTo(-5, 30); g.moveTo(4, 24); g.lineTo(3, 30); g.stroke(); } },
+  falcon: { h: 60, cols: [C.black, C.red, C.blue], d(g) { g.beginPath(); g.arc(-6, -20, 7, 0, 7); g.fill(); poly(g, [[-12, -21], [-19, -16], [-11, -15]]); g.fill(); g.beginPath(); g.ellipse(2, 1, 10, 20, -0.35, 0, 7); g.stroke(); poly(g, [[8, 16], [20, 30], [6, 27]]); g.fill(); g.beginPath(); g.moveTo(-3, 19); g.lineTo(-5, 30); g.moveTo(2, 19); g.lineTo(1, 30); g.moveTo(-1, -8); g.quadraticCurveTo(10, 0, 12, 14); g.stroke(); } },
+  eye: { h: 36, cols: [C.green, C.black, C.blue], d(g) { g.beginPath(); g.moveTo(-18, 0); g.quadraticCurveTo(0, -12, 18, 0); g.quadraticCurveTo(0, 9, -18, 0); g.stroke(); g.beginPath(); g.arc(0, -1, 4.5, 0, 7); g.fill(); g.beginPath(); g.moveTo(-18, -12); g.quadraticCurveTo(0, -20, 20, -11); g.moveTo(-4, 6); g.lineTo(-6, 16); g.moveTo(6, 5); g.quadraticCurveTo(14, 18, 4, 16); g.stroke(); } },
+  cartouche: { h: 74, cols: [C.black, C.red], d(g) { g.beginPath(); g.ellipse(0, -2, 15, 31, 0, 0, 7); g.stroke(); g.beginPath(); g.moveTo(-14, 33); g.lineTo(14, 33); g.stroke(); g.lineWidth = 2; g.beginPath(); g.arc(0, -18, 5, 0, 7); g.moveTo(-7, -2); g.lineTo(7, -2); g.moveTo(-6, 8); g.lineTo(-3, 13); g.lineTo(0, 8); g.lineTo(3, 13); g.lineTo(6, 8); g.stroke(); } },
+  snake: { h: 30, cols: [C.green, C.black, C.red], d(g) { g.lineWidth = 3.2; g.beginPath(); g.moveTo(22, 8); g.bezierCurveTo(10, -4, 4, 14, -6, 6); g.bezierCurveTo(-14, 0, -16, -4, -20, -2); g.stroke(); g.beginPath(); g.moveTo(-20, -2); g.lineTo(-23, -9); g.moveTo(-17, -3); g.lineTo(-15, -10); g.stroke(); } },
+  seated: { h: 58, cols: [C.red, C.black, C.blue], d(g) { g.beginPath(); g.arc(-2, -21, 6.5, 0, 7); g.fill(); poly(g, [[-6, -13], [4, -13], [6, 6], [16, 8], [17, 18], [-10, 18], [-10, 2]]); g.fill(); g.beginPath(); g.moveTo(-6, -8); g.lineTo(-17, -16); g.stroke(); g.beginPath(); g.moveTo(-14, 26); g.lineTo(18, 26); g.stroke(); } },
+  djed: { h: 62, cols: [C.blue, C.green], d(g) { g.beginPath(); g.moveTo(-6, 29); g.lineTo(-6, -10); g.moveTo(6, 29); g.lineTo(6, -10); for (let k = 0; k < 4; k++) { g.moveTo(-13, -12 - k * 5); g.lineTo(13, -12 - k * 5); } g.moveTo(-12, 29); g.lineTo(12, 29); g.stroke(); } },
+  jug: { h: 50, cols: [C.red, C.green, C.blue], d(g) { g.beginPath(); g.moveTo(-6, -22); g.lineTo(6, -22); g.lineTo(5, -14); g.quadraticCurveTo(16, -6, 12, 12); g.quadraticCurveTo(8, 22, 0, 22); g.quadraticCurveTo(-8, 22, -12, 12); g.quadraticCurveTo(-16, -6, -5, -14); g.closePath(); g.stroke(); g.beginPath(); g.moveTo(-10, 0); g.lineTo(10, 0); g.stroke(); } },
+  lotus: { h: 56, cols: [C.green, C.blue], d(g) { g.beginPath(); g.moveTo(0, 27); g.lineTo(0, -6); g.stroke(); poly(g, [[0, -6], [-12, -18], [-6, -26], [0, -16], [6, -26], [12, -18]]); g.stroke(); } },
+  nfr: { h: 56, cols: [C.black, C.red], d(g) { g.beginPath(); g.ellipse(0, 12, 10, 14, 0, 0, 7); g.moveTo(0, -2); g.lineTo(0, -26); g.moveTo(-6, -18); g.lineTo(6, -18); g.moveTo(-6, -12); g.lineTo(6, -12); g.stroke(); } },
+  water: { h: 30, cols: [C.blue], d(g) { g.lineWidth = 2.6; for (let r = -1; r <= 1; r++) { g.beginPath(); for (let i = 0; i <= 16; i++) { const x = -21 + i * 2.625, y = r * 9 + (i % 2 < 1 ? -3 : 3); i ? g.lineTo(x, y) : g.moveTo(x, y); } g.stroke(); } } },
+  feather: { h: 60, cols: [C.blue, C.green, C.black], d(g) { g.beginPath(); g.moveTo(-2, 29); g.quadraticCurveTo(-8, -10, 4, -29); g.quadraticCurveTo(12, -18, 6, 0); g.quadraticCurveTo(3, 15, 2, 29); g.stroke(); } },
+};
+const GN = Object.keys(GL);
+const glyphCols = (g, xs, y0, y1, seed) => { const r = rng(seed); g.lineCap = 'round';
+  xs.forEach(x => { g.strokeStyle = C.rule; g.lineWidth = 2.6; g.beginPath(); g.moveTo(x, y0); g.lineTo(x, y1); g.stroke(); });
+  for (let k = 0; k < xs.length - 1; k++) { const cx = (xs[k] + xs[k + 1]) / 2, s = (xs[k + 1] - xs[k]) / 78; let y = y0 + 8, prev = '';
+    while (true) { let n; do { n = GN[(r() * GN.length) | 0]; } while (n === prev); prev = n; const gl = GL[n]; if (y + gl.h * s > y1) break;
+      g.save(); g.translate(cx, y + gl.h * s / 2); g.scale(s, s); const col = gl.cols[(r() * gl.cols.length) | 0]; g.strokeStyle = col; g.fillStyle = col; g.lineWidth = 3.1; g.lineJoin = 'round'; gl.d(g); g.restore(); y += gl.h * s + 7; } } };
+// 彩块边（水平/竖直），块间黑缝
+function blocks(g, x0, y0, x1, y1, len, off = 0) {
+  const hor = (x1 - x0) > (y1 - y0), L = hor ? x1 - x0 : y1 - y0;
+  g.fillStyle = C.cream; g.fillRect(x0, y0, x1 - x0, y1 - y0);
+  for (let s = 0, k = off; s < L; s += len, k++) { g.fillStyle = BAND[k % 4];
+    if (hor) g.fillRect(x0 + s + 3, y0 + 3, Math.min(len - 6, L - s - 3), y1 - y0 - 6); else g.fillRect(x0 + 3, y0 + s + 3, x1 - x0 - 6, Math.min(len - 6, L - s - 3));
+    g.fillStyle = C.black; if (hor) g.fillRect(x0 + s, y0, 2, y1 - y0); else g.fillRect(x0, y0 + s, x1 - x0, 2); }
+  g.strokeStyle = C.black; g.lineWidth = 2; g.strokeRect(x0, y0, x1 - x0, y1 - y0);
+}
+function jar(g, cx, y0, s) {
+  g.save(); g.translate(cx, y0); g.scale(s, s);
+  poly(g, [[-26, 256], [-20, 256], [10, 196], [4, 196]]); fs(g, C.white, C.line, 2); poly(g, [[26, 256], [20, 256], [-10, 196], [-4, 196]]); fs(g, C.white, C.line, 2);
+  g.fillStyle = C.white; g.fillRect(-24, 198, 48, 6); g.strokeStyle = C.line; g.strokeRect(-24, 198, 48, 6);
+  g.beginPath(); g.moveTo(-10, 30); g.bezierCurveTo(-40, 50, -38, 120, -20, 180); g.quadraticCurveTo(-6, 222, 0, 228); g.quadraticCurveTo(6, 222, 20, 180); g.bezierCurveTo(38, 120, 40, 50, 10, 30); g.closePath(); fs(g, C.terra, C.line, 2.5);
+  g.save(); g.clip(); g.fillStyle = C.green; g.fillRect(-40, 52, 80, 6); g.fillStyle = C.blue; g.fillRect(-40, 58, 80, 4);
+  g.fillStyle = '#2f9a8a'; for (let x = -36; x < 36; x += 9) { poly(g, [[x, 62], [x + 9, 62], [x + 4.5, 82]]); g.fill(); } g.restore();
+  g.fillStyle = C.terra; g.fillRect(-9, 18, 18, 14); g.strokeStyle = C.line; g.lineWidth = 2; g.strokeRect(-9, 18, 18, 14);
+  g.beginPath(); g.moveTo(-14, 20); g.quadraticCurveTo(-14, -6, 0, -6); g.quadraticCurveTo(14, -6, 14, 20); g.closePath(); fs(g, '#3a302a', C.line, 2);
+  g.restore();
+}
+// 供桌：苇席桌上摞面包、蓝莲、鸭、葡萄
+function offering(g, x, y) {
+  g.fillStyle = C.yellow; g.fillRect(x - 70, y - 120, 140, 10); g.strokeStyle = C.line; g.lineWidth = 2; g.strokeRect(x - 70, y - 120, 140, 10);
+  g.fillStyle = C.yellow; g.fillRect(x - 8, y - 110, 16, 110); g.strokeRect(x - 8, y - 110, 16, 110); g.fillRect(x - 30, y - 8, 60, 8); g.strokeRect(x - 30, y - 8, 60, 8);
+  [[-52, -136, C.terra], [-20, -140, C.yellow], [14, -138, C.terra], [44, -134, '#c8802a']].forEach(([dx, dy, col]) => { g.beginPath(); g.ellipse(x + dx, y + dy, 18, 12, 0, 0, TAU); fs(g, col, C.line, 2); });
+  g.beginPath(); g.ellipse(x - 4, y - 166, 40, 13, 0, 0, TAU); fs(g, '#e8e0cc', C.line, 2);
+  for (let k = 0; k < 7; k++) { g.beginPath(); g.arc(x + 40 + (k % 3) * 9, y - 176 + Math.floor(k / 3) * 9, 5, 0, TAU); fs(g, '#5a3a7a', C.line, 1.2); }
+  // 蓝莲两朵从桌上垂下
+  [[-60, 1], [60, -1]].forEach(([dx, sg]) => { g.strokeStyle = C.green; g.lineWidth = 3; g.beginPath(); g.moveTo(x + dx * 0.6, y - 120); g.quadraticCurveTo(x + dx * 1.3, y - 80, x + dx * 1.2, y - 30); g.stroke();
+    poly(g, [[x + dx * 1.2, y - 30], [x + dx * 1.2 - 12, y - 4], [x + dx * 1.2, y - 12], [x + dx * 1.2 + 12, y - 4]]); fs(g, C.blue, C.line, 1.6); void sg; });
+}
+
+// ---------- 静态层（世界坐标 +OX，缓存） ----------
+const WALLTEX = () => P.cached('je_walltex', WW, H, g => {
+  const hw = Math.ceil(WW / 2), hh = H / 2, s = P.canvas(hw, hh), sg = s.getContext('2d'), img = sg.createImageData(hw, hh), d = img.data, r = rng(13);
+  for (let y = 0; y < hh; y++) for (let x = 0; x < hw; x++) { const n = P.fbm(x * 0.007 + 3, y * 0.007, 4), m = P.fbm(x * 0.05, y * 0.05 + 9, 2), k = (y * hw + x) * 4;
+    const col = P.mix(C.wall, C.wall2, clamp(0.35 - n * 1.2)); const v = 1 + m * 0.05 + (r() - 0.5) * 0.04; d[k] = col[0] * v; d[k + 1] = col[1] * v; d[k + 2] = col[2] * v; d[k + 3] = 255; }
+  sg.putImageData(img, 0, 0); g.imageSmoothingQuality = 'high'; g.drawImage(s, 0, 0, WW, H);
+});
+const SURF = () => P.cached('je_surface', WW, H, g => {          // 壁画表面（multiply）：斑驳＋发丝裂纹＋颗粒
+  const hw = Math.ceil(WW / 2), hh = H / 2, s = P.canvas(hw, hh), sg = s.getContext('2d'), img = sg.createImageData(hw, hh), d = img.data, r = rng(99);
+  for (let y = 0; y < hh; y++) for (let x = 0; x < hw; x++) { const n = P.fbm(x * 0.012 + 40, y * 0.012, 4), m = P.fbm(x * 0.06, y * 0.06 + 9, 2), v = 243 + n * 30 + m * 12 + (r() - 0.5) * 18, k = (y * hw + x) * 4; d[k] = v; d[k + 1] = v - 6; d[k + 2] = v - 16; d[k + 3] = 255; }
+  sg.putImageData(img, 0, 0); g.drawImage(s, 0, 0, WW, H);
+  const rr = rng(5); for (let q = 0; q < 9; q++) { let x = rr() * WW, y = rr() < 0.5 ? 0 : rr() * H, a = rr() * TAU; g.strokeStyle = 'rgba(90,70,50,.5)'; g.lineWidth = 1.1; g.beginPath(); g.moveTo(x, y); for (let k = 0; k < 34; k++) { a += (rr() - 0.5) * 0.7; x += Math.cos(a) * 14; y += Math.sin(a) * 14; g.lineTo(x, y); } g.stroke(); }
+  for (let x = 0; x < WW; x += W) g.drawImage(P.grain('eg_specks', 0.018, [70, 50, 30], 0.4), x, 0);
+});
+const GEESE = [[300, 498, 1], [520, 498, -1], [700, 498, 1]];          // 美杜姆群鹅（世界 x、脚底 y、朝向）
+const PAPY = [1260, 1760];                                               // 纸莎草丛 x 范围（上栏）
+const DISC = [880, 210];
+const STATIC = () => P.cached('je_static', WW, H, g => {
+  g.drawImage(WALLTEX(), 0, 0); const X = x => x + OX;
+  // 顶：kheker 饰带（束起的芦苇头）＋彩块边
+  g.fillStyle = C.cream; g.fillRect(0, 0, WW, 74);
+  for (let x = 0, k = 0; x < WW; x += 34, k++) { g.beginPath(); g.moveTo(x + 6, 74); g.lineTo(x + 6, 26); g.quadraticCurveTo(x + 17, 0, x + 28, 26); g.lineTo(x + 28, 74); g.closePath(); fs(g, [C.red, C.blue, C.green][k % 3], C.black, 2);
+    g.fillStyle = C.cream; g.fillRect(x + 12, 34, 10, 8); g.fillStyle = C.yellow; g.beginPath(); g.arc(x + 17, 22, 5, 0, TAU); g.fill(); }
+  blocks(g, 0, 74, WW, 96, 44, 0);
+  // 上栏：象形字栏（三组）
+  glyphCols(g, [X(-120), X(-44), X(32), X(108)], 112, 500, 1350);
+  glyphCols(g, [X(1060), X(1132), X(1204)], 112, 520, 1351);
+  glyphCols(g, [X(1880), X(1956), X(2032), X(2108), X(2184)], 112, 520, 1352);
+  // 有翼日盘的翅膀（静态部分；日盘本身每帧画以便脉动）
+  const [dx, dy] = [X(DISC[0]), DISC[1]];
+  for (const sg2 of [-1, 1]) { for (let r2 = 0; r2 < 3; r2++) { g.beginPath(); g.moveTo(dx + sg2 * 40, dy - 10 + r2 * 12); g.quadraticCurveTo(dx + sg2 * 150, dy - 34 + r2 * 18, dx + sg2 * (250 - r2 * 40), dy - 4 + r2 * 18); g.lineTo(dx + sg2 * (240 - r2 * 40), dy + 12 + r2 * 18); g.quadraticCurveTo(dx + sg2 * 140, dy - 6 + r2 * 18, dx + sg2 * 40, dy + 6 + r2 * 12); g.closePath(); fs(g, [C.blue, C.green, C.red][r2], C.black, 2); }
+    for (let f = 0; f < 9; f++) { g.strokeStyle = C.black; g.lineWidth = 1.4; g.beginPath(); g.moveTo(dx + sg2 * (60 + f * 22), dy - 18); g.lineTo(dx + sg2 * (60 + f * 22), dy + 40); g.stroke(); } }
+  // 上栏底的水带（纸莎草下的沼泽）
+  g.fillStyle = C.water; g.fillRect(X(1180), 500, 680, 40); g.strokeStyle = C.black; g.lineWidth = 2; g.strokeRect(X(1180), 500, 680, 40);
+  // 540 分栏线、760 地线：彩块带
+  blocks(g, 0, REG - 8, WW, REG + 8, 38, 1);
+  blocks(g, 0, G, WW, G + 16, 38, 2);
+  // 中栏：尖底罐、供桌（他走过时在身后）
+  jar(g, X(250), G - 256 * 0.86, 0.86); jar(g, X(330), G - 256 * 0.8, 0.8);
+  offering(g, X(620), G);
+  jar(g, X(1660), G - 256 * 0.86, 0.86);
+  offering(g, X(1880), G);
+  glyphCols(g, [X(1420), X(1490), X(1560)], 562, 740, 1353);
+  // 下栏：尼罗河（水色带＋黑色之字水纹另画动态）＋底部护墙裙
+  g.fillStyle = C.water; g.fillRect(0, G + 16, WW, 230);
+  blocks(g, 0, G + 246, WW, G + 262, 38, 3);
+  g.fillStyle = '#7a2a1c'; g.fillRect(0, G + 262, WW, H - G - 262); g.fillStyle = C.black; g.fillRect(0, G + 290, WW, 6); g.fillStyle = C.yellow; g.fillRect(0, G + 296, WW, 3);
+});
+
+// ---------- 动态母题 ----------
+function goose(c, x, y, fx, t, k) {               // 美杜姆鹅：侧身、平涂、勾线；点头啄食
+  const peck = Math.max(0, Math.sin(t * 2.2 + k * 2.1)) ** 3;
+  c.save(); c.translate(x, y); c.scale(fx * 1.2, 1.2);
+  c.strokeStyle = C.line; c.lineWidth = 2; c.beginPath(); c.moveTo(-6, -14); c.lineTo(-10, 0); c.moveTo(6, -14); c.lineTo(10, 0); c.stroke();
+  c.fillStyle = C.red; c.fillRect(-16, -2, 12, 3); c.fillRect(6, -2, 12, 3);
+  c.beginPath(); c.moveTo(-60, -48); c.quadraticCurveTo(-30, -78, 20, -66); c.quadraticCurveTo(44, -56, 40, -36); c.quadraticCurveTo(20, -12, -30, -16); c.quadraticCurveTo(-56, -22, -60, -48); c.closePath(); fs(c, '#d8c8a8', C.line, 2);
+  c.save(); c.clip(); c.fillStyle = '#8a6a4a'; c.fillRect(-60, -80, 120, 26); c.strokeStyle = '#4a3a2a'; c.lineWidth = 1.4; for (let i = 0; i < 6; i++) { c.beginPath(); c.moveTo(-50 + i * 14, -64); c.lineTo(-40 + i * 14, -52); c.stroke(); } c.restore();
+  c.save(); c.translate(30, -58); c.rotate(peck * 0.9);
+  c.beginPath(); c.moveTo(-6, 4); c.quadraticCurveTo(0, -40, 10, -56); c.lineTo(20, -54); c.quadraticCurveTo(12, -34, 8, 6); c.closePath(); fs(c, '#a8886a', C.line, 1.8);
+  c.beginPath(); c.ellipse(16, -58, 11, 8, 0, 0, TAU); fs(c, '#6a5a4a', C.line, 1.6); poly(c, [[24, -60], [40, -56], [24, -52]]); fs(c, '#d86a2a', C.line, 1.2);
+  c.fillStyle = '#fff'; c.beginPath(); c.arc(18, -60, 2.4, 0, TAU); c.fill();
+  c.restore(); c.restore();
+}
+function papyrus(c, x0, x1, t, camX) {            // 纸莎草丛：茎＋伞形花头，成片摇；水鸟从丛中惊飞
+  const r = rng(77);
+  for (let i = 0; i < 26; i++) { const bx = lerp(x0, x1, r()) - camX, top = 170 + r() * 120, sw = Math.sin(t * 1.4 + i * 0.7) * 10 * (0.5 + r() * 0.5);
+    if (bx < -100 || bx > W + 100) { r(); continue; }
+    c.strokeStyle = C.papy; c.lineWidth = 4; c.beginPath(); c.moveTo(bx, 500); c.quadraticCurveTo(bx + sw * 0.3, (500 + top) / 2, bx + sw, top); c.stroke();
+    c.save(); c.translate(bx + sw, top); c.rotate(sw * 0.02); poly(c, [[0, 0], [-34, -46], [34, -46]]); fs(c, i % 3 ? C.papyL : C.papy, C.line, 2);
+    c.strokeStyle = C.line; c.lineWidth = 1.2; for (let k = -2; k <= 2; k++) { c.beginPath(); c.moveTo(0, 0); c.lineTo(k * 15, -46); c.stroke(); } c.fillStyle = C.yellow; c.fillRect(-34, -50, 68, 5); c.restore(); }
+  // 水鸟：在纸莎草上方绕圈扑翅（两套翅膀姿态，10fps 交替）
+  for (let k = 0; k < 6; k++) { const ph = t * 0.9 + k * 1.05, bx = (x0 + x1) / 2 + Math.cos(ph) * 220 + (k - 2.5) * 30 - camX, by = 200 + Math.sin(ph * 1.3) * 60 + k * 8; if (bx < -60 || bx > W + 60) continue;
+    const up = Math.floor(t * 10 + k) % 2, fx = Math.sin(ph) < 0 ? 1 : -1;
+    c.save(); c.translate(bx, by); c.scale(fx, 1); c.beginPath(); c.ellipse(0, 0, 18, 8, 0, 0, TAU); fs(c, k % 2 ? C.white : '#5a8ab0', C.line, 1.6);
+    c.beginPath(); c.arc(18, -4, 6, 0, TAU); fs(c, k % 2 ? C.green : '#2a3a5a', C.line, 1.4); poly(c, [[23, -4], [32, -2], [23, 0]]); fs(c, C.yellow, null);
+    poly(c, up ? [[-6, -2], [-16, -30], [6, -4]] : [[-6, 2], [-18, 22], [6, 4]]); fs(c, k % 2 ? '#c8d8e8' : '#3a6a9a', C.line, 1.4); c.restore(); }
+}
+function nile(c, t, camX) {                       // 下栏：黑色之字水纹向左流，鱼游，蓝莲点头
+  const y0 = G + 30, y1 = G + 236, step = 26, off = (t * 60) % (step * 2);
+  c.save(); c.strokeStyle = '#13213f'; c.lineWidth = 3; c.lineJoin = 'miter';
+  for (let y = y0; y < y1; y += 30) { c.beginPath(); const sh = ((y / 30) % 2) * step; for (let x = -step * 2 - off + sh - (camX % (step * 2)); x < W + step * 2; x += step) { const yy = y + ((Math.round((x + off - sh + camX) / step)) % 2 ? 9 : -9); x === -step * 2 - off + sh - (camX % (step * 2)) ? c.moveTo(x, yy) : c.lineTo(x, yy); } c.stroke(); }
+  c.restore();
+  const r = rng(19);
+  for (let k = 0; k < 9; k++) { const sp = 30 + r() * 40, dir = r() < 0.5 ? -1 : 1, base = r() * (w + 400) - 200, fy = y0 + 30 + r() * 160;
+    let wx = base + dir * sp * t; wx = ((wx + 300) % (w + 600) + (w + 600)) % (w + 600) - 300; const fx = wx - camX; if (fx < -80 || fx > W + 80) continue;
+    const wig = Math.sin(t * 9 + k) * 0.12;
+    c.save(); c.translate(fx, fy); c.scale(dir, 1); c.rotate(wig * 0.3);
+    c.beginPath(); c.ellipse(0, 0, 30, 14, 0, 0, TAU); fs(c, k % 2 ? '#8aa0b8' : '#c8a060', C.black, 1.8);
+    poly(c, [[-26, 0], [-44, -12 + wig * 30], [-44, 12 + wig * 30]]); fs(c, k % 2 ? '#8aa0b8' : '#c8a060', C.black, 1.6);
+    c.strokeStyle = C.black; c.lineWidth = 1.2; c.beginPath(); c.moveTo(-10, -12); c.quadraticCurveTo(4, -22, 18, -10); c.stroke(); c.fillStyle = '#fff'; c.beginPath(); c.arc(18, -3, 3.2, 0, TAU); c.fill(); c.fillStyle = C.black; c.beginPath(); c.arc(19, -3, 1.6, 0, TAU); c.fill();
+    c.restore(); }
+  for (let k = 0; k < 14; k++) { const lx = k * 170 + 40 - camX; if (lx < -40 || lx > W + 40) continue; const nod = Math.sin(t * 2 + k) * 0.12;
+    c.save(); c.translate(lx, G + 18); c.rotate(nod); c.strokeStyle = C.green; c.lineWidth = 3; c.beginPath(); c.moveTo(0, 30); c.lineTo(0, -10); c.stroke();
+    poly(c, [[0, -8], [-14, -36], [-5, -30], [0, -44], [5, -30], [14, -36]]); fs(c, k % 2 ? C.blue : C.white, C.line, 1.6); c.restore(); }
+}
+// 有翼日盘：红盘＋两条圣蛇，光晕脉动
+function disc(c, x, y, t) { const pu = 0.5 + 0.5 * Math.sin(t * TAU / 0.9);
+  const hg = c.createRadialGradient(x, y, 30, x, y, 80 + 20 * pu); hg.addColorStop(0, `rgba(255,180,80,${0.35 * pu + 0.1})`); hg.addColorStop(1, 'rgba(255,170,70,0)'); c.fillStyle = hg; c.fillRect(x - 110, y - 110, 220, 220);
+  c.beginPath(); c.arc(x, y, 34, 0, TAU); fs(c, '#c8372b', '#7a1c14', 3);
+  for (const s of [-1, 1]) { c.beginPath(); c.moveTo(x + s * 30, y + 26); c.quadraticCurveTo(x + s * 44, y + 6, x + s * 38, y - 14); c.lineWidth = 6; c.strokeStyle = C.gold; c.stroke(); c.beginPath(); c.arc(x + s * 38, y - 16, 6, 0, TAU); fs(c, C.gold, C.black, 1.4); } }
+
+// ---------- 圣甲虫（背视：青金石身、绿松石鞘翅），头朝左推着红色太阳球滚 ----------
+function scarab(c, x, y, s, t) {
+  c.save(); c.translate(x, y); c.scale(s, s); c.lineCap = 'round'; c.lineJoin = 'round'; c.rotate(-Math.PI / 2);
+  const pose = Math.floor(t * 15) % 2;
+  c.strokeStyle = '#141a30'; c.lineWidth = 3;                  // 腿：两套姿态交替
+  const legs = pose ? [[-14, -16, -26], [0, -18, -6], [14, -14, 18]] : [[-14, -14, -32], [0, -19, 2], [14, -18, 24]];
+  legs.forEach(([ly, lx, ex]) => { for (const sg of [-1, 1]) { c.beginPath(); c.moveTo(sg * 10, ly + 14); c.lineTo(sg * 24, ly + 14 + (ex - ly) * 0.3); c.lineTo(sg * 30, ly + 24 + (pose ? 3 : -3) * sg); c.stroke(); } void lx; });
+  c.beginPath(); c.ellipse(0, 8, 17, 23, 0, 0, TAU); fs(c, C.lapis, '#0d1430', 2.2);
+  c.beginPath(); c.moveTo(0, -12); c.lineTo(0, 30); c.stroke();
+  c.fillStyle = C.turq; c.beginPath(); c.ellipse(-7, 6, 4, 13, 0.1, 0, TAU); c.fill(); c.beginPath(); c.ellipse(7, 6, 4, 13, -0.1, 0, TAU); c.fill();
+  c.beginPath(); c.ellipse(0, -18, 12, 8, 0, 0, TAU); fs(c, '#3a68c4', '#0d1430', 2);
+  c.beginPath(); c.moveTo(-10, -24); for (let k = 0; k < 5; k++) c.lineTo(-10 + k * 5, -28 - (k % 2) * 4); c.lineTo(10, -24); fs(c, '#3a68c4', '#0d1430', 1.6);
+  const by = -52, br = 23;                                       // 日球：在头前，随滚动转
+  c.beginPath(); c.arc(0, by, br, 0, TAU); fs(c, '#c8302a', '#3a0c08', 2.2);
+  c.save(); c.clip(); c.fillStyle = '#f2c23a'; for (let k = 0; k < 6; k++) { const a = t * 10 + k * 1.05; c.beginPath(); c.arc(Math.cos(a) * br * 0.55, by + Math.sin(a) * br * 0.55, 3.4, 0, TAU); c.fill(); } c.restore();
+  c.restore();
+}
+// 圣甲虫在世界里的位置（ta = 互动内秒）：一直往左滚，从他脚下穿过、滚出画外
+const SC_S = 1.9, scX = ta => AX + 52 * SC_S + V_SC * (T_HIT - ta);   // 圣甲虫身体中心；球在它左边 52*SC_S，T_HIT 时球正好滚到他脚下
+function scarabWorld(c, s, seg) {
+  const ta = XJ.ta(seg, s); if (ta < -3 || ta > 6) return;
+  const x = scX(ta) - s.camX; if (x < -200 || x > W + 150) return;
+  scarab(c, x, G - 23 * SC_S - 3, SC_S, s.t);
+}
+// ---------- 主角材质：灰泥墙面斑驳 multiply（只在人身上），白保持白 ----------
+const heroMat = (g, ww, hh, i) => {
+  XJ.texInside(g, ww, hh, (tg, w2, h2) => { const S = SURF(); tg.drawImage(S, -((i * 137) % 600) - 200, -300); });
+};
+
+WORLD.add({
+  id: '02_egypt', year: -1350, name: '古埃及壁画', w, burst: 'jia_egypt', labelColor: 'rgba(42,24,16,.85)',
+  hero: { walk: K.walk, h: 300, fps: WALK.fps,   // 一个步态循环 8 帧（4 帧一步）；帧率按量出的步幅定，脚底锁见 XJ.walkLock
+    shadow: null, draw(c, key, i, o, S) { if (key === K.act) { const gw = XJ.glideWalk(S, DUR, WALK.fps, 8, 0.22, true); if (gw != null) { key = K.walk; i = gw; } } if (key === K.walk) o.lock = (S.act ? 0 : XJ.walkLock({ w }, S, i, WALK.st, WALK.fps)); XJ.actor(c, key, i, o, 'egypt', heroMat); } },
+  acts: [{ at: AT, dur: DUR, key: K.act, lead: 0, ...XJ.glide(DUR),
+    frame: XJ.actFrame([[0, 1], [0.22, 2], [0.3, 3], [0.42, 4], [1.04, 5], [1.2, 6], [1.4, 7]]),
+    y: (lx, u) => G - 140 * Math.sin(Math.PI * clamp((u - 0.22) / 0.9)) }],
+  back(c, s) {
+    c.drawImage(STATIC(), -OX - s.camX, 0);
+    if (XJ.vis(s, DISC[0], 400)) disc(c, DISC[0] - s.camX, DISC[1], s.t);
+    GEESE.forEach(([x, y, f], k) => { if (XJ.vis(s, x, 120)) goose(c, x - s.camX, y, f, s.t, k); });
+    papyrus(c, PAPY[0], PAPY[1], s.t, s.camX);
+    nile(c, s.t, s.camX);
+    scarabWorld(c, s, this);
+    c.save(); c.globalCompositeOperation = 'multiply'; c.drawImage(SURF(), -OX - s.camX, 0); c.restore();
+  },
+  front(c, s) {
+    // 跳起时脚下扬起的一点金色尘（埃及式：小三角点）
+    const ta = XJ.ta(this, s);
+    if (ta > 1.1 && ta < 1.5) { const q = (ta - 1.1) / 0.4, x = AX - s.camX; c.save(); c.globalAlpha = 1 - q; c.fillStyle = C.gold; for (let k = 0; k < 8; k++) { const a = Math.PI + (k / 7) * Math.PI, d = 30 + q * 60; c.beginPath(); c.arc(x + Math.cos(a) * d, G - 6 + Math.sin(a) * d * 0.3, 4, 0, TAU); c.fill(); } c.restore(); }
+  },
+  // 进入埃及的边界：一条竖向四色彩块边（墓室壁画的边框语言）
+  seam(c, y, sx, t) { const k = Math.floor((y + 1000) / 36), yy = (y + 1000) % 36; c.fillStyle = yy < 3 ? C.black : BAND[k % 4]; c.fillRect(sx - 10, y, 20, 6); c.fillStyle = C.black; c.fillRect(sx - 12, y, 2, 6); c.fillRect(sx + 10, y, 2, 6); },
+});
+})();

package/engine/demos/long_scroll/segments/14_8bit.js

@@ -0,0 +1,118 @@
+// 21 · 1980s 8-bit 像素游戏（通用 8-bit 语法，不指向任何一款游戏：夜晚紫色天空、像素星空和月亮、远山剪影、萤火虫、浮空木平台、星星方块、宝箱）。
+// 互动：跳起来顶星星方块，方块一跳，弹出一枚转着的像素金币，升到顶点闪一下消失，100 飘起、HUD 金币 7→8、分数 +100；他落地仰头再欢呼一跳。所有事件相对互动定时。
+// 画法沿用 skill 场景 14_8bit：整个世界在 1/8 分辨率画布上逐像素画（1 低像素 = 8 屏幕像素），imageSmoothing 关掉放大；天空交界用 (x+y)%2 棋盘抖动（NES 做渐变的唯一办法）。
+// 花叔＝AI 生的像素小人帧，代码再按 6px 网格降采样、alpha 二值化（去抗锯齿），保证是真·硬边像素。
+(() => {
+if (!window.D4) { const x = new XMLHttpRequest(); x.open('GET', 'demos/long_scroll/lib/xing2_ding.js', false); x.send(); (0, eval)(x.responseText); }
+const W = 1920, H = 1080, TAU = Math.PI * 2, { clamp, lerp, ss, ease } = U, P = PAINT;
+const SW = 2000, PX = 8, LW = SW / PX, LH = H / PX, G = 760, GR = G / PX, AT = 900, DUR = 1.6;
+const BX = Math.round(AT / PX) - 4, BY = 33;                    // 星星方块（低分辨率格）：x 在他头顶，y 33..41 → 屏幕 264..328
+const PAL = { sky0: '#140c38', sky1: '#2a1660', sky2: '#4a2a8a', sky3: '#7a46a8', white: '#fcfcfc', black: '#000000', star: '#fcf4b8', moon: '#fce8a8', moonD: '#d8b868', mtn: '#1c1448', mtnL: '#3c2c78', pine: '#0c0a24', stone: '#3c4a6c', stoneD: '#24304c', stoneL: '#6a7ca0', moss: '#3cb87c', mossL: '#8cf0a8', wood: '#a8642c', woodD: '#5c3014', woodL: '#e09c54', blk: '#2c5cd8', blkD: '#183898', blkL: '#7cacfc', gold: '#f8d040', coin: '#f8d878', coinD: '#e45c10', chest: '#b4602c', fly: '#d8fc6c' };
+const WALK = '8bit_walk', ACTK = '8bit_act';
+const REAL = ACTK === '8bit_act';
+const tab = (u, T) => { let f = T[0][1]; for (const [a, i] of T) if (u >= a) f = i; return f; };
+// 0 站 1 蹲 2 起跳举拳 3 顶 4 下落 5 落地 6 仰头 7 欢呼
+const HF = REAL ? [[0, 0], [0.08, 1], [0.2, 2], [0.32, 3], [0.46, 4], [0.6, 5], [0.72, 6], [1.1, 7]] : [[0, 0], [0.08, 2], [0.2, 4], [0.32, 5], [0.46, 7], [0.6, 9], [0.72, 0], [1.1, 6]];
+const J0 = 0.2, J1 = 0.6, T_HIT = (J0 + J1) / 2, T_TOP = T_HIT + 0.5, T_SCORE = T_TOP + 0.08;   // 跳 0.2→0.6，最高点顶砖；金币升 0.5s 到顶闪没
+
+// ---------- 字符位图 ----------
+const BMP = {
+  star: ['...#....', '...#....', '.#####..', '..###...', '..#.#...', '.#...#..', '........', '........'],
+  moon: ['...####...', '.##....##.', '#.......##', '#........#', '#.....#..#', '#........#', '#.#......#', '.##....##.', '...####...'],
+  chest: ['.########.', '#oooooooo#', '#oooooooo#', '##########', '#ooooYYooo', '#oooYYYYoo', '#oooooooo#', '##########'],
+  cloud: ['....######......', '..##......##.....', '.#..........###..', '#...............#', '.################'],
+};
+const bmp = (g, rows, x, y, col) => { g.fillStyle = col; rows.forEach((r, j) => { for (let i = 0; i < r.length; i++) if (r[i] === '#') g.fillRect(x + i, y + j, 1, 1); }); };
+const dither = (g, x0, x1, y0, y1, a, b) => { for (let y = y0; y < y1; y++) for (let x = x0; x < x1; x++) { g.fillStyle = (x + y) % 2 ? a : b; g.fillRect(x, y, 1, 1); } };
+
+// ---------- 静态世界（低分辨率，缓存） ----------
+let LO = null;
+function build() {
+  if (LO) return LO;
+  const cv = P.canvas(LW, LH), g = cv.getContext('2d'), r = U.rng(85);
+  // 夜空：四档紫，交界棋盘抖动（NES 渐变）
+  [[0, PAL.sky0], [22, PAL.sky1], [44, PAL.sky2], [60, PAL.sky3]].forEach(([y, col], k, A) => { g.fillStyle = col; g.fillRect(0, y, LW, (A[k + 1] ? A[k + 1][0] : GR) - y); if (k) dither(g, 0, LW, y - 2, y, A[k - 1][1], col); });
+  // 静态小星（单像素），大月亮（带坑）
+  for (let k = 0; k < 160; k++) { const x = (r() * LW) | 0, y = (r() * 52) | 0; g.fillStyle = r() < 0.7 ? '#b8a8e8' : PAL.star; g.fillRect(x, y, 1, 1); }
+  { const mx = 176, my = 8; for (let y = 0; y < 14; y++) for (let x = 0; x < 14; x++) { const d = Math.hypot(x - 6.5, y - 6.5); if (d < 7) { g.fillStyle = d > 6 ? PAL.moonD : PAL.moon; g.fillRect(mx + x, my + y, 1, 1); } } g.fillStyle = PAL.moonD; [[4, 4, 2], [9, 8, 2], [5, 10, 1]].forEach(([x, y, w]) => g.fillRect(mx + x, my + y, w, w)); }
+  // 远山剪影（锯齿＋亮边），地平线 68 → 屏幕 544
+  for (let x = 0; x < LW; x++) { const top = Math.round(60 - 10 * Math.abs(Math.sin(x * 0.045)) - 6 * Math.abs(Math.sin(x * 0.13 + 1))); g.fillStyle = PAL.mtn; g.fillRect(x, top, 1, 68 - top); g.fillStyle = PAL.mtnL; g.fillRect(x, top, 1, 1); }
+  // 中景：松树剪影带
+  g.fillStyle = PAL.pine; g.fillRect(0, 68, LW, GR - 68);
+  for (let x = 2; x < LW; x += 5 + ((r() * 4) | 0)) { const h = 10 + ((r() * 10) | 0); for (let j = 0; j < h; j++) { const w = Math.max(0, Math.floor((j / h) * 4)); g.fillRect(x - w, 70 - h + j, 2 * w + 1, 1); } }
+  // 地面：苔藓石阶（顶一行亮苔，下面石块错缝）
+  for (let y = GR; y < LH; y += 6) for (let x = (y / 6) % 2 ? 0 : -5; x < LW; x += 10) { g.fillStyle = PAL.stone; g.fillRect(x, y, 10, 6); g.fillStyle = PAL.stoneL; g.fillRect(x, y, 10, 1); g.fillStyle = PAL.stoneD; g.fillRect(x + 9, y, 1, 6); g.fillRect(x, y + 5, 10, 1); }
+  for (let x = 0; x < LW; x++) { g.fillStyle = PAL.moss; g.fillRect(x, GR, 1, 2); if ((x * 7) % 5 === 0) { g.fillStyle = PAL.mossL; g.fillRect(x, GR - 1, 1, 1); } }
+  // 浮空木平台（两端木桩）：星星方块两侧、远处两块；一块上放宝箱
+  const plank = (x, y, n) => { for (let k = 0; k < n; k++) { g.fillStyle = PAL.wood; g.fillRect(x + k * 6, y, 6, 4); g.fillStyle = PAL.woodL; g.fillRect(x + k * 6, y, 6, 1); g.fillStyle = PAL.woodD; g.fillRect(x + k * 6 + 5, y, 1, 4); g.fillRect(x + k * 6, y + 3, 6, 1); } g.fillStyle = PAL.black; g.fillRect(x - 1, y, 1, 4); g.fillRect(x + n * 6, y, 1, 4); };
+  plank(BX - 20, BY + 2, 3); plank(BX + 9, BY + 2, 3); plank(20, 48, 4); plank(170, 46, 5);
+  const C2 = { '#': PAL.black, o: PAL.chest, Y: PAL.gold }; BMP.chest.forEach((row, j) => [...row].forEach((ch, i) => { if (C2[ch]) { g.fillStyle = C2[ch]; g.fillRect(182 + i, 38 + j, 1, 1); } }));
+  return (LO = cv);
+}
+
+// ---------- 低分辨率坐标 → 屏幕：全部对齐同一张 8px 网格（随相机整体平移） ----------
+const sx = (lx, camX) => lx * PX - camX;
+function qblock(c, camX, t, bump, used) {   // 星星方块：蓝块＋黄星，星星呼吸闪；被顶过后变灰
+  const x = sx(BX, camX), y = BY * PX - bump * PX;
+  c.fillStyle = PAL.black; c.fillRect(x, y, 8 * PX, 8 * PX);
+  c.fillStyle = used ? '#5c5c74' : PAL.blk; c.fillRect(x, y, 7 * PX, 7 * PX);
+  c.fillStyle = used ? '#8c8ca4' : PAL.blkL; c.fillRect(x, y, 7 * PX, PX); c.fillRect(x, y, PX, 7 * PX);
+  c.fillStyle = used ? '#3c3c50' : PAL.blkD; c.fillRect(x + 6 * PX, y + PX, PX, 6 * PX); c.fillRect(x + PX, y + 6 * PX, 6 * PX, PX);
+  if (!used) { c.save(); c.translate(x, y + PX); c.scale(PX, PX); bmp(c, BMP.star, 0, 0, Math.floor(t * 6) % 3 ? PAL.gold : '#fcfcd0'); c.restore(); }
+}
+function coin(c, x, y, t, s = 1) { // 像素金币：宽度 8/6/2/6 循环 = 翻转
+  const ph = Math.floor(t * 8) % 4, w = [8, 6, 3, 6][ph], h = 12, u = 4 * s;   // 8fps 翻转，最窄也留 3 格（审片：细条一闪看不出是金币） c.fillStyle = PAL.black; c.fillRect(x - w * u / 2 - u, y - h * u - u, w * u + 2 * u, h * u + 2 * u);
+  c.fillStyle = PAL.coinD; c.fillRect(x - w * u / 2, y - h * u, w * u, h * u);
+  if (w > 3) { c.fillStyle = PAL.coin; c.fillRect(x - w * u / 2 + u, y - h * u + u, Math.max(u, w * u - 3 * u), h * u - 3 * u); c.fillStyle = '#fcfcfc'; c.fillRect(x - w * u / 2 + u, y - h * u + 2 * u, u, 4 * u); }
+}
+function hud(c, coins, score) {
+  c.save(); c.font = '36px "PressStart2P-400"'; c.textBaseline = 'top'; c.fillStyle = '#000'; const T = (s, x, y) => { c.fillStyle = '#000'; c.fillText(s, x + 6, y + 6); c.fillStyle = '#fcfcfc'; c.fillText(s, x, y); };
+  T('HUASHU', 60, 40); T(String(score).padStart(6, '0'), 60, 88); T('×' + String(coins).padStart(2, '0'), 470, 88); coin(c, 444, 128, 0, 0.75);
+  c.restore();
+}
+
+// ---------- 花叔像素化：6px 网格降采样＋alpha 二值化 ----------
+const pix = (key, i) => D4.frameCanvas(key, i, 'px6', im => {
+  const s = 300 / XING.SPR[key].meta.ref_h, k = s / 6, w = Math.max(1, Math.round(im.width * k)), h = Math.max(1, Math.round(im.height * k));
+  const cv = P.canvas(w, h), g = cv.getContext('2d', { willReadFrequently: true }); g.imageSmoothingEnabled = false; g.drawImage(im, 0, 0, w, h);   // 最近邻：像素画源图的色块不被平均成泥
+  const d = g.getImageData(0, 0, w, h), q = d.data; for (let j = 0; j < q.length; j += 4) { if (q[j + 3] < 120) q[j + 3] = 0; else { q[j + 3] = 255; for (let m = 0; m < 3; m++) q[j + m] = Math.round(q[j + m] / 36) * 36; } } g.putImageData(d, 0, 0);
+  cv.k = w / im.width; cv.pixel = true; cv.pad = 0; return cv;
+});
+const apexTop = () => { const f = XING.SPR[ACTK].meta.frames[HF[3][1]], s = 300 / XING.SPR[ACTK].meta.ref_h; return f.ay * s; };   // 顶砖那帧：脚底到拳头顶的高度
+
+WORLD.add({
+  id: '14_8bit', year: '1980s', name: '8-bit 像素游戏', w: SW, burst: 'vg', labelColor: 'rgba(252,252,252,.95)',
+  hero: { walk: WALK, h: 300, shadow: null, draw(c, key, i, o, S) { D4.drawFrame(c, key, i, o, pix(key, i)); } },
+  acts: [{ at: AT, dur: DUR, key: ACTK, lead: 140, frame: u => Math.min(tab(u, HF), XING.nFrames(ACTK) - 1),
+    // 跳：J0→J1 抛物线，最高点拳头正好顶到砖底；欢呼时再小跳一下
+    y: (lx, u) => { const q = clamp((u - J0) / (J1 - J0)); const lift = Math.max(0, (G - (BY + 8) * PX) - apexTop()); return G - Math.sin(q * Math.PI) * lift - (u > 1.1 && u < 1.4 ? Math.sin((u - 1.1) / 0.3 * Math.PI) * 40 : 0); } }],
+  back(c, s) {
+    const lo = build(); c.save(); c.imageSmoothingEnabled = false;
+    const ox = Math.floor(s.camX / PX), fx = s.camX - ox * PX;
+    c.drawImage(lo, ox, 0, LW - ox, LH, -fx, 0, (LW - ox) * PX, H); c.restore();
+    c.imageSmoothingEnabled = false;
+    // 闪烁星：一部分星 6fps 亮灭（整像素）
+    for (let k = 0; k < 40; k++) { const lx = U.hash(k, 11) * LW, ly = U.hash(k, 12) * 50; if (U.hash(k, Math.floor(s.t * 6)) < 0.5) continue; const X = sx(lx | 0, s.camX * 0.3 / 1) , Y = (ly | 0) * PX; c.fillStyle = PAL.star; c.fillRect(Math.round(X / PX) * PX, Y, PX, PX); c.fillRect(Math.round(X / PX) * PX - PX, Y + 0, PX * 3, PX * 0 + 2); }
+    // 夜云：深紫像素云整格左移
+    for (let k = 0; k < 5; k++) { const lx = ((k * 61 + 300 - Math.floor(s.t * 3)) % 320 + 320) % 320 - 20, ly = 14 + (k * 9) % 26; c.save(); c.translate(Math.round(sx(lx, s.camX * 0.6) / PX) * PX, ly * PX); c.scale(PX, PX); c.fillStyle = '#3a2470'; c.fillRect(1, 1, 15, 3); c.fillRect(4, 0, 7, 1); bmp(c, BMP.cloud, 0, 0, '#5a3c98'); c.restore(); }
+    // 流星：每 2.4 秒一颗，斜着划过（拖 5 格尾巴）
+    { const ph = (s.t % 2.4) / 0.5; if (ph < 1) { const hx = 40 + ((Math.floor(s.t / 2.4) * 67) % 160), lx = hx + ph * 30, ly = 6 + ph * 12; for (let k = 0; k < 6; k++) { c.fillStyle = k ? `rgba(252,244,184,${1 - k / 6})` : '#fff'; c.fillRect(Math.round(sx(lx - k * 2, s.camX * 0.3)), Math.round((ly - k * 0.8)) * PX, PX, PX); } } }
+    // 萤火虫：12 只在草丛上方慢飘、按自己的节奏亮灭
+    for (let k = 0; k < 12; k++) { const lx = U.hash(k, 21) * LW + Math.sin(s.t * 0.8 + k) * 4, ly = GR - 4 - U.hash(k, 22) * 14 + Math.sin(s.t * 1.3 + k * 2) * 2, on = Math.sin(s.t * 3 + k * 1.7) > 0.2; if (!on) continue; c.fillStyle = PAL.fly; c.fillRect(Math.round(sx(lx, s.camX) / PX) * PX, Math.round(ly) * PX, PX, PX); c.fillStyle = 'rgba(216,252,108,.3)'; c.fillRect(Math.round(sx(lx, s.camX) / PX) * PX - PX, Math.round(ly) * PX - PX, 3 * PX, 3 * PX); }
+    // 宝箱盖子一开一合，冒一颗金光
+    { const op = Math.floor(s.t * 1.5) % 2, X = sx(182, s.camX), Y = 38 * PX; if (op) { c.fillStyle = PAL.gold; c.fillRect(X + 3 * PX, Y - 2 * PX, 4 * PX, PX); c.fillStyle = '#fff'; c.fillRect(X + 4 * PX, Y - 4 * PX, PX, PX); } }
+    // 星星方块：被顶时上跳 2 格再落回，之后变成用过的灰块
+    const u = D4.since(this, s), bump = u > T_HIT && u < T_HIT + 0.16 ? Math.round(Math.sin((u - T_HIT) / 0.16 * Math.PI) * 2) : 0;
+    qblock(c, s.camX, s.t, bump, u > T_HIT);
+    // 金币：从砖顶弹出、转着上升（减速）→ 顶点闪一下消失（像素十字星）
+    const cx = sx(BX + 4, s.camX), cy0 = BY * PX;
+    if (u > T_HIT && u < T_TOP) { const q = (u - T_HIT) / (T_TOP - T_HIT); coin(c, cx, Math.round((cy0 - ease.out(q) * 130) / 4) * 4, s.t, 1.5); }
+    if (u >= T_TOP && u < T_TOP + 0.24) { const q = (u - T_TOP) / 0.24, r = Math.round((8 + q * 40) / 4) * 4; c.fillStyle = q < 0.5 ? '#fcfcfc' : PAL.coin; [[0, -1], [0, 1], [-1, 0], [1, 0]].forEach(([dx, dy]) => c.fillRect(cx + dx * r - 4, cy0 - 150 + dy * r - 4, 8, 8)); c.fillRect(cx - 4, cy0 - 150 - 4, 8, 8); }
+    if (u > T_SCORE && u < T_SCORE + 0.7) { c.save(); c.font = '30px "PressStart2P-400"'; c.fillStyle = '#fcfcfc'; c.globalAlpha = 1 - clamp((u - T_SCORE - 0.45) / 0.25); c.fillText('100', cx + 50, cy0 - 70 - (u - T_SCORE) * 60); c.restore(); }
+    hud(c, u >= T_SCORE ? 8 : 7, u >= T_SCORE ? 2100 : 2000);
+    c.imageSmoothingEnabled = true;
+  },
+  // 边界：一列一列的像素方块（黑白相间的格子边）
+  seam(c, y, sxp, t) { const q = Math.round(sxp / PX) * PX, row = Math.floor(y / PX); c.fillStyle = row % 2 ? '#000' : '#fcfcfc'; c.fillRect(q - PX, y, PX, 6); c.fillStyle = row % 2 ? '#fcfcfc' : '#000'; c.fillRect(q, y, PX, 6); },
+});
+})();

package/engine/demos/long_scroll/segments/28_monet.js

@@ -0,0 +1,86 @@
+// 1899 莫奈《睡莲池上的日本桥》。世界＝吉维尼花园横向展开：柳荫、绿色拱桥、桥顶垂下的紫藤、满池睡莲、水面光斑、蜻蜓。
+// 互动（示范动作）：桥顶打水漂，灰白扁石跳 4 下，间隔一次比一次长、弧一次比一次高，涟漪逐个扩散；第 4 下的水花里浮上一朵和池里一样的睡莲，他欢呼。
+// 画法：XING.monetWorld（底稿→区域色板短笔触、桥与近栏杆单独一层、睡莲每片预画）；人物用 XING 的 monet 材质（短笔触＋光斑按世界坐标滑过）。
+if (!window.YI) { const x = new XMLHttpRequest(); x.open('GET', 'demos/long_scroll/lib/xing2_yi.js', false); x.send(); (0, eval)(x.responseText + '\n//# sourceURL=demos/long_scroll/lib/xing2_yi.js'); }
+(() => {
+const W = 1920, H = 1080, TAU = Math.PI * 2, { clamp, lerp, ss } = U, P = PAINT, G = WORLD.GROUND;
+const SW = 2150, AT = 760;
+const MO = { key: 'yi_m', x0: 0, w: SW, waterTop: 560, bridge: { x0: 320, x1: 1200, yEnd: G, lift: 165 }, pond: [300, 1240], groundY: G };
+const M = () => XING.monetWorld(MO);
+// 事件按「互动开始后的秒数」r 定时（r = S.t - WORLD.actT(ME)）。示范节奏：4 跳拉开到 1.36 秒、间隔递增（0.22/0.30/0.38/0.46），弧一次比一次高
+let ME = null; const TA = 0;
+const THROW = [[0, 0], [0.18, 1], [0.36, 2], [0.44, 3], [0.5, 4], [0.66, 5]], REL = 0.5;
+const throwFrame = u => { let f = 0; for (const [tt, i] of THROW) if (u >= tt) f = i; return f; };
+// 石子：出手后跳 4 下（世界坐标、动作内秒），越跳越近越大；第 4 下溅起睡莲
+const HOPS = [{ x: AT + 170, y: 790, t: REL + 0.22, s: 0.5 }, { x: AT + 290, y: 850, t: REL + 0.52, s: 0.62, peak: 110 }, { x: AT + 390, y: 915, t: REL + 0.9, s: 0.74, peak: 150 }, { x: AT + 460, y: 985, t: REL + 1.36, s: 0.86, peak: 190 }];
+const HIT = HOPS[3].t, DUR = HIT + 0.2;
+const frameAt = u => u < 0.66 ? throwFrame(u) : u < HIT ? 5 : 6;
+const plan = () => { const from = ACT.stoneFrom(AT, M().deckY(AT), 300); return { t0: TA + REL, from, s0: 0.4, firstArc: 90, hops: HOPS.map(h => ({ ...h, t: TA + h.t })) }; };
+// 石子：莫奈笔触的灰白扁石（淡紫阴影＋奶白高光的短笔），转着飞；拖尾是几笔奶白水沫
+function stone(c, st, trail) { if (!st) return; const sc = 1 + st.s * 1.3, flat = Math.abs(Math.cos(st.spin)) * 0.5 + 0.28;
+  c.save(); c.lineCap = 'round';
+  if (trail) for (let k = 1; k <= 5; k++) { const p = trail(k * 0.02); if (!p) break; c.strokeStyle = '#fffbea'; c.globalAlpha = 0.45 * (1 - k / 6); c.lineWidth = 6 * sc * (1 - k / 7); c.beginPath(); c.moveTo(p.x, p.y); c.lineTo(p.x + 3, p.y); c.stroke(); }
+  c.globalAlpha = 1; c.translate(st.x, st.y);
+  c.fillStyle = 'rgba(70,72,120,.28)'; c.beginPath(); c.ellipse(2, 5, 13 * sc, 4 * sc, 0, 0, TAU); c.fill();
+  [['#8a88a0', 0, 2, 13, 0.0], ['#b8b4c4', -2, 0, 11, -0.2], ['#d8d4e0', 1, -1.5, 8, 0.15], ['#efeaf2', -3, -2.5, 5, -0.1], ['#fffbea', -4, -3.4, 3, 0]].forEach(([col, dx, dy, L, a]) => {
+    c.strokeStyle = col; c.lineWidth = 7 * sc * flat; c.beginPath(); c.moveTo((dx - L / 2) * sc, (dy + a * 10) * sc * flat); c.lineTo((dx + L / 2) * sc, (dy - a * 10) * sc * flat); c.stroke(); });
+  c.restore(); }
+// 冒出的睡莲：和池里每片同一个画法、同一个尺寸（monetWorld 的叶托＋花→同参数短笔触重画），缓存
+let BLOOM = null;
+function bloomImg() { if (BLOOM) return BLOOM; const s = 0.22 + 0.78 * clamp((985 - 560) / (H - 560)), rx = 36 * s * 1.7, ry = rx * (0.24 + 0.1 * s), pw = Math.ceil(rx * 2 + 16), ph = Math.ceil(ry * 2 + 34 * s + 16);
+  const cc = P.canvas(pw, ph), q = cc.getContext('2d'), cx = pw / 2, cy = ph - ry - 8, notch = 1.2;
+  q.fillStyle = '#7aa85a'; q.beginPath(); q.ellipse(cx, cy, rx, ry, 0, notch + 0.35, notch + TAU - 0.35); q.lineTo(cx, cy); q.closePath(); q.fill();
+  q.fillStyle = 'rgba(40,70,60,0.35)'; q.beginPath(); q.ellipse(cx, cy + ry * 0.25, rx * 0.95, ry * 0.7, 0, 0, Math.PI); q.fill();
+  const fr = 11 * s * 1.6 + 3; q.fillStyle = '#f2a6bf'; q.beginPath(); q.ellipse(cx + rx * 0.15, cy - fr * 0.5, fr * 1.4, fr * 0.8, 0, 0, TAU); q.fill(); q.fillStyle = '#fff0f2'; q.beginPath(); q.ellipse(cx + rx * 0.15, cy - fr * 0.8, fr * 0.6, fr * 0.45, 0, 0, TAU); q.fill();
+  const out = P.canvas(pw, ph), og = out.getContext('2d'); og.drawImage(cc, 0, 0); og.globalCompositeOperation = 'source-atop';
+  XING.strokes(og, cc, { cell: Math.max(3, 5 * s + 1), len: 10 * s + 5, width: 3 * s + 1.6, seed: 4242, alphaMask: true, alphaMin: 100, angle: (x, y, rr) => (rr() - 0.5) * 0.4,
+    palette: (x, y, col, rr) => { const L = col[0] * 0.3 + col[1] * 0.59 + col[2] * 0.11; return col[1] > col[0] + 10 ? P.mix(P.hex(['#5f8f4a', '#7fae5a', '#9cc070', '#b4cc78', '#4a7a5a', '#c8d880'][(rr() * 6) | 0]), col, 0.3) : (L > 170 ? P.mix(P.hex(['#fff2f4', '#f7d0dc', '#fbf4e8', '#f0a0b8'][(rr() * 4) | 0]), col, 0.4) : null); } });
+  out.ax = cx; out.ay = cy; return BLOOM = out; }
+
+// 紫藤：从桥顶上方的架子垂下的淡紫花串（点列，由大到小，随风摆）
+function wisteria(c, camX, t) {
+  const B = MO.bridge, deck = M().deckY; c.save();
+  // 紫藤架：桥上方一道拱形绿架，缀着叶子
+  c.lineCap = 'round'; c.strokeStyle = '#4f9a72'; c.lineWidth = 8; c.beginPath(); for (let wx = B.x0 + 40; wx <= B.x1 - 40; wx += 10) { const y = deck(wx) - 235; wx === B.x0 + 40 ? c.moveTo(wx - camX, y) : c.lineTo(wx - camX, y); } c.stroke();
+  [B.x0 + 40, B.x1 - 40].forEach(wx => { c.beginPath(); c.moveTo(wx - camX, deck(wx) - 235); c.lineTo(wx - camX, deck(wx) - 10); c.stroke(); });
+  for (let k = 0; k < 40; k++) { const wx = B.x0 + 50 + k * (B.x1 - B.x0 - 100) / 39, x = wx - camX + Math.sin(t * 1.8 + k) * 2; if (x < -40 || x > W + 40) continue; c.fillStyle = ['#6f9a40', '#9cbf58', '#4f7f3a'][k % 3]; c.beginPath(); c.ellipse(x, deck(wx) - 238 + (k % 3) * 5, 16, 7, (k % 5) * 0.6, 0, TAU); c.fill(); }
+  for (let k = 0; k < 18; k++) { const wx = B.x0 + 70 + k * ((B.x1 - B.x0 - 140) / 17), x = wx - camX; if (x < -60 || x > W + 60) continue;
+    const top = deck(wx) - 230, L = 7 + (k * 7) % 6, sw = Math.sin(t * 2.4 + 0.9 * k) * 8;
+    for (let i = 0; i < L; i++) { const q = i / L, r = 9 * (1 - q * 0.7); c.fillStyle = ['#b8a0d8', '#d0bce8', '#9a84c8', '#e4d4f0'][(i + k) % 4]; c.globalAlpha = 0.92; c.beginPath(); c.ellipse(x + sw * q * q + Math.sin(i * 2.1 + k) * 4, top + i * 11, r, r * 0.8, 0, 0, TAU); c.fill(); } }
+  c.restore();
+}
+// 蜻蜓：在水面上方折线飞，翅膀闪
+function dragonflies(c, camX, t) {
+  c.save(); for (let k = 0; k < 3; k++) { const ph = k * 2.3, x = 700 + k * 380 + Math.sin(t * 0.9 + ph) * 160 + Math.sin(t * 3.1 + ph) * 30 - camX, y = 640 + k * 70 + Math.sin(t * 1.7 + ph) * 40;
+    c.strokeStyle = '#3a6a8a'; c.lineWidth = 4; c.lineCap = 'round'; c.beginPath(); c.moveTo(x - 18, y); c.lineTo(x + 14, y); c.stroke();
+    const f = 0.5 + 0.5 * Math.sin(t * 40 + k); c.fillStyle = 'rgba(230,240,255,.75)'; [[-1, -1], [1, -1]].forEach(([a]) => { c.beginPath(); c.ellipse(x + 2 + a * 4, y - 6 * f, 12, 3.5, a * 0.4, 0, TAU); c.fill(); }); }
+  c.restore();
+}
+
+WORLD.add(ME = { id: '28_monet', year: 1899, name: '莫奈《睡莲池上的日本桥》', w: SW, burst: 'monet', labelColor: 'rgba(16,22,40,.92)',
+  hero: { walk: 'monet_walk', mat: 'monet', shadow: 'rgba(60,70,120,.18)', draw(c, key, i, o) { YI.whitenHat(key); XING.actor(c, key, i, o); } },
+  ground: lx => M().deckY(lx),
+  acts: [{ at: AT, dur: DUR, key: 'monet_throw', frame: frameAt, lead: 0 }],
+  back(c, S) {
+    const lt = S.t - WORLD.actT(ME), pl = plan();
+    YI.edge(c, M().bg, S.camX, SW);
+    XING.monetBack(c, M(), S.camX, lt, { hops: pl.hops.map((p, i) => ({ x: p.x, y: p.y, t: p.t, s: p.s, big: i === 3 })) });
+    dragonflies(c, S.camX, lt);
+    wisteria(c, S.camX, lt);
+    // 第 4 下：水花里冒出一朵睡莲——叶托先浮上来，花一瓣瓣弹开，落定后随涟漪轻轻摇
+    if (lt >= HIT + 0.06) { const a = lt - HIT - 0.06, x = HOPS[3].x - S.camX, y = HOPS[3].y, im = bloomImg(), rise = U.ease.out(clamp(a / 0.45)), bob = Math.sin(a * 9) * 3 * Math.exp(-a * 2);
+      if (x > -200 && x < W + 200) { c.save(); c.globalAlpha = clamp(a / 0.15); c.translate(x, y + (1 - rise) * 14 + bob); c.scale(1, 0.3 + 0.7 * rise); c.drawImage(im, -im.ax, -im.ay); c.restore(); } }
+  },
+  front(c, S) {
+    const lt = S.t - WORLD.actT(ME), u = S.act ? S.act.u : -1;
+    XING.monetFront(c, M(), S.camX, lt, [200, 1600, 2000]);
+    { const pl = plan(), sh = p => p ? { ...p, x: p.x - S.camX } : null; stone(c, sh(XING.stone(lt, pl)), dt => sh(XING.stone(lt - dt, pl))); }
+  },
+  // 进入本段的边界：印象派短笔触（粉、蓝、绿、奶白），微微颤
+  seam(c, y, sx, t) {
+    const k = Math.floor(y / 6), cols = ['#f2a6bf', '#9db5e0', '#9cc070', '#fff2d4', '#b7a6d8', '#8fdcae'];
+    c.save(); c.lineCap = 'round'; c.strokeStyle = cols[k % 6]; c.lineWidth = 7; const a = -0.5 + U.hash(k, 3) * 0.6, L = 12 + U.hash(k, 4) * 10, x = sx + (U.hash(k, 6) - 0.5) * 10 + Math.sin(t * 4 + k) * 1.5;
+    c.beginPath(); c.moveTo(x - Math.cos(a) * L / 2, y + 3 - Math.sin(a) * L / 2); c.lineTo(x + Math.cos(a) * L / 2, y + 3 + Math.sin(a) * L / 2); c.stroke(); c.restore();
+  },
+});
+})();

package/engine/demos/t1_3b1b/eras.js

@@ -0,0 +1,11 @@
+// 示范 · 3b1b / manim 式讲解「神经网络一层是怎么把像素变成『猫』的」（8 秒三镜）。语法卡：references/动画语法/t1_3b1b.md
+//   预览 index.html?film=demos/t1_3b1b   渲染 render.py --film demos/t1_3b1b --out t1.mp4
+// 镜头 1→2 无转场：首帧 = 上一镜末帧，Transform 接续（100 个像素变成一列神经元）。镜头 2→3 穿进一个隐藏层神经元看它在找什么。
+window.PUNCH = 0;
+window.SCENE_DIR = 'demos/t1_3b1b';
+window.ERAS = [
+  { id: 't1_s1', dur: 2.6 },
+  { id: 't1_s2', dur: 2.8 },
+  // cx,cy = 目标神经元在镜头 2 末帧的屏幕位置（r = 22×1.1）；live：镜头 2 自己在转场里继续推相机（矢量重画）
+  { id: 't1_s3', dur: 2.6, transition: { type: 'zoomThrough', dur: 0.75, cx: 850, cy: 391.5, zoom: 48, r0: 24.2, live: true, focus: [640, 585] } },
+];

package/engine/demos/t1_3b1b/t1_s1.js

@@ -0,0 +1,101 @@
+// t1 · 3b1b 式：「神经网络一层是怎么把像素变成『猫』的」
+// 镜头 1（2.6s）：一张 10×10 的猫图逐格出现 → 每格写上亮度 → 100 个像素 Transform 成一列输入神经元（16 个可见＋⋮）
+// 本文件同时放 t1 三个镜头共用的数据与布局（window.T1），后面的镜头直接用。
+(() => {
+const { clamp, lerp, hash } = U;
+const C = DG.MANIM;
+
+// ---------- 共用数据 ----------
+const CAT = [
+  '0000000000',
+  '0600000060',
+  '0870000780',
+  '0899999980',
+  '0929999290',
+  '0999999990',
+  '0999449990',
+  '0099999900',
+  '0007887000',
+  '0000000000'];
+const PIX = []; for (let r = 0; r < 10; r++) for (let q = 0; q < 10; q++) { const d = +CAT[r][q]; PIX.push(d ? clamp(d / 10 + (hash(r, q) - 0.5) * 0.08, 0, 1) : 0); }
+// 「猫」神经元的权重：猫形处为正（蓝），猫形外一圈为负（红），眼睛处为负（猫的眼睛是暗的）
+const WTS = PIX.map((v, i) => {
+  const r = (i / 10) | 0, q = i % 10;
+  if (+CAT[r][q] === 2) return -0.55;
+  if (v > 0.5) return 0.55 + 0.4 * hash(q, r + 7);
+  let near = false; for (let dr = -1; dr <= 1; dr++) for (let dq = -1; dq <= 1; dq++) { const rr = r + dr, qq = q + dq; if (rr >= 0 && rr < 10 && qq >= 0 && qq < 10 && PIX[rr * 10 + qq] > 0.5) near = true; }
+  return near ? -0.6 - 0.3 * hash(r, q + 3) : -0.12 * hash(q, r);
+});
+
+// ---------- 布局（屏幕 px；1 manim 单位 = 135px） ----------
+const GRID = { cx: 960, cy: 545, cell: 52 };
+const cellXY = i => [GRID.cx + ((i % 10) - 4.5) * GRID.cell, GRID.cy + (((i / 10) | 0) - 4.5) * GRID.cell];
+const IN_X = 330, IN_R = 17;
+const VIS = Array.from({ length: 16 }, (_, k) => Math.round(k * 99 / 15));           // 可见的 16 个输入
+const inY = j => 540 + (j - 7.5) * 44 + (j >= 8 ? 30 : -30);
+const HID_X = 900, HID_R = 22, HID_N = 10, hidY = j => 540 + (j - 4.5) * 70;
+const OUT_X = 1470, OUT_R = 32, OUT = [{ y: 400, name: '猫', a: 0.92 }, { y: 540, name: '狗', a: 0.07 }, { y: 680, name: '鸟', a: 0.03 }];
+const HID_A = [0.82, 0.12, 0.95, 0.3, 0.64, 0.06, 0.71, 0.22, 0.88, 0.41];
+const W1 = (j, k) => Math.sin(j * 12.9898 + k * 78.233) * 0.5 + (hash(j, k + 11) - 0.5) * 1.1;   // 输入→隐藏
+const W2 = (k, o) => [[0.9, -0.5, 0.95, -0.2, 0.7, -0.8, 0.85, -0.3, 0.8, 0.1], [-0.6, 0.4, -0.7, 0.5, -0.2, 0.6, -0.5, 0.3, -0.4, 0.2], [-0.3, 0.2, -0.5, 0.6, -0.6, 0.4, -0.2, 0.7, -0.5, 0.3]][o][k];
+
+// 输入列（S1 结束、S2 全程都要画）
+const drawInputs = (c, a = 1) => {
+  VIS.forEach((pi, j) => DG.neuron(c, IN_X, inY(j), IN_R, PIX[pi] * a, { sa: a }));
+  c.save(); c.fillStyle = `rgba(255,255,255,${a})`; for (let d = -1; d <= 1; d++) { c.beginPath(); c.arc(IN_X, 540 + d * 16, 4, 0, Math.PI * 2); c.fill(); } c.restore();
+};
+const drawBrace = (c, p) => {
+  DG.brace(c, IN_X - 34, inY(0) - IN_R, inY(15) + IN_R, { p: MO.smooth(p), lw: 3 });
+  c.save(); c.translate(IN_X - 92, 540); c.rotate(-Math.PI / 2);
+  DG.write(c, '100 个输入', 0, 0, 40, p, { align: 'center' }); c.restore();
+};
+window.T1 = { PIX, WTS, CAT, GRID, cellXY, IN_X, IN_R, VIS, inY, HID_X, HID_R, HID_N, hidY, OUT_X, OUT_R, OUT, HID_A, W1, W2, drawInputs, drawBrace };
+
+// ---------- 镜头 1 ----------
+const DUR = 2.6;
+SCENES['t1_s1'] = {
+  draw(c, lt) {
+    c.fillStyle = '#000'; c.fillRect(0, 0, 1920, 1080);
+    // 相机：前 1.4s 绕网格极慢推近 1→1.025，Transform 开始时 smooth 拉回 1（镜头 2 首帧要逐像素对上）
+    const z = 1 + 0.025 * MO.smooth(MO.seg(lt, 0, 1.4)) * (1 - MO.smooth(MO.seg(lt, 1.4, 2.2)));
+    c.save(); c.translate(960, 545); c.scale(z, z); c.translate(-960, -545);
+    // 标题：Write（linear，<15 个字 1 秒）
+    const out = MO.smooth(MO.seg(lt, 1.4, 1.9));                  // FadeOut(shift=UP)
+    c.save(); c.globalAlpha = 1 - out; c.translate(0, -40 * out);
+    DG.write(c, '一张 10×10 的「猫」', 960, 150, 58, MO.seg(lt, 0.1, 1.1));
+    c.restore();
+
+    const morph = MO.seg(lt, 1.45, 2.55);                          // 100 个子 Transform，LaggedStart 0.01
+    const appear = MO.seg(lt, 0.0, 0.9);
+    const order = i => ((i % 10) + ((i / 10) | 0));                // 按对角线出现，像扫描
+    for (let i = 0; i < 100; i++) {
+      const [x, y] = cellXY(i), v = PIX[i];
+      const qa = MO.smooth(clamp(appear * 1.6 - order(i) / 18 * 0.6));
+      if (qa <= 0) continue;
+      const qm = MO.smooth(MO.lagged(i, 100, morph, 0.01));
+      const j = VIS.indexOf(i), vis = j >= 0;
+      // 不可见的像素：飞向中间的 ⋮ 并缩成点
+      const tx = IN_X, ty = vis ? inY(j) : 540 + (((i * 7) % 3) - 1) * 16, tr = vis ? IN_R : 3;
+      const s = GRID.cell * (0.92 + 0.08 * qa);
+      const A = DG.rectPts(x, y, s, s, 48), B = DG.circlePts(tx, ty, tr, 48);
+      const pts = qm > 0 ? DG.morph(A, B, qm) : A;
+      const fadeHidden = vis ? 1 : 1 - clamp((qm - 0.6) / 0.4);
+      if (qm >= 1) { if (vis) DG.neuron(c, tx, ty, IN_R, v); continue; }   // 落定后用真圆画：镜头 2 首帧逐像素接得上（48 边形与 arc 抗锯齿不同）
+      c.save(); c.globalAlpha = qa * fadeHidden;
+      DG.shape(c, pts, { fill: `rgba(255,255,255,${v})`, stroke: `rgba(255,255,255,${lerp(0.22, 1, qm)})`, lw: lerp(1, 2, qm) });
+      c.restore();
+      // 亮度数字（0.7s 起淡入，Transform 开始时淡出）
+      const na = clamp((lt - 0.7) / 0.3) * (1 - clamp((lt - 1.35) / 0.2));
+      if (na > 0) { c.save(); c.globalAlpha = na; c.font = `20px "${DG.FONT.rm}"`; c.textAlign = 'center'; c.fillStyle = v > 0.55 ? '#000' : C.GREY_B; c.fillText(v.toFixed(1), x, y + 7); c.restore(); }
+    }
+    // 底部说明：FadeIn(shift=UP)，随标题一起淡出
+    const la = MO.smooth(MO.seg(lt, 0.55, 1.15)) * (1 - out);
+    if (la > 0) { c.save(); c.globalAlpha = la; c.font = `600 38px "${DG.FONT.zh}"`; c.textAlign = 'center'; c.fillStyle = C.GREY_A; c.fillText('每个像素 = 一个 0 到 1 之间的数', 960, 905 + 24 * (1 - la)); c.restore(); }
+    // ⋮ 与大括号
+    const dots = MO.smooth(MO.seg(lt, 2.25, 2.55));
+    if (dots > 0) { c.save(); c.fillStyle = '#fff'; c.globalAlpha = dots; for (let d = -1; d <= 1; d++) { c.beginPath(); c.arc(IN_X, 540 + d * 16, 4, 0, Math.PI * 2); c.fill(); } c.restore(); }
+    T1.drawBrace(c, MO.seg(lt, 1.95, 2.6));
+    c.restore();
+  },
+};
+})();