@biunow/agent-biuart 0.0.0-stage → 0.1.1

package/engine/scenes/50_ma_yuan.js

@@ -0,0 +1,131 @@
+// 马远（南宋院体，「一角」构图）：绢底泛金、重心压在左下一角、斧劈皴＋大片留白、垂柳长枝、渺小的人看向空处。
+// 题材（新构图）：雨后，书生立在岸角老柳下，风把柳枝吹向水面，一只小船在远处雾里。
+// 原作锚定（fetch_reference.py 实拉并核对为三幅不同的马远作品：《山径春行》《月下赏梅》《华灯侍宴图》）：绢 #c9a65a 偏金褐、墨分五色（焦/浓/重/淡/清）、
+//   岩石＝短促侧锋斧劈（宽扁笔，边硬面湿）、枝干＝顿挫的线、垂条＝细而长的淡墨、远山＝清墨渲而无轮廓、人＝极小、一笔衣纹。
+// 管线：绢（缓存）→ 远山渲染（缓存）→ 岩石斧劈（缓存）→ 老柳干（缓存）→ 动态：柳条摆（逐条毛笔）、书生、舟、鸟、水纹 → 绢纹相乘罩一遍。
+SCENES['50_ma_yuan'] = (() => {
+  const W = 1920, H = 1080, { clamp, lerp, rng, ss } = U, P = PAINT, M = MEDIUM, TAU = Math.PI * 2;
+  const INK = [22, 24, 22];
+  let layer;
+  const silk = () => M.silk('mayuan', { base: '#bfa46c', seed: 4, warp: 0.55, vig: 0.62, fleck: 2400 });
+
+  function wash(g, poly, a0, a1, y0, y1, blur) {            // 清墨渲：上浓下淡的渐变面，无轮廓，边缘糊
+    g.save(); g.filter = `blur(${blur}px)`; const gr = g.createLinearGradient(0, y0, 0, y1); gr.addColorStop(0, `rgba(60,62,56,${a0})`); gr.addColorStop(1, `rgba(60,62,56,${a1})`);
+    g.fillStyle = gr; g.beginPath(); poly.forEach((p, i) => i ? g.lineTo(p[0], p[1]) : g.moveTo(p[0], p[1])); g.closePath(); g.fill(); g.restore();
+  }
+  function mountains(g) {
+    wash(g, [[1020, 560], [1130, 440], [1210, 480], [1330, 360], [1440, 470], [1560, 410], [1700, 520], [1920, 470], [1920, 640], [1020, 640]], 0.26, 0.0, 360, 620, 9);
+    wash(g, [[1250, 600], [1380, 520], [1470, 560], [1600, 500], [1760, 580], [1920, 560], [1920, 680], [1250, 680]], 0.16, 0.0, 500, 680, 7);
+    g.save(); g.translate(1420, 610); g.scale(1, 0.16); const mg = g.createRadialGradient(0, 0, 0, 0, 0, 760); mg.addColorStop(0, 'rgba(226,210,160,.55)'); mg.addColorStop(1, 'rgba(226,210,160,0)'); g.fillStyle = mg; g.beginPath(); g.arc(0, 0, 760, 0, TAU); g.fill(); g.restore();       // 雾带压住山脚
+  }
+  // 斧劈岩：多边形轮廓作剪裁，里面按岩势方向排宽扁侧锋；先渲后皴，最后硬边
+  function rock(g, poly, { seed = 1, ang = 0.95, n = 90, wmin = 12, wmax = 30, wash0 = 0.34 } = {}) {
+    const r = rng(seed), xs = poly.map(p => p[0]), ys = poly.map(p => p[1]), bx = Math.min(...xs), by = Math.min(...ys), bw = Math.max(...xs) - bx, bh = Math.max(...ys) - by;
+    const path = new Path2D(); poly.forEach((p, i) => i ? path.lineTo(p[0], p[1]) : path.moveTo(p[0], p[1])); path.closePath();
+    g.save(); g.clip(path);
+    const gr = g.createLinearGradient(0, by, 0, by + bh); gr.addColorStop(0, `rgba(70,66,52,${wash0})`); gr.addColorStop(0.6, `rgba(60,58,46,${wash0 * 0.7})`); gr.addColorStop(1, `rgba(36,36,30,${wash0 * 1.5})`); g.fillStyle = gr; g.fillRect(bx, by, bw, bh);
+    for (let i = 0; i < n; i++) {                              // 斧劈：短、宽、起笔重收笔飞白，沿 ang 方向（用毛笔库；楔形多边形读成箭头，试过，弃用）
+      const x = bx + r() * bw, y = by + r() * bh, L = 40 + r() * 90, a = ang + (r() - .5) * 0.35, w = lerp(wmin, wmax, r()) * 0.55;
+      const q = (y - by) / bh;
+      P.brush(g, [[x, y], [x + Math.cos(a) * L * 0.5, y + Math.sin(a) * L * 0.5 + (r() - .5) * 8], [x + Math.cos(a) * L, y + Math.sin(a) * L]], { w, tone: 0.1 + q * 0.26 + r() * 0.08, dry: 0.85, seed: seed * 100 + i, bristles: 12, head: 0.05, tail: 0.5, col: INK });
+    }
+    for (let i = 0; i < n * 0.8; i++) {                       // 硬皴：细、直、顿挫，勾出斧劈的棱
+      const x = bx + r() * bw, y = by + r() * bh, L = 26 + r() * 60, a = ang + (r() - .5) * 0.25;
+      P.brush(g, [[x, y], [x + Math.cos(a) * L, y + Math.sin(a) * L]], { w: 2.6 + r() * 3, tone: 0.5 + r() * 0.3, dry: 0.5, seed: seed * 77 + i, bristles: 3, head: 0.05, tail: 0.5, col: INK });
+    }
+    g.restore();
+    // 轮廓：只描受光棱和水边，断续，一笔一顿
+    for (let i = 0; i < poly.length; i++) { const A = poly[i], B = poly[(i + 1) % poly.length]; if (r() < 0.25) continue;
+      P.brush(g, [A, [lerp(A[0], B[0], .5) + (r() - .5) * 8, lerp(A[1], B[1], .5) + (r() - .5) * 8], B], { w: 6 + r() * 6, tone: 0.62, dry: 0.5, seed: seed * 31 + i, bristles: 6, head: 0.1, tail: 0.3, col: INK }); }
+  }
+  // 干：从岸角向上斜出，两折，分叉
+  const TRUNK = [[250, 1000], [210, 820], [260, 640], [350, 500], [470, 410], [610, 340]];
+  const LIMBS = [   // 长枝的锚点（沿干的第 i 点）与走势：向右、向下垂
+    { a: [350, 500], p: [[350, 500], [520, 440], [720, 470], [890, 560]], tw: 12, ph: 0.0 },
+    { a: [470, 410], p: [[470, 410], [650, 350], [880, 380], [1080, 480]], tw: 15, ph: 1.4 },
+    { a: [610, 340], p: [[610, 340], [790, 300], [1010, 330], [1200, 420]], tw: 14, ph: 2.6 },
+    { a: [260, 640], p: [[260, 640], [400, 620], [560, 670], [690, 760]], tw: 9, ph: 3.7 },
+  ];
+  function build() {
+    layer = P.canvas(); const g = layer.getContext('2d');
+    g.drawImage(silk(), 0, 0); mountains(g);
+    // 近岸岩：左下一角，前高后低两三块，错落
+    rock(g, [[0, 1080], [0, 700], [90, 640], [210, 690], [330, 800], [470, 860], [620, 940], [800, 1010], [900, 1080]], { seed: 3, ang: 1.0, n: 130, wmin: 14, wmax: 34 });
+    rock(g, [[420, 880], [520, 820], [640, 850], [760, 930], [980, 1000], [1120, 1080], [700, 1080]], { seed: 8, ang: 0.8, n: 70, wmin: 10, wmax: 24, wash0: 0.28 });
+    rock(g, [[1480, 1080], [1560, 1010], [1700, 990], [1860, 1040], [1920, 1080]], { seed: 15, ang: 2.2, n: 40, wmin: 8, wmax: 18, wash0: 0.22 });     // 对岸一撮（右下，平衡）
+    // 老干：一气呵成的粗线（分段画读成竹节，试过，弃用），再补树皮的顿挫短笔
+    P.brush(g, TRUNK, { w: 54, tone: 0.84, dry: 0.5, seed: 21, bristles: 16, head: 0.04, tail: 0.5, col: INK });
+    P.brush(g, TRUNK.map(p => [p[0] + 14, p[1] + 4]), { w: 20, tone: 0.55, dry: 0.8, seed: 22, bristles: 8, col: INK });
+    for (let i = 0; i < 40; i++) { const r = rng(40 + i), q = r(), y = lerp(990, 420, q), x = lerp(236, 480, 1 - q) + (r() - .5) * 46, h = 20 + r() * 40;
+      P.brush(g, [[x - 5, y], [x + 2, y + h * 0.5], [x + 6, y + h]], { w: 5 + r() * 5, tone: 0.3 + r() * 0.3, dry: 0.8, seed: 50 + i, bristles: 4, col: INK }); }
+    // 钤印
+    g.fillStyle = 'rgba(176,40,34,.88)'; g.fillRect(1760, 880, 46, 46); g.fillStyle = 'rgba(201,168,94,.9)'; g.fillRect(1768, 888, 14, 14); g.fillRect(1786, 906, 14, 14); g.fillRect(1768, 910, 8, 10);
+  }
+  function willow(c, t) {
+    LIMBS.forEach((L, li) => {
+      const sw = (k) => Math.sin(t * 1.5 + L.ph + k * 1.1) * (10 + k * 14) + Math.sin(t * 3.1 + L.ph * 2) * 3 * k;
+      const pts = L.p.map((p, k) => [p[0] + (k ? sw(k) * 0.6 : 0), p[1] + (k ? Math.sin(t * 1.7 + L.ph + k) * 6 * k : 0)]);
+      P.brush(c, pts, { w: L.tw, tone: 0.8, dry: 0.5, seed: 90 + li, bristles: 8, head: 0.04, tail: 0.5, col: INK });
+      // 垂条：沿枝取点，每条下垂，末端随风向右
+      const D = KIT.resample(KIT.densify(pts, 5), 34), n = D.length;
+      for (let k = 2; k < n; k++) {
+        const [x, y] = D[k], r = rng(li * 500 + k * 13);
+        if (r() < 0.3) continue;                                    // 成簇：随机缺条，留出透气的缝
+        const cnt = 1 + (r() * 3 | 0);
+        for (let m = 0; m < cnt; m++) {
+          const x0 = x + (r() - .5) * 22, len = 40 + Math.pow(r(), 1.6) * 250, ph = r() * 6, wind = (Math.sin(t * 1.7 + ph + k * 0.35) * 0.5 + 0.5) * 38 + 8;
+          const bend = (r() - 0.3) * 40, tw = [[x0, y], [x0 + wind * 0.15 + bend * 0.3, y + len * 0.35], [x0 + wind * 0.5 + bend, y + len * 0.7], [x0 + wind + bend * 0.8, y + len]];
+          P.brush(c, tw, { w: 1.8 + r() * 1.8, tone: 0.18 + r() * 0.34, dry: 0.5, seed: li * 700 + k * 5 + m, bristles: 3, head: 0.05, tail: 0.65, col: INK });
+          if (r() < 0.35) P.leaf(c, tw[3][0], tw[3][1], 1.35 + Math.sin(t * 2.2 + ph) * 0.2, 14 + r() * 10, 4, 0.45, INK);
+        }
+      }
+    });
+  }
+  function scholar(c, t) {                                      // 立在岸角看向空处：背影，宽袖，高冠；一笔衣纹，袍不填满（留绢）
+    const x = 760, y = 972, bob = Math.sin(t * 1.3) * 1.0, fl = Math.sin(t * 2.1) * 5, look = ss(0.5, 3.5, t);
+    c.save(); c.translate(x, y + bob);
+    c.fillStyle = 'rgba(236,224,184,.5)';
+    c.beginPath(); c.moveTo(-14, -128); c.quadraticCurveTo(-34, -60, -30, 0); c.lineTo(26, 0); c.quadraticCurveTo(28 + fl * 0.4, -64, 14, -128); c.closePath(); c.fill();
+    P.brush(c, [[-16, -126], [-34, -56], [-30, 0]], { w: 4, tone: 0.85, dry: 0.2, seed: 201, bristles: 4, col: INK });
+    P.brush(c, [[14, -126], [28, -60], [26 + fl * 0.5, 0]], { w: 3.4, tone: 0.75, dry: 0.3, seed: 202, bristles: 4, col: INK });
+    P.brush(c, [[-30, 2], [-2, 8], [26, 2]], { w: 3.6, tone: 0.6, dry: 0.3, seed: 203, bristles: 3, col: INK });
+    P.brush(c, [[-4, -120], [-8, -70], [0, -20]], { w: 2.6, tone: 0.5, dry: 0.5, seed: 204, bristles: 3, col: INK });
+    // 右袖抬起指向远处（随 look 抬起）
+    const ah = lerp(-30, -96, look);
+    c.fillStyle = 'rgba(236,224,184,.5)'; c.beginPath(); c.moveTo(14, -118); c.quadraticCurveTo(52, ah + 10, 72 + fl * 0.4, ah); c.quadraticCurveTo(54, ah + 30, 20, -88); c.closePath(); c.fill();
+    P.brush(c, [[14, -118], [52, ah + 8], [72 + fl * 0.4, ah]], { w: 3.4, tone: 0.8, dry: 0.3, seed: 205, bristles: 4, col: INK });
+    P.brush(c, [[20, -88], [54, ah + 30], [72 + fl * 0.4, ah]], { w: 2.6, tone: 0.6, dry: 0.3, seed: 206, bristles: 3, col: INK });
+    c.fillStyle = 'rgba(40,38,34,.95)'; c.beginPath(); c.ellipse(-2, -142, 14, 15, 0, 0, TAU); c.fill();                // 头
+    c.beginPath(); c.moveTo(-14, -150); c.lineTo(-10, -178); c.lineTo(10, -178); c.lineTo(14, -150); c.closePath(); c.fill();   // 高冠
+    P.brush(c, [[8, -168], [34 + fl, -164], [52 + fl * 1.4, -140]], { w: 3.6, tone: 0.8, dry: 0.3, seed: 207, bristles: 3, col: INK });  // 冠带随风
+    c.restore();
+  }
+  function boat(c, t) {                                          // 远处小舟：一笔船身＋一笔蓑笠人，随水轻荡
+    const x = lerp(1620, 1420, ss(0, 6, t)), y = 790 + Math.sin(t * 1.1) * 4, r2 = Math.sin(t * 1.1) * 0.02;
+    c.save(); c.translate(x, y); c.rotate(r2); c.globalAlpha = 0.9;
+    P.brush(c, [[-60, 0], [-20, 12], [30, 10], [74, -6]], { w: 11, tone: 0.78, dry: 0.45, seed: 301, bristles: 6, head: 0.1, tail: 0.3, col: INK });
+    c.fillStyle = 'rgba(40,40,34,.85)'; c.beginPath(); c.moveTo(-6, -4); c.quadraticCurveTo(-6, -40, 4, -48); c.quadraticCurveTo(14, -40, 12, -4); c.fill();
+    P.brush(c, [[-18, -44], [4, -56], [26, -44]], { w: 6, tone: 0.8, dry: 0.3, seed: 302, bristles: 4, col: INK });
+    P.brush(c, [[14, -30], [40, -10], [66, 22]], { w: 2.4, tone: 0.7, dry: 0.2, seed: 303, bristles: 2, col: INK });       // 篙
+    c.restore();
+    c.save(); c.globalAlpha = 0.28; P.brush(c, [[x - 70, y + 22], [x - 10, y + 26], [x + 80, y + 22]], { w: 4, tone: 0.5, dry: 0.8, seed: 304, bristles: 3, col: INK }); c.restore();
+  }
+  function bird(c, t) {
+    const u = ss(0.3, 5.7, t), x = lerp(1860, 1180, u), y = 250 + Math.sin(u * 7) * 26 - u * 40, f = Math.sin(t * 9) * 12;
+    c.save(); c.translate(x, y); P.brush(c, [[-22, -f * 0.4], [-6, -8 - f], [0, 0]], { w: 5, tone: 0.8, dry: 0.2, seed: 401, bristles: 3, col: INK }); P.brush(c, [[22, -f * 0.4], [6, -8 - f], [0, 0]], { w: 5, tone: 0.8, dry: 0.2, seed: 402, bristles: 3, col: INK });
+    c.fillStyle = 'rgba(30,30,28,.85)'; c.beginPath(); c.ellipse(0, 2, 7, 4, 0, 0, TAU); c.fill(); c.restore();
+  }
+  function ripples(c, t) {                                       // 水面只有几道极淡的横线，加岸边涟漪
+    c.save(); for (let i = 0; i < 9; i++) { const y = 700 + i * 36, x0 = 980 + (i % 3) * 170 + Math.sin(t * 0.6 + i) * 18; c.strokeStyle = `rgba(58,60,52,${0.05 + i * 0.008})`; c.lineWidth = 1.4; c.beginPath(); c.moveTo(x0, y); c.bezierCurveTo(x0 + 60, y - 2, x0 + 150, y + 2, x0 + 230, y); c.stroke(); }
+    for (let k = 0; k < 3; k++) { const q = ((t * 0.28 + k / 3) % 1); c.strokeStyle = `rgba(58,60,52,${(1 - q) * 0.2})`; c.lineWidth = 1.4; c.beginPath(); c.ellipse(1010, 905, 24 + q * 150, 3 + q * 15, 0, 0, TAU); c.stroke(); }
+    c.restore();
+  }
+  function draw(c, lt) {
+    if (!layer) build();
+    const t = clamp(lt, 0, 6);
+    c.drawImage(layer, 0, 0);
+    ripples(c, t); boat(c, t); bird(c, t); willow(c, t); scholar(c, t);
+    c.save(); c.globalCompositeOperation = 'multiply'; c.globalAlpha = 0.35; c.drawImage(silk(), 0, 0); c.restore();     // 绢纹罩在墨上：墨是渗进绢里的
+  }
+  return { draw };
+})();

package/engine/scenes/51_persian_miniature.js

@@ -0,0 +1,149 @@
+// 波斯细密画（赫拉特/萨法维）：没有透视收束，地面像一张竖起的挂毯；建筑被切开让人看见里面；每一寸都有纹样；金、青金石蓝、朱、孔雀绿；文字块进画。
+// 题材（新构图）：庭院里的汲水轮——一位园丁摇轮，水顺渠流进八角水池，旁边两人在亭下读书；上方书页式文字块。
+// 原作锚定（fetch_reference.py：赫拉特 Bustan《尤素福与祖莱哈》、花园浴女页、沙赫塔赫马斯普《列王纪》页）：
+//   纸/羊皮 #d9bf88、青金石 #1f4f8f、朱 #b7372b、孔雀绿 #2a8a7a、金 #d6a93c、玫粉 #d98a7a；砖红/青瓷砖满铺几何；
+//   树＝平涂树干＋点叶团＋花；人＝小、侧身、大头巾、袍上暗纹；地面一律「俯视平铺」，远处靠叠高不靠缩小。
+// 管线：纸底（缓存）→ 外框金线＋蓝带 → 文字块 → 建筑切面（砖＋瓷砖满铺）→ 庭院平铺地面（草＋花点）→ 水池（八角，几何瓷砖边）
+//      → 树 → 动态：汲水轮转、水沿渠流、人物动作、花瓣飘、水纹 → 极薄的纸纤维相乘。
+SCENES['51_persian_miniature'] = (() => {
+  const W = 1920, H = 1080, { clamp, lerp, rng, ss } = U, P = PAINT, M = MEDIUM, TAU = Math.PI * 2;
+  const C = { paper: '#dcc38c', lapis: '#1f4f8f', lapis2: '#2f6fb0', red: '#b7372b', teal: '#2a8a7a', gold: '#d6a93c', rose: '#d98a7a', brick: '#c0643f', cream: '#efe0b4', green: '#6f9a4a', dgreen: '#3f6e3a', ink: '#2b2118' };
+  let layer;
+  const poly = (pts, close = true) => { const p = new Path2D(); pts.forEach((q, i) => i ? p.lineTo(q[0], q[1]) : p.moveTo(q[0], q[1])); if (close) p.closePath(); return p; };
+  const fillPoly = (g, pts, col, o = {}) => { g.fillStyle = col; g.fill(poly(pts)); if (o.line !== false) { g.strokeStyle = o.line || C.ink; g.lineWidth = o.lw || 2.4; g.stroke(poly(pts)); } };
+  // 满铺几何：星/十字瓷砖，周期取模，两色交替
+  function tiles(g, x, y, w, h, size, a, b, c2, seed = 1) {
+    g.save(); g.beginPath(); g.rect(x, y, w, h); g.clip(); g.fillStyle = a; g.fillRect(x, y, w, h);
+    const r = rng(seed);
+    for (let j = 0; y + j * size < y + h + size; j++) for (let i = 0; x + i * size < x + w + size; i++) {
+      const cx = x + i * size + size / 2, cy = y + j * size + size / 2, k = (i + j) % 2;
+      g.fillStyle = k ? b : c2; g.beginPath(); for (let q = 0; q < 8; q++) { const ang = q / 8 * TAU + Math.PI / 8, rr = q % 2 ? size * 0.2 : size * 0.38; g.lineTo(cx + Math.cos(ang) * rr, cy + Math.sin(ang) * rr); } g.closePath(); g.fill();
+      g.fillStyle = k ? c2 : b; g.beginPath(); g.arc(cx, cy, size * 0.1, 0, TAU); g.fill();
+    }
+    g.strokeStyle = 'rgba(30,24,16,.5)'; g.lineWidth = 1.4; for (let i = 0; i <= w / size + 1; i++) { g.beginPath(); g.moveTo(x + i * size, y); g.lineTo(x + i * size, y + h); g.stroke(); } for (let j = 0; j <= h / size + 1; j++) { g.beginPath(); g.moveTo(x, y + j * size); g.lineTo(x + w, y + j * size); g.stroke(); }
+    g.restore();
+  }
+  function border(g) {                 // 金线＋青金石蓝带＋金色细花
+    g.fillStyle = C.lapis; g.fillRect(0, 0, W, H); g.fillStyle = C.gold; g.fillRect(22, 22, W - 44, H - 44); g.fillStyle = C.paper; g.fillRect(30, 30, W - 60, H - 60);
+    g.fillStyle = C.lapis; g.fillRect(44, 44, W - 88, H - 88); g.fillStyle = C.gold; g.fillRect(52, 52, W - 104, H - 104); g.fillStyle = C.paper; g.fillRect(58, 58, W - 116, H - 116);
+    g.fillStyle = 'rgba(214,169,60,.9)'; for (let x = 70; x < W - 70; x += 38) { [34, H - 34].forEach(y => { g.beginPath(); g.arc(x, y, 6, 0, TAU); g.fill(); }); } for (let y = 70; y < H - 70; y += 38) { [34, W - 34].forEach(x => { g.beginPath(); g.arc(x, y, 6, 0, TAU); g.fill(); }); }
+  }
+  function textBlock(g, x, y, w, h) {  // 书法文字块：金边朱框内一行行「连笔」——用折线笔画模拟，不写具体字
+    fillPoly(g, [[x, y], [x + w, y], [x + w, y + h], [x, y + h]], '#efe3bd', { lw: 3, line: C.gold });
+    const r = rng(7); g.strokeStyle = C.ink; g.lineCap = 'round'; g.lineWidth = 2.4;
+    for (let row = 0; row < Math.floor(h / 34); row++) { const yy = y + 28 + row * 34; let xx = x + w - 20; g.beginPath(); g.moveTo(xx, yy); while (xx > x + 24) { const st = 8 + r() * 18; xx -= st; g.quadraticCurveTo(xx + st / 2, yy - 8 - r() * 10, xx, yy + (r() - .5) * 6); if (r() < 0.12) { g.moveTo(xx - 10, yy); xx -= 10; } } g.stroke();
+      g.fillStyle = C.red; if (row % 3 === 0) { g.beginPath(); g.arc(x + w - 14, yy - 6, 4, 0, TAU); g.fill(); } }
+  }
+  function build() {
+    layer = P.canvas(); const g = layer.getContext('2d');
+    g.fillStyle = C.paper; g.fillRect(0, 0, W, H); border(g);
+    // 顶部：建筑切面（被切开：里面看得到人）
+    g.save(); g.beginPath(); g.rect(60, 60, W - 120, H - 120); g.clip();
+    // 外墙大面：砖红＋瓷砖腰线；门楣蓝釉
+    fillPoly(g, [[900, 60], [1860, 60], [1860, 520], [900, 520]], C.brick, { lw: 3 });
+    for (let y = 80; y < 500; y += 26) { g.strokeStyle = 'rgba(80,30,20,.35)'; g.lineWidth = 1.5; g.beginPath(); g.moveTo(900, y); g.lineTo(1860, y); g.stroke(); for (let x = 900 + ((y / 26) % 2) * 20; x < 1860; x += 40) { g.beginPath(); g.moveTo(x, y); g.lineTo(x, y + 26); g.stroke(); } }
+    tiles(g, 900, 60, 960, 90, 30, C.lapis, C.cream, C.teal, 3);
+    // 切开的房间：亭（拱形开口），里面有地毯、两位读书人
+    const arch = new Path2D(); arch.moveTo(1040, 520); arch.lineTo(1040, 250); arch.quadraticCurveTo(1040, 170, 1260, 170); arch.quadraticCurveTo(1480, 170, 1480, 250); arch.lineTo(1480, 520); arch.closePath();
+    g.fillStyle = C.gold; g.fill(arch); g.save(); g.translate(0, 0); g.scale(1, 1); g.restore();
+    const inner = new Path2D(); inner.moveTo(1060, 520); inner.lineTo(1060, 256); inner.quadraticCurveTo(1060, 192, 1260, 192); inner.quadraticCurveTo(1460, 192, 1460, 256); inner.lineTo(1460, 520); inner.closePath();
+    g.save(); g.clip(inner); tiles(g, 1060, 180, 400, 340, 36, '#e7d6a6', C.lapis2, C.red, 5);
+    // 地毯：红地，边带，中央大八角菱形
+    fillPoly(g, [[1060, 420], [1460, 420], [1460, 520], [1060, 520]], C.red, { lw: 2.4 });
+    for (let x = 1076; x < 1460; x += 34) { g.fillStyle = C.gold; g.beginPath(); g.moveTo(x, 470); g.lineTo(x + 12, 456); g.lineTo(x + 24, 470); g.lineTo(x + 12, 484); g.fill(); }
+    g.restore(); g.strokeStyle = C.ink; g.lineWidth = 3; g.stroke(arch);
+    // 左侧塔楼＋窗；右侧小窗格
+    fillPoly(g, [[1520, 150], [1840, 150], [1840, 500], [1520, 500]], C.cream, { lw: 3 }); tiles(g, 1520, 150, 320, 350, 32, C.cream, C.teal, C.lapis, 9);
+    [[1560, 200], [1700, 200], [1560, 340], [1700, 340]].forEach(([x, y]) => { fillPoly(g, [[x, y + 100], [x, y + 40], [x + 20, y], [x + 60, y], [x + 80, y + 40], [x + 80, y + 100]], C.lapis, { lw: 3, line: C.gold }); });
+    g.restore();
+    textBlock(g, 120, 120, 640, 200); textBlock(g, 120, 340, 640, 120);
+    // 下半：庭院平铺地面（竖起的挂毯）
+    g.save(); g.beginPath(); g.rect(60, 520, W - 120, H - 580); g.clip();
+    fillPoly(g, [[60, 520], [W - 60, 520], [W - 60, H - 60], [60, H - 60]], C.green, { line: false });
+    const r = rng(11); for (let i = 0; i < 1400; i++) { const x = 70 + r() * (W - 140), y = 530 + r() * (H - 600), k = r(); g.fillStyle = k < 0.5 ? '#86b05a' : k < 0.8 ? '#4d7c3a' : (r() < 0.5 ? '#f0e6c8' : C.rose); g.beginPath(); g.ellipse(x, y, 3 + r() * 5, 2 + r() * 3, r(), 0, TAU); g.fill(); }
+    // 水渠：从左上角的汲水轮底座流向八角水池，铺青瓷砖，几何边
+    g.lineCap = 'butt'; g.lineJoin = 'round'; [['#2b2118', 78], [C.gold, 72], [C.teal, 58]].forEach(([col, w]) => { g.strokeStyle = col; g.lineWidth = w; g.beginPath(); g.moveTo(260, 670); g.lineTo(790, 670); g.lineTo(930, 800); g.stroke(); });
+    // 八角水池：中央偏右
+    const cx = 1160, cy = 790, R = 230, oct = Array.from({ length: 8 }, (_, k) => [cx + Math.cos(k / 8 * TAU + Math.PI / 8) * R * 1.08, cy + Math.sin(k / 8 * TAU + Math.PI / 8) * R * 0.74]);
+    fillPoly(g, oct.map(p => [cx + (p[0] - cx) * 1.14, cy + (p[1] - cy) * 1.2]), C.gold, { lw: 3 });
+    fillPoly(g, oct.map(p => [cx + (p[0] - cx) * 1.06, cy + (p[1] - cy) * 1.1]), C.lapis, { lw: 3, line: C.gold });
+    fillPoly(g, oct, '#2c7e8a', { lw: 3, line: C.gold });
+    // 周围铺小道：奶油色菱格
+    for (let i = 0; i < 16; i++) { const x = 300 + i * 36, y = 760 + (i % 2) * 14; g.fillStyle = C.cream; g.beginPath(); g.moveTo(x, y); g.lineTo(x + 14, y - 10); g.lineTo(x + 28, y); g.lineTo(x + 14, y + 10); g.fill(); }
+    g.restore();
+    // 树：左右各一，直干＋圆叶团＋花点＋果（树冠超出画面边缘上探，细密画常见）
+    function tree(x, y, hgt, seed, bloom) {
+      g.fillStyle = '#7a4a2a'; g.fillRect(x - 11, y - hgt, 22, hgt); g.strokeStyle = C.ink; g.lineWidth = 2.4; g.strokeRect(x - 11, y - hgt, 22, hgt);
+      const rr = rng(seed); for (let k = 0; k < 9; k++) { const a = rr() * TAU, d = rr() * 70, cx2 = x + Math.cos(a) * d, cy2 = y - hgt - 30 + Math.sin(a) * d * 0.7; g.fillStyle = k % 2 ? C.dgreen : '#4f8a3f'; g.beginPath(); g.ellipse(cx2, cy2, 58, 46, 0, 0, TAU); g.fill(); g.strokeStyle = C.ink; g.lineWidth = 1.8; g.stroke(); }
+      for (let k = 0; k < 40; k++) { const a = rr() * TAU, d = rr() * 100; g.fillStyle = bloom; g.beginPath(); g.arc(x + Math.cos(a) * d, y - hgt - 30 + Math.sin(a) * d * 0.6, 5, 0, TAU); g.fill(); }
+    }
+    tree(140, 720, 220, 31, '#f4d3d0'); tree(1790, 760, 240, 32, '#f4e6a0'); tree(700, 560, 120, 33, '#f4d3d0');
+  }
+  // 汲水轮：转；水斗按周期取模；水沿渠流
+  function wheel(c, t) {
+    const cx = 340, cy = 580, R = 120, a0 = t * 0.8;
+    c.save(); c.translate(cx, cy);
+    c.strokeStyle = C.ink; c.lineWidth = 3; c.fillStyle = '#9a6a3a'; c.beginPath(); c.arc(0, 0, R, 0, TAU); c.arc(0, 0, R - 14, 0, TAU, true); c.fill('evenodd'); c.stroke(); c.beginPath(); c.arc(0, 0, R - 14, 0, TAU); c.stroke();
+    for (let k = 0; k < 12; k++) { const a = a0 + k / 12 * TAU; c.save(); c.rotate(a); c.fillStyle = '#7a4a2a'; c.fillRect(-4, 0, 8, R - 14); c.strokeRect(-4, 0, 8, R - 14); c.fillStyle = C.gold; c.fillRect(-14, R - 6, 28, 16); c.strokeRect(-14, R - 6, 28, 16); c.restore(); }
+    c.fillStyle = C.red; c.beginPath(); c.arc(0, 0, 18, 0, TAU); c.fill(); c.stroke();
+    c.restore();
+  }
+  function water(c, t) {
+    // 渠水：沿折线 (260,670)→(790,670)→(930,800) 的金色小波，向右下流
+    const seg = [[260, 670, 790, 670], [790, 670, 930, 800]], Ls = seg.map(q => Math.hypot(q[2] - q[0], q[3] - q[1])), tot = Ls[0] + Ls[1];
+    for (let i = 0; i < 16; i++) { let d = ((i * tot / 16 + t * 90) % tot), k = d < Ls[0] ? 0 : 1; if (k) d -= Ls[0]; const q = seg[k], u = d / Ls[k], x = lerp(q[0], q[2], u), y = lerp(q[1], q[3], u) + ((i % 3) - 1) * 12;
+      c.strokeStyle = 'rgba(244,224,160,.85)'; c.lineWidth = 2.4; c.beginPath(); c.moveTo(x - 12, y); c.quadraticCurveTo(x, y - 7, x + 12, y); c.stroke(); }
+    // 水池：同心波＋金鱼
+    const cx = 1160, cy = 790;
+    c.save(); c.beginPath(); for (let k = 0; k < 8; k++) { const ang = k / 8 * TAU + Math.PI / 8; c.lineTo(cx + Math.cos(ang) * 230 * 1.08, cy + Math.sin(ang) * 230 * 0.74); } c.closePath(); c.clip();
+    for (let i = 0; i < 6; i++) { const q = ((t * 0.35 + i / 6) % 1); c.strokeStyle = `rgba(244,230,180,${(1 - q) * 0.8})`; c.lineWidth = 2.6; c.beginPath(); c.ellipse(cx - 130 + Math.sin(i) * 40, cy - 20, 20 + q * 150, 8 + q * 50, 0, 0, TAU); c.stroke(); }
+    [[0, 1.0, C.red], [2.2, -0.8, C.gold], [4.1, 0.7, C.cream]].forEach(([ph, dir, col], i) => { const a = t * 0.6 * dir + ph, x = cx + Math.cos(a) * 140, y = cy + Math.sin(a) * 70 + 10, ang = Math.atan2(Math.cos(a) * 70 * dir, -Math.sin(a) * 140 * dir);
+      c.save(); c.translate(x, y); c.rotate(ang); c.fillStyle = col; c.strokeStyle = C.ink; c.lineWidth = 2; c.beginPath(); c.ellipse(0, 0, 30, 12, 0, 0, TAU); c.fill(); c.stroke(); c.beginPath(); c.moveTo(-28, 0); c.lineTo(-48, -12 + Math.sin(t * 8 + i) * 4); c.lineTo(-48, 12 + Math.sin(t * 8 + i) * 4); c.closePath(); c.fill(); c.stroke(); c.fillStyle = C.ink; c.beginPath(); c.arc(16, -3, 2.4, 0, TAU); c.fill(); c.restore(); });
+    c.restore();
+  }
+  // 人（萨法维式）：修长，头小，高头巾＋红色冠杆，束腰长袍下摆外展，腰带垂一端，鞋尖朝前；扁平填色＋粗线描边，袍上小花散点。
+  function person(c, x, y, s, face, col, turban, t, o = {}) {
+    c.save(); c.translate(x, y); c.scale(s * face, s); c.lineJoin = 'round'; c.lineCap = 'round'; c.strokeStyle = C.ink; c.lineWidth = 2.6 / s;
+    const bob = o.bob || 0, sw = Math.sin(t * 1.7 + (o.ph || 0)) * 3;
+    // 鞋：尖头
+    c.fillStyle = C.red; [[-14, 0], [16, 0]].forEach(([dx]) => { c.beginPath(); c.moveTo(dx - 9, -4); c.quadraticCurveTo(dx + 10, -10, dx + 24, -2); c.quadraticCurveTo(dx + 12, 5, dx - 9, 4); c.closePath(); c.fill(); c.stroke(); });
+    // 长袍：窄肩 → 束腰 → 下摆外展，前襟交叠一道线
+    c.fillStyle = col; c.beginPath(); c.moveTo(-20, -152 + bob); c.quadraticCurveTo(-26, -118, -18, -96 + bob); c.quadraticCurveTo(-34, -52, -52 + sw, -6); c.quadraticCurveTo(0, 3, 52 + sw, -6); c.quadraticCurveTo(34, -52, 18, -96 + bob); c.quadraticCurveTo(26, -118, 20, -152 + bob); c.closePath(); c.fill(); c.stroke();
+    c.save(); c.clip(); c.fillStyle = 'rgba(244,224,160,.8)'; for (let k = 0; k < 24; k++) { const px = -44 + (k % 6) * 17 + (Math.floor(k / 6) % 2) * 8, py = -140 + Math.floor(k / 6) * 34; c.beginPath(); for (let q = 0; q < 5; q++) { const aa = q / 5 * TAU; c.moveTo(px, py); c.arc(px + Math.cos(aa) * 4.4, py + Math.sin(aa) * 4.4, 2.6, 0, TAU); } c.fill(); }
+    c.strokeStyle = 'rgba(43,33,24,.55)'; c.lineWidth = 1.6; c.beginPath(); c.moveTo(4, -148 + bob); c.quadraticCurveTo(10, -80, 30 + sw, -6); c.stroke(); c.restore();
+    c.strokeStyle = C.ink; c.lineWidth = 2.6 / s; c.strokeStyle = C.gold; c.lineWidth = 4; c.beginPath(); c.moveTo(-52 + sw, -6); c.quadraticCurveTo(0, 3, 52 + sw, -6); c.stroke(); c.strokeStyle = C.ink; c.lineWidth = 2.6 / s;
+    // 腰带＋垂端
+    c.fillStyle = C.gold; c.fillRect(-19, -100 + bob * 0.5, 38, 9); c.strokeRect(-19, -100 + bob * 0.5, 38, 9);
+    c.fillStyle = C.cream; c.beginPath(); c.moveTo(10, -92 + bob * 0.5); c.lineTo(22, -60 + sw * 0.4); c.lineTo(10, -64 + sw * 0.4); c.closePath(); c.fill(); c.stroke();
+    // 手臂：默认一只垂袖，另一只抬到胸前持物
+    if (o.arm) o.arm(c, bob); else { c.strokeStyle = col; c.lineWidth = 11; c.beginPath(); c.moveTo(16, -144 + bob); c.lineTo(34, -108 + bob); c.lineTo(22, -90 + bob); c.stroke(); c.strokeStyle = C.ink; c.lineWidth = 2.6 / s; c.fillStyle = '#e8c298'; c.beginPath(); c.arc(22, -88 + bob, 5, 0, TAU); c.fill(); c.stroke(); }
+    // 颈与头：小，3/4，弯眉连成一道，杏仁眼，胡须一线
+    c.fillStyle = '#e8c298'; c.fillRect(-4, -160 + bob, 9, 12);
+    c.beginPath(); c.ellipse(3, -172 + bob, 15, 18, 0, 0, TAU); c.fill(); c.stroke();
+    c.fillStyle = C.ink; c.beginPath(); c.ellipse(10, -174 + bob, 3.8, 2.4, 0, 0, TAU); c.fill();
+    c.beginPath(); c.moveTo(-1, -181 + bob); c.quadraticCurveTo(7, -186 + bob, 17, -180 + bob); c.stroke();
+    c.beginPath(); c.moveTo(6, -161 + bob); c.quadraticCurveTo(13, -159 + bob, 17, -163 + bob); c.stroke();
+    // 头巾：白裹布＋高耸的红冠杆（向前微倾），顶端一小簇羽
+    c.fillStyle = turban; c.beginPath(); c.ellipse(1, -188 + bob, 22, 11, 0, 0, TAU); c.fill(); c.stroke();
+    c.fillStyle = C.red; c.beginPath(); c.moveTo(-9, -192 + bob); c.quadraticCurveTo(-4, -226 + bob, 6 + sw * 0.3, -246 + bob); c.lineTo(12 + sw * 0.3, -244 + bob); c.quadraticCurveTo(12, -216 + bob, 14, -192 + bob); c.closePath(); c.fill(); c.stroke();
+    c.strokeStyle = C.gold; c.lineWidth = 3; c.beginPath(); c.moveTo(-8, -202 + bob); c.lineTo(13, -202 + bob); c.stroke(); c.strokeStyle = C.ink; c.lineWidth = 2.6 / s;
+    c.fillStyle = C.cream; c.beginPath(); c.ellipse(9 + sw * 0.3, -250 + bob, 4, 9, 0.4, 0, TAU); c.fill(); c.stroke();
+    c.restore();
+  }
+  function draw(c, lt) {
+    if (!layer) build();
+    const t = clamp(lt, 0, 6);
+    c.drawImage(layer, 0, 0);
+    wheel(c, t); water(c, t);
+    // 园丁：站在汲水轮旁摇杆
+    const crank = Math.sin(t * 0.8 * 3.0);
+    person(c, 530, 706, 1.05, 1, C.lapis2, C.cream, t, { bob: Math.sin(t * 2.4) * 2, arm: (cc, bob) => { const hx = -70 - crank * 20, hy = -104 - crank * 14; cc.strokeStyle = C.ink; cc.lineWidth = 14; cc.beginPath(); cc.moveTo(14, -144 + bob); cc.lineTo(-24 - crank * 8, -118 + bob); cc.lineTo(hx, hy); cc.stroke(); cc.strokeStyle = C.lapis2; cc.lineWidth = 10; cc.beginPath(); cc.moveTo(14, -144 + bob); cc.lineTo(-24 - crank * 8, -118 + bob); cc.lineTo(hx, hy); cc.stroke(); cc.strokeStyle = C.ink; cc.lineWidth = 2.6; cc.fillStyle = '#e8c298'; cc.beginPath(); cc.arc(hx, hy, 5.5, 0, TAU); cc.fill(); cc.stroke(); } });
+    // 亭下读书人（在建筑切面里）：两人对坐，一个翻页
+    person(c, 1180, 520, 0.92, 1, C.red, C.cream, t, { ph: 0, bob: Math.sin(t * 1.4) * 1.5 });
+    person(c, 1370, 520, 0.92, -1, C.teal, C.cream, t, { ph: 2, bob: Math.sin(t * 1.4 + 2) * 1.5 });
+    // 花瓣与落叶：从树冠飘到池面
+    const r = rng(3); for (let i = 0; i < 22; i++) { const ph = r() * 6, sp = 0.4 + r() * 0.4, x0 = 160 + r() * 1600, q = ((t * sp * 0.2 + ph) % 1), x = x0 + Math.sin(t * 1.4 + i) * 24 + q * 80, y = 560 + q * 480; c.fillStyle = i % 2 ? '#f4d3d0' : '#f4e6a0'; c.strokeStyle = 'rgba(43,33,24,.5)'; c.lineWidth = 1.2; c.beginPath(); c.ellipse(x, y, 7, 4, t + i, 0, TAU); c.fill(); c.stroke(); }
+    c.save(); c.globalCompositeOperation = 'multiply'; c.globalAlpha = 0.28; c.drawImage(P.texture('paper_pm', '#d6bf8a', { scale: 0.004, amt: 14, grain: 6, seed: 9 }), 0, 0); c.restore();
+  }
+  return { draw };
+})();

package/engine/scenes/52_south_park.js

@@ -0,0 +1,105 @@
+// 南方公园式数字剪纸：一切都是被剪刀剪出来的色纸——圆头、梯形身体、直边、没有曲线细节；眼睛是两个白椭圆加黑点；
+// 动画是「纸片绕枢轴转、整块平移」，嘴是一个黑色半椭圆开合；背景是几块粗糙的平涂纸。
+// 题材（新构图）：小镇雪地里的公交站，四个小孩缩着脖子等车，校车慢吞吞滑进来、车门啪地打开，孩子们一块一块地跳上去。
+// 原作锚定（风格特征，非角色）：①纸片感——每块形状边缘有轻微的剪刀抖动，表面有纸纤维 ②眼睛贴脸、黑点在白椭圆里
+//   ③身体是梯形/方块，手是单纯的圆头短棒，腿是两根黑短柱 ④色块平涂、只有一道细黑轮廓 ⑤镜头永远正对，层叠为主，不透视
+// 管线：纸块（每块 P.cut 出抖动边缘）→ 纸纹相乘 → 枢轴动画。不使用任何具名角色的服装或配色组合。
+SCENES['52_south_park'] = (() => {
+  const W = 1920, H = 1080, { clamp, lerp, rng, ss } = U, P = PAINT, TAU = Math.PI * 2;
+  const OUT = '#14120f';
+  const E = { lin: x => x, io: x => { x = clamp(x); return x * x * (3 - 2 * x); } };
+  // 剪纸：多边形（顶点）→ 抖动边缘，填色，细黑线。seed 固定所以确定性
+  function paper(c, pts, fill, { seed = 1, lw = 3, amp = 2.4, step = 18, shade = null } = {}) {
+    const p = P.cut(pts, seed, step, amp);
+    c.fillStyle = fill; c.fill(p);
+    if (shade) { c.save(); c.clip(p); c.fillStyle = shade; c.globalAlpha = 0.18; c.fillRect(-9999, -9999, 99999, 99999); c.restore(); c.globalAlpha = 1; }
+    if (lw) { c.strokeStyle = OUT; c.lineWidth = lw; c.lineJoin = 'round'; c.stroke(p); }
+    return p;
+  }
+  function circle(c, x, y, r, fill, seed, lw = 3) { const pts = Array.from({ length: 28 }, (_, i) => [x + Math.cos(i / 28 * TAU) * r, y + Math.sin(i / 28 * TAU) * r]); return paper(c, pts, fill, { seed, lw, amp: 1.2, step: 12 }); }
+  function ell(c, x, y, rx, ry, fill, seed, lw = 3) { const pts = Array.from({ length: 24 }, (_, i) => [x + Math.cos(i / 24 * TAU) * rx, y + Math.sin(i / 24 * TAU) * ry]); return paper(c, pts, fill, { seed, lw, amp: 0.8, step: 10 }); }
+  const tex = () => P.cached('sp_paper', W, H, g => {
+    g.fillStyle = '#fff'; g.fillRect(0, 0, W, H); const r = rng(5);
+    for (let i = 0; i < 9000; i++) { const x = r() * W, y = r() * H, a = r() * TAU, l = 3 + r() * 12; g.strokeStyle = r() < 0.5 ? 'rgba(140,130,115,.16)' : 'rgba(255,255,255,.5)'; g.lineWidth = 0.8; g.beginPath(); g.moveTo(x, y); g.lineTo(x + Math.cos(a) * l, y + Math.sin(a) * l); g.stroke(); }
+  });
+
+  // 小孩：head 圆、眼、嘴；parka 梯形；帽子；手；腿。o: x,y(脚底) s(缩放) skin parka hat tilt(头倾) talk(0..1 嘴开) armL armR(弧度，0=下垂) hop face
+  function kid(c, o) {
+    const { x, y, s = 1, skin = '#f5cfa8', parka, hat, band, tilt = 0, talk = 0, armL = 0, armR = 0, hop = 0, seed = 1, lookx = 0.5 } = o;
+    c.save(); c.translate(x, y - hop); c.scale(s, s);
+    // 腿
+    paper(c, [[-34, -52], [-10, -52], [-10, 0], [-34, 0]], '#1c1a18', { seed: seed + 1, lw: 0, amp: 1 }); paper(c, [[10, -52], [34, -52], [34, 0], [10, 0]], '#1c1a18', { seed: seed + 2, lw: 0, amp: 1 });
+    // 手臂（绕肩枢轴）
+    const arm = (sx, ang, k) => { c.save(); c.translate(sx, -150); c.rotate(ang); paper(c, [[-12, 0], [12, 0], [11, 84], [-11, 84]], parka, { seed: seed + 3 + k, lw: 3, amp: 1.2 }); circle(c, 0, 90, 17, '#f2ede0', seed + 5 + k, 3); c.restore(); };
+    arm(-70, armL, 0); arm(70, armR, 1);
+    // 身体：梯形，小孩缩着脖子
+    paper(c, [[-72, -170], [72, -170], [92, -52], [-92, -52]], parka, { seed: seed + 6, lw: 3.4, amp: 1.6 });
+    paper(c, [[-10, -170], [10, -170], [10, -52], [-10, -52]], 'rgba(0,0,0,.18)', { seed: seed + 7, lw: 0 });                          // 拉链缝
+    // 头：绕颈枢轴倾斜
+    c.save(); c.translate(0, -168); c.rotate(tilt);
+    circle(c, 0, -62, 66, skin, seed + 8, 3.4);
+    // 帽：半个纸球＋边带＋绒球
+    paper(c, [[-66, -68], [-56, -112], [-30, -134], [0, -142], [30, -134], [56, -112], [66, -68]], hat, { seed: seed + 9, lw: 3.4, amp: 1.6 });
+    paper(c, [[-68, -66], [68, -66], [68, -86], [-68, -86]], band, { seed: seed + 10, lw: 3.4, amp: 1.2 });
+    circle(c, 0, -150, 18, band, seed + 11, 3);
+    // 眼：两个白椭圆紧贴，黑点在里面朝向 lookx
+    const ex = 15, ey = -62; ell(c, -ex, ey, 17, 21, '#fff', seed + 12, 3); ell(c, ex, ey, 17, 21, '#fff', seed + 13, 3);
+    const px = (lookx - 0.5) * 12; c.fillStyle = OUT; [-ex, ex].forEach(xx => { c.beginPath(); c.arc(xx + px, ey + 2, 3.8, 0, TAU); c.fill(); });
+    // 嘴：黑色半椭圆，开合
+    const m = 4 + talk * 20; c.fillStyle = OUT; c.beginPath(); c.ellipse(0, -22, 14 + talk * 6, m, 0, 0, Math.PI); c.fill(); if (talk > 0.4) { c.fillStyle = '#c4412f'; c.beginPath(); c.ellipse(0, -22 + m * 0.5, 9, m * 0.4, 0, 0, Math.PI); c.fill(); }
+    c.restore(); c.restore();
+  }
+
+  function draw(c, lt, t) {
+    const T = clamp(lt, 0, 6), r = rng(2);
+    // 天与远山：平涂纸块
+    c.fillStyle = '#c9dce6'; c.fillRect(0, 0, W, H);
+    paper(c, [[0, 0], [W, 0], [W, 330], [0, 330]], '#bcd3e0', { seed: 21, lw: 0, amp: 3 });
+    paper(c, [[-20, 520], [260, 300], [520, 440], [860, 250], [1260, 460], [1560, 330], [1960, 520]], '#e9eef0', { seed: 22, lw: 3.4, amp: 4, step: 30 });
+    paper(c, [[260, 300], [330, 360], [300, 410], [380, 400], [330, 460], [420, 460], [520, 440]], '#a9b9c6', { seed: 23, lw: 0, amp: 3 });
+    paper(c, [[860, 250], [920, 330], [880, 350], [960, 380], [900, 440], [1000, 450], [1260, 460]], '#a9b9c6', { seed: 24, lw: 0, amp: 3 });
+    // 松树：三角叠三层
+    [[1440, 560, 1.1], [1560, 580, 0.9], [200, 560, 1.0], [320, 580, 0.8]].forEach(([x, y, s], i) => { paper(c, [[x - 8 * s, y], [x + 8 * s, y], [x + 8 * s, y + 60 * s], [x - 8 * s, y + 60 * s]], '#6b4a30', { seed: 30 + i, lw: 3 }); [[0, 70], [-26, 120], [-52, 170]].forEach(([dy, hw], k) => paper(c, [[x, y - 40 * s - dy * s * 0.2 + k * -20 * s], [x - (50 + k * 18) * s, y + 20 * s - k * 0 - (2 - k) * -20 * s + 0], [x + (50 + k * 18) * s, y + 20 * s + (2 - k) * 20 * s * 0]], '#2f5d3c', { seed: 40 + i * 3 + k, lw: 3.4, amp: 2 })); });
+    // 雪地：两层白纸，前面一层带灰蓝阴影块
+    paper(c, [[-20, 600], [W + 20, 600], [W + 20, H + 20], [-20, H + 20]], '#f4f7f8', { seed: 50, lw: 3.4, amp: 3, step: 40 });
+    paper(c, [[-20, 840], [600, 800], [1300, 830], [W + 20, 810], [W + 20, H + 20], [-20, H + 20]], '#e6edf0', { seed: 51, lw: 0, amp: 4, step: 30 });
+    // 公路（灰纸）＋黄虚线
+    paper(c, [[-20, 700], [W + 20, 700], [W + 20, 800], [-20, 800]], '#6c7378', { seed: 52, lw: 3.4, amp: 2.4, step: 30 });
+    for (let i = 0; i < 12; i++) paper(c, [[i * 170 + 20, 744], [i * 170 + 110, 744], [i * 170 + 110, 758], [i * 170 + 20, 758]], '#e8c13a', { seed: 60 + i, lw: 0, amp: 1.2 });
+    // 站牌：灰杆＋红八角形牌（不写字，画一个 ■ 示意）
+    paper(c, [[470, 520], [490, 520], [490, 840], [470, 840]], '#8c9296', { seed: 70, lw: 3.4 });
+    paper(c, [[420, 400], [470, 372], [540, 372], [590, 400], [590, 468], [540, 496], [470, 496], [420, 468]], '#c8402e', { seed: 71, lw: 3.6, amp: 1.6 });
+    paper(c, [[470, 420], [540, 420], [540, 450], [470, 450]], '#f6efe0', { seed: 72, lw: 0 });
+
+    // 校车：从右滑入，停在 x≈1210，车门在 3.7 秒啪地打开；车轮不转（剪纸整块平移）
+    const bx = lerp(2300, 1230, E.io(ss(0.2, 3.2, T))), by = 760;
+    c.save(); c.translate(bx, by);
+    paper(c, [[-420, -250], [330, -250], [350, -210], [350, 60], [-420, 60]], '#f0b92a', { seed: 80, lw: 4, amp: 2 });
+    paper(c, [[-420, -250], [330, -250], [350, -210], [350, -190], [-420, -190]], '#f6cc55', { seed: 81, lw: 0 });
+    for (let i = 0; i < 5; i++) paper(c, [[-380 + i * 110, -170], [-300 + i * 110, -170], [-300 + i * 110, -90], [-380 + i * 110, -90]], '#bcd3e0', { seed: 90 + i, lw: 3.4, amp: 1.2 });
+    paper(c, [[-420, -20], [350, -20], [350, 0], [-420, 0]], '#14120f', { seed: 100, lw: 0 });                          // 黑杠
+    const door = E.io(ss(3.6, 3.9, T)); paper(c, [[130, -190], [130 + 76 * (1 - door), -190], [130 + 76 * (1 - door), 40], [130, 40]], '#bcd3e0', { seed: 101, lw: 3.4, amp: 1 }); paper(c, [[130 + 76 * (1 - door), -190], [206, -190], [206, 40], [130 + 76 * (1 - door), 40]], '#2a2622', { seed: 102, lw: 3.4, amp: 1 });
+    [-250, 200].forEach((wx, i) => { circle(c, wx, 62, 62, '#14120f', 110 + i, 0); circle(c, wx, 62, 30, '#8c9296', 112 + i, 3); });
+    c.restore();
+
+    // 四个孩子（原创配色，不借具名角色的服装组合）：站在站牌右侧等车；车停后单列依次走到车门、进门（进门＝消失在车厢里）
+    const talkPhase = (k) => (Math.sin(T * 14 + k * 1.7) > 0.1 && T < 3.4 && (Math.floor(T * 1.3 + k) % 4 === k % 4)) ? 1 : 0;
+    const DOOR = 1400, STARTX = [720, 860, 1000, 1140];
+    const board = (k) => { const t0 = 3.9 + k * 0.5, q = clamp((T - t0) / 0.8); return { q, x: lerp(0, DOOR - STARTX[k], E.io(q)), hop: Math.abs(Math.sin(q * Math.PI * 3)) * 22 * (q > 0 && q < 1 ? 1 : 0) }; };
+    [
+      { parka: '#d65a7a', hat: '#4a4a52', band: '#f0d34a', seed: 200, s: 1.12 },
+      { parka: '#5a78c8', hat: '#d6803a', band: '#f2ece0', seed: 300, s: 1.04 },
+      { parka: '#8a8f3a', hat: '#8a3a5a', band: '#e8d9a0', seed: 400, s: 1.16 },
+      { parka: '#d9d2c0', hat: '#2f6a58', band: '#3a3a3a', seed: 500, s: 1.0 },
+    ].forEach((k, i) => {
+      const j = board(i); if (j.q >= 1) return;                                               // 进了车厢
+      const shiver = (T < 3.6) ? Math.sin(T * 30 + i) * 1.4 : 0, boarding = j.q > 0;
+      kid(c, { ...k, x: STARTX[i] + j.x + shiver, y: 842 + i % 2 * 10, hop: j.hop, tilt: Math.sin(T * 1.8 + i) * 0.07 + (T > 3.4 ? -0.1 : 0), talk: talkPhase(i), armL: Math.sin(T * 6 + i) * 0.05 + (boarding ? 0.5 : 0), armR: -0.05 + Math.sin(T * 5 + i) * 0.05 + (boarding ? -0.5 : 0), lookx: T > 1 ? 0.9 : 0.4 });
+    });
+    // 落雪：纸圆片，12fps 一格格往下掉（剪纸的步进感）
+    const st = Math.floor(T * 12) / 12; c.fillStyle = '#fff'; c.strokeStyle = 'rgba(100,110,120,.5)'; c.lineWidth = 1.4;
+    for (let i = 0; i < 130; i++) { const rr = rng(i * 7 + 1), x = (rr() * W + st * 40 * (0.5 + rr() * 0.6)) % W, y = ((rr() * H) + st * (90 + rr() * 90)) % H, s = 3 + rr() * 5; c.beginPath(); c.arc(x, y, s, 0, TAU); c.fill(); c.stroke(); }
+    c.save(); c.globalCompositeOperation = 'multiply'; c.globalAlpha = 0.55; c.drawImage(tex(), 0, 0); c.restore();
+  }
+  return { draw };
+})();

package/engine/scenes/53_pixar.js

@@ -0,0 +1,60 @@
+/* Original un-faced laundry appliance. Programmed 3D geometry and acting; no film assets. */
+SCENES['53_pixar']=(()=>{
+ let R,S,C,washer,drum,door,loose,clothGeo,clothes=[],bubbles=[],towelMeshes=[];
+ const T=()=>window.THREE, clamp=x=>Math.max(0,Math.min(1,x)),smooth=x=>{x=clamp(x);return x*x*(3-2*x)},mix=(a,b,u)=>a+(b-a)*u;
+ function mat(color,rough=.65,metal=0){return new THREE.MeshStandardMaterial({color,roughness:rough,metalness:metal});}
+ function box(x,y,z,w,h,d,m,parent=S){let o=new THREE.Mesh(new THREE.BoxGeometry(w,h,d),m);o.position.set(x,y,z);o.castShadow=o.receiveShadow=true;parent.add(o);return o;}
+ function sphere(x,y,z,rx,ry,rz,m,parent=S){let o=new THREE.Mesh(new THREE.SphereGeometry(1,24,16),m);o.position.set(x,y,z);o.scale.set(rx,ry,rz);o.castShadow=true;parent.add(o);return o;}
+ function cylinder(x,y,z,r,h,m,parent=S){let o=new THREE.Mesh(new THREE.CylinderGeometry(r,r,h,48),m);o.position.set(x,y,z);o.castShadow=o.receiveShadow=true;parent.add(o);return o;}
+ function tube(points,r,m,parent=S){let curve=new THREE.CatmullRomCurve3(points.map(p=>new THREE.Vector3(...p)));let o=new THREE.Mesh(new THREE.TubeGeometry(curve,48,r,8,false),m);parent.add(o);return o;}
+ function rounded(w,h,d,r,m,parent){let s=new THREE.Shape(),x=-w/2,y=-h/2;s.moveTo(x+r,y);s.lineTo(x+w-r,y);s.quadraticCurveTo(x+w,y,x+w,y+r);s.lineTo(x+w,y+h-r);s.quadraticCurveTo(x+w,y+h,x+w-r,y+h);s.lineTo(x+r,y+h);s.quadraticCurveTo(x,y+h,x,y+h-r);s.lineTo(x,y+r);s.quadraticCurveTo(x,y,x+r,y);let g=new THREE.ExtrudeGeometry(s,{depth:d,bevelEnabled:true,bevelThickness:r/3,bevelSize:r/3,bevelSegments:3,steps:1,curveSegments:12});g.translate(0,0,-d/2);let o=new THREE.Mesh(g,m);o.castShadow=o.receiveShadow=true;parent.add(o);return o;}
+ function fabricMat(color){const cv=document.createElement('canvas');cv.width=cv.height=256;let g=cv.getContext('2d');g.fillStyle=color;g.fillRect(0,0,256,256);for(let i=0;i<256;i+=2){g.fillStyle=i%4?'rgba(255,255,255,.08)':'rgba(40,25,10,.10)';g.fillRect(i,0,1,256);g.fillRect(0,i,256,1)}let tx=new THREE.CanvasTexture(cv);tx.wrapS=tx.wrapT=THREE.RepeatWrapping;tx.repeat.set(3,3);tx.colorSpace=THREE.SRGBColorSpace;return new THREE.MeshStandardMaterial({map:tx,roughness:.95,side:THREE.DoubleSide,bumpMap:tx,bumpScale:.012})}
+ function fabricGeometry(){const nx=24,ny=16,g=new THREE.BufferGeometry(),a=[],idx=[],uv=[];for(let j=0;j<=ny;j++)for(let i=0;i<=nx;i++){a.push(i/nx,j/ny,0);uv.push(i/nx,j/ny)}for(let j=0;j<ny;j++)for(let i=0;i<nx;i++){let k=j*(nx+1)+i;idx.push(k,k+1,k+nx+1,k+1,k+nx+2,k+nx+1)}g.setAttribute('position',new THREE.Float32BufferAttribute(a,3));g.setAttribute('uv',new THREE.Float32BufferAttribute(uv,2));g.setIndex(idx);g.computeVertexNormals();return g;}
+ function init(){if(R)return;const THREE=T();if(!THREE)throw Error('53_pixar requires lib/three.min.js');
+ R=new THREE.WebGLRenderer({alpha:false,antialias:true,preserveDrawingBuffer:true});R.setSize(1280,720);R.setPixelRatio(1);R.shadowMap.enabled=true;R.shadowMap.type=THREE.PCFSoftShadowMap;R.outputColorSpace=THREE.SRGBColorSpace;R.toneMapping=THREE.ACESFilmicToneMapping;R.toneMappingExposure=1.05;
+ S=new THREE.Scene();S.background=new THREE.Color('#bed1bd');C=new THREE.PerspectiveCamera(37,16/9,.1,100);C.position.set(7.3,5.1,10.4);C.lookAt(.25,1.75,0);
+ S.add(new THREE.HemisphereLight('#fff1d5','#527674',1.15));let key=new THREE.DirectionalLight('#ffedcc',3.1);key.position.set(-4,8,6);key.castShadow=true;key.shadow.mapSize.set(2048,2048);key.shadow.camera.left=-9;key.shadow.camera.right=9;key.shadow.camera.top=9;key.shadow.camera.bottom=-9;key.shadow.normalBias=.035;S.add(key);let fill=new THREE.DirectionalLight('#bde4dc',.55);fill.position.set(6,4,-1);S.add(fill);
+ const tile=mat('#94b7ab'),grout=mat('#d5ddce'),cream=mat('#efdfbd'),wood=mat('#ae6a3d'),orange=mat('#c76e42'),steel=mat('#b2bdb9',.27,.7),dark=mat('#243e3d',.45,.25),rubber=mat('#4d5953',.9),linen=mat('#eadfca');
+ box(0,-.16,0,24,.25,18,mat('#d2c8ad'));for(let i=-8;i<=8;i++)for(let j=-5;j<=4;j++){let m=((i+j)%2)?mat('#d3cbb7'):mat('#c9bda3');box(i*.85,-.025,j*.85,.823,.025,.823,m)}
+ box(0,3.5,-3.1,18,7,.25,grout);box(-5.6,3.5,1.2,.2,7,8.4,mat('#b8c5ae'));
+ for(let i=-9;i<10;i++)for(let j=0;j<7;j++)box(i*.66,.37+j*.64,-2.945,.64,.615,.035,tile);
+ // sunlit window and sill
+ box(3.4,4.5,-2.8,3.5,2.65,.12,cream);box(3.4,4.5,-2.68,3.15,2.32,.12,mat('#d7eddd'));box(3.4,4.5,-2.57,.09,2.38,.1,wood);box(3.4,4.5,-2.57,3.2,.09,.1,wood);box(3.4,3.22,-2.45,3.8,.18,.72,cream);
+ for(let k=0;k<4;k++){let pot=cylinder(2.3+k*.65,3.48,-2.25,.19,.38,orange);for(let v=0;v<5;v++){let leaf=sphere(2.3+k*.65+(v-2)*.1,3.9+.1*Math.sin(v),-2.25,.08,.32,.045,mat('#517c52'));leaf.rotation.z=(v-2)*.35}}
+ // washing-machine body with rounded enamel, separate rubber and chrome
+ washer=new THREE.Group();washer.position.set(-.7,1.95,.45);S.add(washer);rounded(3.25,3.65,2.55,.18,mat('#e8dfc8',.36),washer);box(0,1.33,1.35,2.94,.62,.13,cream,washer);
+ for(let x of [-1.18,1.18])for(let z of [-.88,.88])cylinder(x,-1.84,z,.17,.24,rubber,washer);
+ let dial=cylinder(.96,1.34,1.47,.19,.19,steel,washer);dial.rotation.x=Math.PI/2;box(-.7,1.35,1.46,.96,.25,.065,dark,washer);box(-.75,1.35,1.504,.5,.035,.01,mat('#d7c36a'),washer);
+ let rim=new THREE.Mesh(new THREE.TorusGeometry(1.06,.12,20,72),steel);rim.position.set(0,-.12,1.4);washer.add(rim);let seal=new THREE.Mesh(new THREE.TorusGeometry(.91,.08,16,72),rubber);seal.position.set(0,-.12,1.43);washer.add(seal);
+ let cavity=cylinder(0,-.12,1.32,.93,.18,dark,washer);cavity.rotation.x=Math.PI/2;
+ drum=new THREE.Group();drum.position.set(0,-.12,1.47);washer.add(drum);for(let i=0;i<28;i++){let a=i*Math.PI*2/28;let hole=sphere(Math.cos(a)*.78,Math.sin(a)*.78,0,.035,.035,.025,steel,drum)}
+ for(let i=0;i<8;i++){const col=['#cb6b47','#b9d4c1','#cfaf65','#e3d4b9'][i%4];let m=sphere(Math.cos(i*1.7)*.48,Math.sin(i*1.7)*.48,.035,.33,.20,.09,fabricMat(col),drum);m.rotation.z=i*.8;clothes.push(m)}
+ door=new THREE.Group();door.position.set(-1.02,-.12,1.49);washer.add(door);let ring=new THREE.Mesh(new THREE.TorusGeometry(.99,.075,16,80),mat('#e5eee5',.2,.35));ring.position.set(1.02,0,0);door.add(ring);let glass=cylinder(1.02,0,-.015,.92,.045,new THREE.MeshPhysicalMaterial({color:'#d1e6de',transparent:true,opacity:.14,roughness:.08,metalness:.1,side:THREE.DoubleSide}),door);glass.rotation.x=Math.PI/2;
+ box(1.85,.08,.09,.1,.4,.14,steel,door);
+ // a trapped orange sleeve; cloth topology deforms continuously around the clamped edge
+ clothGeo=fabricGeometry();loose=new THREE.Mesh(clothGeo,fabricMat('#c86239'));loose.castShadow=true;washer.add(loose);
+ // Basket and lived-in room detail
+ cylinder(2.35,.54,1.25,.82,1.05,mat('#9e7450'));for(let k=0;k<10;k++){let rr=new THREE.Mesh(new THREE.TorusGeometry(.83,.018,5,64),cream);rr.rotation.x=Math.PI/2;rr.position.set(2.35,.08+k*.1,1.25);S.add(rr)}
+ for(let k=0;k<12;k++)sphere(2.35+Math.sin(k*4)*.51,1.03+Math.sin(k*1.2)*.09,1.25+Math.cos(k*4)*.4,.33,.19,.28,fabricMat(k%2?'#e5c67b':'#b8c6b5'));
+ box(-3.7,1.13,-1.3,2.2,.14,2,wood);for(let x of [-4.6,-2.8])box(x,.55,-1.3,.12,1.1,1.7,cream);for(let k=0;k<4;k++)box(-3.7,1.3+k*.13,-1.3,1.5,.12,1.2,mat(['#adbdad','#e1cfb2','#be7957','#d8bea0'][k]));
+ tube([[-4.8,4,-2],[-2.8,3.91,-2],[0,3.92,-2],[2,4,-2]],.025,wood);
+ for(let k=0;k<3;k++){const g=fabricGeometry(),m=new THREE.Mesh(g,new THREE.MeshStandardMaterial({color:['#dcbd88','#b7ccc1','#cf8465'][k],roughness:1,side:THREE.DoubleSide}));S.add(m);towelMeshes.push({m,g,x:-4.5+k*1.03})}
+ // Feet shadow and restrained machine details.
+ let cv=document.createElement('canvas');cv.width=cv.height=128;let cg=cv.getContext('2d');let sg=cg.createRadialGradient(64,64,5,64,64,62);sg.addColorStop(0,'rgba(23,39,32,.48)');sg.addColorStop(1,'rgba(23,39,32,0)');cg.fillStyle=sg;cg.fillRect(0,0,128,128);let sh=new THREE.Mesh(new THREE.PlaneGeometry(5,4),new THREE.MeshBasicMaterial({map:new THREE.CanvasTexture(cv),transparent:true,depthWrite:false}));sh.rotation.x=-Math.PI/2;sh.position.set(-.7,.015,.4);S.add(sh);
+ for(let k=0;k<6;k++)box(-.95+k*.15,-1.4,1.35,.085,.018,.018,rubber,washer);
+ let tc=document.createElement('canvas');tc.width=512;tc.height=128;let tg=tc.getContext('2d');tg.fillStyle='#eee4cc';tg.fillRect(0,0,512,128);tg.fillStyle='#52675e';tg.font='bold 38px sans-serif';tg.fillText('MORNING / 06',28,80);let tm=new THREE.Mesh(new THREE.PlaneGeometry(1.18,.29),new THREE.MeshBasicMaterial({map:new THREE.CanvasTexture(tc)}));tm.position.set(-.55,.91,1.45);washer.add(tm);
+ // Small scuffs, seams, baseboards avoid an empty toy stage.
+ box(0,.17,-2.78,18,.18,.12,wood);for(let k=0;k<9;k++)box(-5+1.1*k,.45,-2.73,.22,.025,.015,mat('#638e82'));
+ }
+ function draw(c,lt){init();const t=Math.max(0,Math.min(6,lt));
+ let jam=smooth((t-.9)/.5)*(1-smooth((t-3.5)/.5));let release=smooth((t-3.7)/.7);
+ washer.rotation.z=(Math.sin(t*31)*.028+Math.sin(t*17)*.016)*jam;washer.position.y=1.95+Math.abs(Math.sin(t*31))*.035*jam;washer.position.x=-.7+Math.sin(t*26)*.035*jam;
+ drum.rotation.z=t<1.4?t*4.5:6.3+Math.sin((t-1.4)*18)*.07*jam-(smooth((t-3.2)/1.2))*2.5+(t>4.5?(t-4.5)*1.4:0);
+ door.rotation.y=-smooth((t-3.25)/.65)*.68;
+ let a=clothGeo.attributes.position,nx=24,ny=16;for(let j=0;j<=ny;j++)for(let i=0;i<=nx;i++){let u=i/nx,v=j/ny,idx=j*(nx+1)+i;let tug=Math.sin(t*24-v*3)*.07*jam*(v+.1);let xx=.45+(u-.5)*.48+Math.sin(v*5+t*3)*.06*v;let yy=Math.max(-1.928+.006*Math.sin(u*24+v*8),-.99-v*1.12-release*2.05);let zz=1.59+v*.7+Math.sin(u*16+v*9)*.045+Math.sin(v*7-t*4)*v*.075+tug; a.setXYZ(idx,xx,yy,zz)}a.needsUpdate=true;clothGeo.computeVertexNormals();
+ for(const {g,x} of towelMeshes){let a=g.attributes.position;for(let j=0;j<=16;j++)for(let i=0;i<=24;i++){let u=i/24,v=j/16,idx=j*25+i;a.setXYZ(idx,x+u*.75,3.9-v*1.35,-2+Math.sin(u*15)*.045+Math.sin(t*1.9+v*3+x)*v*.08)}a.needsUpdate=true;g.computeVertexNormals()}
+ // Deliberately held camera: movement is in the machine, drum and cloth.
+ R.render(S,C);c.drawImage(R.domElement,0,0,1920,1080);
+ }
+ return {draw};
+})();

package/engine/scenes/54_ghibli_lab.js

@@ -0,0 +1,68 @@
+/* Original urban bicycle-repair kiosk. Hand-painted environment + mechanical contact. */
+SCENES['54_ghibli_lab']=(()=>{
+ const T=Math.PI*2;let back,front;
+ const rng=n=>()=>((n=(n*1664525+1013904223)>>>0)/4294967296);
+ function P(g,p,col,stroke='#4e6158',w=2){g.beginPath();p.forEach((v,i)=>i?g.lineTo(...v):g.moveTo(...v));g.closePath();if(col){g.fillStyle=col;g.fill();}if(stroke){g.strokeStyle=stroke;g.lineWidth=w;g.stroke();}}
+ function L(g,p,col='#4e6158',w=2){g.beginPath();p.forEach((v,i)=>i?g.lineTo(...v):g.moveTo(...v));g.strokeStyle=col;g.lineWidth=w;g.lineCap='round';g.stroke();}
+ function R(g,x,y,w,h,col,stroke='#607363'){g.fillStyle=col;g.fillRect(x,y,w,h);if(stroke){g.strokeStyle=stroke;g.lineWidth=2;g.strokeRect(x,y,w,h);}}
+ function E(g,x,y,rx,ry,col){g.fillStyle=col;g.beginPath();g.ellipse(x,y,rx,ry,0,0,T);g.fill();}
+ function speck(g,x,y,w,h,n,seed,cols){const r=rng(seed);g.save();for(let i=0;i<n;i++){g.fillStyle=cols[i%cols.length];g.globalAlpha=.04+r()*.12;let xx=x+r()*w,yy=y+r()*h;g.beginPath();g.ellipse(xx,yy,2+r()*13,1+r()*4,r()*.4,0,T);g.fill();}g.restore();}
+ function pigment(canvas,seed){const g=canvas.getContext('2d'),r=rng(seed),src=g.getImageData(0,0,1920,1080),d=src.data;for(let i=0;i<72000;i++){let x=r()*1920,y=r()*1080,k=(Math.floor(y)*1920+Math.floor(x))*4;if(d[k+3]<180)continue;let delta=(r()-.5)*35;g.strokeStyle=`rgba(${d[k]+delta},${d[k+1]+delta},${d[k+2]+delta*.8},${.06+r()*.10})`;g.lineWidth=.6+r()*2.5;g.beginPath();g.moveTo(x,y);g.lineTo(x+3+r()*14,y+(r()-.5)*4);g.stroke();}const p=g.getImageData(0,0,1920,1080),a=p.data;for(let i=0;i<a.length;i+=4){if(a[i+3]<180)continue;let n=(r()-.5)*7;a[i]+=n;a[i+1]+=n;a[i+2]+=n;}g.putImageData(p,0,0);}
+ function window(g,x,y,w,h){R(g,x-5,y-5,w+10,h+10,'#c3ba8c');R(g,x,y,w,h,'#657f80');R(g,x+5,y+4,w-10,h*.44,'#94b2ac');L(g,[[x+w*.5,y],[x+w*.5,y+h]],'#e8ddb1',5);L(g,[[x,y+h*.5],[x+w,y+h*.5]],'#e8ddb1',5);L(g,[[x+4,y+h-4],[x+w-5,y+6]],'#d8dfbd55',4);}
+ function plant(g,x,y,s,seed){const r=rng(seed);P(g,[[x-30*s,y],[x+30*s,y],[x+23*s,y+48*s],[x-21*s,y+48*s]],'#a86f51');E(g,x,y,32*s,9*s,'#694e37');for(let i=0;i<20;i++){let a=r()*T,len=(30+r()*65)*s,xx=x+Math.cos(a)*len,yy=y-40*s-r()*60*s;L(g,[[x,y],[xx,yy]],'#4e7957',2*s);g.save();g.translate(xx,yy);g.rotate(a);E(g,0,0,17*s,6*s,i%3?'#60875a':'#9aaa62');L(g,[[-13*s,0],[14*s,0]],'#c2c77d',.7*s);g.restore();}}
+ function make(){if(back)return;back=document.createElement('canvas');back.width=1920;back.height=1080;let g=back.getContext('2d');let sky=g.createLinearGradient(0,0,0,620);sky.addColorStop(0,'#9dbeb8');sky.addColorStop(.7,'#d6d6ac');sky.addColorStop(1,'#efe2af');g.fillStyle=sky;g.fillRect(0,0,1920,1080);
+  // Hills and connected city blocks, observed roofs, wires and masonry.
+  P(g,[[0,270],[150,170],[300,208],[450,123],[620,210],[770,140],[950,258],[1250,177],[1510,242],[1920,120],[1920,650],[0,650]],'#95aa93',null);
+  for(let i=0;i<9;i++){let x=i*171-25,y=190+(i%3)*55,w=155;R(g,x,y,w,340,['#c9c8a4','#d0bba0','#adbcb0'][i%3]);P(g,[[x-8,y],[x+70,y-62],[x+w+10,y],[x+w,y+14],[x,y+14]],['#6c8e80','#ad7b64','#7f9a8b'][i%3]);P(g,[[x,y+14],[x+w,y+14],[x+w,y+38],[x,y+30]],'#516d6033',null);for(let row=0;row<2;row++)for(let j=0;j<2;j++){let wx=x+20+j*75,wy=y+45+row*113;window(g,wx,wy,42,70);if(i%2){R(g,wx-13,wy,9,70,'#788b71');for(let k=0;k<8;k++)L(g,[[wx-12,wy+k*9],[wx-5,wy+k*9]],'#566b58',1);}R(g,wx-7,wy+72,56,8,'#c1b78c');if(row===1&&i%3===0){R(g,wx-5,wy+65,51,15,'#a77b5a');for(let k=0;k<9;k++){E(g,wx+k*5,wy+60-(k%3)*5,6,7,'#6c8c5e');E(g,wx+k*5,wy+56-(k%3)*5,3,3,'#d69b7f');}}}L(g,[[x+w-8,y+20],[x+w-8,y+330],[x+w-21,y+337]],'#7d8e78',4);R(g,x+65,y-62,21,35,'#a39275');R(g,x+60,y-64,30,7,'#657c6c');if(i%3===1){R(g,x+18,y+277,120,55,'#5d8279');for(let k=0;k<6;k++)P(g,[[x+10+k*23,y+265],[x+33+k*23,y+265],[x+40+k*23,y+292],[x+17+k*23,y+292]],k%2?'#d3ba8b':'#b87859');}speck(g,x,y,w,330,130,i+54,['#7e9b85','#fff2b3','#9e8e73']);}
+  R(g,0,547,1920,183,'#b2b4a0');L(g,[[0,643],[1920,643]],'#e0d6ac',5);L(g,[[0,678],[1920,678]],'#6f857a',4);L(g,[[0,695],[1920,695]],'#e0d6ac',3);
+  for(let i=0;i<50;i++){let x=(i*127)%1920,y=562+(i*43)%140;L(g,[[x,y],[x+42,y-2]],'#859b8b44',2);}
+  // A plane tree's irregular leaf masses interrupt the repetitive street rhythm.
+  L(g,[[1258,572],[1255,437],[1215,339]],'#6d8066',18);L(g,[[1251,451],[1320,355]],'#6d8066',10);const treeR=rng(558);for(let i=0;i<620;i++){let a=treeR()*T,rad=Math.sqrt(treeR())*127,xx=1250+Math.cos(a)*rad,yy=329+Math.sin(a)*rad*.7;E(g,xx,yy,8+treeR()*17,5+treeR()*10,['#678b6b','#7e9b70','#a4b77d','#88a575','#bbbf89'][i%5]);}
+  // Overhead cable follows the rail direction and powers the tram's pantograph.
+  L(g,[[-20,158],[490,186],[980,179],[1510,164]],'#677e72',3);L(g,[[74,0],[74,562]],'#76846e',9);L(g,[[60,154],[380,154]],'#76846e',5);
+  speck(g,0,0,1920,1080,2900,545,['#fff0bd','#6c927f','#b5b28b']);
+  pigment(back,555);
+  front=document.createElement('canvas');front.width=1920;front.height=1080;g=front.getContext('2d');
+  // Open kiosk structure leaves most of the street unobstructed.
+  P(g,[[1415,0],[1920,0],[1920,1080],[1550,1080],[1435,716]],'#d8ccaa');speck(g,1415,0,505,1080,1700,549,['#a3ac91','#fff0bd','#b29976']);
+  R(g,1432,0,42,754,'#526e65');R(g,1474,0,14,754,'#d4d0a2');R(g,0,0,1440,64,'#54796b');R(g,0,64,1440,12,'#a9b28b');
+  P(g,[[0,720],[1448,702],[1920,1080],[0,1080]],'#b9b99b');speck(g,0,720,1920,360,1300,550,['#718d7c','#e9dcb0','#a89d78']);
+  for(let i=-4;i<11;i++)L(g,[[100+i*170,720],[50+i*256,1080]],'#83948155',2);for(let y=778;y<1080;y+=70)L(g,[[0,y],[1920,y]],'#81968044',2);
+  // Strong, coherent morning light, tied to the aperture and objects.
+  P(g,[[118,720],[846,713],[1290,1080],[367,1080]],'#f5e8af66',null);P(g,[[1435,716],[1484,716],[1747,1080],[1670,1080]],'#5a75642d',null);
+  // Wall tools with handles, hooks and tiny marks instead of ornamental symbols.
+  R(g,1557,129,313,344,'#a88f68');R(g,1567,139,293,324,'#c6b68b');for(let y=160;y<455;y+=25)for(let x=1582;x<1850;x+=25)E(g,x,y,1.4,1.4,'#957d5b');
+  for(let i=0;i<4;i++){let x=1610+i*65;L(g,[[x,179],[x,191]],'#71684c',3);if(i%2){L(g,[[x,195],[x,330]],'#737f70',11);E(g,x,208,17,22,'#7c8b7b');E(g,x,207,8,14,'#c6b68b');R(g,x-9,307,18,66,'#a05c45');}else{L(g,[[x,195],[x,336]],'#6e7f71',10);L(g,[[x-19,195],[x-14,221],[x+14,221],[x+19,195]],'#667c70',7);R(g,x-8,319,16,47,'#637d69');}}
+  // Long well-used repair bench, a perspective volume with imperfect wood grain.
+  P(g,[[1025,688],[1687,674],[1830,747],[1128,779]],'#b39061');P(g,[[1128,779],[1830,747],[1830,785],[1128,815]],'#8c704e');P(g,[[1025,688],[1128,779],[1128,815],[1025,726]],'#857556');for(let i=0;i<14;i++)L(g,[[1061+i*22,704+i*3],[1720+i*3,701+i*3]],'#dec18c66',1.4);
+  R(g,1150,809,24,271,'#7a7451');R(g,1763,783,30,297,'#7a7451');R(g,1180,947,580,18,'#8c805a');R(g,1224,831,277,67,'#ad9065');R(g,1235,839,254,48,'#bd9f70');L(g,[[1338,858],[1380,858]],'#6f795b',6);P(g,[[1450,927],[1651,927],[1674,947],[1475,947]],'#c6ab78');R(g,1475,897,199,50,'#ad9164');for(let j=0;j<5;j++)L(g,[[1490+j*38,900],[1490+j*38,942]],'#927e59',2);
+  // Two tins, packed parts tray, oil can, rag and bicycle pump.
+  E(g,1632,711,61,15,'#536655');R(g,1573,650,118,60,'#9cae91');E(g,1632,650,59,14,'#c9ccb0');E(g,1632,648,47,9,'#697d68');for(let i=0;i<8;i++){let x=1594+i*11;L(g,[[x,646],[x+6,604-i%3*13]],'#566f66',3);}
+  P(g,[[1395,727],[1528,724],[1570,743],[1433,753]],'#687c6e');for(let i=0;i<12;i++)E(g,1417+(i*37)%123,733+(i%3)*4,8,3,'#c1c8a6');
+  P(g,[[1691,671],[1738,665],[1750,708],[1698,712]],'#b4774d');L(g,[[1717,669],[1725,635],[1776,621]],'#b4774d',7);R(g,1705,656,22,13,'#647667');
+  // A bicycle at the open edge; tubes, spokes, chain and cast shadow agree.
+  E(g,586,1025,381,26,'#5a79602b');for(const x of [358,815]){g.beginPath();g.arc(x,908,123,0,T);g.strokeStyle='#455a52';g.lineWidth=13;g.stroke();g.strokeStyle='#bec7a5';g.lineWidth=3;g.beginPath();g.arc(x,908,111,0,T);g.stroke();for(let i=0;i<32;i++){let a=i*T/32;L(g,[[x,908],[x+Math.cos(a)*111,908+Math.sin(a)*111]],'#8a9f8d',1.2);}E(g,x,908,9,9,'#516d61');}
+  const red='#9c6254';L(g,[[358,908],[493,733],[574,908],[358,908]],red,10);L(g,[[493,733],[735,744],[574,908],[735,744],[815,908]],red,10);L(g,[[493,733],[478,691]],'#576f62',9);L(g,[[438,686],[507,686]],'#4e6052',16);L(g,[[735,744],[719,666],[773,643],[795,652]],'#536e63',9);E(g,574,908,31,31,'#66816c');E(g,574,908,23,23,'#9cae8c');L(g,[[574,908],[604,931],[633,930]],'#4c675c',6);L(g,[[360,908],[574,934],[574,882],[360,908]],'#718773',2);R(g,292,765,138,14,'#7b8e74');L(g,[[315,778],[336,888]],'#788974',3);L(g,[[420,778],[373,888]],'#788974',3);
+  plant(g,102,892,1.35,547);plant(g,945,787,.85,548);plant(g,1832,662,.8,551);
+  // Blue enamel kettle on an actual burner, cup and detached bicycle lamp.
+  E(g,1285,750,82,19,'#53695b44');R(g,1214,712,137,34,'#75816b');E(g,1284,714,50,13,'#435b50');
+  E(g,1283,672,59,58,'#4d8587');g.save();g.beginPath();g.ellipse(1283,672,59,58,0,0,T);g.clip();E(g,1308,696,52,51,'#396f78');E(g,1268,652,35,42,'#6caaa3');g.restore();P(g,[[1238,683],[1192,643],[1198,633],[1252,654]],'#6e9e99');E(g,1284,629,42,10,'#89b1a3');E(g,1284,621,13,8,'#4e6861');g.beginPath();g.arc(1288,649,51,Math.PI,0);g.strokeStyle='#566b58';g.lineWidth=10;g.stroke();L(g,[[1247,661],[1243,685]],'#adc6ac',5);
+  E(g,1396,711,35,9,'#526d5933');R(g,1371,667,48,44,'#e3d0a0');E(g,1395,667,24,7,'#eae0b8');E(g,1395,668,18,4,'#856c4c');g.beginPath();g.arc(1422,686,14,-1.6,1.6);g.strokeStyle='#c9b68b';g.lineWidth=6;g.stroke();
+  pigment(front,556);
+ }
+ function tram(g,x,t){g.save();g.translate(x,0);E(g,475,691,534,23,'#506d6830');for(let xx of [140,785]){E(g,xx,657,47,47,'#3e5b56');E(g,xx,657,31,31,'#86978a');for(let i=0;i<8;i++){let a=i*T/8-t*4;L(g,[[xx,657],[xx+Math.cos(a)*27,657+Math.sin(a)*27]],'#485f56',3);}}
+  P(g,[[-40,389],[-17,343],[49,325],[905,325],[959,354],[978,624],[947,664],[-13,664]],'#b76543','#556b5d',3);R(g,-20,459,979,104,'#e0bd7c');P(g,[[-25,350],[944,350],[936,392],[-28,392]],'#d7c8a0');
+  for(let i=0;i<7;i++){let xx=24+i*125;R(g,xx,376,103,145,'#465e5a');R(g,xx+5,381,93,105,'#8fb5ad');P(g,[[xx+5,381],[xx+35,381],[xx+93,461],[xx+93,486],[xx+70,486]],'#d6dfbe55',null);R(g,xx+5,491,93,25,'#5d7770');L(g,[[xx+52,381],[xx+52,486]],'#d6c89f',3);}
+  R(g,850,365,98,263,'#b7754d');R(g,860,380,76,134,'#7ea099');L(g,[[899,380],[899,626]],'#e6bf7f',3);L(g,[[859,592],[939,592]],'#9f6341',3);E(g,944,586,12,17,'#f1d393');L(g,[[2,628],[946,628]],'#e3b777',4);
+  // Roof pantograph stays in contact with the overhead wire.
+  L(g,[[450,323],[410,260],[486,194],[570,260],[523,323]],'#5d7568',5);L(g,[[460,193],[520,193]],'#526e62',6);R(g,353,313,280,16,'#688276');
+  speck(g,-10,535,952,112,180,554,['#f4c58a','#8b5b41']);g.restore();}
+ return {draw(c,lt){let t=Math.max(0,lt);make();c.drawImage(back,0,0);c.save();c.beginPath();c.rect(0,75,1435,645);c.clip();tram(c,1270-t*390,t);c.restore();c.drawImage(front,0,0);
+  // Steam rises continuously from the spout; translucent curls are attached to it.
+  for(let i=0;i<5;i++){let q=(t*.35+i*.2)%1,x=1193-24*q+Math.sin(t*1.8+i)*10,y=636-q*150;c.beginPath();c.moveTo(x,y);c.bezierCurveTo(x-23,y-22,x+31,y-34,x+5,y-57);c.strokeStyle=`rgba(240,237,207,${(1-q)*.47})`;c.lineWidth=4+q*9;c.stroke();}
+  // A hanging shop cloth responds to the tram's wake, with a fixed top seam.
+  let wind=Math.sin(t*2)*10+18*Math.exp(-Math.pow((t-3)/1.5,2));c.beginPath();c.moveTo(57,84);c.lineTo(256,84);c.bezierCurveTo(244,161,270+wind,235,248+wind,312);c.quadraticCurveTo(153+wind,333,65+wind*.7,310);c.bezierCurveTo(74+wind,217,54,144,57,84);c.closePath();c.fillStyle='#839c8fe8';c.fill();c.strokeStyle='#5a7a6d';c.lineWidth=2;c.stroke();for(let i=0;i<6;i++){c.beginPath();c.moveTo(78+i*30,85);c.quadraticCurveTo(65+i*30+wind*.5,196,78+i*30+wind,315);c.strokeStyle='#b8c4a078';c.lineWidth=2;c.stroke();}
+  // Dust only where morning light catches it, not a whole-frame particle layer.
+  for(let i=0;i<23;i++){let x=525+(i*47)%510+Math.sin(t*.4+i)*8,y=703+(i*73)%280-Math.sin(t*.3+i)*9;E(c,x,y,1.2,1.2,'#fff0c0aa');}
+ }};
+})();