dsh-drawai 0.4.2 → 0.4.4

package/lib/motion/mgstyles/briefs/23-ink-wash.md

@@ -0,0 +1,147 @@
+# 水墨写意 · 23-ink-wash
+
+> 上游 `huashu-art-motion`（MIT）17_ink 的移植说明。上游是「HTML 页 + renderAt(t) + Playwright 截帧」，
+> 这里是「Remotion 场景逐帧渲染」。同构点只有一个：每一帧都是 t 的纯函数。其余全要换。
+
+## 1. 一眼认出
+
+- **纸接着画**：整幅只有一种底 —— `#EFE6D0` 宣纸，叠 2600 根纸纤维短弧（褐 α.05–.13 / 亮 α.12–.27）+ 四角暗角 α.22。画面里不出现纯白卡片、不出现纯黑。
+- **每一笔都是毛笔**：控制点先 Catmull-Rom 加密，再按 **4px 等弧长重采样**（`demos/23-ink-wash/brush.js` 的 `P.brush`）。宽度按 `prof(q)=ss(0,head,q)·(1−0.7·ss(1−tail,1,q))·(0.85+0.15·noise)`，笔尾比笔头细 30–50%，笔毛按噪声断开露出纸。
+- **墨只有一个颜色**：`[16,14,12]`，靠 `tone` 分五色（焦 .9 / 浓 .8 / 重 .6 / 淡 .35 / 清 .15）。全片第二个「黑」一旦出现，立刻不像水墨。
+- **晕染是两遍 multiply**：外晕 `blur(halo·(0.4+grow))`、α `haloA·grow`；本体 `blur(blur·(1.6−0.6·grow))`、α `ss(0,0.6,grow)`。`grow` 0→1 是「墨在纸上洇开」，不是透明度淡入。
+- **留白是挖出来的**：白色部分（猫的口鼻胸爪、交领内衫）用 `destination-out` 从色层里挖掉露出纸色，不是画白色。
+- **收尾有一方印**：0.3–0.4s 内从 1.5 倍压到 1 倍，`multiply` 盖上，印面随机挖 40 个 1–4px 的斑驳。
+
+## 2. 色板
+
+| 角色 | hex | 用在哪 |
+| --- | --- | --- |
+| 纸 `PAPER` | `#EFE6D0` | 整幅底；雾带用小一号的 `#F2EAD6` |
+| 留白 `SURFACE` | `#F7F1E2` | 面部、白瓷、内衫（挖出来的地方偏亮一点） |
+| 墨 `INK` | `#14120F` | 所有线；按 tone 分五色，不新增墨色 |
+| 次色 `FIELD` | `#6F8AA0` | 花青：衣、远山冷部 |
+| 灰 `DUST` | `#8A7C64` | 淡墨字、纸边、题款 |
+| 朱 `STAMP` | `#C4281E` | **只三处**：钤印、腰带、点唇 |
+| 暖点 | `#D8553F` / `#C47A3C` / `#E2AA34` | 朱日 / 赭石（猫） / 藤黄（发、光） |
+
+**禁止色**：`#FFFFFF`、`#000000`、任何饱和度 > 0.6 的蓝紫。要让一块区域「亮」就用纸色，不要提亮到白。
+**禁止手法**：给笔画加 `box-shadow`、`text-shadow`、CSS 渐变描边；那是排版，不是墨。
+
+## 3. 字体与字排
+
+上游用 `LXGWWenKai-500`（霞鹜文楷）。**当前优先使用插件内置字体**，替代栈：
+
+- 标题 / 题款：`"Long Cang","Noto Serif SC",serif` —— 龙藏体是行草连笔，起收有粗细变化，接近毛笔题字。
+  损失：龙藏体骨架偏软，写「永」「之」这类字时折笔没有楷书的骨力；要更端正就用 Noto Serif SC。
+- 正文 / 旁白：`"Noto Serif SC","HarmonyOS Sans SC",serif` —— 宋体本身就是刻本的骨架，和宣纸同源。
+- 数字 / 年份：`"IBM Plex Mono",monospace`，字距 +0.04em。
+
+字排规则：标题 72–96px、字距 6px；副题 28–32px、`DUST` 色；**标题允许竖排**（`writing-mode: vertical-rl`，从上到下、从右到左），竖排时右起第一列就是主标题。
+小字别用 Long Cang：它的细笔画在 4K 下会断成虚线，18px 以下一律 Noto Serif SC。
+中英混排时英文降到 0.92 倍字号、基线对齐，不要用斜体（行草里没有假斜体）。
+
+## 4. 动效语法
+
+- **节拍**：60 BPM，30fps 下 **30 帧/拍**。水墨没有硬切，全片是一镜到底的呼吸，`cutFrames` 只用来对齐段落。
+- **缓动**：只用 `smoothstep`（`ss(a,b,x)`）与 `easeOutCubic`。**禁用** `spring` / `back` / 任何 overshoot —— 墨落在纸上不会回弹。
+- **签名动作**（帧数按 30fps）：
+  1. **写出**：`reveal = ss(d, d+l, lt/0.45)`，每笔自带起点 `d` 与时长 `l`（0.08–0.18s），按「窗 → 案 → 竹 → 鸟 → 猫 → 人」的顺序错峰；开场先把 `lt` 加 0.12，**第 0 帧就要有前几笔**。
+  2. **洇开**：`grow = ss(0, 1.15, lt)`；外晕跟着 grow 变宽，本体跟着收紧 —— 一个变宽一个变实，缺一个就读成「模糊一遍就完事」。
+  3. **摇曳**：竹绕基点摆 `sin(2.9t)·0.11`，越往梢越大（系数 `k = 节点序 / 4`）；叶翻 `sin(7t+g)·0.2`。
+  4. **雾带**：4 条纸色椭圆，`blur(14px)`、α.72，以 150–270px/s 横移，绕一圈回来 —— 远山靠它「时隐时现」。
+  5. **压印**：`s = 1.5 − 0.5·easeOutCubic(q)`，`q = ss(0.3, 0.4, lt)`；同时 `globalCompositeOperation='multiply'`。
+- **组成规则**：纸满幅；图层顺序固定为 纸 → 远山/朱日 → 雾带 → 静态笔触 → 竹 → 挂轴 → 动物 → 人物 → 热气 → 题款/印；四周留 6% 白边；**一屏只画一个「房间」**，水墨的空间感靠留白不靠透视。
+
+## 5. Remotion 落地配方
+
+**组件形态**：一个 `<canvas>` 铺满 `AbsoluteFill`，`useLayoutEffect` 里按 `frame` 重画。Remotion 会为每一帧重新执行 effect，函数必须幂等：不读时钟、不留上一帧状态、不累加。
+
+**必须换掉的上游写法**
+
+| 上游 | 这里 |
+| --- | --- |
+| `requestAnimationFrame` / `draw(c, lt, t)` 主循环 | `const frame = useCurrentFrame()`；`t = frame / fps`、`lt = t / duration` |
+| `U.rng(seed)` 种子随机 | `det(frame, salt, i)`（`scene-kit/det.ts`），或本文件里的 `hash()` |
+| `P.cached(key, w, h, fn)` | 模块级 `Map<string, HTMLCanvasElement>`；key 带分辨率 |
+| `P.texture('xuan', …)` 外部贴图 | 程序化纸：`feTurbulence` 转图，或直接画 2600 根短弧（推荐，路径可控） |
+| `ctx.filter='blur()'` 循环调用 | 可用（Chromium 支持），但每帧多次 blur 很贵：晕染层做成 offscreen，只有 `grow` 变化的量重画 |
+| CSS transition / animation | 一律算出每帧的数值，写进 canvas |
+| `Math.random()` | 禁；用 `det`，否则 motion_qa 的「同一帧两次渲染不一致」会抓到你 |
+
+**性能预算**：纸 2600 根弧 ≈ 12–18ms，只画一次；静态笔触 15 笔 × 8 根笔毛 × ~120 采样点 ≈ 每帧 2 万次 `lineTo`，**必须缓存**成 `ink_static` 位图（写出阶段才逐帧画）；剩下每帧真正动的只有竹、雾带、虾、猫的呼吸、热气 —— 控制在 8ms 内。
+
+**骨架**（可跑；`inkBrush` 就是 `demos/23-ink-wash/brush.js` 的 `P.brush`，把 `rng`→`det`、`ss`→上面的 smoothstep 即可）：
+
+```tsx
+import { AbsoluteFill, useCurrentFrame, useVideoConfig } from 'remotion'
+import { useLayoutEffect, useRef } from 'react'
+import { PAPER, INK, STAMP } from './theme'
+import { inkBrush, inkLeaf, inkWash } from './ink'
+
+const ss = (a: number, b: number, x: number) => { const t = Math.min(1, Math.max(0, (x - a) / (b - a))); return t * t * (3 - 2 * t) }
+
+export default function Scene({ shot }) {
+  const ref = useRef<HTMLCanvasElement>(null)
+  const { width, height, fps, durationInFrames } = useVideoConfig()
+  const frame = useCurrentFrame()
+  useLayoutEffect(() => {
+    const c = ref.current!.getContext('2d')!
+    const t = frame / fps, lt = frame / durationInFrames + 0.12
+    const grow = ss(0, 1.15, lt), rev = Math.min(1, lt / 0.45)
+    c.clearRect(0, 0, width, height)
+    c.drawImage(paper(width, height), 0, 0)                                   // 宣纸：模块级缓存
+    inkWash(c, 'mtn', ss(0, 0.3, lt) * (0.6 + 0.4 * grow), g => mountains(g, width), { blur: 3, halo: 14, haloA: 0.3 })
+    if (rev < 1) staticStrokes(c, width, rev) else c.drawImage(staticCache(width), 0, 0)
+    bamboo(c, width, height, t, rev)
+    inkLeaf(c, width * 0.31, height * 0.21, -0.5 + Math.sin(t * 7) * 0.2, 104, 15, 0.86)   // 一片竹叶也要走毛笔
+  }, [frame, width, height, fps, durationInFrames])
+  return <AbsoluteFill style={{ background: PAPER }}><canvas ref={ref} width={width} height={height} /></AbsoluteFill>
+}
+
+// 笔毛：每根一条连续折线，按噪声断开 —— 飞白就是断口露出的纸
+function bristles(c: CanvasRenderingContext2D, d: Pt[], n: number, w: number, dry: number, salt: number) {
+  for (let k = 0; k < n; k++) {
+    c.beginPath(); let on = false
+    const off = (k / (n - 1) - 0.5) * 0.95 * w
+    for (let i = 0; i < d.length; i++) {
+      const q = i / (d.length - 1)
+      const vis = hash(salt * 31 + k * 7919 + i * 0.09) > dry * Math.pow(q, 1.2) * 0.95 + 0.05
+      const x = d[i][0] + off, y = d[i][1]
+      if (vis) { on ? c.lineTo(x, y) : c.moveTo(x, y); on = true } else on = false
+    }
+    c.stroke()
+  }
+}
+```
+
+`ink.ts` 里放纯函数（无 React、无 DOM 查询），这样 `motion_preview` 失败时能单独在 Node 里跑那 30 行算法定位。
+
+## 6. 镜头结构模板
+
+| 时间 | 意图 |
+| --- | --- |
+| 0–0.1s | **有东西可看**：第 0 帧已有窗框两笔 + 一片竹叶（白纸首帧不能当封面） |
+| 0.1–0.45s | 写出主体：按窗 → 案 → 竹 → 主体的顺序，每笔 0.08–0.18s，错峰 0.02–0.04s |
+| 0.45–1.2s | 墨继续洇开（grow 走完），雾带开始横移，主体第一次呼吸 |
+| 1.2–2.4s | 主体的小动作（动物眨眼/尾巴、衣带摆 3.4s 周期），竹持续摇曳 |
+| 2.4–3.2s | 需要的话补第二层：热气、飘落物、第二只动物；**不换机位** |
+| 3.2–3.8s | 题款 + 钤印压下去（1.5→1 倍），画面其余部分开始安静 |
+| 3.8–4.0s | 定格 0.2s 收尾；最后 6 帧不要再加新笔（观众要看清那方印） |
+
+要 10 秒就把 1.2–3.2s 拉长，别加镜头；要 6 秒就砍到「写出 + 洇开 + 印」。
+
+## 7. 坑
+
+- **multiply 透底**：晕染是透明叠加，背后的窗台墨线会透过猫的耳朵、桌腿会透过衣裙，读成「层级错了」。上色前先在剪影里 `clip` 后 `drawImage(纸)` 补一层纸色 —— 等于「先为它留出这块地方」。
+- **笔毛接头**：按小段单独 `stroke` + `round` cap，接头处会叠出一节节深点，像竹节或麻绳。每根笔毛必须一条连续 path、`butt` cap。
+- **低动画面**：全片都是缓慢晕染时，`motion_qa` 的「整镜动能量」会报 warn（它抓的正是翻页感）。解法是保证每 2 秒有一次可见变化：雾带过境、竹梢一摆、虾游一段 —— 不是加特效。
+- **缓存泄漏**：纸和静态笔触的缓存 key 必须带分辨率；换竖版 1080×1920 时复用横版位图会整片糊。
+- **字体回落**：Long Cang 没有的简体字会回落到 Noto Serif SC，同一行里两种骨力会看得出来；标题先试排一遍，缺字就整句改用 Noto Serif SC。
+- **细线 shimmer**：1px 笔毛在缩放/编码后闪烁，`det` 抖动控制在 ±0.4px 以内，别用亚像素随机。
+
+## 8. 版权与素材
+
+- 上游 `huashu-art-motion` 为 MIT；本风格的提示词整理、场景源码节选与笔刷库均随插件分发，保留出处即可。
+- 笔法（飞白、没骨、晕染、钤印）、墨分五色、母题动法（写出、洇开、摇曳）是公共技法，可自由用。
+- **不要复刻具体作品**：齐白石的虾、八大山人的白眼鸟是具体画面，可以借「六节虾身 + 焦墨头胸甲」的画法，不要连构图和姿态一起搬。
+- 字体 Long Cang / Noto Serif SC 均为 SIL OFL，可随包分发；品牌名、印章文字必须虚构（别写真人的名号）。

package/lib/motion/mgstyles/catalog.d/23-ink-wash.json

@@ -0,0 +1,28 @@
+{
+  "slug": "23-ink-wash",
+  "name": "水墨写意",
+  "oneLiner": "宣纸是底、墨只加不铺：一笔一笔写出窗、竹、猫与人，墨分五色，留白是挖出来的，钤印收尾。",
+  "signature": [
+    "纸是整幅唯一的底：#efe6d0 宣纸 + 2600 根纸纤维 + 四角暗角 α.22，没有纯白也没有纯黑背景",
+    "每一笔都是毛笔：4px 等弧长重采样，笔压起收，逐根笔毛按噪声断开出飞白，笔尾比笔头细 30–50%",
+    "墨只用一个色 [16,14,12]，靠 tone 分五色（焦 .9／浓 .8／重 .6／淡 .35／清 .15），全片不出现第二种黑",
+    "晕染是两遍 multiply（外晕 halo·(0.4+grow) + 本体 blur·(1.6−0.6grow)），grow 0→1 是「洇开」不是「淡入」",
+    "留白用 destination-out 从色层里挖掉露出纸色，不是画白色；钤印 1.5→1 倍压下去、multiply 盖上"
+  ],
+  "palette": {
+    "page": "#EFE6D0",
+    "surface": "#F7F1E2",
+    "field": "#6F8AA0",
+    "text": "#14120F",
+    "muted": "#8A7C64",
+    "accent": "#C4281E",
+    "border": "#C9B58C"
+  },
+  "colors": ["#EFE6D0", "#F7F1E2", "#14120F", "#C4281E", "#D8553F", "#C47A3C", "#6F8AA0", "#E2AA34"],
+  "fonts": {
+    "display": "\"Long Cang\",\"Noto Serif SC\",serif",
+    "text": "\"Noto Serif SC\",\"HarmonyOS Sans SC\",serif",
+    "mono": "\"IBM Plex Mono\",monospace"
+  },
+  "rhythm": { "bpm": 60, "fps": 30, "duration": 10, "aspect": "16:9", "cutFrames": 30 }
+}

package/lib/motion/mgstyles/catalog.json

@@ -2,7 +2,7 @@
   "source": "https://github.com/Vincentwei1021/mg-styles-15",
   "commit": "49052d80bfaf9fa8412cc9710530e5e95a3b8d8c",
   "license": "MIT",
-  "note": "整片风格库：14 种 MG 视觉语言，每种由一份上游提示词 + 一支上游成片源码 + 一份 Remotion 移植 brief 组成。上游的 04-3d-render（Blender 离线渲的 CGI 质感）没有收录，需要那种质感请走外部渲染回灌。",
+  "note": "整片风格库：15 种 MG 视觉语言，每种由一份上游提示词 + 一支上游成片源码 + 一份 Remotion 移植 brief 组成。上游的 04-3d-render（Blender 离线渲的 CGI 质感）没有收录，需要那种质感请走外部渲染回灌。",
   "promptChars": 1258,
   "styles": [
     {
@@ -94,7 +94,8 @@
         "files": [
           "demos/01-flat-vector/index.html"
         ]
-      }
+      },
+      "origin": null
     },
     {
       "slug": "02-line-art",
@@ -187,7 +188,8 @@
         "files": [
           "demos/02-line-art/film.js"
         ]
-      }
+      },
+      "origin": null
     },
     {
       "slug": "03-isometric",
@@ -301,7 +303,8 @@
           "demos/03-isometric/js/ui.js",
           "demos/03-isometric/js/world.js"
         ]
-      }
+      },
+      "origin": null
     },
     {
       "slug": "05-cel-boil",
@@ -396,7 +399,8 @@
         "files": [
           "demos/05-cel-boil/js/scene.js"
         ]
-      }
+      },
+      "origin": null
     },
     {
       "slug": "06-collage",
@@ -490,7 +494,8 @@
         "files": [
           "demos/06-collage/index.html"
         ]
-      }
+      },
+      "origin": null
     },
     {
       "slug": "07-liquid",
@@ -597,7 +602,8 @@
           "demos/07-liquid/js/shaders.js",
           "demos/07-liquid/js/type.js"
         ]
-      }
+      },
+      "origin": null
     },
     {
       "slug": "08-morph",
@@ -693,7 +699,8 @@
         "files": [
           "demos/08-morph/index.html"
         ]
-      }
+      },
+      "origin": null
     },
     {
       "slug": "09-bauhaus",
@@ -785,7 +792,8 @@
         "files": [
           "demos/09-bauhaus/film.js"
         ]
-      }
+      },
+      "origin": null
     },
     {
       "slug": "10-synthwave",
@@ -877,7 +885,8 @@
         "files": [
           "demos/10-synthwave/index.html"
         ]
-      }
+      },
+      "origin": null
     },
     {
       "slug": "12-aurora-glass",
@@ -973,7 +982,8 @@
           "demos/12-aurora-glass/main.js",
           "demos/12-aurora-glass/shaders.js"
         ]
-      }
+      },
+      "origin": null
     },
     {
       "slug": "18-hanazi",
@@ -1064,7 +1074,8 @@
         "files": [
           "demos/18-hanazi/index.html"
         ]
-      }
+      },
+      "origin": null
     },
     {
       "slug": "19-paperclip",
@@ -1154,7 +1165,8 @@
         "files": [
           "demos/19-paperclip/index.html"
         ]
-      }
+      },
+      "origin": null
     },
     {
       "slug": "20-pixel",
@@ -1243,7 +1255,8 @@
         "files": [
           "demos/20-pixel/film.js"
         ]
-      }
+      },
+      "origin": null
     },
     {
       "slug": "22-hud",
@@ -1350,6 +1363,106 @@
           "demos/22-hud/js/util.js",
           "demos/22-hud/js/v5.js"
         ]
+      },
+      "origin": null
+    },
+    {
+      "slug": "23-ink-wash",
+      "name": "水墨写意",
+      "en": "Chinese Ink Wash / Xieyi",
+      "heading": "水墨写意 Chinese Ink Wash / Xieyi",
+      "oneLiner": "宣纸是底、墨只加不铺：一笔一笔写出窗、竹、猫与人，墨分五色，留白是挖出来的，钤印收尾。",
+      "shot": "huashu 17_ink · 1920×1080 · 30 fps · 10 秒 · 单镜写意房间",
+      "tags": [
+        "水墨",
+        "写意",
+        "国风",
+        "宣纸",
+        "毛笔",
+        "墨分五色",
+        "留白",
+        "八大山人",
+        "齐白石",
+        "ink-wash",
+        "xieyi",
+        "chinese-ink"
+      ],
+      "signature": [
+        "纸是整幅唯一的底：#efe6d0 宣纸 + 2600 根纸纤维 + 四角暗角 α.22，没有纯白也没有纯黑背景",
+        "每一笔都是毛笔：4px 等弧长重采样，笔压起收，逐根笔毛按噪声断开出飞白，笔尾比笔头细 30–50%",
+        "墨只用一个色 [16,14,12]，靠 tone 分五色（焦 .9／浓 .8／重 .6／淡 .35／清 .15），全片不出现第二种黑",
+        "晕染是两遍 multiply（外晕 halo·(0.4+grow) + 本体 blur·(1.6−0.6grow)），grow 0→1 是「洇开」不是「淡入」",
+        "留白用 destination-out 从色层里挖掉露出纸色，不是画白色；钤印 1.5→1 倍压下去、multiply 盖上"
+      ],
+      "palette": {
+        "page": "#EFE6D0",
+        "surface": "#F7F1E2",
+        "field": "#6F8AA0",
+        "text": "#14120F",
+        "muted": "#8A7C64",
+        "accent": "#C4281E",
+        "border": "#C9B58C"
+      },
+      "paletteSource": "brief",
+      "colors": [
+        "#EFE6D0",
+        "#F7F1E2",
+        "#14120F",
+        "#C4281E",
+        "#D8553F",
+        "#C47A3C",
+        "#6F8AA0",
+        "#E2AA34"
+      ],
+      "fonts": {
+        "display": "\"Long Cang\",\"Noto Serif SC\",serif",
+        "text": "\"Noto Serif SC\",\"HarmonyOS Sans SC\",serif",
+        "mono": "\"IBM Plex Mono\",monospace"
+      },
+      "rhythm": {
+        "bpm": 60,
+        "fps": 30,
+        "duration": 10,
+        "aspect": "16:9",
+        "cutFrames": 30
+      },
+      "prompt": "prompts/23-ink-wash.md",
+      "demos": [
+        "demos/23-ink-wash/film.js",
+        "demos/23-ink-wash/brush.js"
+      ],
+      "brief": "briefs/23-ink-wash.md",
+      "engine": "canvas2d",
+      "engines": [
+        "canvas2d"
+      ],
+      "engineNote": "纯 Canvas2D：宣纸纤维、笔毛飞白、墨晕两遍 multiply 全在 2D 画布上画，没有 shader，也没有 DOM 或贴图合成。",
+      "engineFiles": [
+        "demos/23-ink-wash/brush.js"
+      ],
+      "motion": {
+        "motionBlur": null,
+        "transitions": "cut",
+        "impact": false,
+        "camera": false,
+        "grain": {
+          "size": null
+        },
+        "secondary": [],
+        "feather": false,
+        "files": [
+          "demos/23-ink-wash/film.js"
+        ]
+      },
+      "origin": {
+        "source": "https://github.com/alchaincyf/huashu-art-motion",
+        "license": "MIT",
+        "files": {
+          "prompts/23-ink-wash.md": "references/风格配方/17_ink.md",
+          "demos/23-ink-wash/film.js": "scripts/engine/scenes/17_ink.js",
+          "demos/23-ink-wash/brush.js": "scripts/engine/lib/brush.js"
+        },
+        "note": "场景为节选（少女段落未收），brush.js 逐字收录；依赖上游全局 U/KIT/PAINT，只作阅读参考。"
       }
     }
   ]

package/lib/motion/mgstyles/upstream/demos/23-ink-wash/brush.js

@@ -0,0 +1,149 @@
+// 笔与水：毛笔飞白、两头尖单笔、墨晕晕染、长弯流线笔、水彩洗染、厚涂鬃毛笔、剪刀折线。全部挂在 PAINT（P）上。
+// 来源：迁移测试 A（水墨/蒙克）、B（吉卜力）、C（马蒂斯）、D（伦勃朗）。确定性：所有随机都走种子。
+//   P.brush(c, pts, opt)            毛笔：笔压起收＋湿笔芯＋逐根笔毛飞白，可按 reveal 写出（水墨、书法、白描衣纹）
+//   P.leaf(c, x, y, ang, L, w)      两头尖的单笔（竹叶、兰叶、鸟翅、虾尾）
+//   P.inkWash(c, key, grow, fn, o)  墨晕：形状先画到 scratch，再「外晕＋本体」两遍模糊 multiply 到纸上，grow 0→1 是洇开
+//   P.flowSeeds / P.flowLines       长弯流线笔：种子沿随时间扭动的方向场积分成 200–300px 的长笔（蒙克，不是梵高的短笔）
+//   P.deform / P.watercolor         水彩洗染：中点位移变形多边形 × 多层低 α multiply ＋ 每层淡描边＝水痕边（吉卜力背景）
+//   P.rectPts / P.ellipsePts        洗染常用的多边形点列
+//   P.impasto(c, pts, w, col, hi)   厚涂鬃毛笔：一笔＝若干平行细鬃（伦勃朗高光、梵高厚涂补笔）
+//   P.cut(pts, seed, step, amp)     剪刀折线：沿轮廓每 step px 取点＋抖动、直线相连（马蒂斯剪纸、剪影、木刻）
+(() => {
+let W = 1920, H = 1080; U.onStage((w, h) => { W = w; H = h; });   // 画布尺寸跟 U.setStage 走（默认 1920×1080）
+const P = window.PAINT;
+const { clamp, lerp, rng, ss } = U;
+
+// ---------- 毛笔 ----------
+// pts 控制点（会 Catmull-Rom 加密再按 4px 等弧长重采样——不重采样的话飞白噪声频率随笔画长短变）
+// w 最大宽；tone 墨色透明度（焦 .9／浓 .8／重 .6／淡 .35／清 .15）；dry 0..1 飞白程度（越到笔尾越干）；reveal 0..1 写出比例
+// head/tail 起笔/收笔占比；bristles 笔毛数；col 墨色 [r,g,b]；per 加密倍数
+// 坑：笔毛必须每根一条连续 path（butt 头）；按小段单独 stroke＋round 头，接头处会叠出一节节深点，像竹节/麻绳。
+P.brush = (c, pts, { w = 10, tone = 0.85, dry = 0.45, seed = 1, reveal = 1, bristles = 8, col = [16, 14, 12], head = 0.12, tail = 0.4, per = 5 } = {}) => {
+  if (reveal <= 0) return;
+  const D = KIT.resample(KIT.densify(pts, per), 4), n = D.length, m = Math.max(2, Math.ceil(n * clamp(reveal)));
+  const r = rng(seed * 7919);
+  const prof = q => ss(0, head, q) * (1 - 0.7 * ss(1 - tail, 1, q)) * (0.85 + 0.15 * P.noise(seed * 3.3, q * 6)) + 0.08;
+  c.save(); c.lineCap = 'butt'; c.lineJoin = 'round';
+  const N = [];
+  for (let i = 0; i < n; i++) { const A = D[Math.max(0, i - 1)], B = D[Math.min(n - 1, i + 1)]; let dx = B[0] - A[0], dy = B[1] - A[1]; const d = Math.hypot(dx, dy) || 1; N.push([-dy / d, dx / d]); }
+  const core = q => w * prof(q) * (1 - dry * 0.85 * Math.pow(q, 0.8));
+  // 湿的笔芯：整笔都有，越往后越细越淡（墨在用完）
+  c.fillStyle = `rgba(${col[0]},${col[1]},${col[2]},${tone * 0.72})`; c.fill(KIT.ribbon(D.slice(0, m), (q, i) => core(i / (n - 1))));
+  // 笔毛：每根一条连续线，按噪声断开（飞白＝笔毛之间露出的纸），越到笔尾断得越多
+  for (let k = 0; k < bristles; k++) {
+    const off = (k / (bristles - 1) - 0.5) * 0.95, bw = w / bristles * (0.9 + r() * 0.9), ph = r() * 50;
+    c.strokeStyle = `rgba(${col[0]},${col[1]},${col[2]},${tone * (0.45 + r() * 0.35)})`; c.lineWidth = Math.max(0.7, bw);
+    c.beginPath(); let on = false;
+    for (let i = 0; i < m; i++) {
+      const q = i / (n - 1), dryness = dry * Math.pow(q, 1.2);
+      const vis = P.noise(k * 1.9 + ph, i * 0.09) * 0.5 + 0.5 > dryness * 0.95 + 0.05;
+      const o = off * w * prof(q), x = D[i][0] + N[i][0] * o, y = D[i][1] + N[i][1] * o;
+      if (vis) { on ? c.lineTo(x, y) : c.moveTo(x, y); on = true; } else on = false;
+    }
+    c.stroke();
+  }
+  c.restore();
+};
+// 两头尖的单笔（个字竹叶、兰叶描、鸟翅）：沿 ang 方向长 L，最宽 wmax，微弯
+P.leaf = (c, x, y, ang, L, wmax, tone = 0.88, col = [16, 14, 12]) => {
+  if (!Array.isArray(col)) col = [16, 14, 12];
+  const pts = []; for (let i = 0; i <= 10; i++) { const q = i / 10, bend = Math.sin(q * Math.PI) * 0.08 * L; pts.push([x + Math.cos(ang) * L * q - Math.sin(ang) * bend, y + Math.sin(ang) * L * q + Math.cos(ang) * bend]); }
+  c.fillStyle = `rgba(${col[0]},${col[1]},${col[2]},${tone})`; c.fill(KIT.ribbon(pts, q => wmax * Math.pow(Math.sin(Math.PI * Math.min(1, q * 1.1)), 0.7) + 0.6));
+};
+
+// ---------- 墨晕 / 晕染层 ----------
+// fn(g) 在 scratch 上画形状（实色即可）；grow 0..1 控制洇开：外晕 blur 随 grow 变宽，本体 blur 随 grow 收紧。
+// halo 外晕模糊半径、haloA 外晕透明度、blur 本体模糊、alpha 整体透明度。返回 scratch（可再拿来做留白挖洞）。
+// 坑：multiply 是透明的，背后的墨线会透过晕染（窗台线透过猫耳）。先在剪影里补一层纸色（clip 后 drawImage 纸）再上晕染＝「先留出这块地方」。
+P.inkWash = (c, key, grow, fn, { blur = 2, halo = 10, haloA = 0.22, alpha = 1 } = {}) => {
+  const S = P.scratch('inkw_' + key), g = S.getContext('2d'); g.reset(); fn(g);
+  c.save(); c.globalCompositeOperation = 'multiply';
+  if (grow > 0) {
+    c.globalAlpha = haloA * alpha * grow; c.filter = `blur(${(halo * (0.4 + grow)).toFixed(2)}px)`; c.drawImage(S, 0, 0);
+    c.globalAlpha = alpha * ss(0, 0.6, grow); c.filter = `blur(${(blur * (1.6 - grow * 0.6)).toFixed(2)}px)`; c.drawImage(S, 0, 0);
+  }
+  c.filter = 'none'; c.restore();
+  return S;
+};
+
+// ---------- 长弯流线笔（蒙克《呐喊》式表现主义） ----------
+// 种子：cell 抖动网格，每个种子带两个随机数 [x, y, r1, r2]
+P.flowSeeds = (cell = 24, seed = 5) => { const r = rng(seed), o = []; for (let y = -10; y < H + 10; y += cell) for (let x = -10; x < W + 10; x += cell) o.push([x + (r() - .5) * cell, y + (r() - .5) * cell, r(), r()]); return o; };
+// 每个种子：region(x,y,t) 判区 → 取该区参数 params[reg] = [steps, step, width, alpha] → 沿 angle(x,y,t,reg) 积分；越出本区就停（区域边界干净）。
+// color(reg, sx, sy, r1, t) 返回 [r,g,b]。不描边、半透明叠色——蒙克是薄涂长笔；照搬梵高的深色描边会变成一节节毛毛虫短笔。
+// 底下先铺同色系平涂，笔缝里露出的是同色而不是黑。长度：steps 26–42、step 6–8，一根笔走 200–300px。
+P.flowLines = (c, seeds, { t = 0, region, angle, color, params, extraSteps = 8 }) => {
+  c.lineCap = 'round'; c.lineJoin = 'round';
+  for (const [sx, sy, r1, r2] of seeds) {
+    const reg = region(sx, sy, t); const pr = params[reg]; if (!pr) continue; const [steps, step, width, alpha] = pr;
+    const col = color(reg, sx, sy, r1, t);
+    let x = sx, y = sy; c.beginPath(); c.moveTo(x, y);
+    const n = steps + ((r2 * extraSteps) | 0);
+    for (let i = 0; i < n; i++) { const a = angle(x, y, t, reg); x += Math.cos(a) * step; y += Math.sin(a) * step; if (region(x, y, t) !== reg) break; c.lineTo(x, y); }
+    c.strokeStyle = P.rgb(col, alpha); c.lineWidth = width * (0.7 + r2 * 0.6); c.stroke();
+  }
+};
+
+// ---------- 水彩洗染（吉卜力式背景美术） ----------
+// 中点位移：每轮在每条边中点沿法向推一个近似高斯量（3 个均匀数相加），幅度与边长成比例，每轮 amp×0.6
+P.deform = (pts, depth, amp, r) => {
+  let out = pts;
+  for (let d = 0; d < depth; d++) {
+    const n = [];
+    for (let i = 0; i < out.length; i++) {
+      const a = out[i], b = out[(i + 1) % out.length], len = Math.hypot(b[0] - a[0], b[1] - a[1]);
+      const g = (r() + r() + r() - 1.5) * amp * Math.min(1, len / 80), nx = -(b[1] - a[1]) / (len || 1), ny = (b[0] - a[0]) / (len || 1);
+      n.push(a, [(a[0] + b[0]) / 2 + nx * g, (a[1] + b[1]) / 2 + ny * g]);
+    }
+    out = n; amp *= 0.6;
+  }
+  return out;
+};
+const fillPts = (g, pts) => { g.beginPath(); pts.forEach((q, i) => i ? g.lineTo(q[0], q[1]) : g.moveTo(q[0], q[1])); g.closePath(); };
+// 一次洗染：基形 deform 3 轮；每层再 deform 2 轮、低 α 填（multiply = 透明颜料叠色）、α=edge 描 1.6px 同色边（颜料在边缘沉积 = 水痕边）。
+// fill 可传渐变；不透明的白（窗框、云、桌布）用 blend:'source-over'、alpha .9。
+// 常用：大墙 layers5 α.4 amp12；色晕 layers3 α.045 amp40；木板 layers3 α.5 amp3 edge.14。
+// 坑：暗部用大幅变形多边形（amp 60），别用矩形拼——矩形接缝处会出硬边。色晕 α 别超 .05×3 层，否则房间像发霉的羊皮纸。
+P.watercolor = (g, pts, color, { layers = 7, alpha = 0.13, amp = 10, seed = 1, edge = 0.1, blend = 'multiply', fill } = {}) => {
+  const r = rng(seed * 7919 + 13), base = P.deform(pts, 3, amp, r);
+  g.save(); g.globalCompositeOperation = blend; g.lineJoin = 'round';
+  for (let k = 0; k < layers; k++) {
+    const q = P.deform(base, 2, amp * 0.55, r);
+    fillPts(g, q); g.globalAlpha = alpha; g.fillStyle = fill || color; g.fill();
+    if (edge) { g.globalAlpha = edge; g.strokeStyle = color; g.lineWidth = 1.6; g.stroke(); }
+  }
+  g.restore();
+};
+P.rectPts = (x, y, w, h) => [[x, y], [x + w, y], [x + w, y + h], [x, y + h]];
+P.ellipsePts = (cx, cy, rx, ry, n = 18) => Array.from({ length: n }, (_, i) => [cx + Math.cos(i / n * Math.PI * 2) * rx, cy + Math.sin(i / n * Math.PI * 2) * ry]);
+
+// ---------- 厚涂鬃毛笔 ----------
+// 一笔 = round(w/1.3) 条平行细鬃（亮度各自 ±17 抖、两端随机缩 0–25%）＋下侧一条淡投影＋上侧零星亮点 → 读成「被刷开的一坨厚颜料」。
+// 只用在受光处（金发、领口、瓷器、珍珠、白毛）。坑：画成「暗影＋主笔＋亮脊」三条整齐的线会读成白色贴纸/创可贴。
+P.impasto = (c, pts, w, col, hi) => {
+  const base = col.startsWith('#') ? P.hex(col) : [240, 230, 210];
+  const A = pts[0], B = pts[pts.length - 1], ang = Math.atan2(B[1] - A[1], B[0] - A[0]), nx = -Math.sin(ang), ny = Math.cos(ang);
+  const r = rng((A[0] * 13 + A[1] * 7) | 0), nb = Math.max(3, Math.round(w / 1.3));
+  c.save(); c.lineCap = 'round';
+  c.strokeStyle = 'rgba(40,18,6,.28)'; c.lineWidth = w * 0.9; c.beginPath(); pts.forEach((p, i) => i ? c.lineTo(p[0] + nx * w * 0.45 + 1, p[1] + ny * w * 0.45 + 1.5) : c.moveTo(p[0] + nx * w * 0.45 + 1, p[1] + ny * w * 0.45 + 1.5)); c.stroke();
+  for (let k = 0; k < nb; k++) {
+    const o = (k / (nb - 1) - 0.5) * w, s0 = r() * 0.25, s1 = 1 - r() * 0.25, sh = (r() - 0.5) * 34 + (k < nb / 2 ? 14 : -10);
+    c.strokeStyle = P.rgb([base[0] + sh, base[1] + sh, base[2] + sh * 0.8], 0.55 + r() * 0.4); c.lineWidth = 1.4 + r() * 1.2; c.beginPath();
+    const n = pts.length - 1; for (let i = 0; i <= 8; i++) { const q = lerp(s0, s1, i / 8), j = Math.min(n - 1, Math.floor(q * n)), f = q * n - j, x = lerp(pts[j][0], pts[j + 1][0], f) + nx * o, y = lerp(pts[j][1], pts[j + 1][1], f) + ny * o; i ? c.lineTo(x, y) : c.moveTo(x, y); }
+    c.stroke();
+  }
+  c.fillStyle = hi || 'rgba(255,250,232,.7)'; for (let k = 0; k < 2 + w / 3; k++) { const q = r(), x = lerp(A[0], B[0], q) - nx * w * 0.3, y = lerp(A[1], B[1], q) - ny * w * 0.3; c.beginPath(); c.arc(x, y, 0.9 + r(), 0, Math.PI * 2); c.fill(); }
+  c.restore();
+};
+
+// ---------- 剪刀折线 ----------
+// 把一圈（闭合）点列按 step 重采样，每点加 ±amp 种子抖动，直线相连 → 手剪纸的边。RIG 部件可用 path.pts 喂进来重剪。
+P.cut = (pts, seed, step = 18, amp = 2.5) => {
+  const r = rng(seed), out = [];
+  for (let i = 0; i < pts.length; i++) {
+    const a = pts[i], b = pts[(i + 1) % pts.length], L = Math.hypot(b[0] - a[0], b[1] - a[1]), n = Math.max(1, Math.round(L / step));
+    for (let k = 0; k < n; k++) { const q = k / n; out.push([lerp(a[0], b[0], q) + (r() - 0.5) * amp * 2, lerp(a[1], b[1], q) + (r() - 0.5) * amp * 2]); }
+  }
+  return U.poly(out);
+};
+})();