【免费下载链接】ClaudeAnimationBaseA starter kit for animating hand-painted cartoons with Claude: p5.js p5.brush, the Clawd character, 31 acted emotions and a guide for the model项目地址https://gitcode.com/gh_mirrors/cl/ClaudeAnimationBase点击查看免费下载ClaudeAnimationBase 是一个用 p5.js 与 p5.brush 制作手绘风角色动画的开源起步套件内置角色 Clawd、31 种会动的情绪以及一份写给模型也写给你的 ANIMATION_GUIDE.md。官方明确写道——No design here is final所有设计都只是起点换角色、加情绪、做道具都被鼓励。本文带你完成这三步扩展。一、动手前先认识这套手绘动画引擎扩展的前提是知道画布怎么工作。核心只有三个规则摘自 ANIMATION_GUIDE.md 的 The rules 部分规则一句话解释️ 手绘介质所有图形必须用paint()和inkLine()画线条以每秒 12 次的boil抖动模仿手绘 纯函数时间每一帧是t的纯函数并行乱序渲染禁止跨帧状态 画布 1920×1080原点左上、y 向下角色靠画出来的关键视图转向不用 3D 投影主要文件分工如下扩展时你只会在其中两三个文件里动手角色与情绪库src/clawd.js —— 视图、31 情绪、眼睛、嘴、帽子、emote、舞蹈引擎工具src/core.js —— 调色板PAL、paint()、缓动、jump()/take()等时间轴src/timeline.js ——shots()镜头注册与brushWipe()转场你的视频src/scenes/ 下新建文件参考 src/scenes/demo.js先用npm install装好依赖用 Chrome 打开 studio.html 即可实时拨片预览。二、设计你自己的角色照抄模型表工作法Clawd 本体在 src/clawd.js#L65-L155 中定义一块陶土色PAL.clay方块10u 宽 8u 高四条短腿、两个手臂小桩、两道竖缝眼。要设计新角色不必从零学引擎——直接复刻它的模型表结构即可。第一步定义五个关键视图。角色在 src/clawd.js#L20-L31 的VIEWS表中登记了 front、q3/4、side、qback、back 五个画出来的朝向每个视图记录剪影边界、腿和手臂的枢轴点。你的新角色也应该先画出这五张关键帧转向时靠turn()在视图之间切帧加 smear速度线而不是旋转 3D 盒子。第二步用同一套工具上色。身体用wash平涂 ink墨线描边背景用fill水彩。调色板在 src/core.js#L6-L10paper、ink、clay、rose、ochre……选 4~6 个颜色保持统一避免纯黑纯白。第三步给它注入生命。每个元素调用前用boilSeed(key)固定随机种子src/core.js#L25-L26静止的东西才不会每帧乱抖眨眼、呼吸这类闲置动作交给wob(t, freq, phase)。第四步保持模型一致。官方指南强调单部视频内所有镜头必须保持同一形状与特征。建议像 src/sheets.js 一样把你的新角色做成一个LOOPS循环在studio.html?loop你的循环名里当参考表用。三、注册新情绪EMO 四要素法这是最有回报的扩展。31 种情绪全部登记在 src/clawd.js#L542-L574 的EMO对象里每种情绪不只是一张脸而是脸 颜色 一种节奏的三合一。一条完整的情绪长这样以proud为例proud: { eyes: closed, mouth: smile, tint: gold, tintK: .3, emote: spark, take: .5, body: t { const b _b(t); return { sq: -.1 - .03 * b.ab, aL: -.9, aR: -.9 }; } }EMO 注册四要素ANIMATION_GUIDE.md 原文也概括为eyes, mouth, optional tint/blush/gloom/lid/emote, take and body(t)脸必填eyes从 24 种眼睛样式里选wide、happy、heart、x、swirl……甚至传数组做大小眼mouth从 16 种嘴型里选不写就是 Clawd 的无嘴静息脸。颜色可选tint支持 pale/flush/blue/rosy/green/gold 或任意十六进制色tintK控制强度——恐惧发白、愤怒发红、悲伤发蓝情绪立刻可感。反应幅度take切入该情绪时的挤压-拉伸take强度0.2 是慵懒的1.3 是炸裂的。闲置动作body(t)必填通过_b(t)锁定到PROJECT.bpm节拍在 src/config.js 里改返回dy位移、sq挤压、aL/aR手臂角度、rot等姿态偏移。注册完怎么用两处入口都已备好单个情绪clawd(x, y, u, feel(你的新情绪, t))feel() 会自动把脸、色、身体动作打包情绪时间轴emotions(t, [[0, bored], [1.2, surprised], [2.5, 你的新情绪]])emotions() 会在每次切换时自动做预动、眯眼、take 和颜色交叉淡化——永远不要手动在两帧之间切换眼睛和嘴那是AI 感的主要来源。 想让情绪带漫画记号头顶的灯泡、汗滴、怒气青筋配上emote: bulb之类的字段即可19 种 emote 在 src/clawd.js#L432 的emote()中绘制。四、给角色加道具三种挂载方式道具帽子、手持物、披风的精髓是随角色一起动。ANIMATION_GUIDE.md 的 Hooks 一节给出了三种方式对应 src/clawd.js 里的三个钩子钩子适用场景说明hat: name头部配饰现成 18 种party、crown、wizard、fedora、cat耳朵胡须……新帽子在 src/clawd.js#L363-L415 的hat()里加一个分支draw(u, sw)身体局部贴片在角色身体局部坐标系绘制正面视图身体 x -5u..5u眼在 ±2.5u, -6u自动跟随挤压、翻转与旋转armL/armR(u, sw)手持道具在手臂尖端的局部坐标里画道具以 (0,0) 为中心即可自动跟着手臂挥动手持道具最小示例来自官方指南clawd(x, y, 24, { ...feel(proud, t), aR: 1.2, armR: (u, sw) paint(starPts(u * .8, 0, u * 1.4, .5, 5), { wash: #FFE27A, sw }) });两条容易踩的坑一个道具一条轮廓线。尾巴用一条ribbon()画而不是五个圆拼贴否则会像贴纸硬贴上去必须真接触。手臂够不到的大物件举过头顶的球等要单独按姿态坐标计算位置并用render.mjs --crop裁切检查接触点悬浮在手上方的道具是典型失败特征。五、预览与渲染三步验收扩展成果# 1. 本地拨片新情绪总表 # Chrome 打开 studio.html?loopemotions src/sheets.js 会遍历 EMO 里的所有名字 # 2. 生成参考图渲染你的循环成一张 sheet node render.mjs --loopemotions --sheet1 --cols1 --w1920 --outout/my_sheet.jpg # 3. 渲染成片 node render.mjs --clip --outout/video.mp4新加进EMO的情绪会自动出现在 emotions 循环里等于免费获得一张活的模型表——这正是官方工作流的一部分先写分镜STORYBOARD.md逐镜头建、逐镜头用--sheet/--strip检查再渲染成片完整流程见 ANIMATION_GUIDE.md 的 Workflow 章节。总结角色复刻 src/clawd.js#L20-L31 的五视图模型表 paint()/inkLine()手绘工具链情绪向 EMO 注册眼睛 嘴 色调 take body(t)即可被feel()与emotions()直接调用道具用hat分支、draw()、armL/armR()三种钩子挂载记住一物一轮廓、必须真接触✅验收studio.html?loop...拨片 →render.mjs --sheet/--strip检查 →--clip出片。官方还留了一句最让人放心的话Clawd 的设计本身也不是最终版——换主角、改配色、加整组新道具都是这套扩展体系的正路。去 docs/ 对照模型表开始你的第一部手绘动画吧。赞分享【免费下载链接】ClaudeAnimationBaseA starter kit for animating hand-painted cartoons with Claude: p5.js p5.brush, the Clawd character, 31 acted emotions and a guide for the model项目地址https://gitcode.com/gh_mirrors/cl/ClaudeAnimationBase点击查看免费下载相关推荐从零开始用TADS-Boilerplate搭建本地开发环境Docker Swarm单节点部署终极指南从零开始用TADS Boilerplate搭建本地开发环境Docker Swarm单节点部署终极指南 TADS Boilerplate是一个强大的基础设施即代30分钟构建AI智能交易系统TradingAgents-CN让普通人也能拥有专业投资团队30分钟构建AI智能交易系统TradingAgents CN让普通人也能拥有专业投资团队 你是否曾经想过如果有一个专业的投资团队24小时为你分析市场、评估风人工智能大模型AI Agent多智能体金融科技后端前端Toonflow 视觉设计方法从剧情事实推导角色、场景与道具资产Toonflow 视觉设计方法从剧情事实推导角色、场景与道具资产 本文是 Toonflow 视频制作工作流技能包中「视觉设计」方法的完整指南讲解如何在角色外AI 应用媒体生成AI 写作后端前端MCP 服务音视频创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考