creative-lab：每两天发布一个可视化 Demo

Posted at 2026-03-11 # 创意编程 # Canvas # WebGL # 自动化 # Claude

EN · 中

creative-lab：每两天发布一个可视化 Demo

GitHub：bkmashiro/creative-lab · 在线体验：cl.yuzhes.com

理念

把创意编程当成一种日常（好吧，是每两天一次）练习。发布一些可视化的东西。保持自给自足。不要想太多。

这就是规则。creative-lab 中的每个 Demo 都是一个单独的 HTML 文件：没有 npm，没有打包器，没有构建步骤。在浏览器中打开就能运行。画廊索引页是一个深色主题的网格，内联加载每个 Demo。

目前已有 12 个 Demo。第 13 个可能正在生成中。

Demo 列表

#	名称	技术
001	粒子物理	Canvas 2D，Verlet 积分
002	分形树	递归 canvas 绘制
003	波的干涉	叠加原理，2D 场
004	Mandelbrot 探索器	WASM / 纯 JS，缩放，着色
005	元胞自动机	Conway’s GOL 变体，canvas
006	音频可视化	Web Audio API，FFT，canvas
007	重力模拟器	N 体问题，Barnes-Hut 近似
008	布料物理	弹簧质点系统，canvas
009	光线步进	SDF，WebGL 片段着色器
010	L 系统树	Lindenmayer 文法，SVG
011	反应扩散	Gray-Scott 模型，canvas
012	流体模拟	SPH 粒子，WebGL

每个文件在 100 到 300 行之间。有些是纯数学，有些是 GPU 密集型。所有的都不需要服务器。

单文件哲学

这个限制是有意为之的。单个 HTML 文件：

可移植 — 复制到任何地方，直接运行
可审计 — 一滚鼠标就能读完全部代码
低摩擦 — 零配置，无需 npm install

Demo 内联了所有内容：<style> 中的 CSS，<script> 中的 JS，必要时用 base64 内联资产。对于 WebGL Demo，着色器是 JS 中的模板字符串。这在传统意义上并不优雅，但它的自给自足程度是 webpack 打包产物永远达不到的。

<!DOCTYPE html>
<html>
<head>
  <style>
    body { margin: 0; background: #0a0a0f; }
    canvas { display: block; }
  </style>
</head>
<body>
<canvas id="c"></canvas>
<script>
// 整个 Demo 都在这里，约 150 行
const canvas = document.getElementById('c');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// ...
</script>
</body>
</html>

这就是模板。从这里出发，到达某个有趣的地方。

定时任务流水线

有趣的部分不是 Demo 本身——而是它们是如何生成的。

每隔两天，一个定时任务会触发一个 Claude 智能体，给它以下上下文：

仓库根目录的 todo.md 文件（一个编号的 Demo 创意列表）
最新生成的 Demo（作为风格/结构参考）
按照单文件约束，编写列表中下一个 Demo 的指令

智能体编写 HTML 文件，更新画廊索引，然后直接提交到仓库。Cloudflare Pages 在一分钟内检测到提交并完成部署。

todo 列表大致如下：

# Demo 创意

- [x] 001 粒子物理
- [x] 002 分形树
...
- [x] 012 流体模拟
- [ ] 013 Voronoi 图
- [ ] 014 奇异吸引子
- [ ] 015 元球
- [ ] 016 傅里叶画图
...

当智能体选取下一个未勾选的项目时，它会将其标记为已完成，生成 Demo，然后提交。整个流水线完全自动化——我只需配置一次，它就持续运行。

智能体做得好的（和不好的）

大多数 Demo 第一次就能正常运行。简单的粒子系统、分形树、元胞自动机——这些在训练数据中覆盖良好，智能体能生成干净、正确的代码。

难度较高的——流体模拟、光线步进——有时需要引导。智能体偶尔会产生物理上合理但视觉上无趣的结果（例如，一个从技术上保持动量守恒、但以 3fps 运行且看起来像灰色斑点的 SPH 流体）。遇到这种情况，我会用更具体的提示重新生成（「让粒子更小，增大交互半径，根据速度使用暖色渐变」）。

智能体做得一直很好的一点是：视觉风格。深色背景、亮色粒子或线条、流畅的动画。它从参考 Demo 中学到了这种审美，并能可靠地应用。

它做得不够好的一点是：性能。智能体生成的 WebGL 着色器几乎从不优化。如果 Demo 卡顿，我通常会打开文件手动修复热路径——但结构和数学几乎总是正确的。

画廊索引

画廊是一个手写的 HTML 文件，在 <iframe> 中加载每个 Demo 作为缩略图预览。它通过读取提交时生成的 manifest.json 来自动发现 Demo：

[
  { "id": "001", "name": "粒子物理", "file": "demos/001.html" },
  { "id": "002", "name": "分形树", "file": "demos/002.html" },
  ...
]

manifest 由智能体在提交过程中更新。点击缩略图可以全屏打开 Demo。布局使用 CSS Grid，根据视口宽度显示 3-4 列。

为什么这行得通

两天的节奏是经过深思熟虑的。一天太快——没有时间思考做什么。一周太慢——它变成了一个带有期望值的「项目」。两天足够从列表中挑一个有趣的东西，信任智能体来实现它，然后继续前进。

零依赖规则消除了一整类决策。没有框架争论，没有打包器配置，没有依赖更新。每个 Demo 独立存在。

目标不是完美的 Demo。目标是持续发布的习惯。

已有 12 个 Demo。列表上还有 40 多个条目。

本地运行

git clone https://github.com/bkmashiro/creative-lab
cd creative-lab
# 直接打开任意 Demo
open demos/001.html
# 或者启动画廊服务
python3 -m http.server 8080

没有构建步骤。零配置。只是一些文件。