@biunow/agent-biuart 0.0.0-stage → 0.1.1

package/engine/scenes/22_constructivism.js

@@ -0,0 +1,205 @@
+// 1924 俄罗斯构成主义海报（罗德琴科 / 李西茨基）——纯代码。
+// 管线：①缓存底版（米白旧纸＋斜红地面＋黑圆＋窗内网点照片与舒霍夫塔＋排版小构件）
+//      → ②会动的母题（红楔刺入黑圆、塔顶无线电波外扩、黑圆外虚线环旋转、标语字逐个盖章后波浪跳）
+//      → ③角色：平涂剪纸（红头巾共青团少女）＋皮肤是 45° 网点照片（照片拼贴）＋白色剪切边
+SCENES['22_constructivism'] = (() => {
+  const W = 1920, H = 1080, { clamp, lerp, ease } = U, P = PAINT, TAU = Math.PI * 2;
+  const C = { paper: '#e9dfc4', red: '#c8231c', redD: '#8f1711', ink: '#151311', cream: '#f4ecd6', gray: '#4a4640', ochre: '#e3b03e', ochreD: '#a87a1c', orange: '#e2741c' };
+  const poly = U.poly;
+
+  // 网点：P.halftoneGray（灰度照片网点，照片拼贴的核心）、P.shadeDots（路径内按函数落点的网点阴影）
+  const halftone = P.halftoneGray, shadeDots = P.shadeDots;
+
+  // ---------- 几何西里尔字（5×7 模块，罗德琴科式手绘方块字） ----------
+  const GL = {
+    'П': [[0, 0, 5, 1.3], [0, 0, 1.3, 7], [3.7, 0, 1.3, 7]],
+    'Е': [[0, 0, 1.3, 7], [0, 0, 5, 1.3], [0, 2.9, 4, 1.2], [0, 5.7, 5, 1.3]],
+    'Т': [[0, 0, 5, 1.3], [1.85, 0, 1.3, 7]],
+    'Ч': [[0, 0, 1.3, 4], [3.7, 0, 1.3, 7], [0, 2.9, 5, 1.2]],
+    'А': [{ p: [[0, 7], [1.8, 0], [3.2, 0], [1.4, 7]] }, { p: [[5, 7], [3.2, 0], [1.8, 0], [3.6, 7]] }, [1.0, 4.3, 3.0, 1.15]],
+    'Й': [[0, 1.7, 1.3, 5.3], [3.7, 1.7, 1.3, 5.3], { p: [[1.3, 5.5], [3.7, 2.0], [3.7, 3.7], [1.3, 7]] }, [1.2, 0, 2.6, 1.0]],   // 短音符收在字格内：伸出格外会被相邻字母/人物盖掉（第一版踩到）
+    '!': [[1.85, 0, 1.3, 4.8], [1.85, 5.7, 1.3, 1.3]],
+  };
+  function glyph(c, ch, x, y, u) {
+    const g = GL[ch]; if (!g) return;
+    // 逐部件各自 fill：同一 path 里反向绕行的两条斜腿会按 nonzero 规则互相抵消出洞（А 第一版踩到）
+    g.forEach(r => { c.beginPath(); if (r.p) { r.p.forEach((q, i) => i ? c.lineTo(x + q[0] * u, y + q[1] * u) : c.moveTo(x + q[0] * u, y + q[1] * u)); c.closePath(); } else c.rect(x + r[0] * u, y + r[1] * u, r[2] * u, r[3] * u); c.fill(); });
+  }
+
+  // ---------- ① 底版 ----------
+  const TOWER = [[540, 170, 430, 108], [430, 100, 342, 70], [342, 66, 268, 47], [268, 44, 208, 32], [208, 30, 168, 22]];
+  const TX = 600;
+  const bg = () => P.cached('cs_bg', W, H, (g) => {
+    g.drawImage(P.texture('cs_paper', C.paper, { scale: 0.0035, amt: 16, grain: 18, seed: 5, dark: '#d9c9a4' }), 0, 0);
+    // 左侧排版构件：斜黑条、红方块、几行「正文」黑条
+    g.save(); g.translate(170, 610); g.rotate(-0.5); g.fillStyle = C.ink; g.fillRect(-260, -30, 560, 58); g.restore();
+    g.save(); g.translate(150, 200); g.rotate(0.26); g.fillStyle = C.red; g.fillRect(-70, -70, 140, 140); g.restore();
+    g.save(); g.translate(60, 330); g.rotate(-0.08); g.fillStyle = C.ink; [180, 150, 200, 120, 170].forEach((w, k) => g.fillRect(0, k * 26, w, 10)); g.restore();
+    // 右侧：细斜线＋红圆点＋竖排「ЧАЙ」
+    g.strokeStyle = C.ink; g.lineWidth = 6; g.beginPath(); g.moveTo(1520, 250); g.lineTo(1920, 760); g.stroke();
+    g.fillStyle = C.red; g.beginPath(); g.arc(1790, 340, 46, 0, TAU); g.fill();
+    g.fillStyle = C.ink; g.fillRect(1660, 430, 120, 400);
+    g.fillStyle = C.cream; ['Ч', 'А', 'Й'].forEach((ch, k) => glyph(g, ch, 1682, 470 + k * 120, 15.5));
+    // 大黑圆（人物头后）
+    g.fillStyle = C.ink; g.beginPath(); g.arc(1330, 395, 215, 0, TAU); g.fill();
+    // 红色斜地面
+    g.fillStyle = C.red; g.beginPath(); g.moveTo(0, 905); g.lineTo(W, 856); g.lineTo(W, H); g.lineTo(0, H); g.closePath(); g.fill();
+    g.fillStyle = C.ink; g.beginPath(); g.moveTo(0, 899); g.lineTo(W, 850); g.lineTo(W, 862); g.lineTo(0, 911); g.closePath(); g.fill();
+    // 窗：网点照片（天空＋云）
+    const ph = P.canvas(), pg = ph.getContext('2d');
+    const sg = pg.createLinearGradient(0, 140, 0, 540); sg.addColorStop(0, '#5e5e5e'); sg.addColorStop(0.75, '#cfcfcf'); sg.addColorStop(1, '#e8e8e8');
+    pg.fillStyle = sg; pg.fillRect(370, 140, 420, 400);
+    [[460, 240, 90, 34], [700, 300, 110, 30], [520, 400, 140, 26]].forEach(([x, y, rx, ry]) => { const rg = pg.createRadialGradient(x, y, 4, x, y, rx); rg.addColorStop(0, 'rgba(250,250,250,.95)'); rg.addColorStop(1, 'rgba(250,250,250,0)'); pg.fillStyle = rg; pg.beginPath(); pg.ellipse(x, y, rx, ry * 2, 0, 0, TAU); pg.fill(); });
+    pg.fillStyle = '#2a2a2a'; pg.fillRect(370, 505, 420, 35);               // 远处厂房屋脊（暗）
+    [[390, 470, 50], [470, 485, 36], [690, 460, 70], [760, 480, 30]].forEach(([x, y, w]) => pg.fillRect(x, y, w, 60));
+    pg.fillRect(712, 360, 18, 120);                                           // 烟囱
+    g.fillStyle = C.cream; g.fillRect(370, 140, 420, 400);
+    halftone(g, ph, 370, 140, 420, 400, 7, C.ink, 0.8);
+    // 舒霍夫塔：五节双曲面，两组直母线
+    g.save(); g.beginPath(); g.rect(370, 140, 420, 400); g.clip();
+    g.strokeStyle = C.ink; g.lineCap = 'round';
+    TOWER.forEach(([y0, w0, y1, w1], k) => {
+      g.lineWidth = 2.6 - k * 0.25;
+      for (const dir of [1, -1]) for (let i = 0; i < 18; i++) {
+        const a = i / 18 * TAU, b = a + dir * 1.1;
+        const x0 = TX + Math.cos(a) * w0 / 2, x1 = TX + Math.cos(b) * w1 / 2;
+        if (Math.sin(a) < -0.2 && Math.sin(b) < -0.2) continue;               // 背面的线省掉，读起来更清楚
+        g.beginPath(); g.moveTo(x0, y0 + Math.sin(a) * w0 * 0.08); g.lineTo(x1, y1 + Math.sin(b) * w1 * 0.08); g.stroke();
+      }
+      g.lineWidth = 4; g.beginPath(); g.ellipse(TX, y1, w1 / 2, w1 * 0.08, 0, 0, TAU); g.stroke();
+    });
+    g.lineWidth = 4; g.beginPath(); g.moveTo(TX, 168); g.lineTo(TX, 140); g.stroke();
+    g.restore();
+    // 窗框（粗黑）＋红窗台
+    g.strokeStyle = C.ink; g.lineWidth = 26; g.strokeRect(357, 127, 446, 426);
+    g.fillStyle = C.red; g.fillRect(330, 554, 500, 30); g.fillStyle = C.ink; g.fillRect(330, 584, 500, 8);
+    // 桌：黑板面＋红边＋斜撑
+    g.fillStyle = C.ink; g.fillRect(810, 618, 400, 34); g.fillStyle = C.red; g.fillRect(810, 652, 400, 12);
+    g.fillStyle = C.ink; g.fillRect(842, 664, 24, 220); g.fillRect(1158, 664, 24, 220);
+    g.lineWidth = 14; g.strokeStyle = C.ink; g.beginPath(); g.moveTo(854, 870); g.lineTo(1170, 680); g.stroke();
+    // 凳：黑块
+    g.fillStyle = C.ink; g.fillRect(1440, 470, 34, 420); g.fillRect(1290, 740, 190, 26); g.fillRect(1300, 760, 22, 120);
+  });
+
+  // ---------- 少女 ----------
+  const girlPal = { skin: C.cream, hair: C.ochre, dress: '#2f2c29', sleeve: C.cream, cuff: C.red, line: C.ink, lw: 3 };
+  function girl(c, G, ch, lt) {
+    const tilt = G.tilt, nk = [1300, 425];
+    const HP = (x, y) => { const X = x - nk[0], Y = y - nk[1], cs = Math.cos(tilt), sn = Math.sin(tilt); return [nk[0] + X * cs - Y * sn, nk[1] + X * sn + Y * cs]; };
+    const L = C.ink;
+    const F = (p, col, lw = 3) => { if (!p) return; c.fillStyle = col; c.fill(p); if (lw) { c.strokeStyle = L; c.lineWidth = lw; c.stroke(p); } };
+    c.save(); c.lineJoin = 'round'; c.lineCap = 'round';
+    // 远侧袖（白衬衫）＋手
+    F(G.farSleeve, C.cream); F(G.farCuff, C.red, 2);
+    // 裙：深灰平涂＋网点阴影
+    F(G.skirt, '#34302c', 0);
+    shadeDots(c, G.skirt, 1090, 600, 380, 340, 9, '#0d0c0b', (x, y) => clamp((x - 1180) / 260) * 0.9);
+    c.strokeStyle = L; c.lineWidth = 3; c.stroke(G.skirt);
+    F(G.shoe, L, 0);
+    // 上身：白衬衫＋红领巾三角
+    F(G.torso, C.cream);
+    shadeDots(c, G.torso, 1270, 420, 170, 210, 8, '#7d766a', (x, y) => clamp((x - 1350) / 80));
+    const nkA = G.A.neck;
+    c.fillStyle = C.red; c.beginPath(); c.moveTo(nkA[0] - 18, nkA[1] - 2); c.lineTo(nkA[0] + 26, nkA[1] + 2); c.lineTo(nkA[0] - 2, nkA[1] + 62); c.closePath(); c.fill();
+    // 头发（金）＋红头巾
+    F(G.hairBack, C.ochre, 0); F(G.bangs, C.ochre, 0);
+    c.strokeStyle = C.ochreD; c.lineWidth = 3; G.hairLines.forEach(h => c.stroke(h));
+    // 皮肤：先画灰度「照片」到离屏，再网点化 → 照片拼贴
+    const S = P.scratch('csSkin'), sg = S.getContext('2d', { willReadFrequently: true });
+    sg.reset(); sg.clearRect(1100, 270, 300, 400);
+    const shade = (p, x0, x1, a, b) => { const gr = sg.createLinearGradient(x0, 0, x1, 0); gr.addColorStop(0, a); gr.addColorStop(1, b); sg.fillStyle = gr; sg.fill(p); };
+    shade(G.neck, 1285, 1325, '#b4b4b4', '#767676');
+    shade(G.face, 1250, 1330, '#fafafa', '#9c9c9c');
+    sg.fillStyle = 'rgba(90,90,90,.28)'; sg.beginPath(); sg.ellipse(G.cheek[0] + 16, G.cheek[1] + 4, 16, 12, 0, 0, TAU); sg.fill();   // 颧下阴影（轻）
+    shade(G.hand, G.A.hand[0] - 20, G.A.hand[0] + 20, '#d8d8d8', '#8a8a8a'); shade(G.farHand, 1146, 1218, '#f4f4f4', '#b0b0b0');
+    // 白色剪切边 + 网点
+    c.save(); c.strokeStyle = '#fbf7ea'; c.lineWidth = 7; [G.neck, G.face, G.farHand].forEach(p => c.stroke(p)); c.restore();
+    [G.neck, G.face, G.farHand].forEach(p => { c.fillStyle = C.cream; c.fill(p); });
+    halftone(c, S, 1135, 280, 220, 360, 4.6, C.ink, 0.74);
+    // 五官（照片上手工补的清晰笔画）＋红唇
+    if (ch.blink) { c.strokeStyle = L; c.lineWidth = 3; c.stroke(G.lid); }
+    else { c.fillStyle = L; c.beginPath(); c.ellipse(G.eye.x - 1, G.eye.y + 1, 5, 6.5, 0, 0, TAU); c.fill(); c.strokeStyle = L; c.lineWidth = 3; c.stroke(G.lid); G.lashes.forEach(l => { c.beginPath(); c.moveTo(...l[0]); c.lineTo(...l[1]); c.stroke(); }); }
+    c.lineWidth = 3.4; c.stroke(G.brow);
+    c.fillStyle = C.red; c.beginPath(); c.moveTo(...G.lips[0]); c.lineTo(...G.lips[1]); c.lineTo(...G.lips[2]); c.closePath(); c.fill();
+    // 头巾：盖住头顶与后脑，额前露金发；颈后打结两条尾
+    const kf = poly([[1280, 296], [1300, 285], [1330, 280], [1368, 291], [1402, 321], [1415, 368], [1405, 414], [1382, 440], [1356, 442], [1350, 410], [1342, 372], [1326, 334], [1304, 309]].map(p => HP(...p)));
+    const lock = poly([[1352, 425], [1372, 432], [1380, 470], [1372, 505], [1360, 470]].map(p => HP(...p)));
+    F(lock, C.ochre, 0); c.strokeStyle = C.ochreD; c.lineWidth = 2.5; c.stroke(lock);
+    F(kf, C.red, 3);
+    c.strokeStyle = C.redD; c.lineWidth = 3; c.beginPath(); [[1300, 300, 1390, 360], [1330, 292, 1400, 330]].forEach(([a, b, x, y]) => { const p0 = HP(a, b), p1 = HP(x, y); c.moveTo(...p0); c.lineTo(...p1); }); c.stroke();
+    const sw = Math.sin(lt * 9) * 6;                       // 头巾尾随动作轻摆
+    [[[1384, 432], [1446, 470 + sw], [1416, 478 + sw]], [[1378, 438], [1428, 500 - sw], [1400, 498 - sw]]].forEach(tri => F(poly(tri.map(p => HP(...p))), C.red, 3));
+    // 近侧手臂（白袖＋红袖口）、杯、手
+    F(G.upperArm, C.cream); F(G.foreArm, C.cream); F(G.cuff, C.red, 2);
+    sg.reset(); sg.clearRect(1100, 270, 300, 400); shade(G.hand, G.A.hand[0] - 18, G.A.hand[0] + 18, '#dcdcdc', '#7a7a7a');
+    c.save(); c.strokeStyle = '#fbf7ea'; c.lineWidth = 7; c.stroke(G.hand); c.restore(); c.fillStyle = C.cream; c.fill(G.hand);
+    halftone(c, S, G.A.hand[0] - 26, G.A.hand[1] - 26, 52, 52, 4.6, C.ink, 0.74);
+    RIG.drawCup(c, G.cup, { body: C.cream, rim: C.ink, line: L, lw: 3, hw: 7 });
+    c.save(); c.translate(G.cup.x, G.cup.y); c.rotate(G.cup.tilt); c.fillStyle = C.red; c.fillRect(-G.cup.w * 0.46, G.cup.h * 0.38, G.cup.w * 0.92, 9); c.restore();
+    c.fillStyle = C.cream; c.beginPath(); c.arc(G.thumb[0], G.thumb[1], 7, 0, TAU); c.fill(); c.strokeStyle = L; c.lineWidth = 2.4; c.stroke();
+    c.restore();
+  }
+
+  // ---------- 猫：剪纸平涂＋网点阴影＋粗黑条纹 ----------
+  function cat(c, K) {
+    c.save(); c.lineJoin = 'round'; c.lineCap = 'butt';
+    c.strokeStyle = C.ink; c.lineWidth = K.tailW + 8; c.stroke(K.tail); c.strokeStyle = C.orange; c.lineWidth = K.tailW; c.stroke(K.tail);
+    c.setLineDash([12, 14]); c.strokeStyle = C.ink; c.lineWidth = K.tailW * 0.9; c.stroke(K.tail); c.setLineDash([]);
+    const tip = K.tailPts[K.tailPts.length - 1]; c.fillStyle = C.cream; c.beginPath(); c.arc(tip[0], tip[1], K.tailW / 2, 0, TAU); c.fill();
+    c.fillStyle = C.orange; c.fill(K.body); shadeDots(c, K.body, 420, 660, 250, 250, 9, '#7a2f0c', (x, y) => clamp((x - 520) / 140) * 0.8 + clamp((y - 820) / 90) * 0.3);
+    c.strokeStyle = C.ink; c.lineWidth = 4; c.stroke(K.body);
+    K.legs.forEach(l => { c.fillStyle = C.cream; c.fill(l); c.stroke(l); });
+    c.fillStyle = C.cream; c.fill(K.white);
+    c.fillStyle = C.orange; c.fill(K.head); c.stroke(K.head);
+    c.save(); c.clip(K.head); c.fillStyle = C.cream; c.beginPath(); c.ellipse(K.nose[0] - 22, K.nose[1] + 12, 36, 26, 0, 0, TAU); c.fill(); c.restore();
+    c.fillStyle = C.red; K.earInner.forEach(e => { c.beginPath(); e.forEach((p, i) => i ? c.lineTo(...p) : c.moveTo(...p)); c.fill(); });
+    c.strokeStyle = C.ink; c.lineWidth = 10; K.stripes.forEach(s => { c.beginPath(); c.moveTo(...s[0]); c.lineTo(...s[1]); c.stroke(); });
+    K.eyes.forEach(e => { if (K.blink) { c.lineWidth = 4; c.beginPath(); c.moveTo(e.x - 9, e.y); c.lineTo(e.x + 9, e.y); c.stroke(); }
+      else { c.fillStyle = C.cream; c.beginPath(); c.arc(e.x, e.y, 10, 0, TAU); c.fill(); c.lineWidth = 3; c.stroke(); c.fillStyle = C.ink; c.fillRect(e.x - 1, e.y - 8, 5, 16); } });
+    c.fillStyle = C.red; c.beginPath(); c.moveTo(K.nose[0] - 7, K.nose[1] - 4); c.lineTo(K.nose[0] + 7, K.nose[1] - 4); c.lineTo(K.nose[0], K.nose[1] + 5); c.fill();
+    c.lineWidth = 2; K.whiskers.forEach(w => { c.beginPath(); c.moveTo(...w[0]); c.lineTo(...w[1]); c.stroke(); });
+    c.restore();
+  }
+
+  const SLOGAN = 'ПЕЙТЕ ЧАЙ!';
+  return {
+    draw(c, lt, t) {
+      const ch = P.choreo(lt, t);
+      c.drawImage(bg(), 0, 0);
+      // 黑圆外的红虚线环（旋转）
+      c.save(); c.strokeStyle = C.red; c.lineWidth = 12; c.setLineDash([46, 22]); c.lineDashOffset = -lt * 260;
+      c.beginPath(); c.arc(1330, 395, 242, 0, TAU); c.stroke(); c.restore();
+      // 李西茨基红楔：沿轴线刺入黑圆（1.6Hz 进退）
+      const thrust = 70 * (0.5 - 0.5 * Math.cos(lt * TAU * 1.6)), ax = Math.cos(0.34), ay = Math.sin(0.34);
+      const tipX = 1150 + ax * thrust, tipY = 360 + ay * thrust;
+      c.fillStyle = C.red; c.beginPath(); c.moveTo(tipX, tipY); c.lineTo(tipX - ax * 330 - ay * 95, tipY - ay * 330 + ax * 95); c.lineTo(tipX - ax * 330 + ay * 95, tipY - ay * 330 - ax * 95); c.closePath(); c.fill();
+      // 窗内：塔顶无线电波（红弧外扩）
+      c.save(); c.beginPath(); c.rect(370, 140, 420, 400); c.clip(); c.strokeStyle = C.red; c.lineCap = 'butt';
+      for (let k = 0; k < 4; k++) { const ph = (lt * 1.4 + k / 4) % 1, r = 18 + ph * 230; c.globalAlpha = 1 - ph; c.lineWidth = 10 - ph * 6;
+        c.beginPath(); c.arc(TX, 150, r, Math.PI * 0.05, Math.PI * 0.95, true); c.stroke(); }
+      c.restore();
+      // 角色
+      const K = RIG.cat({ tail: ch.tail, blink: ch.blink, breathe: ch.breathe });
+      cat(c, K);
+      const G = RIG.girl({ cup: ch.cup, sip: ch.sip, breathe: ch.breathe });
+      girl(c, G, ch, lt);
+      // 地面标语（画在角色之上：海报字压人物）：逐字盖章（0–0.5s）→ 之后波浪跳
+      c.save(); c.translate(0, 0); const ang = Math.atan2(-49, W); c.rotate(ang);
+      const u = 19, adv = 6.3 * u; let x = 350;
+      [...SLOGAN].forEach((chh, k) => {
+        if (chh === ' ') { x += 3.5 * u; return; }
+        const q = clamp((lt - k * 0.045) / 0.12); if (q <= 0) { x += adv; return; }
+        const s = 1 + 0.5 * (1 - ease.out(q)), hop = -10 * Math.max(0, Math.sin(lt * 11 - k * 0.8));
+        c.save(); c.translate(x + 2.5 * u, 990 + hop); c.scale(s, s); c.globalAlpha = q;
+        c.fillStyle = k % 4 === 3 ? C.ink : C.cream; glyph(c, chh, -2.5 * u, -3.5 * u, u); c.restore();
+        x += adv;
+      });
+      c.restore();
+      // 杯上热气：三条黑折线上行
+      c.save(); c.strokeStyle = C.ink; c.lineWidth = 4; c.lineJoin = 'miter';
+      for (let k = 0; k < 3; k++) { const ph = (lt * 2 + k / 3) % 1, x0 = G.cup.x - 14 + k * 14, y0 = G.cup.y - 12 - ph * 60; c.globalAlpha = 1 - ph;
+        c.beginPath(); c.moveTo(x0, y0); c.lineTo(x0 + 7, y0 - 9); c.lineTo(x0, y0 - 18); c.lineTo(x0 + 7, y0 - 27); c.stroke(); }
+      c.restore();
+    },
+  };
+})();

package/engine/scenes/23_dali.js

@@ -0,0 +1,221 @@
+// 1931 达利超现实主义（《记忆的永恒》）——纯代码。
+// 管线：①缓存底版（群青→淡黄天空、玻璃般静海、克雷乌斯角金色礁岩、赭色荒原、开窗的断墙残片、石块桌）
+//      → ②长影子：每个物体的剪影用一个剪切仿射投到地面（kx 随时间增大＝影子缓慢变长），先进离屏再整体半透明叠，避免重叠加深
+//      → ③软钟：圆盘 (u,v) → 屏幕的折叠映射，越过边缘的部分垂下并随时间继续下垂；刻度与指针走同一映射
+//      → ④会动的母题（软钟下垂＋指针转、高跷象在地平线上迈步、蚂蚁绕怀表爬、影子变长）
+//      → ⑤角色：无勾线学院派体积（线性渐变＋clip 内模糊描边做内阴影）＋细五官
+SCENES['23_dali'] = (() => {
+  const W = 1920, H = 1080, { clamp, lerp, ease } = U, P = PAINT, TAU = Math.PI * 2;
+  const HZ = 560, GROUND = 592;                          // 海平线、岸线
+  const C = { sky0: '#22407c', sky1: '#5f88bd', sky2: '#e9dcae', sea: '#6f8fa6', ground0: '#d2ad70', ground1: '#7a5129', shadow: '#2a1a10',
+    wall: '#e7dcc3', wallD: '#a99a7c', wood: '#7a4a24', woodL: '#a8703a', block: '#8a5a32', blockL: '#b98754', gold: '#d9b25a', dial: '#efe6c8', orange: '#d8621f' };
+
+  const vol = P.vol;   // 体积填色：线性渐变＋路径内模糊暗边（学院派，无勾线）
+
+  // ---------- ① 底版 ----------
+  const bg = () => P.cached('dali_bg', W, H, (g) => {
+    const sg = g.createLinearGradient(0, 0, 0, HZ); sg.addColorStop(0, C.sky0); sg.addColorStop(0.55, C.sky1); sg.addColorStop(1, C.sky2);
+    g.fillStyle = sg; g.fillRect(0, 0, W, HZ + 2);
+    // 细长粉云
+    [[200, 300, 260, 7], [700, 250, 340, 6], [1280, 330, 300, 8], [900, 420, 420, 5]].forEach(([x, y, w, h]) => { const rg = g.createLinearGradient(x - w, 0, x + w, 0); rg.addColorStop(0, 'rgba(250,215,200,0)'); rg.addColorStop(0.5, 'rgba(250,215,200,.55)'); rg.addColorStop(1, 'rgba(250,215,200,0)'); g.fillStyle = rg; g.beginPath(); g.ellipse(x, y, w, h, 0, 0, TAU); g.fill(); });
+    // 静海（玻璃般，几道高光线）
+    const mg = g.createLinearGradient(0, HZ, 0, GROUND); mg.addColorStop(0, '#8aa6b8'); mg.addColorStop(1, '#4f6f86'); g.fillStyle = mg; g.fillRect(0, HZ, W, GROUND - HZ);
+    g.strokeStyle = 'rgba(240,235,210,.6)'; g.lineWidth = 1.5; [568, 574, 583].forEach((y, k) => { g.beginPath(); g.moveTo(80 + k * 140, y); g.lineTo(700 + k * 200, y); g.stroke(); });
+    // 克雷乌斯角礁岩（右侧，金色，光滑高光）
+    const cliff = new Path2D(); cliff.moveTo(1380, GROUND); [[1420, 540], [1470, 500], [1520, 470], [1590, 460], [1640, 430], [1700, 440], [1760, 410], [1830, 430], [1920, 420], [1920, GROUND]].forEach(p => cliff.lineTo(...p)); cliff.closePath();
+    vol(g, cliff, 1400, 420, 1500, 600, '#e8c27a', '#9a6a34', 'rgba(70,40,15,.5)', 18);
+    g.strokeStyle = 'rgba(255,240,200,.7)'; g.lineWidth = 3; g.beginPath(); g.moveTo(1470, 505); g.quadraticCurveTo(1530, 480, 1590, 470); g.moveTo(1650, 440); g.quadraticCurveTo(1700, 445, 1760, 418); g.stroke();
+    // 荒原：近暗远亮，几道细地层线
+    const gg = g.createLinearGradient(0, GROUND, 0, H); gg.addColorStop(0, C.ground0); gg.addColorStop(0.45, '#a87a44'); gg.addColorStop(1, C.ground1); g.fillStyle = gg; g.fillRect(0, GROUND, W, H - GROUND);
+    g.strokeStyle = 'rgba(90,55,25,.25)'; g.lineWidth = 2; for (let k = 0; k < 9; k++) { const y = GROUND + Math.pow(k / 9, 1.6) * 480 + 10; g.beginPath(); g.moveTo(0, y); g.bezierCurveTo(600, y - 6, 1300, y + 8, W, y - 2); g.stroke(); }
+    // 画布纹＋暖色上光油
+    g.fillStyle = 'rgba(255,200,120,.06)'; g.fillRect(0, 0, W, H);
+    g.drawImage(P.grain('dali', 0.05, [70, 45, 20], 0.10), 0, 0);
+  });
+
+  const wallLayer = () => P.cached('dali_wall', W, H, (g) => {
+    // 断墙残片（开窗，立在荒原上，基线 y=700）
+    const wall = new Path2D(); wall.moveTo(300, 700); [[300, 120], [330, 96], [372, 108], [410, 78], [470, 92], [540, 70], [610, 88], [680, 64], [760, 90], [820, 80], [858, 104], [860, 700]].forEach(p => wall.lineTo(...p)); wall.closePath();
+    wall.rect(370, 140, 420, 400);                         // 窗洞（evenodd 挖空）
+    g.save(); const wg = g.createLinearGradient(300, 0, 860, 0); wg.addColorStop(0, '#f4ead2'); wg.addColorStop(1, '#cdbf9f'); g.fillStyle = wg; g.fill(wall, 'evenodd'); g.restore();
+    g.fillStyle = '#9d8c6c'; g.beginPath(); g.moveTo(860, 104); g.lineTo(892, 120); g.lineTo(892, 712); g.lineTo(860, 700); g.closePath(); g.fill();   // 墙侧面
+    g.strokeStyle = 'rgba(110,90,60,.55)'; g.lineWidth = 1.6; [[[330, 300], [352, 340], [344, 390], [360, 430]], [[820, 600], [800, 640], [812, 690]], [[640, 92], [652, 118], [646, 136]]].forEach(cr => { g.beginPath(); cr.forEach((p, i) => i ? g.lineTo(...p) : g.moveTo(...p)); g.stroke(); });
+    // 窗内：同一片风景（更亮更远）＋窗框
+    g.save(); g.beginPath(); g.rect(370, 140, 420, 400); g.clip();
+    const ig = g.createLinearGradient(0, 140, 0, 540); ig.addColorStop(0, '#3d64a2'); ig.addColorStop(0.85, '#f0e1b4'); ig.addColorStop(1, '#f6ecc8'); g.fillStyle = ig; g.fillRect(370, 140, 420, 400);
+    g.fillStyle = '#7f9db3'; g.fillRect(370, 505, 420, 35); g.strokeStyle = 'rgba(250,245,220,.7)'; g.lineWidth = 1.4; g.beginPath(); g.moveTo(400, 515); g.lineTo(600, 515); g.moveTo(520, 528); g.lineTo(760, 528); g.stroke();
+    // 窗里漂浮的一只蛋（达利母题）
+    const eg = g.createRadialGradient(560, 300, 6, 580, 330, 70); eg.addColorStop(0, '#fffaf0'); eg.addColorStop(1, '#bfae8e'); g.fillStyle = eg; g.beginPath(); g.ellipse(580, 330, 46, 60, 0, 0, TAU); g.fill();
+    g.restore();
+    g.lineWidth = 18; g.strokeStyle = C.wood; g.strokeRect(361, 131, 438, 418); g.lineWidth = 4; g.strokeStyle = C.woodL; g.strokeRect(356, 126, 448, 428);
+    g.fillStyle = C.woodL; g.fillRect(340, 548, 480, 18); g.fillStyle = C.wood; g.fillRect(340, 566, 480, 12);
+    // 枯橄榄枝：从墙头右上角伸出（挂软钟用）
+    g.strokeStyle = '#4a3020'; g.lineCap = 'round'; g.lineWidth = 12; g.beginPath(); g.moveTo(850, 112); g.bezierCurveTo(900, 90, 960, 104, 1040, 96); g.stroke();
+    g.lineWidth = 6; g.beginPath(); g.moveTo(960, 100); g.quadraticCurveTo(990, 70, 1000, 46); g.moveTo(1010, 98); g.lineTo(1070, 112); g.stroke();
+  });
+  const blockLayer = () => P.cached('dali_block', W, H, (g) => {
+    // 石块桌：顶面＋正面（光从左来）
+    g.fillStyle = C.blockL; g.beginPath(); g.moveTo(810, 620); g.lineTo(1205, 620); g.lineTo(1190, 600); g.lineTo(826, 600); g.closePath(); g.fill();
+    const bk = new Path2D(); bk.rect(810, 620, 395, 285); vol(g, bk, 810, 0, 1205, 0, '#b07a46', '#6e4422', 'rgba(40,20,8,.5)', 22);
+    // 少女的凳子（深色木块）
+    const st = new Path2D(); st.rect(1300, 742, 190, 163); vol(g, st, 1300, 0, 1490, 0, '#8a5a32', '#4a2c14', 'rgba(30,15,5,.5)', 16);
+  });
+
+  // ---------- ③ 软钟：圆盘局部坐标 (u,v)∈半径 R → 屏幕；v 越过折线 fold 的部分垂下 ----------
+  function softMap(o, sag) {
+    const { cx, cy, R, fold, top = 0.32, flare = -0.12, drip = 0.18 } = o;   // flare<0：垂下部分像软布一样往外摊开，下缘圆而不是尖
+    return (u, v) => {
+      if (v <= fold) return [cx + u, cy + v * top + Math.sin(u * 0.05) * 2];
+      const d = v - fold, q = d / R;
+      return [cx + u * (1 - flare * q) + Math.sin(q * 3) * 5 * sag, cy + fold * top + d * (0.62 + 0.3 * sag) + sag * R * drip * Math.exp(-(((u + R * 0.2) / (R * 0.6)) ** 2)) * q * q + Math.sin(u * 0.06 + 1) * 6 * q];
+    };
+  }
+  function softClock(c, o, sag, t, handSpeed) {
+    const m = softMap(o, sag), R = o.R;
+    const ring = (r) => { const pts = []; for (let i = 0; i <= 120; i++) { const a = i / 120 * TAU; pts.push(m(Math.cos(a) * r, Math.sin(a) * r)); } return pts; };
+    const path = pts => { const p = new Path2D(); pts.forEach((q, i) => i ? p.lineTo(...q) : p.moveTo(...q)); p.closePath(); return p; };
+    const outer = path(ring(R)), inner = path(ring(R * 0.86));
+    // 投影（贴着表面的软影）
+    c.save(); c.translate(-8, 10); c.fillStyle = 'rgba(30,15,5,.35)'; c.filter = 'blur(6px)'; c.fill(outer); c.restore();
+    vol(c, outer, o.cx - R, 0, o.cx + R, 0, '#f0d27c', '#9a7426', 'rgba(70,45,10,.5)', 8);
+    const fg = c.createLinearGradient(0, o.cy - R * 0.3, 0, o.cy + R * 1.4); fg.addColorStop(0, '#f6efd6'); fg.addColorStop(0.45, '#e8dcb6'); fg.addColorStop(1, '#bfae84');
+    c.fillStyle = fg; c.fill(inner);
+    // 刻度与罗马数字的「点」：走同一映射
+    c.fillStyle = '#3a2a18';
+    for (let k = 0; k < 12; k++) { const a = k / 12 * TAU - Math.PI / 2, p0 = m(Math.cos(a) * R * 0.74, Math.sin(a) * R * 0.74), p1 = m(Math.cos(a) * R * 0.8, Math.sin(a) * R * 0.8);
+      c.strokeStyle = '#3a2a18'; c.lineWidth = k % 3 ? 2 : 4; c.beginPath(); c.moveTo(...p0); c.lineTo(...p1); c.stroke(); }
+    // 指针（沿映射采样成软线）
+    const hand = (ang, len, w) => { c.lineWidth = w; c.lineCap = 'round'; c.beginPath(); for (let i = 0; i <= 12; i++) { const r = len * i / 12, q = m(Math.cos(ang) * r, Math.sin(ang) * r); i ? c.lineTo(...q) : c.moveTo(...q); } c.stroke(); };
+    c.strokeStyle = '#2a1c10'; hand(t * handSpeed - 1.2, R * 0.66, 4); hand(t * handSpeed / 12 + 0.6, R * 0.46, 6);
+    const cc = m(0, 0); c.fillStyle = '#2a1c10'; c.beginPath(); c.arc(cc[0], cc[1], 4, 0, TAU); c.fill();
+    // 折线上的高光（柔软的「棱」）
+    c.strokeStyle = 'rgba(255,250,225,.55)'; c.lineWidth = 3; c.beginPath(); for (let i = 0; i <= 30; i++) { const u = -R * 0.9 + i / 30 * R * 1.8, q = m(u, o.fold + 2); i ? c.lineTo(...q) : c.moveTo(...q); } c.stroke();
+    return outer;
+  }
+
+  // ---------- 高跷象 ----------
+  function elephant(c, x, lt) {
+    const y = 400, legH = GROUND - 2 - y;
+    c.save(); c.fillStyle = '#5a4a46'; c.strokeStyle = '#5a4a46'; c.lineCap = 'round';
+    // 四条细长腿：交替迈步（关节处微弯）
+    [[-26, 0], [-12, Math.PI], [18, Math.PI * 0.5], [30, Math.PI * 1.5]].forEach(([ox, ph]) => {
+      const sw = Math.sin(lt * 7 + ph), fx = x + ox + sw * 10, kx = x + ox + sw * 4 + 3, ky = y + legH * 0.52 - Math.max(0, sw) * 6;
+      c.lineWidth = 2.6; c.beginPath(); c.moveTo(x + ox, y + 8); c.lineTo(kx, ky); c.lineTo(fx, GROUND - 2 - Math.max(0, sw) * 5); c.stroke();
+    });
+    const bob = Math.sin(lt * 14) * 1.5;
+    c.beginPath(); c.ellipse(x, y + bob, 54, 28, 0, 0, TAU); c.fill();
+    c.beginPath(); c.ellipse(x - 44, y - 8 + bob, 18, 16, 0, 0, TAU); c.fill();                      // 头（朝左）
+    c.lineWidth = 6; c.beginPath(); c.moveTo(x - 56, y - 2 + bob); c.quadraticCurveTo(x - 72, y + 30, x - 64 + Math.sin(lt * 5) * 6, y + 52); c.stroke();   // 象鼻
+    // 背上的方尖碑与鞍布
+    c.fillStyle = '#c8402c'; c.fillRect(x - 22, y - 26 + bob, 40, 8);
+    c.fillStyle = '#e6d6b0'; c.beginPath(); c.moveTo(x - 10, y - 26 + bob); c.lineTo(x + 6, y - 26 + bob); c.lineTo(x - 2, y - 96 + bob); c.closePath(); c.fill();
+    c.fillStyle = 'rgba(255,235,200,.35)'; c.beginPath(); c.ellipse(x - 14, y - 10 + bob, 26, 6, -0.2, 0, TAU); c.fill();   // 左上受光
+    c.restore();
+  }
+
+  // ---------- 蚂蚁怀表 ----------
+  function antWatch(c, lt) {
+    const x = 1030, y = 606;
+    const wg = c.createRadialGradient(x - 10, y - 8, 3, x, y, 40); wg.addColorStop(0, '#f39a4a'); wg.addColorStop(1, '#9a3a10');
+    c.fillStyle = 'rgba(30,15,5,.35)'; c.beginPath(); c.ellipse(x + 10, y + 8, 40, 11, 0, 0, TAU); c.fill();
+    c.fillStyle = wg; c.beginPath(); c.ellipse(x, y, 38, 13, 0, 0, TAU); c.fill();
+    c.fillStyle = '#c9a24a'; c.beginPath(); c.ellipse(x + 36, y - 4, 7, 5, 0, 0, TAU); c.fill();
+    c.fillStyle = '#120a06';
+    for (let k = 0; k < 9; k++) { const a = lt * (1.6 + (k % 3) * 0.5) * (k % 2 ? 1 : -1) + k * 0.7, r = 0.35 + (k % 4) * 0.14;
+      const ax = x + Math.cos(a) * 32 * r, ay = y + Math.sin(a) * 10 * r, d = a + (k % 2 ? Math.PI / 2 : -Math.PI / 2);
+      for (let s = -1; s <= 1; s++) { c.beginPath(); c.ellipse(ax + Math.cos(d) * s * 3.2, ay + Math.sin(d) * s * 1.2, 2, 1.4, d, 0, TAU); c.fill(); } }
+  }
+
+  // ---------- 角色 ----------
+  function girl(c, G, ch) {
+    c.save();
+    const sk = ['#f6dcc6', '#d9a888'], dress = ['#c9d9e6', '#6e8aa6'], hair = ['#f4d98a', '#b98a34'];
+    vol(c, G.farSleeve, 1200, 560, 1340, 600, dress[0], dress[1]); vol(c, G.farHand, 1150, 0, 1218, 0, sk[0], sk[1], 'rgba(120,60,40,.35)', 6);
+    vol(c, G.skirt, 1100, 650, 1450, 900, '#dce8f0', dress[1], 'rgba(40,50,70,.45)', 26);
+    c.save(); c.clip(G.skirt); c.strokeStyle = 'rgba(60,80,110,.35)'; c.lineWidth = 10; c.filter = 'blur(5px)'; G.folds.forEach(f => c.stroke(f)); c.restore();
+    vol(c, G.shoe, 1100, 0, 1150, 0, '#6a3a22', '#2a140a', null);
+    vol(c, G.torso, 1290, 440, 1420, 600, dress[0], dress[1], 'rgba(40,50,70,.45)', 18);
+    // 白色小翻领
+    c.fillStyle = '#fbf6ea'; c.beginPath(); const nk = G.A.neck; c.ellipse(nk[0] + 4, nk[1] + 6, 30, 12, 0.1, 0, TAU); c.fill();
+    vol(c, G.neck, 1286, 0, 1324, 0, sk[0], sk[1], 'rgba(120,60,40,.35)', 6);
+    vol(c, G.hairBack, 1270, 300, 1400, 440, hair[0], hair[1], 'rgba(110,70,20,.45)', 12); vol(c, G.bun, 1360, 340, 1420, 400, hair[0], hair[1], 'rgba(110,70,20,.45)', 8);
+    // 卷发细线（波浪）
+    c.save(); c.clip(G.hairBack); c.strokeStyle = 'rgba(150,105,40,.6)'; c.lineWidth = 2; G.hairLines.forEach(h => c.stroke(h)); c.restore();
+    vol(c, G.face, 1245, 0, 1330, 0, sk[0], sk[1], 'rgba(150,80,60,.3)', 10);
+    c.save(); c.clip(G.face); c.fillStyle = 'rgba(235,130,120,.3)'; c.filter = 'blur(6px)'; c.beginPath(); c.arc(G.cheek[0], G.cheek[1], 12, 0, TAU); c.fill(); c.restore();
+    vol(c, G.bangs, 1250, 295, 1330, 360, hair[0], hair[1], 'rgba(110,70,20,.4)', 8);
+    c.strokeStyle = 'rgba(150,105,40,.7)'; c.lineWidth = 2; G.locks.forEach(h => c.stroke(h));
+    // 五官（细、暗褐、无黑线）
+    c.lineCap = 'round';
+    if (ch.blink) { c.strokeStyle = '#5a3420'; c.lineWidth = 2.2; c.stroke(G.lid); }
+    else { c.fillStyle = '#fbf3ea'; c.beginPath(); c.ellipse(G.eye.x, G.eye.y + 1, 6, 4, 0, 0, TAU); c.fill(); c.fillStyle = '#4a6a8a'; c.beginPath(); c.arc(G.eye.x - 1.5, G.eye.y + 1, 3.6, 0, TAU); c.fill(); c.fillStyle = '#1a1008'; c.beginPath(); c.arc(G.eye.x - 1.5, G.eye.y + 1, 1.6, 0, TAU); c.fill(); c.strokeStyle = '#4a2a18'; c.lineWidth = 2; c.stroke(G.lid); }
+    c.strokeStyle = '#a0763a'; c.lineWidth = 2; c.stroke(G.brow);
+    c.fillStyle = '#c8645e'; c.beginPath(); c.moveTo(...G.lips[0]); c.lineTo(...G.lips[1]); c.lineTo(...G.lips[2]); c.closePath(); c.fill();
+    c.fillStyle = 'rgba(120,60,40,.5)'; c.beginPath(); c.arc(G.nostril[0] + 2, G.nostril[1], 1.8, 0, TAU); c.fill();
+    vol(c, G.upperArm, 1300, 0, 1380, 0, dress[0], dress[1], 'rgba(40,50,70,.4)', 10); vol(c, G.foreArm, 1200, 0, 1320, 0, dress[0], dress[1], 'rgba(40,50,70,.4)', 10);
+    vol(c, G.cuff, 1200, 0, 1300, 0, '#fbf6ea', '#c8bea8', null);
+    vol(c, G.hand, G.A.hand[0] - 15, 0, G.A.hand[0] + 15, 0, sk[0], sk[1], 'rgba(120,60,40,.35)', 6);
+    RIG.drawCup(c, G.cup, { body: '#f3efe4', rim: '#7a4a2a', hw: 6 });
+    c.save(); c.translate(G.cup.x, G.cup.y); c.rotate(G.cup.tilt); const cg = c.createLinearGradient(-G.cup.w / 2, 0, G.cup.w / 2, 0); cg.addColorStop(0, 'rgba(255,255,255,0)'); cg.addColorStop(1, 'rgba(90,70,50,.45)'); c.fillStyle = cg; c.beginPath(); c.moveTo(-G.cup.w / 2, 0); c.lineTo(-G.cup.w * 0.42, G.cup.h); c.lineTo(G.cup.w * 0.42, G.cup.h); c.lineTo(G.cup.w / 2, 0); c.fill(); c.restore();
+    c.fillStyle = sk[0]; c.beginPath(); c.arc(G.thumb[0], G.thumb[1], 7, 0, TAU); c.fill();
+    c.restore();
+  }
+  function cat(c, K, lt) {
+    c.save(); c.lineCap = 'round';
+    // 尾巴：软化下垂（达利式融化）
+    const pts = K.tailPts.map((p, i) => { const q = i / (K.tailPts.length - 1); return [p[0], p[1] + q * q * 34 * (0.6 + 0.4 * Math.sin(lt * 2))]; });
+    const tail = new Path2D(); pts.forEach((p, i) => i ? tail.lineTo(...p) : tail.moveTo(...p));
+    c.strokeStyle = '#8a3c10'; c.lineWidth = K.tailW + 4; c.stroke(tail); c.strokeStyle = '#e48a3a'; c.lineWidth = K.tailW; c.stroke(tail);
+    const tip = pts[pts.length - 1]; c.fillStyle = '#fbf2e2'; c.beginPath(); c.ellipse(tip[0], tip[1] + 6, K.tailW / 2, K.tailW * 0.75, 0, 0, TAU); c.fill();
+    vol(c, K.body, 430, 0, 660, 0, '#f2a24c', '#a24a14', 'rgba(70,25,5,.5)', 22);
+    c.save(); c.clip(K.body); c.strokeStyle = 'rgba(150,60,15,.55)'; c.lineWidth = 9; c.filter = 'blur(2px)'; K.stripes.slice(3).forEach(s => { c.beginPath(); c.moveTo(...s[0]); c.lineTo(...s[1]); c.stroke(); }); c.restore();
+    K.legs.forEach(l => vol(c, l, 560, 0, 650, 0, '#fffaf0', '#cbbca0', 'rgba(90,70,40,.35)', 6));
+    c.save(); c.clip(K.body); const wch = new Path2D(); wch.ellipse(606, 768, 40, 92, -0.05, 0, TAU); vol(c, wch, 560, 0, 650, 0, '#fffaf0', '#d6c8ac', 'rgba(90,70,40,.3)', 10); c.restore();
+    vol(c, K.head, 540, 560, 660, 690, '#f6ac58', '#b25618', 'rgba(70,25,5,.45)', 14);
+    c.save(); c.clip(K.head); c.fillStyle = '#fbf3e4'; c.beginPath(); c.ellipse(K.nose[0] - 22, K.nose[1] + 12, 36, 26, 0, 0, TAU); c.fill(); c.restore();
+    c.fillStyle = '#e8a0a0'; K.earInner.forEach(e => { c.beginPath(); e.forEach((p, i) => i ? c.lineTo(...p) : c.moveTo(...p)); c.fill(); });
+    c.save(); c.clip(K.head); c.strokeStyle = 'rgba(150,60,15,.6)'; c.lineWidth = 7; c.filter = 'blur(1.5px)'; K.stripes.slice(0, 3).forEach(s => { c.beginPath(); c.moveTo(...s[0]); c.lineTo(...s[1]); c.stroke(); }); c.restore();
+    K.eyes.forEach(e => { if (K.blink) { c.strokeStyle = '#3a200c'; c.lineWidth = 2.5; c.beginPath(); c.arc(e.x, e.y, 8, 0.2, Math.PI - 0.2); c.stroke(); }
+      else { const eg = c.createRadialGradient(e.x - 2, e.y - 2, 1, e.x, e.y, 9); eg.addColorStop(0, '#e8f0a0'); eg.addColorStop(1, '#7a9a30'); c.fillStyle = eg; c.beginPath(); c.arc(e.x, e.y, 9, 0, TAU); c.fill(); c.fillStyle = '#120a04'; c.beginPath(); c.ellipse(e.x + 2, e.y, 2.6, 7, 0, 0, TAU); c.fill(); c.fillStyle = '#fff'; c.beginPath(); c.arc(e.x - 2, e.y - 3, 1.8, 0, TAU); c.fill(); } });
+    c.fillStyle = '#c86a64'; c.beginPath(); c.arc(K.nose[0], K.nose[1], 5, 0, TAU); c.fill();
+    c.strokeStyle = 'rgba(60,30,10,.8)'; c.lineWidth = 2; c.beginPath(); c.moveTo(...K.mouth[0]); c.quadraticCurveTo(...K.mouth[1], ...K.mouth[2]); c.stroke();
+    c.strokeStyle = 'rgba(255,250,235,.85)'; c.lineWidth = 1.2; K.whiskers.forEach(w => { c.beginPath(); c.moveTo(...w[0]); c.lineTo(...w[1]); c.stroke(); });
+    c.restore();
+  }
+
+  // ---------- ② 长影子：剪影 → 剪切仿射投到地面 ----------
+  function shadows(c, lt, K, G) {           // 剪切仿射长影子：P.castShadow
+    const kx = 0.85 + 0.6 * ease.inOut(clamp(lt / 1.2));
+    P.castShadow(c, [
+      [700, g => { g.beginPath(); g.moveTo(300, 700); [[300, 120], [410, 78], [540, 70], [680, 64], [858, 104], [892, 120], [892, 700]].forEach(p => g.lineTo(...p)); g.closePath(); g.rect(370, 140, 420, 400); g.fill('evenodd'); }],
+      [905, g => { g.fillRect(810, 600, 395, 305); g.fill(K.body); g.fill(K.head); g.lineWidth = K.tailW; g.stroke(K.tail); }],
+      [930, g => { [G.skirt, G.torso, G.hairBack, G.bun, G.face, G.upperArm, G.foreArm, G.hand].forEach(p => p && g.fill(p)); g.fillRect(1300, 742, 190, 163); }],
+    ], { kx, ky: 0.22, clipY: GROUND + 2, alpha: 0.55, blur: 1.5, key: 'daliSh' });
+  }
+
+  return {
+    draw(c, lt, t) {
+      const ch = P.choreo(lt, t);
+      c.drawImage(bg(), 0, 0);
+      elephant(c, 1060 - lt * 70, lt);
+      const K = RIG.cat({ tail: ch.tail * 0.5, blink: ch.blink, breathe: ch.breathe });
+      const G = RIG.girl({ cup: ch.cup, sip: ch.sip, breathe: ch.breathe, hair: 'bun' });
+      shadows(c, lt, K, G);
+      c.drawImage(wallLayer(), 0, 0); c.drawImage(blockLayer(), 0, 0);
+      // 枯枝上的软钟（大部分垂下）
+      softClock(c, { cx: 975, cy: 104, R: 64, fold: -34, top: 0.25, drip: 0.25 }, 0.1 + 1.2 * ease.inOut(clamp(lt / 1.2)), t + 7, 4.5);
+      // 窗台上的软钟（垂在墙面上，慢慢往下流）
+      const sag = 0.1 + 1.3 * ease.inOut(clamp(lt / 1.2));   // 钟在 1.2s 里明显往下流
+      softClock(c, { cx: 740, cy: 548, R: 72, fold: 4, top: 0.3, drip: 0.4 }, sag, t, 6.5);
+      // 石块桌前沿的软钟
+      softClock(c, { cx: 912, cy: 610, R: 88, fold: 12, top: 0.28, drip: 0.3 }, sag * 0.9, t + 3, -2.4);
+      antWatch(c, lt);
+      cat(c, K, lt);
+      girl(c, G, ch);
+      // 热气：很淡的两缕
+      P.steam(c, t, G.cup.x, G.cup.y - 8, { h: 60, n: 2, color: 'rgba(255,250,240,.55)', width: 3, spread: 12, wobble: 7 });
+      // 暗角（博物馆灯下的画）
+      const vg = c.createRadialGradient(960, 520, 520, 960, 540, 1150); vg.addColorStop(0, 'rgba(0,0,0,0)'); vg.addColorStop(1, 'rgba(25,12,4,.38)'); c.fillStyle = vg; c.fillRect(0, 0, W, H);
+    },
+  };
+})();

package/engine/scenes/24_hopper.js

@@ -0,0 +1,150 @@
+// 1942 霍珀美国现实主义（《晨光》《夜鹰》的硬光块面）——纯代码。
+// 核心手法「双版本裁切」：整幅底版画两张缓存——背光版（冷绿墙、暗地板）和受光版（暖黄墙、亮地板）；
+// 每帧用会移动的光斑多边形把受光版裁进来 → 光影边缘是硬的、而且能整体平移。人物也画两遍（背光色/受光色），
+// 第二遍裁进斜向光带。少女在墙上的投影 = 在光斑里把背光版透出来（剪影平移后 ∩ 光斑）。
+// 母题动画：光斑缓慢右→左移动（光边扫过少女的脸）、窗外理发店旋转柱、卷帘拉绳轻摆、光里浮尘、热气。
+SCENES['24_hopper'] = (() => {
+  const W = 1920, H = 1080, { clamp, lerp, ease } = U, P = PAINT, TAU = Math.PI * 2;
+  const FLOOR = 730;
+  const SH = { wall: '#5d8679', dado: '#4b6d63', floor: '#5b3d2b', board: '#4a3122', trim: '#a7b3a5', trimD: '#7f8d80', blind: '#cfc3a0' };
+  const LT = { wall: '#efcf8f', dado: '#d8ad68', floor: '#c98b52', board: '#b0743e', trim: '#f7eed2', trimD: '#d9c9a2', blind: '#f4e8c4' };
+  const poly = (c, pts) => { c.beginPath(); pts.forEach((q, i) => i ? c.lineTo(q[0], q[1]) : c.moveTo(q[0], q[1])); c.closePath(); };
+
+  // 窗外：对街的红砖立面（《星期天的清晨》），阳光从左来，每个窗洞右侧有硬投影
+  function street(g) {
+    g.save(); g.beginPath(); g.rect(370, 140, 420, 400); g.clip();
+    const sk = g.createLinearGradient(0, 140, 0, 220); sk.addColorStop(0, '#5f97c9'); sk.addColorStop(1, '#a9c8dc'); g.fillStyle = sk; g.fillRect(370, 140, 420, 80);
+    g.fillStyle = '#b4553a'; g.fillRect(370, 205, 420, 335);                                   // 砖立面
+    g.fillStyle = '#d27a52'; g.fillRect(370, 196, 420, 14); g.fillStyle = '#5a2418'; g.fillRect(370, 210, 420, 10);   // 檐口＋檐下硬影
+    for (let row = 0; row < 2; row++) for (let k = 0; k < 4; k++) {
+      const x = 392 + k * 102, y = 240 + row * 92;
+      g.fillStyle = '#e8dcc0'; g.fillRect(x - 6, y - 6, 58, 76);                               // 窗套
+      g.fillStyle = '#1f2a24'; g.fillRect(x, y, 46, 64);
+      const sh = [0.55, 0.3, 0.7, 0.42, 0.25, 0.6, 0.5, 0.35][row * 4 + k];                      // 半拉的深绿卷帘，高低不一
+      g.fillStyle = '#3d6a4e'; g.fillRect(x, y, 46, 64 * sh);
+      g.fillStyle = 'rgba(40,10,5,.55)'; g.fillRect(x + 46, y - 6, 10, 76);                     // 窗洞右侧硬影
+    }
+    g.fillStyle = '#2d5a44'; g.fillRect(370, 432, 420, 108);                                    // 店面
+    g.fillStyle = '#c9d6c8'; [[386, 448, 150], [560, 448, 150]].forEach(([x, y, w]) => { g.fillRect(x, y, w, 70); });
+    g.fillStyle = 'rgba(30,50,40,.75)'; [[386, 448, 150], [560, 448, 150]].forEach(([x, y, w]) => { g.fillRect(x, y + 30, w, 40); });
+    g.fillStyle = '#e9e0c8'; g.fillRect(370, 424, 420, 10);
+    g.fillStyle = '#d8c9a8'; g.fillRect(370, 526, 420, 14);                                     // 人行道
+    g.restore();
+  }
+  function room(g, K) {
+    g.fillStyle = K.wall; g.fillRect(0, 0, W, FLOOR);
+    g.fillStyle = K.dado; g.fillRect(0, 640, W, FLOOR - 640); g.fillStyle = K.trim; g.fillRect(0, 636, W, 8); g.fillRect(0, FLOOR - 14, W, 14);
+    g.fillStyle = K.floor; g.fillRect(0, FLOOR, W, H - FLOOR);
+    g.strokeStyle = K.board; g.lineWidth = 3; for (let k = 1; k < 8; k++) { const y = FLOOR + Math.pow(k / 8, 1.5) * (H - FLOOR); g.beginPath(); g.moveTo(0, y); g.lineTo(W, y); g.stroke(); }
+    street(g);
+    // 窗套（白漆）＋窗台＋中梃
+    g.fillStyle = K.trim; g.fillRect(346, 116, 468, 24); g.fillRect(346, 116, 24, 446); g.fillRect(790, 116, 24, 446); g.fillRect(330, 540, 500, 26);
+    g.fillStyle = K.trimD; g.fillRect(330, 566, 500, 10); g.fillRect(370, 330, 420, 10); g.fillRect(575, 140, 10, 400);
+    // 卷帘（拉下来一截）
+    g.fillStyle = K.blind; g.fillRect(366, 140, 428, 92); g.fillStyle = K.trimD; g.fillRect(366, 228, 428, 6);
+    // 墙上一幅小画框（霍珀房间里常有的空白小画）
+    g.fillStyle = K.trimD; g.fillRect(1560, 300, 160, 120); g.fillStyle = K.dado; g.fillRect(1572, 312, 136, 96);
+  }
+  const bgShade = () => P.cached('hop_sh', W, H, g => room(g, SH));
+  const bgLit = () => P.cached('hop_lt', W, H, g => room(g, LT));
+  // 油画刷痕：竖向拉长的 fbm 为主、斜向为辅，soft-light 叠 α0.2
+  const brush = () => P.cached('hop_brush', W, H, (g) => {
+    const s = 4, w = W / s, h = H / s, sm = P.canvas(w, h), sg = sm.getContext('2d'), im = sg.createImageData(w, h), d = im.data;
+    for (let y = 0; y < h; y++) for (let x = 0; x < w; x++) { const n = P.fbm(x * 0.06, y * 0.006, 4) * 0.7 + P.fbm(x * 0.02 + y * 0.02, 3.3, 3) * 0.3, v = 128 + n * 110, i = (y * w + x) * 4; d[i] = d[i + 1] = d[i + 2] = v; d[i + 3] = 255; }
+    sg.putImageData(im, 0, 0); g.imageSmoothingQuality = 'high'; g.drawImage(sm, 0, 0, W, H);
+  });
+
+  // ---------- 家具与角色：同一个函数，传背光/受光两套色 ----------
+  const TS = { wood: '#4f3322', woodD: '#3a2418', skin: '#c89a84', skinD: '#a87866', hair: '#a8893f', hairD: '#7f6428', dress: '#7a2c2a', dressD: '#5e1f1e', collar: '#b9b09c',
+    orange: '#a6602c', orangeD: '#80461c', white: '#dcd6c8', stripe: '#6e3a18', cup: '#bfb8a8', eye: '#6a8a3a', band: '#3a5a8a' };
+  const TL = { wood: '#a86c3c', woodD: '#7a4a26', skin: '#f7d3b4', skinD: '#e0ad8c', hair: '#f3d67e', hairD: '#c9a24a', dress: '#cc4a3c', dressD: '#9e3328', collar: '#f6efdc',
+    orange: '#f0a04a', orangeD: '#c8722a', white: '#fbf5e6', stripe: '#c0642a', cup: '#fbf8f0', eye: '#a8d050', band: '#4a78c0' };
+  function furniture(c, K) {
+    c.fillStyle = K.wood; c.fillRect(810, 618, 400, 26); c.fillStyle = K.woodD; c.fillRect(826, 644, 368, 22);
+    c.fillStyle = K.wood; c.fillRect(840, 644, 20, 261); c.fillRect(1160, 644, 20, 261);
+    c.fillStyle = K.woodD; c.fillRect(1436, 470, 18, 440); c.fillRect(1474, 478, 18, 430); c.fillStyle = K.wood; c.fillRect(1290, 744, 210, 18); c.fillRect(1300, 760, 16, 150);
+  }
+  function cat(c, K, KK) {
+    c.save(); c.lineCap = 'round';
+    c.strokeStyle = K.orange; c.lineWidth = KK.tailW; c.stroke(KK.tail);
+    const tip = KK.tailPts[KK.tailPts.length - 1]; c.fillStyle = K.white; c.beginPath(); c.arc(tip[0], tip[1], KK.tailW / 2, 0, TAU); c.fill();
+    c.fillStyle = K.orange; c.fill(KK.body);
+    c.save(); c.clip(KK.body); c.fillStyle = K.orangeD; c.beginPath(); c.ellipse(450, 830, 70, 120, 0.1, 0, TAU); c.fill(); c.restore();   // 背侧暗面（块面）
+    KK.legs.forEach(l => { c.fillStyle = K.white; c.fill(l); });
+    c.save(); c.clip(KK.body); c.fillStyle = K.white; c.beginPath(); c.ellipse(606, 768, 40, 92, -0.05, 0, TAU); c.fill(); c.restore();   // 白胸：平滑椭圆（RIG 的 white 是直线多边形，不描线时像贴片）
+    c.fillStyle = K.orange; c.fill(KK.head);
+    c.save(); c.clip(KK.head); c.fillStyle = K.white; c.beginPath(); c.ellipse(KK.nose[0] - 22, KK.nose[1] + 12, 36, 26, 0, 0, TAU); c.fill(); c.restore();
+    c.strokeStyle = K.stripe; c.lineWidth = 7; KK.stripes.forEach(s => { c.beginPath(); c.moveTo(...s[0]); c.lineTo(...s[1]); c.stroke(); });
+    KK.eyes.forEach(e => { if (KK.blink) { c.strokeStyle = '#2a1a0e'; c.lineWidth = 3; c.beginPath(); c.moveTo(e.x - 8, e.y + 1); c.lineTo(e.x + 8, e.y + 1); c.stroke(); }
+      else { c.fillStyle = K.eye; c.beginPath(); c.arc(e.x, e.y, 8, 0, TAU); c.fill(); c.fillStyle = '#1a120a'; c.beginPath(); c.ellipse(e.x + 2, e.y, 2.4, 6.5, 0, 0, TAU); c.fill(); } });
+    c.fillStyle = '#b8605a'; c.beginPath(); c.arc(KK.nose[0], KK.nose[1], 5, 0, TAU); c.fill();
+    c.strokeStyle = '#3a2416'; c.lineWidth = 2; c.beginPath(); c.moveTo(...KK.mouth[0]); c.quadraticCurveTo(...KK.mouth[1], ...KK.mouth[2]); c.stroke();
+    c.restore();
+  }
+  function girl(c, K, G, ch) {
+    c.save(); c.lineCap = 'round'; c.lineJoin = 'round';
+    const f = (p, col) => { if (p) { c.fillStyle = col; c.fill(p); } };
+    f(G.farSleeve, K.dressD); f(G.farHand, K.skinD); f(G.farCuff, K.collar);
+    f(G.skirt, K.dress);
+    c.save(); c.clip(G.skirt); c.fillStyle = K.dressD; c.beginPath(); c.moveTo(1330, 640); c.lineTo(1460, 640); c.lineTo(1460, 940); c.lineTo(1300, 940); c.lineTo(1352, 780); c.closePath(); c.fill(); c.restore();   // 膝后暗块
+    c.strokeStyle = K.dressD; c.lineWidth = 4; G.folds.forEach(p => c.stroke(p));
+    f(G.shoe, '#2a1810');
+    f(G.torso, K.dress);
+    c.save(); c.clip(G.torso); c.fillStyle = K.dressD; c.fillRect(1375, 420, 80, 220); c.restore();
+    const nk = G.A.neck; c.fillStyle = K.collar; c.beginPath(); c.moveTo(nk[0] - 20, nk[1] - 2); c.lineTo(nk[0] + 24, nk[1]); c.lineTo(nk[0] + 6, nk[1] + 30); c.closePath(); c.fill();   // 白领尖
+    f(G.hairDown, K.hair); f(G.neck, K.skinD); f(G.hairBack, K.hair);
+    c.save(); c.clip(G.hairBack); c.fillStyle = K.hairD; c.beginPath(); c.ellipse(G.A.nape[0] + 20, G.A.nape[1] - 10, 50, 40, 0, 0, TAU); c.fill(); c.restore();
+    f(G.face, K.skin);
+    c.save(); c.clip(G.face); c.fillStyle = K.skinD; c.beginPath(); c.ellipse(G.A.ear[0] + 6, G.A.ear[1] + 10, 26, 46, 0, 0, TAU); c.fill(); c.restore();   // 颊后暗面
+    f(G.bangs, K.hair);
+    { const a = G.A.headTop, nk = G.A.nape; c.strokeStyle = K.band; c.lineWidth = 9; c.beginPath(); c.moveTo(a[0] - 52, a[1] + 26); c.quadraticCurveTo(a[0] + 10, a[1] - 6, nk[0] + 30, nk[1] - 62); c.stroke(); }   // 发带（少女感）
+    c.strokeStyle = K.hairD; c.lineWidth = 3; G.hairLines.forEach(p => c.stroke(p));
+    if (ch.blink) { c.strokeStyle = '#3a2418'; c.lineWidth = 2.6; c.stroke(G.lid); }
+    else { c.fillStyle = '#2e2018'; c.beginPath(); c.ellipse(G.eye.x - 1, G.eye.y + 1, 3.6, 4.6, 0, 0, TAU); c.fill(); c.strokeStyle = '#3a2418'; c.lineWidth = 2.4; c.stroke(G.lid); }
+    c.strokeStyle = K.hairD; c.lineWidth = 2.4; c.stroke(G.brow);
+    c.fillStyle = '#a83a36'; c.beginPath(); c.moveTo(...G.lips[0]); c.lineTo(...G.lips[1]); c.lineTo(...G.lips[2]); c.closePath(); c.fill();
+    f(G.upperArm, K.dress); f(G.foreArm, K.dress); f(G.cuff, K.collar); f(G.hand, K.skin);
+    RIG.drawCup(c, G.cup, { body: K.cup, rim: '#5a3a22', hw: 6 });
+    c.fillStyle = K.skin; c.beginPath(); c.arc(G.thumb[0], G.thumb[1], 7, 0, TAU); c.fill();
+    c.restore();
+  }
+
+  return {
+    draw(c, lt, t) {
+      const ch = P.choreo(lt, t);
+      const dx = 30 - 95 * ease.inOut(clamp(lt / 1.25));          // 光斑 1.2s 里向左移 ~95px（太阳在走）
+      const KK = RIG.cat({ tail: ch.tail * 0.6, blink: ch.blink, breathe: ch.breathe });
+      const G = RIG.girl({ cup: ch.cup, sip: ch.sip, breathe: ch.breathe, hair: 'long' });
+      // ① 背光底版 → 墙/地光斑里透出受光底版
+      c.drawImage(bgShade(), 0, 0);
+      const WP = [[1420 + dx, 250], [1920, 470], [1920, FLOOR], [1420 + dx, FLOOR]];
+      const FP = [[1420 + dx, FLOOR], [1920, FLOOR], [1920, H], [1700 + dx, H]];
+      P.litClip(c, [WP, FP], c => { c.drawImage(bgLit(), 0, 0);
+      // 光斑里的窗棂影（竖＋斜横）与少女投在墙上的影：都把背光版透出来
+      const S = P.scratch('hopSh'), sg = S.getContext('2d'); sg.reset(); sg.clearRect(0, 0, W, H); sg.fillStyle = '#000';
+      sg.fillRect(1650 + dx, 200, 24, FLOOR - 200); poly(sg, [[1650 + dx, FLOOR], [1674 + dx, FLOOR], [1820 + dx, H], [1796 + dx, H]]); sg.fill();
+      poly(sg, [[1420 + dx, 470], [1920, 680], [1920, 702], [1420 + dx, 492]]); sg.fill();
+      sg.save(); sg.translate(150, 18); [G.torso, G.hairBack, G.bun, G.face, G.bangs, G.upperArm, G.foreArm, G.hand, G.skirt].forEach(p => p && sg.fill(p)); sg.restore();
+      sg.globalCompositeOperation = 'source-in'; sg.drawImage(bgShade(), 0, 0); sg.globalCompositeOperation = 'source-over';
+      c.drawImage(S, 0, 0); });
+      // ② 窗外理发店旋转柱（红白蓝斜纹上行）
+      c.save(); const bx = 742, by = 446, bw = 18, bh = 64; c.beginPath(); c.rect(bx, by, bw, bh); c.clip(); c.fillStyle = '#f4efe2'; c.fillRect(bx, by, bw, bh);
+      const off = (lt * 60) % 24; c.lineWidth = 6; for (let k = -4; k < 6; k++) { const y = by + k * 24 - off; c.strokeStyle = k % 2 ? '#c8302a' : '#2a4a9a'; c.beginPath(); c.moveTo(bx - 4, y + 14); c.lineTo(bx + bw + 4, y); c.stroke(); }
+      c.restore(); c.fillStyle = '#d9d2bf'; c.fillRect(bx - 3, by - 8, bw + 6, 8); c.fillRect(bx - 3, by + bh, bw + 6, 8);
+      // 卷帘拉绳轻摆
+      const sw = Math.sin(lt * 4.2) * 0.07; c.save(); c.translate(580, 232); c.rotate(sw); c.strokeStyle = '#7a6a4a'; c.lineWidth = 2; c.beginPath(); c.moveTo(0, 0); c.lineTo(0, 70); c.stroke();
+      c.strokeStyle = '#c9b88a'; c.lineWidth = 4; c.beginPath(); c.arc(0, 78, 8, 0, TAU); c.stroke(); c.restore();
+      // ③ 家具与角色：先背光色，再裁进斜光带画受光色
+      furniture(c, TS); cat(c, TS, KK); girl(c, TS, G, ch);
+      const OP = [[1345 + dx, 0], [W, 0], [W, H], [1185 + dx, H]];
+      P.litClip(c, [OP], c => { furniture(c, TL); girl(c, TL, G, ch); });
+      // 光带里的浮尘
+      c.save(); c.globalCompositeOperation = 'lighter'; P.particles(26, 42, t, { x0: 1250, x1: 1900, y0: 760, y1: 120, speed: 40, drift: 18, life: 9 }).forEach(p => {
+        const ex = 1345 + dx - (p.y / H) * 160; if (p.x < ex) return; c.fillStyle = `rgba(255,235,180,${0.35 + 0.3 * Math.sin(t * 6 + p.i)})`; c.beginPath(); c.arc(p.x, p.y, 2.2 * p.s, 0, TAU); c.fill(); });
+      c.restore();
+      P.steam(c, t, G.cup.x, G.cup.y - 8, { h: 55, n: 2, color: 'rgba(255,248,230,.5)', width: 3, spread: 12, wobble: 6 });
+      // 画布刷痕
+      c.save(); c.globalCompositeOperation = 'soft-light'; c.globalAlpha = 0.2; c.drawImage(brush(), 0, 0); c.restore();
+    },
+  };
+})();