Procedural Hand-Drawn Character Animation Pipeline — 100% Canvas 2D & Vanilla JS, Zero Image Assets, Deterministic Rendering.
纯代码手绘角色动画管线 —— 100% 原生 Canvas 2D + JavaScript，零素材依赖，确定性渲染。
doodle-anim is an agent-ready, code-first 2D procedural animation pipeline. It requires no graphic assets, no sprite sheets, and no heavy 3D DCC tools. Everything — from watercolor paper textures, pencil jitter strokes, and character anatomy to bone kinematics, facial expressions, and camera keyframes — is calculated entirely in code using native HTML5 Canvas 2D and seeded PRNG mathematics.
|
Friends Generator (Threeaio Style) Cream paper + ink jitter + 4×2 procedural avatars ▶ Live HTML Template | ▶ Video (MP4) |
Mannay Expressive Charcoal (Mannay Style) Kraft paper + charcoal strokes + offset watercolor ▶ Live HTML Template | ▶ Video (MP4) |
|
Cyberpunk Anime Faces (Kevin Ngo Style) 6×3 anime matrix, visors, masks, headsets, 4s blink loop ▶ Live HTML Template | ▶ Video (MP4) |
Oddhead Family (Alberto Style) 60% head ratio + zigzag pencil cross-hatching hair ▶ Live HTML Template | ▶ Video (MP4) |
|
Weirdo Family (Quirky Props & Sprout) 24 capsule/bean characters, spinning propellers & sprouts ▶ Live HTML Template | ▶ Video (MP4) |
Classic Alberto 28-Character Lineup Humans + Dogs + Cats + Nightmare Blobs idle lineup ▶ Live HTML Template | ▶ Video (MP4) |
|
The Heist of Ink (30s Cinematic Story Short) Procedural OST + Multi-shot Action Beats + Emotes ▶ View HTML Template | ▶ Watch Full 30s Video (MP4) |
Zenn-style Explainer (TTS + Subtitles) 9:16 Vertical Video with voiceover & karaoke captions ▶ View HTML Template | ▶ Watch Full Video (MP4) |
- Node.js ≥ 18
- ffmpeg (
brew install ffmpeg) - Playwright Chromium (
npm i playwright && npx playwright install chromium)
Every template is a self-contained HTML file that runs standalone with zero dependencies:
# Open interactive doodle canvas
open templates/doodle.html?live
# Open doodle friends generator (click button or press any key to switch sheet)
open templates/friends.html?live
# Open Mannay charcoal portrait generator
open templates/mannay.html?liveRender deterministically to MP4 / GIF via Playwright:
# Render 12s animation @ 30fps with Seed 7
node scripts/capture.mjs --page templates/doodle.html --out out/demo --fps 30 --dur 12 --seed 7
# Render specific story preset (scare / chase / gather / meet / roster)
node scripts/capture.mjs --page templates/doodle.html --out out/roster --story roster --seed 7 --dur 10Generate an entire popular science video from a single story.json specification:
# Render full explainer with TTS narration, camera keyframes, BGM, SFX & karaoke subtitles
node scripts/render-explainer.mjs --script templates/story.example.zh.json --out out/ep_zh \
--size 720x1280 --voice Tingting --rate 165Any new animation module implemented within this pipeline adheres to the following contract:
- Seeded PRNG: All randomness derives from
mulberry32/RNG. Never use unseededMath.random()orDate.now(). - Stroke-Level Seeds: Line jitters are hashed by stroke identifiers (
hash(characterId + strokeName)), preventing line boiling unless intended. - Pure Function of Time:
pose = f(t). No accumulator dependencies. - Seekable Interface: Pages expose
window.__seek(tSeconds)for exact sub-frame stepping. - Multiplicative Alpha Blending: Context helpers use
ctx.globalAlpha *= ato support seamless scene cross-fades and transitions.
doodle-anim 是一个面向 AI Agent 与前端代码手绘的 2D 过程式动画管线。它不需要任何图片素材、帧动画雪碧图或 3D 建模软件。从水彩纸纹理、铅笔抖线、角色五官，到骨骼行走步态、情绪气泡和运镜推拉，全部通过原生 HTML5 Canvas 2D + 数学公式纯代码实时计算。
|
Friends 涂鸦朋友墙 (Threeaio 风格) 奶油纸底 + 抖动墨线 + 4×2 种子化头像（12种发型/7种眼型/随机名字） ▶ 网页交互模板 | ▶ 视频成片 (MP4) |
Mannay 表现主义炭笔肖像 (Mannay 风格) 牛皮纸底 + 粗粝炭笔 + 6×4 表现主义头像（密集卷毛云/黑眼窝/水彩印染） ▶ 网页交互模板 | ▶ 视频成片 (MP4) |
|
Faces 赛博动漫脸 (Kevin Ngo 风格) 6×3 赛博头像、锥度脸型、护目镜/耳机/面罩、4 秒呼吸眨眼循环 ▶ 网页交互模板 | ▶ 视频成片 (MP4) |
Oddhead 大头仔家族 (Alberto 风格) 头占身高 60% + 锯齿排线头发 + 24 只丑萌搞怪大头仔 ▶ 网页交互模板 | ▶ 视频成片 (MP4) |
|
Weirdo 怪咖家族 (搞怪配件与转动螺旋桨) 24 只胶囊/豆子融合身体，螺旋桨帽/小苗晃动，单记忆点留白设计 ▶ 网页交互模板 | ▶ 视频成片 (MP4) |
Roster 经典 28 只全阵容临摹全家福 人类两排 + 狗一排 + 猫一排 + 梦魇怪，原地待机呼吸与表情冒泡 ▶ 网页交互模板 | ▶ 视频成片 (MP4) |
|
《墨水大劫案》（30s 电影感剧情短片） 程序化原声配乐 + 多分镜节拍系统 + 头顶情绪气泡 ▶ 查看 HTML 源码 | ▶ 观看 30s 完整视频 (MP4) |
Zenn 风暗色科普短片（竖屏 9:16） 普通话配音 + 自动卡拉OK字幕 + 镜头平滑推拉 ▶ 查看 HTML 源码 | ▶ 观看完整科普视频 (MP4) |
- 科普解说视频制作：对标 YouTube 频道 @Zenn0009 的极简暗色手绘科普。输入一段文本台词，管线自动合成配音、分配分镜动作、生成卡拉OK字幕并无缝交叉溶解导出。
- 剧情短片分镜：内置动作节拍系统（
enter,walk,run,waitEmote,idle）与符号库（heart,sweat,anger,zzz,!等），轻松制作搞笑或治愈手绘短片。 - 互动小游戏与生成器：单文件 HTML 零依赖运行，读者在浏览器中点一下按钮即可随机换发型/捏脸，或嵌入自建 Web 互动页面。
# 1. 安装依赖
npm install playwright
npx playwright install chromium
# 2. 浏览器实时预览
open templates/doodle.html?live
# 3. 渲染高清视频
node scripts/capture.mjs --page templates/doodle.html --out out/demo --fps 30 --dur 12 --seed 7
# 4. 渲染中文配音科普短视频（竖屏 9:16）
node scripts/render-explainer.mjs --script templates/story.example.zh.json --out out/ep_zh \
--size 720x1280 --voice Tingting --rate 165- @albertobeicas — "All JS painted, no assets" 纯代码手绘角色动画理念
- @Threeaio — "all my friends are made of javascript" 涂鸦朋友生成器
- @mannay — "You can just draw faces with javascript // coding doodles" 表现主义炭笔肖像
- @Zenn0009 — 极简暗色手绘科普解说动画
MIT License © 2026 feitangyuan