【免费下载链接】huashu-art-motion艺术动画skill35种艺术风格、9种解说语法用代码让画动起来。项目地址https://gitcode.com/gh_mirrors/hu/huashu-art-motion点击查看免费下载本篇以仓库中 05_gothic 风格配方卡 为主体逐条对照 scenes/05_gothic.js 的源码实现讲清楚 1290 年哥特泥金手抄本这一段约 4 个八分音符128 BPM是如何用纯代码画出来并让它“活”的静态层一次性缓存、从静态层逐像素分类出「金色度」掩膜、斜向高光只在金箔上扫过、以及少女/猫/蜗牛/老鼠四个角色的编舞参数。读完你可以掌握该项目「风格配方卡 scene 源码」的完整协作方式并能复刻或微调这个 11–22ms/帧 的金箔渲染管线。一、卡片定位35 种风格中的 05 号配方卡huashu-art-motion 是一个“用代码让画动起来”的艺术动画 skill35 种艺术风格、9 种解说语法全部由 Canvas 程序化绘制。每种风格有两份配套资料——配方卡references/风格配方/id.md记录管线、参数、坑与 v2 微调和实现文件scripts/engine/scenes/id.js。在 风格总索引 中05_gothic 一行的核心信息是核心渲染器为「逐像素金箔拉丝压花错 1px 亮线、金色度遮罩高光」母题动作为「金箔斜向高光扫过、藤蔓摇、蜗牛爬、老鼠跑」签名转场为「羊皮纸翻页」当前质量 ★★★一眼认得、可直接用记录在案的当前短板是「金发像兜帽」——即下一轮提质时该优先解决的角色问题。配方卡第一行也给出了性能基线每帧 11–22ms中位 12ms静态层金箔掩膜在init()里一次性建好。这一性能水平远低于 08 风格作者规范 里「目标每帧 ≤150ms」的硬要求为每帧的动态绘制留出了充足预算。二、接口与管线总览按 08 风格作者规范 的接口约定一个风格段就是SCENES[id] { init() {}, draw(c, lt, t) {} }c是 1920×1080 的 2D contextlt是本段局部时间秒t是全片时间。05_gothic.js 在文件头注释里把管线概括为五步实际代码组织如下init() STATIC(); MASK(); ← 一次性预计算全部走 PAINT.cached 缓存 draw(c, lt, t) 1. drawImage(STATIC()) 贴静态层 2. glassTwinkle(c, t) 彩玻璃闪烁 3. goldSweep(c, lt) 斜向高光只落在金色上 4. SPARKS nearSweep → glint 高光经过处出四角星闪光 5. vines(c, t) 藤蔓花饰摇摆 6. snail(c, lt, t) 蜗牛 62px/s 左爬 7. runMouse(c, lt, t) 文字栏下的老鼠跑过 360px 8. cat(c, K, t, ch) 人脸猫拎老鼠 9. girl(c, G, lt, t, ch) 少女端金杯共享编舞 10. P.grain(...) 极淡颗粒做旧其中STATIC与MASK都是惰性单例lib/paint.js 的P.cached(key, w, h, fn)首次调用时建一张离屏 canvas 并执行绘制闭包之后每次调用直接返回同一张画布。这就是配方卡「静态层金箔掩膜在init()里一次性建好」的实现——init()显式预热两张缓存避免首帧尖峰。每帧真正重算的只有彩窗闪烁、高光扫带、藤蔓、小兽与两个角色。三、静态层 goth_static羊皮纸上的金箔页静态层由 STATIC 闭包 按固定顺序拼接七个子绘制函数与配方卡「羊皮纸 → 金箔 → 菱格压花 → 山墙、小尖塔、侧柱 → 尖拱窗和彩玻璃 → 桌子、宝座 → 拉丁文栏 → 页边小骑士」完全一致const STATIC () P.cached(goth_static, W, H, (g) { parchment(g); lattice(g); architecture(g); windowStatic(g); furniture(g); textColumn(g); knight(g); });各层要点羊皮纸parchment()调P.texture(goth_parch, #ecdfc0, { scale: 0.0028, amt: 20, grain: 9, dark: #c9ae80, seed: 3 })——P.texture 是「底色 fbm 多层噪声斑驳 细颗粒」的缓存纹理生成器随后再叠一个中心透亮的径向渐变做边缘做旧。金箔区lattice()先把goldTex()画进 clip 到 PANEL主画面板 Path2D的区域内再在其上叠菱格压花与金箔接缝。建筑骨架architecture()画三段山墙色带粉/蓝/蓝、三叶拱、十字顶饰、四个小尖塔、左右两侧红蓝粉相间的方块侧柱、草地与下边框。色带上的白点间隔 22px、卷叶饰金球间隔 34px都是常量。尖拱窗arch()工具函数L20-L24用半径大于半宽的圆弧拼出真尖拱窗内是四叶玫瑰窗加两扇柳叶窗LANCETS柳叶窗内按 38px 菱形格铺红蓝两色「彩玻璃」偶数菱心加金点、白点铅条就是沿 xy 与 x−y 两族斜线画的金线。拉丁文栏10 条格线、红蓝双笔花、蓝底金线的首字母大写 H118px UnifrakturMaguntia正文 9 行拉丁文用LINES数组定义正文行距 62px、字号 44px——字号取值的取舍见第六节。页边小骑士knight()在 (760,1010) 画一个戴头盔、骑马的小滑稽画drollery这是中世纪手抄本页边的典型元素。四、逐像素金箔 goldTex拉丝纹理的来源金箔质感是这一段的签名渲染器实现见 goldTex。它在 1920×1080 的 ImageData 上只遍历金箔面板区域x: 290–1480y: 20–960每个像素独立算明度因子f再在三个金色之间插值const big P.fbm(x * 0.0035, y * 0.0035 7, 3); const brush P.noise(x * 0.004, y * 0.09) * 0.5 P.noise(x * 0.012, y * 0.25) * 0.3; // 横向打磨纹 const light 0.18 - (x - x0) / (x1 - x0) * 0.12 - (y - y0) / (y1 - y0) * 0.16; // 左上受光 let f 0.52 big * 0.42 brush * 0.22 light (r() - .5) * 0.10; // 颗粒 ±0.05 f clamp(f, 0, 1); const c0 f 0.5 ? P.mix(lo, mid, f * 2) : P.mix(mid, hi, (f - 0.5) * 2);配方卡把f概括为0.52 fbm(x·.0035)·0.42 横向打磨纹 noise(x·.004, y·.09)·0.5 左上受光 颗粒±0.05源码实际用了两层打磨纹0.004/0.09 与 0.012/0.25加权 0.22颗粒项是(r()-0.5)*0.10。几个关键设计点三色插值goldLo #9c6a1a→gold #d9a63a→goldHi #f8de86f0.5在低/中色之间混f≥0.5在中/高色之间混保证金色不溢出饱和区。横向拉丝的秘密打磨纹的 y 频率0.09是 x 频率0.004的 22.5 倍——即 y 方向变化极快、x 方向变化极慢噪声等高线因此被压平成横向条纹「看起来是横向的金属拉丝」。这是用噪声频率比做向量的标准手法与 04 纯代码绘制 渲染器速查表里「金箔05_gothic逐像素打磨纹压花暗线错 1px 亮线」的描述一致。确定性颗粒用的是R_(5)即U.rng(5)种子随机同一像素永远拿到同一个扰动值满足规范里「所有随机用种子同一个 t 两次渲染逐像素一致」的硬要求。左上受光light项从左上角的 0.18 线性衰减到右下模拟光源方向与页面其余元素首字母 H 的投影 offset (3,3)、窗的 shadowOffset (5,5)光向一致。菱格压花与金箔接缝lattice()L57-L81在金箔上再压两层菱格间距s 46px沿 xy、x−y 为常数的两族斜线。每条线画两遍先rgba(255,240,180,.55)亮线偏移 1.2px再rgba(110,66,10,.55)暗线不偏移——亮线错在暗线一侧读起来就是「刻进金里」的浮雕边。菱心处压 4 个点左上点亮偏移 −0.6px、右下点暗偏移 0.7px与整体左上受光同向。金箔接缝每隔 118px 竖线、125px 横线画一条rgba(120,75,15,.18)的极淡线线端带 2–3px 错位模仿「金箔是一片片贴上去的」。五、金色度掩膜 goth_mask不用再画一遍遮罩这是配方卡最核心的技巧金箔高光不必手工维护一份「金色形状列表」而是直接从已画好的静态层逐像素分类得到。实现见 MASKconst s STATIC().getContext(2d).getImageData(0, 0, W, H).data; for (let i 0; i W * H * 4; i 4) { const r s[i], gg s[i 1], b s[i 2]; const k clamp((r - b - 70) / 50) * clamp((gg - b - 30) / 40) * clamp((r - 140) / 40); d[i] d[i 1] d[i 2] 255; d[i 3] k * 255; // 结果当 alpha }「金色度」k是三个 clamp 因子的乘积每个因子都在筛一种干扰色clamp((r-b-70)/50)金色 r−b 差远大于 70。羊皮纸 (236,223,194) 的 r−b 只有 42被直接排除clamp((g-b-30)/40)粉色带 b 值高、g−b 不够被排除clamp((r-140)/40)排除暗部木纹、墨线只让足够亮的金色通过。三个因子各自带 40–50 的过渡带所以掩膜边缘是渐变 alpha 而非硬边。效果是凡是画面上金色的地方——背景金箔、首字母 H、山墙顶饰的十字与金球、侧柱顶、桌下的宝座金边、杯沿——都会自动被高光扫到。后续任何金色元素只要画进静态层就免费获得高光响应这正是「不用再画一遍金色形状来做遮罩」的工程价值。六、斜向高光 goldSweep从 inOut 到匀速的调参史动态高光在 goldSweep四步走在 920px 宽的 scratchP.scratch(gothSweep)上画一条线性渐变光带斜率K_SLANT 0.45“/” 方向globalCompositeOperation destination-in乘以金色度掩膜——光带只保留落在金色上的部分以lighter、alpha 0.85 叠回主画面v1 是 0.62见「v2 微调」光带中心按匀速移动sweepX lerp(150, 1650, clamp((lt - 0.08) / 1.15))。配方卡专门记录了这里的踩坑最初用 inOut 缓动结果 0.9s 时高光已经扫出金区少女身上看不到改成匀速后0.3s 扫到窗边、0.9s 正好扫过少女——关键动作少女端杯恰好被高光擦过。高光经过处还会闪光11 个固定点SPARKS背景、首字母、金球、山墙顶饰的位置加上少女光环都用同一个判定函数 nearSweepconst nearSweep (x, y, lt) { const u x K_SLANT * (y - 540); return clamp(1 - Math.abs(u - sweepX(lt)) / 70); };把点按斜率投影到光带坐标u与光带中心距 70px 内开始出四角星闪光glint距离越近强度越大少女光环则在nearSweep 0时叠加一圈加亮。四角星本身是两段二次贝塞尔对勾出的星形 pathlighter混合。七、母题动画让画面在 0.25–1.4s 窗口内看得出活配方卡要求「母题动画在 0.25–1.4s 窗口内都看得出」即短到单帧对照也能读出运动。本段有五个并行母题母题参数源码位置藤蔓两条茎共约 330 个采样点每点加[sin(t·2.6i·0.09vi)·5, cos(t·2.1i·0.07)·4]摆动每 3–5 个点挂一片三瓣常春藤叶蓝/红/金 5 色轮换或一颗带 3 根须的金球叶绕挂点摆sin(t·3.6k·1.7vi)·0.42叶缩放 1.05–1.45VINES/ivy/vines彩玻璃闪烁每扇柳叶窗 40 个哈希定位点sin(t·5 h·40) 0.6时点亮一团半径 22px 的白色径向光lighterglassTwinkle蜗牛x 912 - 62·lt62px/s 左爬触角sin(t·6)·4sin(t·8dx)·3晃动snail跑鼠q clamp((lt-0.12)/1.05)0.12–1.17s 内从 1890 跑到 1530360px腿sin(t·40)即每秒 40 弧度runMouse猫拎鼠老鼠尾巴挂在爪上钟摆sw 0.32·sin(t·5.5)鼠体绕爪旋转 −sw小鼠前腿sin(t·9)·3乱蹬cat两个可迁移的经验也记录在配方卡里藤蔓叶片缩放第一版用 0.85「太小太稀改为 1.05–1.45 后密度才接近原片」——装饰密度的校准要靠对照闪点判定用 0.6阈值而非全程呼吸是因为彩玻璃的「闪」应是有节奏地亮灭而不是渐变。八、角色为什么少女不调 RIG.drawGirllib/rig.js 提供统一角色骨架RIG.girl返回逐部位 Path2Dskirt/torso/face/bangs/hairBack…与锚点G.ARIG.cat返回 cat 的 body/legs/head/tail。35 个时代共用同一副骨架和共享编舞P.choreo(lt, t)产出 cup/sip/blink/tail 等只换画法——这是「同一对角色穿越各时代」的来源。哥特段故意不调用RIG.drawGirl配方卡给出两个原因drawGirl 一定会把杯子画成带把手的马克杯时代错位1290 年该是金圣杯斗篷和光环要插在骨架层序的中间某几层之间。于是 girl() 直接拿G的 Path2D 自己按哥特圣像的顺序画光环中心在headC (16,−22)、r114 的径向渐变金盘外描墨线内圈红环再绕环均布 36 颗压印点——泥金圣像的典型处理光环还接了nearSweep高光响应波浪长金发RIG.smooth生成的开放 path发梢随sin(t·2.4)·3轻摆红袍G.skirt/G.torso平涂朱红clip 后每 20px 画一条金细竖条袍摆一道 12px 金边蓝斗篷锚在A.nape/A.back上重新用RIG.smooth生成的 path金边一道、内叠 3 条深蓝褶线头与五官杏眼闭合时是眨眼弧线、细眉、小红唇、颊晕金圣杯chalice()杯身横向四段金渐变#a87020 → #fbe08a → #e0ad40 → #8a5a14杯口红酒面 白色高光椭圆杯沿一颗sin(t·71)脉动的四角星杯上热气走P.steam的细墨线。猫的「人脸化」同样体现时代适配cat()脸部是一块奶油色椭圆杏眼瞳孔挤到右侧x5斜睨少女上眼皮加粗、挑眉、嘴角下撇、两颊红晕——手抄本里常见的拟人猫。四肢上只用骨架的K.legs[0]着地另一条前腿用 RIG.limbA→B 变宽胶囊自画成抬起姿势老鼠就挂在爪端。拉丁文栏是角色的「文字皮肤」UnifrakturMaguntia 44px字体文件在 lib/fonts/配方卡特别记录「50px 会把 cum poculo suo 挤出画面右边」——字号是量出来的不是拍出来的。句首的 Cattus/Nemo/Mus 用朱红渲染L235 的正则/^(Cattus|Nemo|Mus)/对应中世纪抄本的朱批习惯9 行正文讲的就是「一猫盯杯、老鼠知道却永不言语」的小寓言。九、入口、转场与播放参数段落入口在 eras.jseighths: 4128 BPM 下占 4 个八分音符、transition: { type: pageTurn, dur: 0.32 }年份牌 1290 用 LibreBaskerville-700、标签 Gothic illumination 用 IMFellEnglish-400。签名转场 pageTurn 是「羊皮纸翻页」一条 260px 宽的卷边从右向左扫过inOut 缓动卷边带羊皮纸底色 旧画镜像透印α 0.18 圆柱明暗渐变卷边下方还拖一道 90px 投影落在新页上。渲染与自检流程沿用 08 风格作者规范 给出的命令对任意段落通用# 静帧对照原作/参考拼图看一眼认不认得出 uv run --with playwright python 工程/render.py --solo 05_gothic --stills 0.4,0.6,0.8,1.0 --out 渲染/05_gothic # 数字运动/静止帧对/跳变/耗时/确定性 uv run skill/scripts/qa.py --project 工程 --ids 05_gothic十、坑、v2 微调与后续改进配方卡「坑」一节记录的两个陷阱都值得写进任何同类管线的 checklistscratchpad 与其它时代作者共用check.py曾被别人覆盖过一次——自检脚本要放进自己的子目录。对照源码动态高光用的P.scratch(gothSweep)paint.js L12与静态层、纹理同池缓存scratch 键名冲突会直接串画。运动差分图若拿 lt0 当基准会被引擎前 20 帧的镜头冲击1.03 缩放污染全屏都算在动。基准要取 lt≥0.35。这与 04 纯代码绘制 第六节「渲两帧避开转场后 0.35s 的镜头冲击做帧差」的自检方法一致。「v2 微调」一节是对照原片后的一轮参数重校全部可在当前源码中找到落点参数v1v2当前源码值藤蔓摆动幅度基准×2sin(…)·5L290叶片摆动0.280.42L297彩窗闪点26 个40 个L332金箔高光 alpha0.620.85L318高光带原宽加宽静止段帧差1.101.32原片 1.64仍偏静留待下一轮帧差 1.32 对原片 1.64 的差距说明这一段的「静帧美」已达标、动态量还差一截——这正是配方卡体系的价值把每次复刻的量化差距写下来作为下次迭代的起点。INDEX.md 同时记录了当前短板「金发像兜帽」与「静止段偏静」共同构成下一轮提质的两个明确目标。十一、这套手法的辐射金箔配方被谁复用金箔不是孤立技巧。04 纯代码绘制 的渲染器速查表把它单列一行「金箔05_gothic泥金、圣像、装饰逐像素打磨纹压花暗线错 1px 亮线高光只落在『金色度』遮罩上」。风格总索引 中 18_klimt克里姆特金色时期一行的核心渲染器写着「复用哥特金箔」18_klimt.js 的文件头注释也确认其管线第一步同样是「金箔墙逐像素斑驳拉丝金粉缓存金箔接缝一片片贴上去的方块」。做新风格时「逐像素噪声纹理缓存 从静态层分类出掩膜 掩膜上走定向高光」这三件套是可以直接搬走的通用模式。小结05_gothic 展示了一条完整的「静态资产缓存 → 像素级风格化 → 掩膜驱动动态 → 骨架换装角色 → 量化自检」链路init()里STATIC()/MASK()各建一次每帧 11–22ms 只重算动态层所有随机带种子保证逐像素可复现每个参数46px 菱格、118×125 接缝、K0.45、70px 闪光半径、44px 字号都来自与参考片的量化对照。按 08 风格作者规范 的四问检验——一眼认得出是哥特泥金、角色与背景融合光环、圣杯都过了金箔语言、停留窗口内画在动且不闪不卡、无遮挡断线穿帮——这一段的配方卡与源码就是可直接对照复用的模板。赞分享【免费下载链接】huashu-art-motion艺术动画skill35种艺术风格、9种解说语法用代码让画动起来。项目地址https://gitcode.com/gh_mirrors/hu/huashu-art-motion点击查看免费下载相关推荐huashu-art-motion 角色实现指南AI 生帧 代码合成让角色在 35 种画风里动起来huashu art motion 角色实现指南AI 生帧 代码合成让角色在 35 种画风里动起来 本文基于仓库文档 references/10 角色.three.js TriangleBlurShader 详解可分离金字塔滤波的三角形模糊着色器three.js TriangleBlurShader 详解可分离金字塔滤波的三角形模糊着色器 TriangleBlurShader 是 three.js 官前端3D渲染图形学SharpEmu性能优化指南Vulkan管线缓存、宿主缓冲池与着色器黄金测试SharpEmu性能优化指南Vulkan管线缓存、宿主缓冲池与着色器黄金测试 SharpEmu 是一款实验性的 PlayStation 5 模拟器支持 Wi游戏开发图形学逆向工程上一篇Symfony VarDumper源码解析RedisCaster如何优雅呈现Redis连接状态下一篇如何用Plop自动化Redshift数据仓库的代码生成10个高效技巧创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/10/9 1:50:08 · 阅读 1.2k huashu-art-motion 05_gothic 哥特泥金手抄本：逐像素金箔着色、金色度掩膜与角色编舞全管线
【免费下载链接】huashu-art-motion艺术动画skill35种艺术风格、9种解说语法用代码让画动起来。项目地址https://gitcode.com/gh_mirrors/hu/huashu-art-motion点击查看免费下载本篇以仓库中 05_gothic 风格配方卡 为主体逐条对照 scenes/05_gothic.js 的源码实现讲清楚 1290 年哥特泥金手抄本这一段约 4 个八分音符128 BPM是如何用纯代码画出来并让它“活”的静态层一次性缓存、从静态层逐像素分类出「金色度」掩膜、斜向高光只在金箔上扫过、以及少女/猫/蜗牛/老鼠四个角色的编舞参数。读完你可以掌握该项目「风格配方卡 scene 源码」的完整协作方式并能复刻或微调这个 11–22ms/帧 的金箔渲染管线。一、卡片定位35 种风格中的 05 号配方卡huashu-art-motion 是一个“用代码让画动起来”的艺术动画 skill35 种艺术风格、9 种解说语法全部由 Canvas 程序化绘制。每种风格有两份配套资料——配方卡references/风格配方/id.md记录管线、参数、坑与 v2 微调和实现文件scripts/engine/scenes/id.js。在 风格总索引 中05_gothic 一行的核心信息是核心渲染器为「逐像素金箔拉丝压花错 1px 亮线、金色度遮罩高光」母题动作为「金箔斜向高光扫过、藤蔓摇、蜗牛爬、老鼠跑」签名转场为「羊皮纸翻页」当前质量 ★★★一眼认得、可直接用记录在案的当前短板是「金发像兜帽」——即下一轮提质时该优先解决的角色问题。配方卡第一行也给出了性能基线每帧 11–22ms中位 12ms静态层金箔掩膜在init()里一次性建好。这一性能水平远低于 08 风格作者规范 里「目标每帧 ≤150ms」的硬要求为每帧的动态绘制留出了充足预算。二、接口与管线总览按 08 风格作者规范 的接口约定一个风格段就是SCENES[id] { init() {}, draw(c, lt, t) {} }c是 1920×1080 的 2D contextlt是本段局部时间秒t是全片时间。05_gothic.js 在文件头注释里把管线概括为五步实际代码组织如下init() STATIC(); MASK(); ← 一次性预计算全部走 PAINT.cached 缓存 draw(c, lt, t) 1. drawImage(STATIC()) 贴静态层 2. glassTwinkle(c, t) 彩玻璃闪烁 3. goldSweep(c, lt) 斜向高光只落在金色上 4. SPARKS nearSweep → glint 高光经过处出四角星闪光 5. vines(c, t) 藤蔓花饰摇摆 6. snail(c, lt, t) 蜗牛 62px/s 左爬 7. runMouse(c, lt, t) 文字栏下的老鼠跑过 360px 8. cat(c, K, t, ch) 人脸猫拎老鼠 9. girl(c, G, lt, t, ch) 少女端金杯共享编舞 10. P.grain(...) 极淡颗粒做旧其中STATIC与MASK都是惰性单例lib/paint.js 的P.cached(key, w, h, fn)首次调用时建一张离屏 canvas 并执行绘制闭包之后每次调用直接返回同一张画布。这就是配方卡「静态层金箔掩膜在init()里一次性建好」的实现——init()显式预热两张缓存避免首帧尖峰。每帧真正重算的只有彩窗闪烁、高光扫带、藤蔓、小兽与两个角色。三、静态层 goth_static羊皮纸上的金箔页静态层由 STATIC 闭包 按固定顺序拼接七个子绘制函数与配方卡「羊皮纸 → 金箔 → 菱格压花 → 山墙、小尖塔、侧柱 → 尖拱窗和彩玻璃 → 桌子、宝座 → 拉丁文栏 → 页边小骑士」完全一致const STATIC () P.cached(goth_static, W, H, (g) { parchment(g); lattice(g); architecture(g); windowStatic(g); furniture(g); textColumn(g); knight(g); });各层要点羊皮纸parchment()调P.texture(goth_parch, #ecdfc0, { scale: 0.0028, amt: 20, grain: 9, dark: #c9ae80, seed: 3 })——P.texture 是「底色 fbm 多层噪声斑驳 细颗粒」的缓存纹理生成器随后再叠一个中心透亮的径向渐变做边缘做旧。金箔区lattice()先把goldTex()画进 clip 到 PANEL主画面板 Path2D的区域内再在其上叠菱格压花与金箔接缝。建筑骨架architecture()画三段山墙色带粉/蓝/蓝、三叶拱、十字顶饰、四个小尖塔、左右两侧红蓝粉相间的方块侧柱、草地与下边框。色带上的白点间隔 22px、卷叶饰金球间隔 34px都是常量。尖拱窗arch()工具函数L20-L24用半径大于半宽的圆弧拼出真尖拱窗内是四叶玫瑰窗加两扇柳叶窗LANCETS柳叶窗内按 38px 菱形格铺红蓝两色「彩玻璃」偶数菱心加金点、白点铅条就是沿 xy 与 x−y 两族斜线画的金线。拉丁文栏10 条格线、红蓝双笔花、蓝底金线的首字母大写 H118px UnifrakturMaguntia正文 9 行拉丁文用LINES数组定义正文行距 62px、字号 44px——字号取值的取舍见第六节。页边小骑士knight()在 (760,1010) 画一个戴头盔、骑马的小滑稽画drollery这是中世纪手抄本页边的典型元素。四、逐像素金箔 goldTex拉丝纹理的来源金箔质感是这一段的签名渲染器实现见 goldTex。它在 1920×1080 的 ImageData 上只遍历金箔面板区域x: 290–1480y: 20–960每个像素独立算明度因子f再在三个金色之间插值const big P.fbm(x * 0.0035, y * 0.0035 7, 3); const brush P.noise(x * 0.004, y * 0.09) * 0.5 P.noise(x * 0.012, y * 0.25) * 0.3; // 横向打磨纹 const light 0.18 - (x - x0) / (x1 - x0) * 0.12 - (y - y0) / (y1 - y0) * 0.16; // 左上受光 let f 0.52 big * 0.42 brush * 0.22 light (r() - .5) * 0.10; // 颗粒 ±0.05 f clamp(f, 0, 1); const c0 f 0.5 ? P.mix(lo, mid, f * 2) : P.mix(mid, hi, (f - 0.5) * 2);配方卡把f概括为0.52 fbm(x·.0035)·0.42 横向打磨纹 noise(x·.004, y·.09)·0.5 左上受光 颗粒±0.05源码实际用了两层打磨纹0.004/0.09 与 0.012/0.25加权 0.22颗粒项是(r()-0.5)*0.10。几个关键设计点三色插值goldLo #9c6a1a→gold #d9a63a→goldHi #f8de86f0.5在低/中色之间混f≥0.5在中/高色之间混保证金色不溢出饱和区。横向拉丝的秘密打磨纹的 y 频率0.09是 x 频率0.004的 22.5 倍——即 y 方向变化极快、x 方向变化极慢噪声等高线因此被压平成横向条纹「看起来是横向的金属拉丝」。这是用噪声频率比做向量的标准手法与 04 纯代码绘制 渲染器速查表里「金箔05_gothic逐像素打磨纹压花暗线错 1px 亮线」的描述一致。确定性颗粒用的是R_(5)即U.rng(5)种子随机同一像素永远拿到同一个扰动值满足规范里「所有随机用种子同一个 t 两次渲染逐像素一致」的硬要求。左上受光light项从左上角的 0.18 线性衰减到右下模拟光源方向与页面其余元素首字母 H 的投影 offset (3,3)、窗的 shadowOffset (5,5)光向一致。菱格压花与金箔接缝lattice()L57-L81在金箔上再压两层菱格间距s 46px沿 xy、x−y 为常数的两族斜线。每条线画两遍先rgba(255,240,180,.55)亮线偏移 1.2px再rgba(110,66,10,.55)暗线不偏移——亮线错在暗线一侧读起来就是「刻进金里」的浮雕边。菱心处压 4 个点左上点亮偏移 −0.6px、右下点暗偏移 0.7px与整体左上受光同向。金箔接缝每隔 118px 竖线、125px 横线画一条rgba(120,75,15,.18)的极淡线线端带 2–3px 错位模仿「金箔是一片片贴上去的」。五、金色度掩膜 goth_mask不用再画一遍遮罩这是配方卡最核心的技巧金箔高光不必手工维护一份「金色形状列表」而是直接从已画好的静态层逐像素分类得到。实现见 MASKconst s STATIC().getContext(2d).getImageData(0, 0, W, H).data; for (let i 0; i W * H * 4; i 4) { const r s[i], gg s[i 1], b s[i 2]; const k clamp((r - b - 70) / 50) * clamp((gg - b - 30) / 40) * clamp((r - 140) / 40); d[i] d[i 1] d[i 2] 255; d[i 3] k * 255; // 结果当 alpha }「金色度」k是三个 clamp 因子的乘积每个因子都在筛一种干扰色clamp((r-b-70)/50)金色 r−b 差远大于 70。羊皮纸 (236,223,194) 的 r−b 只有 42被直接排除clamp((g-b-30)/40)粉色带 b 值高、g−b 不够被排除clamp((r-140)/40)排除暗部木纹、墨线只让足够亮的金色通过。三个因子各自带 40–50 的过渡带所以掩膜边缘是渐变 alpha 而非硬边。效果是凡是画面上金色的地方——背景金箔、首字母 H、山墙顶饰的十字与金球、侧柱顶、桌下的宝座金边、杯沿——都会自动被高光扫到。后续任何金色元素只要画进静态层就免费获得高光响应这正是「不用再画一遍金色形状来做遮罩」的工程价值。六、斜向高光 goldSweep从 inOut 到匀速的调参史动态高光在 goldSweep四步走在 920px 宽的 scratchP.scratch(gothSweep)上画一条线性渐变光带斜率K_SLANT 0.45“/” 方向globalCompositeOperation destination-in乘以金色度掩膜——光带只保留落在金色上的部分以lighter、alpha 0.85 叠回主画面v1 是 0.62见「v2 微调」光带中心按匀速移动sweepX lerp(150, 1650, clamp((lt - 0.08) / 1.15))。配方卡专门记录了这里的踩坑最初用 inOut 缓动结果 0.9s 时高光已经扫出金区少女身上看不到改成匀速后0.3s 扫到窗边、0.9s 正好扫过少女——关键动作少女端杯恰好被高光擦过。高光经过处还会闪光11 个固定点SPARKS背景、首字母、金球、山墙顶饰的位置加上少女光环都用同一个判定函数 nearSweepconst nearSweep (x, y, lt) { const u x K_SLANT * (y - 540); return clamp(1 - Math.abs(u - sweepX(lt)) / 70); };把点按斜率投影到光带坐标u与光带中心距 70px 内开始出四角星闪光glint距离越近强度越大少女光环则在nearSweep 0时叠加一圈加亮。四角星本身是两段二次贝塞尔对勾出的星形 pathlighter混合。七、母题动画让画面在 0.25–1.4s 窗口内看得出活配方卡要求「母题动画在 0.25–1.4s 窗口内都看得出」即短到单帧对照也能读出运动。本段有五个并行母题母题参数源码位置藤蔓两条茎共约 330 个采样点每点加[sin(t·2.6i·0.09vi)·5, cos(t·2.1i·0.07)·4]摆动每 3–5 个点挂一片三瓣常春藤叶蓝/红/金 5 色轮换或一颗带 3 根须的金球叶绕挂点摆sin(t·3.6k·1.7vi)·0.42叶缩放 1.05–1.45VINES/ivy/vines彩玻璃闪烁每扇柳叶窗 40 个哈希定位点sin(t·5 h·40) 0.6时点亮一团半径 22px 的白色径向光lighterglassTwinkle蜗牛x 912 - 62·lt62px/s 左爬触角sin(t·6)·4sin(t·8dx)·3晃动snail跑鼠q clamp((lt-0.12)/1.05)0.12–1.17s 内从 1890 跑到 1530360px腿sin(t·40)即每秒 40 弧度runMouse猫拎鼠老鼠尾巴挂在爪上钟摆sw 0.32·sin(t·5.5)鼠体绕爪旋转 −sw小鼠前腿sin(t·9)·3乱蹬cat两个可迁移的经验也记录在配方卡里藤蔓叶片缩放第一版用 0.85「太小太稀改为 1.05–1.45 后密度才接近原片」——装饰密度的校准要靠对照闪点判定用 0.6阈值而非全程呼吸是因为彩玻璃的「闪」应是有节奏地亮灭而不是渐变。八、角色为什么少女不调 RIG.drawGirllib/rig.js 提供统一角色骨架RIG.girl返回逐部位 Path2Dskirt/torso/face/bangs/hairBack…与锚点G.ARIG.cat返回 cat 的 body/legs/head/tail。35 个时代共用同一副骨架和共享编舞P.choreo(lt, t)产出 cup/sip/blink/tail 等只换画法——这是「同一对角色穿越各时代」的来源。哥特段故意不调用RIG.drawGirl配方卡给出两个原因drawGirl 一定会把杯子画成带把手的马克杯时代错位1290 年该是金圣杯斗篷和光环要插在骨架层序的中间某几层之间。于是 girl() 直接拿G的 Path2D 自己按哥特圣像的顺序画光环中心在headC (16,−22)、r114 的径向渐变金盘外描墨线内圈红环再绕环均布 36 颗压印点——泥金圣像的典型处理光环还接了nearSweep高光响应波浪长金发RIG.smooth生成的开放 path发梢随sin(t·2.4)·3轻摆红袍G.skirt/G.torso平涂朱红clip 后每 20px 画一条金细竖条袍摆一道 12px 金边蓝斗篷锚在A.nape/A.back上重新用RIG.smooth生成的 path金边一道、内叠 3 条深蓝褶线头与五官杏眼闭合时是眨眼弧线、细眉、小红唇、颊晕金圣杯chalice()杯身横向四段金渐变#a87020 → #fbe08a → #e0ad40 → #8a5a14杯口红酒面 白色高光椭圆杯沿一颗sin(t·71)脉动的四角星杯上热气走P.steam的细墨线。猫的「人脸化」同样体现时代适配cat()脸部是一块奶油色椭圆杏眼瞳孔挤到右侧x5斜睨少女上眼皮加粗、挑眉、嘴角下撇、两颊红晕——手抄本里常见的拟人猫。四肢上只用骨架的K.legs[0]着地另一条前腿用 RIG.limbA→B 变宽胶囊自画成抬起姿势老鼠就挂在爪端。拉丁文栏是角色的「文字皮肤」UnifrakturMaguntia 44px字体文件在 lib/fonts/配方卡特别记录「50px 会把 cum poculo suo 挤出画面右边」——字号是量出来的不是拍出来的。句首的 Cattus/Nemo/Mus 用朱红渲染L235 的正则/^(Cattus|Nemo|Mus)/对应中世纪抄本的朱批习惯9 行正文讲的就是「一猫盯杯、老鼠知道却永不言语」的小寓言。九、入口、转场与播放参数段落入口在 eras.jseighths: 4128 BPM 下占 4 个八分音符、transition: { type: pageTurn, dur: 0.32 }年份牌 1290 用 LibreBaskerville-700、标签 Gothic illumination 用 IMFellEnglish-400。签名转场 pageTurn 是「羊皮纸翻页」一条 260px 宽的卷边从右向左扫过inOut 缓动卷边带羊皮纸底色 旧画镜像透印α 0.18 圆柱明暗渐变卷边下方还拖一道 90px 投影落在新页上。渲染与自检流程沿用 08 风格作者规范 给出的命令对任意段落通用# 静帧对照原作/参考拼图看一眼认不认得出 uv run --with playwright python 工程/render.py --solo 05_gothic --stills 0.4,0.6,0.8,1.0 --out 渲染/05_gothic # 数字运动/静止帧对/跳变/耗时/确定性 uv run skill/scripts/qa.py --project 工程 --ids 05_gothic十、坑、v2 微调与后续改进配方卡「坑」一节记录的两个陷阱都值得写进任何同类管线的 checklistscratchpad 与其它时代作者共用check.py曾被别人覆盖过一次——自检脚本要放进自己的子目录。对照源码动态高光用的P.scratch(gothSweep)paint.js L12与静态层、纹理同池缓存scratch 键名冲突会直接串画。运动差分图若拿 lt0 当基准会被引擎前 20 帧的镜头冲击1.03 缩放污染全屏都算在动。基准要取 lt≥0.35。这与 04 纯代码绘制 第六节「渲两帧避开转场后 0.35s 的镜头冲击做帧差」的自检方法一致。「v2 微调」一节是对照原片后的一轮参数重校全部可在当前源码中找到落点参数v1v2当前源码值藤蔓摆动幅度基准×2sin(…)·5L290叶片摆动0.280.42L297彩窗闪点26 个40 个L332金箔高光 alpha0.620.85L318高光带原宽加宽静止段帧差1.101.32原片 1.64仍偏静留待下一轮帧差 1.32 对原片 1.64 的差距说明这一段的「静帧美」已达标、动态量还差一截——这正是配方卡体系的价值把每次复刻的量化差距写下来作为下次迭代的起点。INDEX.md 同时记录了当前短板「金发像兜帽」与「静止段偏静」共同构成下一轮提质的两个明确目标。十一、这套手法的辐射金箔配方被谁复用金箔不是孤立技巧。04 纯代码绘制 的渲染器速查表把它单列一行「金箔05_gothic泥金、圣像、装饰逐像素打磨纹压花暗线错 1px 亮线高光只落在『金色度』遮罩上」。风格总索引 中 18_klimt克里姆特金色时期一行的核心渲染器写着「复用哥特金箔」18_klimt.js 的文件头注释也确认其管线第一步同样是「金箔墙逐像素斑驳拉丝金粉缓存金箔接缝一片片贴上去的方块」。做新风格时「逐像素噪声纹理缓存 从静态层分类出掩膜 掩膜上走定向高光」这三件套是可以直接搬走的通用模式。小结05_gothic 展示了一条完整的「静态资产缓存 → 像素级风格化 → 掩膜驱动动态 → 骨架换装角色 → 量化自检」链路init()里STATIC()/MASK()各建一次每帧 11–22ms 只重算动态层所有随机带种子保证逐像素可复现每个参数46px 菱格、118×125 接缝、K0.45、70px 闪光半径、44px 字号都来自与参考片的量化对照。按 08 风格作者规范 的四问检验——一眼认得出是哥特泥金、角色与背景融合光环、圣杯都过了金箔语言、停留窗口内画在动且不闪不卡、无遮挡断线穿帮——这一段的配方卡与源码就是可直接对照复用的模板。赞分享【免费下载链接】huashu-art-motion艺术动画skill35种艺术风格、9种解说语法用代码让画动起来。项目地址https://gitcode.com/gh_mirrors/hu/huashu-art-motion点击查看免费下载相关推荐huashu-art-motion 角色实现指南AI 生帧 代码合成让角色在 35 种画风里动起来huashu art motion 角色实现指南AI 生帧 代码合成让角色在 35 种画风里动起来 本文基于仓库文档 references/10 角色.three.js TriangleBlurShader 详解可分离金字塔滤波的三角形模糊着色器three.js TriangleBlurShader 详解可分离金字塔滤波的三角形模糊着色器 TriangleBlurShader 是 three.js 官前端3D渲染图形学SharpEmu性能优化指南Vulkan管线缓存、宿主缓冲池与着色器黄金测试SharpEmu性能优化指南Vulkan管线缓存、宿主缓冲池与着色器黄金测试 SharpEmu 是一款实验性的 PlayStation 5 模拟器支持 Wi游戏开发图形学逆向工程上一篇Symfony VarDumper源码解析RedisCaster如何优雅呈现Redis连接状态下一篇如何用Plop自动化Redshift数据仓库的代码生成10个高效技巧创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考