一个 script 标签开始创作：p5.js 的生成式画布

创意编程这个领域有一条奇怪的门槛：工具越专业，想法死得越快。p5.js 的解法是把一切降到最简，一个 script 标签、一段 setup 和 draw，浏览器里立刻出画。它是 Processing 哲学在浏览器上的延续，官方定位是给艺术家、设计师、学生和所有想用代码表达的人。仓库 2.4 万星，LGPL-2.1 协议，最新版 v2.3.4，是本系列第 6 个工具，负责「程序化生成画面」这一环。

一、为什么 agent 写 p5.js 特别顺

p5 的心智模型只有两句话：setup() 开头跑一次，draw() 每帧跑一次。没有构建配置，没有依赖安装，生成的代码粘进 HTML 就能看结果，反馈循环短到极致，这正好是 agent 最喜欢的验证方式。

一个典型的生成式 sketch 长这样，200 个圆的大小由柏林噪声决定：

function setup() {
  createCanvas(1920, 1080);
  noLoop();
}

function draw() {
  background(245);
  for (let i = 0; i < 200; i++) {
    const x = random(width), y = random(height);
    circle(x, y, noise(x * 0.01, y * 0.01) * 40);
  }
}

注意 noLoop() 和 randomSeed()、noiseSeed() 这几个函数：序列帧出图时固定随机种子，才能保证每一帧可复现，这是生成式画面进视频流水线的前提。

二、2.0 之后：字体、颜色、着色器都升级了

p5.js 2.0 在 2025 年 4 月发布，如今已迭代到 2.3.4。这轮大版本的更新清单相当扎实：textToContours() 和 textToModel() 能把文字转成轮廓和 WEBGL 3D 模型，可变字体有了 textWeight()，textToPoints 性能提升约 350%；p5.Color 补进 RGBHDR、HWB 等一批新色彩模式；p5.strands 让你直接用 JavaScript 写着色器；WebGPU 渲染器则拆成独立的 p5.webgpu.js 按需引入。

对出片最有想象力的是 textToModel()：标题文字直接变 3D 模型，配合 WEBGL 模式旋转打光，开场动画就省掉一次建模。

三、过渡期的三个注意点

一是文档双轨：1.x 参考手册还在 p5js.org，2.x 文档在 beta.p5js.org，查 API 前先确认版本。二是默认版本：官方早前说在线编辑器默认保持 1.x 至少到 2026 年 8 月，这个节点刚过，动手前值得看一眼官网现状。三是老代码迁移：官方维护了 p5.js-compatibility 兼容库，2.0 改动的 API 大多能平滑接上。

另外 LGPL-2.1 不是 MIT：以库形式引用、保留协议声明，商业项目通常没有问题；直接修改 p5 源码才需要开源改动部分。合规成本不高，但值得知道。

在这个系列里，p5.js 负责把想法最快变成画面，序列帧、动态背景、转场素材都从它出。下一篇是 Paper.js，把矢量路径这件事讲清楚。