实验场 · 像素动画
雨夜面摊
一段 12 秒无缝循环的像素动画：没有一张图片，是 AI 写的 300 行 Canvas 代码一帧一帧画出来的。
怎么让 AI 做出来的
我没写一行代码，做的只有三件事：说清楚要什么画面、告诉它几条「像素风」的规矩、看完第一版再提意见。
画面写得越具体，AI 画得越像你脑子里那幅：雨夜、红白条纹屋檐的拉面摊、搅锅的老板、低头吃面的客人、甩尾巴的黑猫、打着伞走过的路人、路面上的灯笼倒影。
像素感靠的是几条规矩：画面要小再放大、颜色只用固定的一小盒、不准有渐变和模糊、人物动作一顿一顿、雨和蒸汽却一直在动。这几句不写，AI 交出来的就是一张缩小了的普通插画。
第一版老板被门帘挡住了脸、路人小得几乎看不见。我就直接跟它说「门帘别挡脸，路人放大」，第二版就对了。
提示词
把这段丢给 Claude（或者任何会写代码的 AI），它会写出一个网页文件。想换成别的场景，改「direction」那一段就行。
<role> 你是像素画师，也是创意程序员。用一个独立的 HTML 文件、原生 JavaScript 和 Canvas 2D 做一段像素动画，最后拍成 MP4。不用任何外部图片、库或网络请求。 </role> <direction> 雨夜里的一个小拉面摊：红白条纹屋檐、霓虹招牌「RAMEN」偶尔接触不良闪两下、挂着一个会晃的红灯笼； 老板系着白头巾在搅锅，锅里冒蒸汽，第 7 秒抬手捞一次面；柜台前一位背对镜头的客人在吃面，每 1.5 秒低头吸一口； 柜台尽头一只黑猫甩尾巴、偶尔眨眼；前景有个打伞的路人 12 秒走过整个画面；远处楼房窗户亮着、偶尔一扇灭掉； 湿漉漉的街面上有灯笼和招牌的倒影，雨点打在水坑里有小圈。 禁止：抗锯齿、渐变、shadowBlur、模糊发光、小数坐标、缩小的矢量图那种质感。 </direction> <build> 1. 所有内容画在 160×90 的逻辑画布上，整数倍放大（12 倍 = 1920×1080），imageSmoothingEnabled = false。 2. 固定调色板（36 色左右），每个像素都只能从里面取色；天空的深浅用两色棋盘格抖动，光晕也用抖动一圈圈点出来。 3. 每一层是一个函数（sky、city、stall、sign、chef、pot、counter、guest、noren、lantern、cat、street、walker、rain），按顺序往上盖。 4. 人物用字符画拼：每个字母代表调色板里的一个颜色。动作做成参数（手臂角度、要不要抬手、眨眼）。 5. 姿势每秒只更新 8 次（时间先量化到 1/8 秒），雨、蒸汽、倒影这些特效每帧都动。 6. 随机数带固定种子，开头一次性生成雨滴的起点和速度，之后位置只由时间算；每滴雨 12 秒正好落整数轮、路人 12 秒正好走完一趟，首尾无缝。 7. 页面暴露 window.render(t)：画面只由 t 决定，不用 requestAnimationFrame 驱动、帧与帧之间不保存状态。 8. 用 Playwright 打开页面，逐帧调用 render(i / 30) 并截图（360 张），喂给 ffmpeg 压成 MP4。 9. 配乐用 Python numpy 合成：80 BPM 的 lofi 小曲（三角波和弦、方波拨弦、正弦底鼓）、低通噪声做雨声、招牌闪烁时加一下 120Hz 的嗡嗡声，12 秒可无缝循环。 </build> <gotchas> - 每做完一层就渲一张静帧自己看：人物有没有被前景挡住、主体够不够大。 - 字体不要用系统字体缩小，招牌字母自己画 5×7 的像素字。 </gotchas>
