p5.js 生产流水线
何时使用
当用户请求：p5.js 草图、创意编程、生成艺术、交互式可视化、画布动画、基于浏览器的视觉艺术、数据可视化、着色器效果或任何 p5.js 项目时使用。
内部包含
交互式和生成视觉艺术的 p5.js 生产流水线。创建基于浏览器的草图、生成艺术、数据可视化、交互式体验、3D 场景、音频反应图形和动态图形——导出为 HTML、PNG、GIF、MP4 或 SVG 格式。涵盖：2D/3D 渲染、噪声和粒子系统、流场、着色器 (GLSL)、像素操作、动态排版、WebGL 场景、音频分析、鼠标/键盘交互以及无头高分辨率导出。
创意标准
这是浏览器中渲染的视觉艺术。画布是媒介；算法是画笔。
在编写一行代码之前，阐明创意概念。这件作品传达了什么意思？是什么让观众停止滚动？是什么让这件作品与代码教程示例区分开来？用户的提示只是一个起点——用创意雄心去诠释它。
首次渲染的卓越性是不可妥协的。 输出必须在首次加载时视觉上引人注目。如果它看起来像 p5.js 教程练习、默认配置或“AI 生成的创意编码”，那它就是错误的。在交付之前重新思考。
超越参考词汇。 参考文档中的噪声函数、粒子系统、调色板和着色器效果只是一个起点。对于每个项目，要进行组合、叠加和创造。目录是一盒颜料——你来画这幅画。
主动发挥创意。 如果用户要求“一个粒子系统”，那就提供一个具有涌现集群行为、尾随幽灵痕迹、调色板偏移景深雾气和呼吸的背景噪声场的粒子系统。至少包含一个用户没有要求但会欣赏的视觉细节。
密集、分层、深思熟虑。 每一帧都应值得观看。永远不要使用纯白色背景。始终要有构图层次。始终要有有意的色彩。始终要有只有仔细检查才能看到的微细节。
统一美学胜过功能数量。 所有元素必须服务于统一的视觉语言——共享色温、一致的笔触权重词汇、和谐的运动速度。一个包含十个不相关效果的草图不如三个相互协调的效果好。
模式
| 模式 | 输入 | 输出 | 参考 |
|---|---|---|---|
| 生成艺术 | 种子 / 参数 | 程序化视觉构图（静态或动画） | references/visual-effects.md |
| 数据可视化 | 数据集 / API | 交互式图表、图形、自定义数据显示 | references/interaction.md |
| 交互式体验 | 无（用户驱动） | 鼠标/键盘/触控驱动的草图 | references/interaction.md |
| 动画 / 动态图形 | 时间线 / 故事板 | 定时序列、动态排版、过渡 | references/animation.md |
| 3D 场景 | 概念描述 | WebGL 几何体、光照、相机、材质 | references/webgl-and-3d.md |
| 图像处理 | 图像文件 | 像素操作、滤镜、马赛克、点彩画 | references/visual-effects.md § 像素操作 |
| 音频反应 | 音频文件 / 麦克风 | 声音驱动的生成视觉效果 | references/interaction.md § 音频输入 |
技术栈
每个项目单个自包含的 HTML 文件。无需构建步骤。
| 层 | 工具 | 用途 |
|---|---|---|
| 核心 | p5.js 1.11.3 (CDN) | 画布渲染、数学运算、变换、事件处理 |
| 3D | p5.js WebGL 模式 | 3D 几何体、相机、光照、GLSL 着色器 |
| 音频 | p5.sound.js (CDN) | FFT 分析、振幅、麦克风输入、振荡器 |
| 导出 | 内置 saveCanvas() / saveGif() / saveFrames() | PNG、GIF、帧序列输出 |
| 捕获 | CCapture.js (可选) | 确定帧率的视频捕获 (WebM、GIF) |
| 无头 | Puppeteer + Node.js (可选) | 自动高分辨率渲染、通过 ffmpeg 输出 MP4 |
| SVG | p5.js-svg 1.6.0 (可选) | 打印用的矢量输出——需要 p5.js 1.x |
| 自然介质 | p5.brush (可选) | 水彩、木炭、钢笔——需要 p5.js 2.x + WEBGL |
| 纹理 | p5.grain (可选) | 胶片颗粒感、纹理叠加 |
| 字体 | Google Fonts / loadFont() | 通过 OTF/TTF/WOFF2 自定义排版 |
版本说明
p5.js 1.x (1.11.3) 是默认版本——稳定、文档完善、库兼容性最广。除非项目需要 2.x 功能，否则请使用此版本。
p5.js 2.x (2.2+) 新增：async setup() 替代 preload()、OKLCH/OKLAB 颜色模式、splineVertex()、着色器 .modify() API、可变字体、textToContours()、指针事件。p5.brush 需要此版本。请参阅 references/core-api.md § p5.js 2.0。
流水线
每个项目都遵循相同的 6 阶段路径：
概念 → 设计 → 编码 → 预览 → 导出 → 验证
- 概念 — 阐明创意愿景：情绪、色彩世界、运动词汇、独特性
- 设计 — 选择模式、画布大小、交互模型、色彩系统、导出格式。将概念映射到技术决策
- 编码 — 编写单个 HTML 文件，包含内联的 p5.js。结构：全局变量 →
preload()→setup()→draw()→ 辅助函数 → 类 → 事件处理器 - 预览 — 在浏览器中打开，验证视觉效果。在目标分辨率下测试。检查性能
- 导出 — 捕获输出：PNG 使用
saveCanvas()，GIF 使用saveGif()，MP4 使用saveFrames()+ ffmpeg，批量无头渲染使用 Puppeteer - 验证 — 输出是否符合概念？在预期的显示尺寸下是否视觉上引人注目？你会把它装裱起来吗？
创意指导
美学维度
| 维度 | 选项 | 参考 |
|---|---|---|
| 色彩系统 | HSB/HSL、RGB、命名调色板、程序化和谐、渐变插值 | references/color-systems.md |
| 噪声词汇 | Perlin 噪声、Simplex 噪声、分形（八度）、域扭曲、旋度噪声 | references/visual-effects.md § 噪声 |
| 粒子系统 | 基于物理、集群、轨迹绘制、吸引子驱动、流场跟随 | references/visual-effects.md § 粒子 |
| 形状语言 | 几何图元、自定义顶点、贝塞尔曲线、SVG 路径 | references/shapes-and-geometry.md |
| 运动风格 | 缓动、弹簧、噪声驱动、物理模拟、lerp、步进 | references/animation.md |
| 排版 | 系统字体、加载的 OTF、textToPoints() 粒子文本、动态 | references/typography.md |
| 着色器效果 | GLSL 片段/顶点着色器、滤镜着色器、后期处理、反馈循环 | references/webgl-and-3d.md § 着色器 |
| 构图 | 网格、辐射、黄金比例、三分法、有机散布、平铺 | references/core-api.md § 构图 |
| 交互模型 | 鼠标跟随、点击生成、拖拽、键盘状态、滚动驱动、麦克风输入 | references/interaction.md |
| 混合模式 | BLEND、ADD、MULTIPLY、SCREEN、DIFFERENCE、EXCLUSION、OVERLAY | references/color-systems.md § 混合模式 |
| 分层 | createGraphics() 离屏缓冲区、Alpha 合成、蒙版 | references/core-api.md § 离屏缓冲区 |
| 纹理 | Perlin 表面、点画、影线、半色调、像素排序 | references/visual-effects.md § 纹理生成 |
每个项目的变异规则
永远不要使用默认配置。对于每个项目：
- 自定义调色板 — 永远不要使用原始的
fill(255, 0, 0)。始终使用包含 3-7 种颜色的设计调色板 - 自定义笔触权重词汇 — 细强调线 (0.5)、中等结构 (1-2)、粗强调线 (3-5)
- 背景处理 — 永远不要使用纯
background(0)或background(255)。始终使用纹理、渐变或层次化背景 - 运动多样性 — 不同元素使用不同速度。主要元素 1x，次要元素 0.3x，环境元素 0.1x
- 至少一个自创元素 — 自定义粒子行为、新颖的噪声应用、独特的交互响应
项目特定创新
对于每个项目，至少创新其中之一：
- 与情绪匹配的自定义调色板（不是预设）
- 新颖的噪声场组合（例如，旋度噪声 + 域扭曲 + 反馈）
- 独特的粒子行为（自定义力、自定义轨迹、自定义生成）
- 用户未要求但能提升作品的交互机制
- 创造视觉层次的构图技巧
参数设计理念
参数应从算法中涌现，而不是来自通用菜单。问：“这个系统的哪些属性应该可调？”
好的参数 揭示算法的特征：
- 数量 — 粒子数、分支数、单元格数（控制密度）
- 尺度 — 噪声频率、元素大小、间距（控制纹理）
- 速率 — 速度、增长率、衰减率（控制能量）
- 阈值 — 行为何时改变？（控制戏剧性）
- 比例 — 比例、力之间的平衡（控制和谐）
不好的参数 是与算法无关的通用控制：
- “颜色1”、“颜色2”、“大小”——没有上下文就毫无意义
- 不相关效果的开关
- 只改变外观，不改变行为的参数
每个参数都应该改变算法的思考方式，而不仅仅是它的外观。改变噪声八度的“湍流”参数是好的。只改变 ellipse() 半径的“粒子大小”滑块是肤浅的。
工作流程
第一步：创意愿景
在任何代码之前，阐明：
- 情绪 / 氛围：观众应该感觉到什么？沉思？充满活力？不安？俏皮？
- 视觉故事：随着时间的推移（或通过交互）会发生什么？构建？衰败？转变？震荡？
- 色彩世界：暖色调/冷色调？单色？互补色？主色调是什么？强调色是什么？
- 形状语言：有机曲线？锐利几何形状？点？线？混合？
- 运动词汇：缓慢漂移？爆发式喷射？呼吸式脉冲？机械式精确？
- 是什么让这个与众不同：是什么让这个草图独一无二？
将用户的提示映射到美学选择。“放松的生成背景”需要与“故障数据可视化”完全不同的东西。
第二步：技术设计
- 模式 — 从上面表格中的 7 种模式中选择
- 画布大小 — 横向 1920x1080、纵向 1080x1920、正方形 1080x1080 或响应式
windowWidth/windowHeight - 渲染器 —
P2D（默认）或WEBGL（用于 3D、着色器、高级混合模式） - 帧率 — 60fps（交互式）、30fps（环境动画）或
noLoop()（静态生成） - 导出目标 — 浏览器显示、PNG 静态图、GIF 循环、MP4 视频、SVG 矢量
- 交互模型 — 被动（无输入）、鼠标驱动、键盘驱动、音频反应、滚动驱动
- 查看器 UI — 对于交互式生成艺术，从
templates/viewer.html开始，它提供种子导航、参数滑块和下载。对于简单的草图或视频导出，使用纯 HTML
第三步：编写草图的代码
对于交互式生成艺术（种子探索、参数调整）：从 templates/viewer.html 开始。先阅读模板，保留固定部分（种子导航、操作），替换算法和参数控制。这将为用户提供种子上一个/下一个/随机/跳转、带有实时更新的参数滑块以及 PNG 下载——所有这些都已连接好。
对于动画、视频导出或简单草图：使用纯 HTML：
单个 HTML 文件。结构：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>项目名称</title>
<script>p5.disableFriendlyErrors = true;</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.3/p5.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.3/addons/p5.sound.min.js"></script> -->
<!-- <script src="https://unpkg.com/[email protected]"></script> --> <!-- SVG 导出 -->
<!-- <script src="https://cdn.jsdelivr.net/npm/ccapture.js-npmfixed/build/CCapture.all.min.js"></script> --> <!-- 视频捕获 -->
<style>
html, body { margin: 0; padding: 0; overflow: hidden; }
canvas { display: block; }
</style>
</head>
<body>
<script>
// === 配置 ===
const CONFIG = {
seed: 42,
// ... 项目特定参数
};
// === 调色板 ===
const PALETTE = {
bg: '#0a0a0f',
primary: '#e8d5b7',
// ...
};
// === 全局状态 ===
let particles = [];
// === 预加载（字体、图像、数据） ===
function preload() {
// font = loadFont('...');
}
// === 设置 ===
function setup() {
createCanvas(1920, 1080);
randomSeed(CONFIG.seed);
noiseSeed(CONFIG.seed);
colorMode(HSB, 360, 100, 100, 100);
// 初始化状态...
}
// === 绘制循环 ===
function draw() {
// 渲染帧...
}
// === 辅助函数 ===
// ...
// === 类 ===
class Particle {
// ...
}
// === 事件处理器 ===
function mousePressed() { /* ... */ }
function keyPressed() { /* ... */ }
function windowResized() { resizeCanvas(windowWidth, windowHeight); }
</script>
</body>
</html>
关键实现模式：
- 带种子的随机性：始终使用
randomSeed()+noiseSeed()以确保可重现性 - 颜色模式：使用
colorMode(HSB, 360, 100, 100, 100)以获得直观的颜色控制 - 状态分离：CONFIG 用于参数，PALETTE 用于颜色，全局变量用于可变状态
- 基于类的实体：粒子、代理、形状作为类，包含
update()+display()方法 - 离屏缓冲区：使用
createGraphics()进行分层构图、轨迹和蒙版
第四步：预览与迭代
- 直接在浏览器中打开 HTML 文件——基本草图无需服务器
- 对于从本地文件加载
loadImage()/loadFont()：使用scripts/serve.sh或python -m http.server - 使用 Chrome DevTools 的 Performance 标签验证 60fps
- 在目标导出分辨率下测试，而不仅仅是窗口大小
- 调整参数直到视觉效果与第一步的概念相匹配
…
[翻译后截断]