ClaudeAnimationBase 教程：用 p5.js 和 p5.brush 做手绘卡通短片（2026）

推荐链接（推广）：数字严选大约 18 分钟AI 视频Opus 5.5 做视频Claude Code 视频ClaudeAnimationBasep5.js手绘卡通

阅读说明

仓库信息查阅日期：2026-10-23；星数、更新时间会变，以仓库页面为准；本文不写价格。

一句话结论

JohnHeibel/ClaudeAnimationBaseopen in new window 是一套用 p5.jsopen in new window 和 p5.brushopen in new window 画角色的起步套件，里面有代码、说明和素材。默认角色是 Clawd；仓库描述写明有 31 种表演情绪，以及一份给模型读的指南。

适合想在 Claude Code 里用 Opus 5.5 写手绘感卡通短片的人。README 写明也可以换成自己的角色、情绪或服装，或把仓库交给任何编程代理打开。

仓库信息

截至 2026-10-23，星数、最近推送和创建时间取自仓库元数据，日期为北京时间。

仓库星数最近推送（北京时间）许可创建时间
JohnHeibel/ClaudeAnimationBaseopen in new window1,6062026-09-24MITopen in new window2026-09-24

仓库描述是：用 Claude 做手绘卡通的起步套件，技术是 p5.js 加 p5.brush，带角色 Clawd、31 种表演情绪，以及一份给模型的指南。

LICENSEopen in new window 为 MIT License，版权人 John Heibel，年份 2026。许可允许在保留版权声明和许可声明的前提下使用、修改和分发，软件不附保证。

它能做什么样的视频

README 的定位是手绘卡通短片。画面由 p5.js 和 p5.brush 逐帧画出来，再由无头 Chrome 和 ffmpeg 收成 MP4。套件基于音乐视频 “I'm Upping My P(doom)” 的代码，仓库是 JohnHeibel/PDoomVideoopen in new window，也基于一份对模型做得好和做得不好的分析。

ANIMATION_GUIDE.md 写了 3 个目标：看起来像手绘（Handmade）、一直有东西在动（Alive）、是一支完整短片而不是一堆片段（One piece）。提示词决定拍什么；指南决定怎么做。若提示词明确要求指南禁止的东西（例如字幕，或 1 次 3D 旋转），指南要求模型照提示词做。

方向仓库写明的内容
默认角色Clawd。指南写它是 Claude Code 的吉祥物：陶土色方块（PAL.clay），身体宽 10 单位、高 6 单位，4 条短腿、2 只小手臂、2 只细长眼睛，静止时没有嘴。算上腿，画面尺寸按 10u × 8u
换角色指南写明 Clawd、情绪、道具和辅助函数都是起点。可以改造型，也可以加角色、道具和情绪，并用同一套笔触规则来画
示范片src/scenes/demo.js，标题 “The fallen star”，11 秒。src/config.js 为 duration: 11、bpm: 120、offset: 0。用来演示情绪时间线、绘制转身、小跑、拾取、弧线投掷、glow、笔刷擦除和光圈。指南写明不要把它的故事、夜空、山坡、星星或镜头结构拿去复用
画布1920×1080，原点在左上，y 向下
模型表docs/emotions.jpg（31 种情绪，另有动图 docs/emotions.webp）、docs/views.jpg（5 个关键视角、运动辅助和帽子）
成片与检查图out/video.mp4；接触表、帧条、裁切、静帧，以及用 --png 导出的 PNG 序列（文件头写明可用于 GIF）

媒介规则（指南第 1 条）：一切用 paint() 和 inkLine() 经 p5.brush 来画。角色是平涂 wash 加墨线，背景多用柔边水彩 fill。不要用普通 p5 的 rect、ellipse、fill()。线条会 “沸”（boil）：jit() 和 random() 按 BOIL 每秒重播种 12 次。必须帧间不动的量用 hash(i)，每个独立元素用 boilSeed(key) 单独播种。一切保持平面，不要透视旋转、rotateY 或 WEBGL 3D。转身走绘制好的关键视角：front → 3/4 → side → back 3/4 → back，对应 turn() 和 spinView()。发光用 glow()，因为颜料叠色会把黄加蓝变成绿。不要纯黑纯白，黑色用 PAL.ink，白色用 PAL.cream 或 PAL.paper。

其余规则，指南各用一节写明：

  • 不要文字：不要字幕、标题、物体标签、招牌、带字的对话框，也不要在屏幕上打字。反应用绘出的符号。真正需要一个词时用 letter()，1 到 2 个词，并且只用 1 次。
  • 每个镜头都要有事件。从第一帧到最后一帧要有变化：想要、找到、尝试、失败、反应或得到。一个镜头只放一个焦点动作，先因后果，埋下的东西要在本镜或后镜兑现。
  • 按观众的理解计时。每个 “读点”（read）都要有时间被找到、看懂，并在下一件事开始前被记住。动作可以快，含义要留住。
  • 画面不能冻住。情绪用 feel() 带待机动作，换表情走 emotions()，不要在两帧之间直接改 eyes 和 mouth。中景 u 大约 20–28，特写 40–70，u 小于 12 只给大全景，不要整支片子都是很小的角色。节奏跟 PROJECT.bpm。
  • 每个接缝都有转场：进第一镜、镜与镜之间、出最后一镜。可选 brushWipe、iris、irisShape、甩镜加涂抹、匹配剪辑、动作中剪切、穿过剪辑点的运镜、从纸色或黑色淡入或推出。普通硬切只在动作中或有意的砸切时使用。镜内换情绪走 emotions()，转身走 turn()。

31 种情绪由 feel(name, t, over) 返回脸、颜色和卡点动作。emotions(t, keys) 负责镜内换心情：变化前有挤压和眯眼，脸在眯眼时换掉，再按新情绪的幅度做一个反应，身体带着过冲进入新动作。

组情绪名
joyhappy、excited、laugh、love、proud、starstruck、playful、hopeful、relieved
slysmug、cool、mischief、suspicious
lowsad、cry、bored、sleepy、ko
hotangry、furious（便当盖打开）、determined、disgusted
alarmscared、nervous、surprised、confused、dizzy
mindneutral、thinking、idea、shy

新情绪要在 src/clawd.js 的 EMO 里加一项，包含眼睛、嘴、可选的 tint / blush / gloom / lid / emote、take，以及卡在拍子上的 body(t)。

视角名是 front、q、side、qback、back。帽子包括 party、hard、crown、halo、wizard、hood、top、fedora、band、sweatband、beanie、bow、flower、headphones、cat；脸上的附件有 masq、mask、bowtie。舞蹈样式有 bounce、hop、roof、sway、spin、wave、walk、run、idle、stomp、shimmy，mix 每 2 小节换一种。dancer() 是 clawd 加 move。

景别和 u（指南）：

景别u画面上
全景10–16人物在风景里偏小
中景20–28通常的表演尺寸
特写40–70脸部表演
大特写90+推到眼睛

指南写明这套工具可以不配音乐。要用的时候，顺序是：在 src/config.js 把 bpm 设成歌曲速度，把 offset 设成第一拍下拍的秒数；音频放进 assets/，设置 PROJECT.audio 或传入 --audio=；--clip 和 --encode 会把它混进成片；重音、切点和反应落在拍上（beatN、pulse）。歌词不要打在画面上，改成把那句词的意思演出来。

需要准备什么

README 的 “Run it yourself” 写明需要这 3 样：

  • Node.js
  • Google Chrome
  • ffmpeg

让模型写片子时，README 的做法是用 Claude Code 或任何编程代理打开仓库。作者写明全部测试视频都是在 Claude Code 里、用 Opus 5.5、推理档位 xhigh 生成的。

没有独立 GPU 时，p5.brush 的水彩填充会使渲染变慢，耗时按秒计每一帧。核显上，README 建议让模型避开这些填充，换成别的合适画法。Chrome 找不到时的参数、Linux 沙箱和软件 WebGL，见下一节。

安装与第一次运行

  1. README 的第一步是克隆仓库，用 Claude Code（或任何编程代理）打开，然后直接说你要什么。要自己跑通示范片时，在仓库根目录执行 README 给出的命令：
npm install
node render.mjs --clip --out=out/video.mp4

这会渲染 src/scenes/demo.js 里的 11 秒示范，并写出 out/video.mp4。

  1. 用 Chrome 打开 studio.html，可以拖动预览。加上 ?loop=emotions 或 ?loop=views 看模型表。指南还写明 ?t=2.5 会跳到对应时间。做自己的片子时，在 studio.html 里把 demo.js 的 script 标签换成你的场景文件。

  2. Chrome 不在常见位置时，按 README 传入 --chrome=<path>，或设置环境变量 CHROME_PATH。render.mjs 会依次尝试这个参数、CHROME_PATH，以及下面这些路径。都找不到时进程退出，并打印 Chrome not found: pass --chrome=<path> or set CHROME_PATH。

C:/Program Files/Google/Chrome/Application/chrome.exe
C:/Program Files (x86)/Google/Chrome/Application/chrome.exe
/Applications/Google Chrome.app/Contents/MacOS/Google Chrome
/usr/bin/google-chrome
/usr/bin/chromium
/usr/bin/chromium-browser

  1. 在 Linux 上，render.mjs 启动 Chrome 时会加上 --no-sandbox。README 的原因是 Ubuntu 23.10 及更新版本会在无头使用中拦住 Chrome 沙箱。同一段逻辑还会查找 Playwright 装在本机的 Chromium（~/.cache/ms-playwright/ 下的 chrome-linux64）。

  2. 完全没有 GPU 时加上 --soft-gl，用软件方式画 WebGL。README 写明水彩填充会慢，但可以跑通。无显示器的 Linux，并且有 NVIDIA GPU（例如云主机或集群节点）时，加上 --gpu-angle=gl-egl 或 --gpu-angle=vulkan。看每一组参数实际落到哪个渲染器，用 README 的命令：

node gpu_probe.mjs <chrome path>
  1. 指南里的成片还有一条分帧再编码的路径。下面整段来自 ANIMATION_GUIDE.md：
node render.mjs --clip --out=out/video.mp4                      # the whole video, straight to MP4
node render.mjs --frames --workers=4                            # or: parallel + resumable JPEG frames into out/frames …
node render.mjs --encode --out=out/video.mp4                    # … then encode them

render.mjs 文件头还列出 --range=（例如 --range=0:4）、--fps=24、--stills=、--loop=<name> 和 --audio=assets/song.mp3。未传 --fps 时，代码使用 24。--audio= 或 PROJECT.audio 会在 --clip 和 --encode 时混进 MP4。

在 Claude Code 里用 Opus 5.5 驱动它

在 Claude Code 里用 /model 选 Opus 5.5，详见 Claude Opus 5.5。

README 的用法是打开项目后直接提要求。示例要求模型先读 ANIMATION_GUIDE.md。作者写明测试视频用的是 Opus 5.5 的 xhigh reasoning，并写：推理档位对应模型把场景做得有多铺张、多讲究细节。README 建议多试提示方式：先要故事板再写代码、把指令写得很宽或写得很具体、要求使用 subagents、更换角色或增加情绪和服装、传入自己的参考图。

README 的示例原句是：

Read ANIMATION_GUIDE.md, then make a 15-second video of Clawd trying to catch a butterfly.

README 写明模型会先做故事板，再逐镜头搭建，渲染接触表检查自己的工作，并写出 out/video.mp4。指南把这件事拆成 4 步。

1. 先写故事板

在写任何场景代码之前写 STORYBOARD.md。若有人在旁边看，先把故事板给对方看，再开始搭建。格式来自指南：

Logline: one sentence. Clawd wants ___, but ___, so ___.
World: setting, a small palette, light, how the colour changes across the video.
Motif: the thing that recurs and pays off.
Clawd's arc: the emotion keys across the whole video.
Shots:
  A  start–end  [transition in: ___]  what's seen · the EVENT · Clawd's reaction · camera
     reads:  start–end  the first thing the viewer must understand
             start–end  the next one (where is the viewer's eye when it starts?)
             ...
  B  start–end  [transition: ___]  ...
  ...
  [transition out: ___]

写完后对照：每镜是否有事件、每个读点是否在下一读点开始前落稳、每个接缝是否有转场、有没有文字、结尾是否和开头押韵。读点放不进镜头时长时，加长镜头或删掉一个读点，不要把它们挤在一起。

2. 再写场景

在 src/config.js 设置 duration 和 bpm。新文件放在 src/scenes/（指南的例子是 src/scenes/my_video.js），用 IIFE 包起来，以 shots([...]) 结束，并在 studio.html 里替换 demo.js 的 script 标签。一次只做一镜，先把关键姿势渲成静帧看清，再补中间的运动。指南给出的骨架是：

// src/scenes/my_video.js
(() => {
  function park(t, lt, dur) {                        // t = video time, lt = time in this shot, dur = shot length
    camBegin(960 + 20 * Math.sin(lt * .6), 540, 1 + .02 * lt);   // slow drift and push: the camera is never dead
    paint(rectPts(-200, -200, W + 400, H + 400), { wash: PAL.sky, ink: null });           // background
    paint(ellPts(960, 1150, 1400, 380, 40, 2), { wash: PAL.sap, ink: PAL.ink, sw: 1 });   // ground
    const mood = emotions(lt, [[0, 'bored'], [1.2, 'surprised'], [1.7, 'excited']]);      // acted changes
    const hop = jump(lt, 2.2, 2.7, 3);                                                    // add poses that share fields
    clawd(960, 860, 26, { ...mood, dy: mood.dy + hop.dy, sq: mood.sq + hop.sq });
    const at = toScreen(960, 860 - 4 * 26);          // Clawd's screen position, for the iris
    camEnd();
    if (lt < .45) iris(...at, lerp(0, 1500, easeIn(lt / .45)));            // transition in
    if (lt > dur - .3) brushWipe((lt - (dur - .3)) / .6);                 // transition out (next shot finishes it)
  }
  shots([[0, park] /*, [3.5, nextShot], ... */]);
})();

帧必须是时间的纯函数。渲染会并行，而且不按顺序。不要在帧与帧之间留状态、计数器、Math.random()，或逐帧积分的物理。稳定随机用 hash(i)，沸线用 jit(a) / random()。

3. 用接触表、帧条和裁切检查

指南写明不能靠读代码判断运动。下面整段来自指南：

# contact sheet: the shape of the whole piece (every shot's first, middle and last frames)
node render.mjs --sheet=0.1,0.8,1.6,2.4,3.1,3.9 --cols=6 --w=320 --out=out/check/sheet.jpg
# strip: EVERY frame of a moment (turns, takes, jumps, throws, transitions)
node render.mjs --strip=2.1:2.6 --cols=6 --w=320 --out=out/check/strip.jpg
# crop: full-resolution detail (faces, hands, contacts, glows); crop=x,y,w,h in frame pixels
node render.mjs --sheet=2.3,2.4 --crop=760,420,500,400 --w=500 --out=out/check/face.jpg
# crop-at: the same, following a WORLD point through each frame's camera (a foot or a prop on a moving shot);
# x,y in world pixels (or an expression evaluated in the page), w,h in frame pixels
node render.mjs --strip=2.1:2.6 --crop-at=960,700,500,400 --out=out/check/feet.jpg

指南给出的最低量是：每镜至少 1 张接触表，每个关键运动和转场 1 条帧条，每张承担叙事的脸 1 张裁切。它写接触表大约 0.1–1 秒一帧。检查项包括：事件是否单看表就能读懂、人物是否够大、读点各占了多少帧（24 帧为 1 秒）、是否有预备和跟随、脚和手是否接触、首尾各 0.5 秒有没有转场、有没有文字或 3D、有没有纯黑纯白。

4. 导出

用上一节的 --clip，或 --frames 再 --encode。

示例提示词（按 README 写明的用法改写，不是仓库原文）：

先读 ANIMATION_GUIDE.md，先写 STORYBOARD.md，不要先写场景代码。做一支 15 秒的片子：Clawd 想抓住一只蝴蝶，但每次靠近它就飞高，最后蝴蝶停在 Clawd 的帽子上。在 src/config.js 里设置 duration 和 bpm。场景写到 src/scenes/butterfly.js，用 IIFE 包起来，以 shots([...]) 结束，并在 studio.html 里替换 demo.js 的 script 标签。每一镜用 render.mjs 的 --sheet 和 --strip 检查，通过后再运行 node render.mjs --clip --out=out/video.mp4。不要字幕和招牌文字。

先读 ANIMATION_GUIDE.md。按我给的参考图换掉 Clawd 的默认造型，并在 src/clawd.js 的 EMO 里加一种新情绪。时长写在 src/config.js，大约 11 秒。这台机器没有独立显卡，不要用水彩 fill，改用 wash 平涂。先给故事板，再逐镜头出接触表，最后导出 out/video.mp4。

限制与已知问题

  • 水彩 fill 在没有独立 GPU 时按秒计每一帧。--soft-gl 可以在没有 GPU 时画出来，水彩填充仍然慢。指南另写一条成本建议：fill 和笔触的数量决定耗时，上百可以，上千不行，目标是每帧不超过 1.5 秒；渲染日志会打印 ms/frame。接触表大约 0.1–1 秒一帧。
  • Linux 无头渲染会带 --no-sandbox。README 把原因写为 Ubuntu 23.10+ 拦住了 Chrome 在无头使用中的沙箱。
  • 帧必须由时间算出。并行渲染时，依赖上一帧的计数器或 Math.random() 会对不齐。
  • p5.brush 的叠色像颜料。黄盖在蓝上会变绿，薄罩染会变灰。发光用 glow()。wash 在 255 时是准确颜色，更低的不透明度会混合。
  • 缩放大约到 2 以后，离原点很远的描边会塌成第一个顶点上的一个点。paint() 和 inkLine() 把每个形状画在自己的中心附近来避开这一点。比画布大很多的形状仍可能丢轮廓，长边要拆成不超过画布的 inkLine。线宽是世界单位，推近后会变粗，小形状上的 sw 要随缩放减小。
  • 点列里的 NaN 会抛出 Failed to construct 'OffscreenCanvas': Value is not of type 'unsigned long'，堆栈指向场景而不是那个 NaN。可能退化的几何要自己挡住，例如 Math.acos 的比值大于 1。
  • 有些场景会让 p5.brush 在每一页打印 5 次 WebGL: INVALID_OPERATION ... not from the associated program。指南写明这是无害的，帧结果相同。除此之外的页面错误是真错误。
  • 指南列了会让成片看起来像生成物的情况：招牌和字幕、站着笑而什么都没发生、全程一个速度、读点还没看懂就结束、整片都是很小的人物、表情硬切、机械的匀速和左右对称、姿势太收、静止物体因为随机流被带动而每帧重沸、到处硬切或片头片尾直接切断、3D 旋转、混进普通 p5 形状、黄叠蓝造成的灰绿发光、道具没有贴到手、每镜换一个互不相关的世界。
  • 示范片最后一个镜头的计时表在指南末尾。指南写第一版把这些读点挤进大约 1.3 秒，观众看不出发生了什么。表里的秒数只属于这个故事。
  • 查阅 src/scenes/ 时只有 demo.js。
  • 仓库 issue #9（open）：成片送出前，由审阅代理对渲染帧做一轮检查。标题原文 “A QA pass on the rendered frames, by reviewer agents, before a video goes out”。指南里已经写了模型自己看接触表、帧条和裁切，没有把单独的审阅代理写成现成步骤。
  • 仓库 issue #7（open）：用这套工具做的一支 6 分钟音乐视频的贡献。标题原文 “Contributions from a six-minute music video made with the kit”。该 issue 仍是 open。场景目录里没有另一支成片脚本。

常见问题

能不能用 Codex 或 Cursor？

可以。README 写明用 Claude Code 或任何编程代理打开仓库，然后直接说你要什么。Codex 和 Cursor 的单独安装步骤，README 未写明。作者写明测试视频是在 Claude Code 里用 Opus 5.5、xhigh reasoning 做的。

成品是 HTML 还是 MP4？怎么导出？

预览页是 studio.html，在 Chrome 里拖动。成片是 MP4：node render.mjs --clip --out=out/video.mp4，或先 node render.mjs --frames --workers=4 把 JPEG 写到 out/frames，再 node render.mjs --encode --out=out/video.mp4。还可以出接触表 JPEG、帧条、裁切、--stills 的 PNG，以及 --loop=<name> --png 的 PNG 序列。画布是 1920×1080。未传 --fps 时为 24。自备音频用 --audio= 或 PROJECT.audio，在 --clip 和 --encode 时混入。

商用和许可怎么算？

仓库 LICENSEopen in new window 是 MIT，版权人 John Heibel（2026）。保留版权声明和许可声明即可使用、修改和分发。Clawd 在指南里被写成 Claude Code 的吉祥物；这个形象能不能单独拿去商用，README 与 LICENSE 未写明。p5.js 和 p5.brush 是 README 点名的绘制依赖，许可以这两个项目自己的仓库为准。

能加中文字幕或中文配音吗？要不要 API key？

字幕默认不要。指南规则 2 禁止字幕、标题、标签、招牌和带字的对话框，也禁止把歌词打在画面上。反应使用 emote：!、?、!!、!?、zzz、sweat、spark、heart、hearts、anger、steam、bulb、dots、scribble、music、swirl、stars、cloud。提示词若确实需要词，用 letter() 或 sfx()，1 到 2 个词，只用 1 次；若擦除或光圈必须盖住这些字，要自己先调用它们，因为字母在 flushLetters() 时才合成。提示词明确要求字幕时，指南要求照做。

中文配音 README 未写明。可选的是自备音频文件：放到 assets/，设置 bpm、offset 和 PROJECT.audio（或 --audio=）。渲染这条路径 README 未写明需要视频或绘图 API key，用的是本机 Node.js、Google Chrome 和 ffmpeg。

相关阅读

参考来源

上次编辑于:
贡献者: Masoooon
小苔藓 AI 指南 · 数字严选内容站
Copyright © 2026 数字严选