Creative Coding / CASE 04 / 2026-09-24
Claude Opus 5.5 实测：4 个创意编程任务，从网页到成片
在 Claude Code 中让 Claude Opus 5.5 完成 3D 武士游戏、交互式流星雨、蜡笔风动画短片和像素机甲动画 4 个任务，每个任务都交付可运行的网页和一段由模型自己搭建流程渲染的视频。
- Model
- Claude Opus 5.5
- Harness
- Claude Code
- Tasks
- 4 个不同任务
- Outputs
- 网页 + 视频
EXPERIMENT SETUP / 01
任务与制作方式
4 个任务相互独立，每个都要交付一个能在浏览器里运行的网页和一段视频。视频不是屏幕录制，而是模型自己搭建的逐帧渲染流程导出的。制作过程中，模型用无头浏览器截图检查画面、自己修改，最后写下制作记录。本页内容整理自这 4 份制作记录。
只有《Ronin at Dusk》保存了逐字的原始 Prompt。其余 3 个实验的任务要求整理自制作记录，不是 Prompt 原文，本页不补写或猜测原文。
RESULTS / 02
4 个任务，4 份网页和视频
视频由模型自己搭建的流程逐帧渲染，点击播放。交互版是模型写出的原始网页，会在新窗口打开，不经过站点外壳。
EXPERIMENT 01 / Three.js 3D 动作游戏
Ronin at Dusk
夕阳下神社庭院里的 3D 武士游戏：三段斩、弹刀、格挡、冲刺和多波次敌人。角色模型和音效全部用代码生成，没有外部素材。
- Video
- 30 秒
- Resolution
- 1080p30
- Audio
- 有声
- Three.js r128
- WebAudio
- Chrome DevTools Protocol
- ffmpeg
交互版需要联网加载 Three.js 和字体，建议用电脑的键盘和鼠标游玩；手机操作没有在真机上测试过。
打开交互版任务要求
- 做一个 3D 武士游戏 Demo。原始需求只有一句，原文见下方。
- 追加：录制一段 30 秒的演示视频。
create a 3d samurai game demo模型做了什么
- 自定浮世绘色调的视觉方向：鸟居正对落日，枯山水沙地做竞技场，约 380 片樱花瓣不断飘落。
- 战斗系统包含三段斩、0.24 秒的弹刀窗口、耗气格挡和带无敌时间的冲刺；第 3 阵起出现不会被轻攻击打断的鬼武者。
- 录视频时由脚本机器人操作武士：打法迭代了 3 版，用不渲染的模拟模式比较 12 个随机种子，选出能打到第三阵、弹刀 2–3 次的一局。
- 音效只记录发生时间，最后用离线 AudioContext 渲染成音轨，声音和画面逐帧同步。
自查中发现并修改
- 刀身几乎是黑的：场景没有可反射的环境贴图，金属度从 0.9 降到 0.35。
- 标题画面的武士背对镜头：初始朝向直接设为面对镜头。
- 逐帧录制时，CSS 横幅动画仍按真实时间播放，比视频快好几倍：每帧先暂停动画，再手动推进 1/30 秒。
EXPERIMENT 02 / Three.js 交互式 3D 场景
Starfall Ridge
山谷湖畔的流星雨：拖拽旋转视角，点击天空发射流星，可以在英仙座、猎户座、狮子座、双子座四场真实流星雨之间切换。
- Video
- 10 秒
- Resolution
- 1080p60
- Audio
- 无声
- Three.js 0.160
- GLSL
- Puppeteer
- ffmpeg
交互版需要联网加载 Three.js 和字体，并需要支持 WebGL2 的浏览器；在性能较弱的设备上可能卡顿。
打开交互版任务要求
- 用 HTML + Three.js 做一个可交互的 3D 流星雨场景。
- 要有星空背景、流星的粒子拖尾、地形表面的实时光照，并能用鼠标拖拽旋转视角（OrbitControls）。
- 追加：导出一段 10 秒、16:9 的视频。
模型做了什么
- 天空着色器画出气辉、城镇光污染和银河；9,601 颗星按色温和亮度分布，越靠近地平线越暗。
- 流星拖尾使用容量 36,000 的 GPU 环形缓冲区，粒子的运动和冷却变色都在顶点着色器里计算。
- 8 盏常驻点光源组成光源池，流星飞过时照亮地形和湖面；灯的数量固定，避免 Three.js 重新编译着色器。
- 四场流星雨使用真实的入射速度和 ZHR，页面默认选中按访问当天日期计算的下一场。
自查中发现并修改
- 视频里间歇出现大黑方块：着色器对负数做 pow()，在 Metal 上得到 NaN，再被泛光扩散成方块。加 clamp 后修复，网页也同步修正。
- 画面太亮、火流星像白天：整体下调点光强度和火流星亮度，并让火流星远离辐射点生成，拉出长轨迹。
- 湖被树挡住、辐射点标记压在标题上：清空湖岸和视线走廊的树木，把辐射点移到画面中上部。
EXPERIMENT 03 / Canvas 2D 蜡笔风动画短片
Baking Time
30 秒蜡笔手绘风动画：以 Opus 5.5 为原型的橙色角色烤出一个会眨眼的蛋糕，最后亲手写下签名。画面全部由代码程序化绘制。
- Video
- 30 秒
- Resolution
- 1080p30
- Audio
- 无声
- Canvas 2D
- Chrome DevTools Protocol
- Python
- ffmpeg
原片的配乐是商业唱片，没有公开发布的授权，所以本页的视频和交互版都是静音版本。
打开交互版任务要求
- 30 秒、主题为“Baking Time”的动画，主角是参考图里的 Opus 5.5 角色。
- 风格有趣、可爱、有魅力，结尾由 Opus 5.5 签名收尾。
- 不用合成音频，只能用本机磁盘上找到的音频素材。
- 一次成片，中间不再确认，用于发布到 X。
模型做了什么
- 从参考图量出角色比例；蜡笔纹理、纸纹和手绘线条的抖动全部在 Canvas 2D 上程序化绘制，没有用图片素材。
- 扫描本机音频选曲，按歌曲的逐拍节拍表安排分镜；画面和 81 个音效提示共用同一份时间表。
- 制作时无法试听，于是计算每个音效的包络、起音时间和主频率，据此挑选和对齐。
- 签名的“书写”效果：统计离屏签名每一列的墨迹重心，得到笔尖的路径和速度。
自查中发现并修改
- 模具从手上交给烤箱时会跳位：起点改为由角色姿态实时计算。
- 蒸汽转场全白持续约 0.75 秒，拖慢了揭晓节奏：缩短到约 0.35 秒。
- 按 250 ms 窗口测量，很多音效比音乐低 12–30 dB：按测量结果统一上调增益。
EXPERIMENT 04 / Canvas 2D 像素动画
Plasma Lance Mech
像素风科幻机甲循环地蓄能、发射等离子光束、散热复位。单个 HTML 文件，不依赖任何外部资源。
- Video
- 30 秒
- Resolution
- 1080p60
- Audio
- 无声
- Canvas 2D
- Node.js vm
- ffmpeg
交互版默认是 4:3 取景，在网址后加 #wide 可以切换到视频使用的 16:9 取景。
打开交互版任务要求
- 单个自包含 HTML，原生 JavaScript + Canvas 2D，不用外部资源、库或网络请求。
- 先画到 128×96 的离屏画布，再按整数倍放大；绘制对齐像素，不用抗锯齿、渐变或 shadowBlur。
- 约 24 色的固定调色板，程序化绘制约 28×36 像素的机甲。
- 待机 → 蓄能 → 开火 → 冷却的循环状态机，零分配的粒子池，固定 60Hz 更新。
- 追加：导出一段 30 秒、16:9 的视频。
模型做了什么
- 绘制写入“调色板索引”帧缓冲，从结构上保证不会出现调色板外的颜色；发光和阴影用重映射表加 4×4 Bayer 抖动实现。
- 姿态参数每个 tick 都在缓动，但每 5 个 tick 才取整采样一次，得到 12fps 的像素动画节奏，光束和粒子仍按 60fps 更新。
- 为 16:9 视频新增 160×90 取景，并把所有闪灯周期改成 1800 tick 的约数，让 30 秒视频首尾无缝循环。
- 在 Node 的 vm 里直接运行页面脚本并逐帧驱动，30 秒 60fps 的视频约 6 秒渲染完成。
自查中发现并修改
- 蓄能电弧像一团青色乱线：调小抖动幅度、半径和出现概率。
- 导弹舱的红色弹头挨着头部，看起来像一双红眼睛：改成暗色发射管。
- 臂炮不够“重型”：外壳从 7px 加到 9px，炮管从 3px 加到 5px。
- 无头 Chrome 的虚拟时间不推进 requestAnimationFrame，截图全是第一帧：改为直接调用 update() 到指定时刻再渲染。
OBSERVATIONS / 03
4 个实验里反复出现的做法
4 个任务都没有停在“代码写完”。模型会自己检查画面、定位问题再改回去；本机缺工具或渲染受限时，也会换一条路继续做完。以下几点来自 4 份制作记录，没有经过真人试玩或专业评审。
- 01
4 段视频都没有用屏幕录制：模型接管页面的时钟和随机数，逐帧推进、截图，再交给 ffmpeg 编码，所以同样的参数能录出完全一样的视频。
- 02
模型会把关键帧拼成缩略图自查，再按看到的问题修改：Starfall Ridge 修掉了 Metal 上 pow() 产生 NaN 导致的黑方块，Plasma Lance Mech 修掉了像“红眼睛”的导弹舱，Baking Time 修掉了模具换手时的跳位。
- 03
本机缺少 ffmpeg 或 Homebrew 时，模型改用 npm 包 ffmpeg-static 或 Python 包 imageio-ffmpeg 自带的版本；遇到 ffmpeg 解不了的音频格式，就换用 macOS 自带的 afconvert。
- 04
单次输出过长会被截断：Plasma Lance Mech 第一次尝试整页输出失败，之后分 4 段写入同一个文件。
- 05
局限：游戏手感和难度没有经过真人试玩；Baking Time 的混音是按测量数据调平的，制作时没有人试听。
KEEP EXPLORING