p5.js 生产管线是做什么的？

何时使用

当用户请求：p5.js 草图、创意编码、生成艺术、交互式可视化、Canvas 动画、基于浏览器的视觉艺术、数据可视化、着色器效果或任何 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)	Canvas 渲染、数学、变换、事件处理
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 阶段路径：

概念 → 设计 → 编码 → 预览 → 导出 → 验证

概念 —— 阐明创意愿景：情绪、色彩世界、运动词汇、独特之处
设计 —— 选择模式、画布尺寸、交互模型、色彩系统、导出格式。将概念映射到技术决策
编码 —— 编写包含内联 p5.js 的单个 HTML 文件。结构：全局变量 → preload() → setup() → draw() → 辅助函数 → 类 → 事件处理程序
预览 —— 在浏览器中打开，验证视觉质量。在目标分辨率下测试。检查性能
导出 —— 捕获输出：saveCanvas() 生成 PNG，saveGif() 生成 GIF，saveFrames() + ffmpeg 生成 MP4，Puppeteer 用于无头批量处理
验证 —— 输出是否符合概念？在预期显示尺寸下是否视觉惊艳？你会把它装裱起来吗？

创意指导

美学维度

维度	选项	参考
色彩系统	HSB/HSL、RGB、命名调色板、程序化和谐、渐变插值	`references/color-systems.md`
噪声词汇	Perlin 噪声、Simplex、分形（八度）、域扭曲、旋度噪声	`references/visual-effects.md` § 噪声
粒子系统	基于物理、群集、拖尾绘图、吸引子驱动、流场跟随	`references/visual-effects.md` § 粒子
形状语言	几何图元、自定义顶点、贝塞尔曲线、SVG 路径	`references/shapes-and-geometry.md`
运动风格	缓动、弹簧、噪声驱动、物理模拟、线性插值、步进	`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
至少一个发明元素 —— 自定义粒子行为、新颖的噪声应用、独特的交互响应

项目特定发明

对于每个项目，至少发明以下之一：

匹配情绪的自定义调色板（非预设）
新颖的噪声场组合（例如，旋度噪声 + 域扭曲 + 反馈）
独特的粒子行为（自定义力、自定义拖尾、自定义生成）
用户未要求但能提升作品的交互机制
创建视觉层次的构图技巧

参数设计理念

参数应从算法中生成，而不是来自通用菜单。问：“这个系统的哪些属性应该是可调的？”

好的参数 暴露算法的特征：

数量 —— 多少粒子、分支、单元（控制密度）
尺度 —— 噪声频率、元素大小、间距（控制纹理）
速率 —— 速度、增长率、衰减（控制能量）
阈值 —— 行为何时变化？（控制戏剧性）
比例 —— 比例、力之间的平衡（控制和谐）

坏的参数 是与算法无关的通用控件：

“color1”、“color2”、“size” —— 无上下文时无意义
用于无关效果的切换开关
只改变外观而不改变行为的参数

每个参数都应改变算法的思考方式，而不仅仅是外观。一个改变噪声八度的“湍流”参数是好的。一个只改变 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 或 python3 -m http.server
使用 Chrome DevTools 性能选项卡验证 60fps
在目标导出分辨率下测试，而不仅仅是窗口尺寸
调整参数，直到视觉与第一步的概念匹配

[内容已截断，用于翻译]

p5.js 生产管线