MiaAInow

不会画画,也能做手绘动画

下雨的街、蜡笔涂的纸船、水彩的晚霞,没有一张图片,每一笔都是代码画的。提示词在下面。

纸船去看海

下载 HTML 文件全屏打开 ↗
纸船去看海 · 提示词
<role>
你是动画导演,也是创意程序员。用 p5.js 2.x 和笔刷库 p5.brush,做一段 18 秒、1920×1080、看起来像手绘绘本的小动画,最后拍成 MP4。不用任何外部图片和素材,画面全是代码一笔一笔画的。
</role>

<story>
一只蜡笔涂的红色纸船去看海,四个镜头,每个镜头只发生一件事:
1. 0–4.2 秒:下雨的傍晚,街边一排彩色房子(窗户亮着暖黄的灯),路边水沟里流着水。先让观众看清在下雨,再让纸船从画面上方掉进水沟,啪地落水、压扁一下、晃两下,开始往右漂。
2. 4.2–10.2 秒:镜头跟着船往右走。前面水沟里有个排水口,周围的水在打旋。先让一片落叶被船顶开、漂进排水口、打着转被吸下去(观众这才知道这个洞危险),然后船也被往下拽、打一个转,最后擦边溜走。雨慢慢变小。
3. 10.2–13.4 秒:路到头了,船在边上停一下、翘起来,翻下去;切到石头堤岸,船顺着一道小瀑布掉进河里,溅起水花。
4. 13.4–18 秒:几道很粗的蜡笔从左往右一扫,换成傍晚的海:紫、粉、杏、金的天,太阳,远山,海面上一道太阳的倒影。船漂向倒影,两只海鸥飞过,最后一滴雨从船头滴下,荡开一圈水纹(呼应开头的雨)。最后淡回白纸。
画面里不要任何文字。
</story>

<direction>
材质:平涂的颜色打底(brush.wash,不透明),一侧用彩铅排线压暗(brush.hatch + 'cpencil'),屋顶和船身用蜡笔涂(brush.mass + 'crayon'),轮廓用 2B 铅笔描('2B'),雨是浅色的 HB 斜线,水面的波纹用 'charcoal' 短横线,窗户倒映在水里是一道道会晃的短黄条,天空、墙、海这些大面积用水彩(brush.fill)。最上面乘一层纸纹。
线条要像手绘动画一样「沸腾」:随机数种子一秒只换 12 次,每个元素用自己的种子(种子 = 第几张画 × 一个数 + 元素编号),这样船在动的时候,房子的线不会跟着乱抖。
颜色:雨天是灰蓝 + 窗户的暖黄,最后的海是暖的晚霞。
不要:画面里的字、3D 透视、渐变色块、发光特效、匀速运动;不要把半透明的黄色、橙色叠在蓝色上(水彩会按颜料混色,黄 + 蓝 = 绿)。
</direction>

<build>
1. 一个 HTML 文件,p5.js 2.x + p5.brush(p5 版,画布必须 createCanvas(1920, 1080, WEBGL),setup 里写 angleMode(RADIANS) 和 brush.scaleBrushes(4.5))。
2. 页面暴露 window.render(t):画面只由 t 决定,先把 t 量化到 1/12 秒(一拍二),所有动作用缓动、弧线、预备动作和回弹,从 t 直接算出来,不保存上一帧的状态。
3. 水彩很慢(没有显卡时一大块要好几秒),所以天空、墙、海这三块先单独画成「背景板」存成图片(?plate=名字 时画布直接开成背景板的尺寸,别用 resizeCanvas),每一帧只把背景板贴上去,再现画船、雨、水纹、轮廓线这些便宜的笔触。
4. p5.brush 的笔触要到 draw() 结束才会合成到画布上;在 draw() 外面调用 render(t) 时,每张画最后补一个看不见的平涂,逼它把攒着的笔触画上去。
5. 用 Playwright 开 4 个看不见的浏览器并行拍:每张画调用一次 render(i / 12) 再截图,拍完用 ffmpeg 每张放两帧,合成 24 fps 的 MP4。
6. 声音用 Python numpy 合成:雨声、拇指琴的小曲(前半段小调、到海上换成大调的暖和弦)、落水的「扑通」、漩涡的低频、翻下去的风声、蜡笔扫过的沙沙声、最后一滴的「叮」,每个音效对在画面那一帧上。
</build>

<gotchas>
- 先写分镜和每一秒观众该看懂什么,再写代码;每做完一个镜头,渲几张静帧拼成一张图自己看:主体够不够大、事件看不看得懂。
- 自己写的全局函数别和 p5 重名(box、push 都会出错)。
</gotchas>