词元之母TOK.MOM - 平台充值汇率 1:1 即 1 人民币充值到账 1 美元，支持一个 Key 调用近 600+ 海内外模型，限时特价模型低至 1 折，欢迎上岸！
"P5Js — p5"
P5Js
Skill 元数据
| 来源 | 内置（默认安装） |
| 路径 | skills/creative/p5js |
| 版本 | 1.0.0 |
| 平台 | linux, macos, windows |
| 标签 | creative-coding, generative-art, p5js, canvas, interactive, visualization, webgl, shaders, animation |
| 相关 skill | ascii-video, manim-video, excalidraw |
参考：完整 SKILL.md
信息
p5.js 生产流水线
适用场景
内容概览
创意标准
模式
| 模式 | 输入 | 输出 | 参考 |
|---|---|---|---|
| 生成艺术 | 种子 / 参数 | 程序化视觉构图（静态或动态） | 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 § Pixel Manipulation |
| 音频响应式 | 音频文件 / 麦克风 | 声音驱动的生成视觉效果 | references/interaction.md § Audio Input |
技术栈
| 层级 | 工具 | 用途 |
|---|---|---|
| 核心 | 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 使用自定义字体 |
版本说明
async setup() 替代 preload()、OKLCH/OKLAB 色彩模式、splineVertex()、着色器 .modify() API、可变字体、textToContours()、pointer 事件。p5.brush 需要此版本。参见 references/core-api.md § p5.js 2.0。流水线
概念 → 设计 → 编码 → 预览 → 导出 → 验证1.
2.
3.
preload() → setup() → draw() → 辅助函数 → 类 → 事件处理器4.
5.
saveCanvas()，GIF 用 saveGif()，MP4 用 saveFrames() + ffmpeg，无头批量用 Puppeteer6.
创意方向
美学维度
| 维度 | 选项 | 参考 |
|---|---|---|
| 色彩系统 | HSB/HSL、RGB、命名调色板、程序化和声、渐变插值 | references/color-systems.md |
| 噪声词汇 | Perlin 噪声、simplex、分形（多倍频）、域扭曲、curl 噪声 | references/visual-effects.md § Noise |
| 粒子系统 | 基于物理、群集、轨迹绘制、吸引子驱动、流场跟随 | references/visual-effects.md § Particles |
| 形状语言 | 几何基元、自定义顶点、贝塞尔曲线、SVG 路径 | references/shapes-and-geometry.md |
| 运动风格 | 缓动、弹簧物理、噪声驱动、物理模拟、线性插值、步进 | references/animation.md |
| 排版 | 系统字体、加载的 OTF、textToPoints() 粒子文字、动态排版 | references/typography.md |
| 着色器效果 | GLSL 片段/顶点着色器、滤镜着色器、后处理、反馈循环 | references/webgl-and-3d.md § Shaders |
| 构图 | 网格、放射状、黄金比例、三分法、有机散布、平铺 | references/core-api.md § Composition |
| 交互模型 | 鼠标跟随、点击生成、拖拽、键盘状态、滚动驱动、麦克风输入 | references/interaction.md |
| 混合模式 | BLEND、ADD、MULTIPLY、SCREEN、DIFFERENCE、EXCLUSION、OVERLAY | references/color-systems.md § Blend Modes |
| 分层 | createGraphics() 离屏缓冲区、alpha 合成、遮罩 | references/core-api.md § Offscreen Buffers |
| 纹理 | Perlin 表面、点画、排线、半调、像素排序 | references/visual-effects.md § Texture Generation |
每个项目的变化规则
fill(255, 0, 0)。始终使用包含 3-7 种颜色的精心设计调色板background(0) 或 background(255)。始终使用纹理、渐变或分层背景项目专属创造
参数设计哲学
ellipse() 半径的"particle size"滑块是浅薄的。工作流程
第一步：创意愿景
第二步：技术设计
windowWidth/windowHeightP2D（默认）或 WEBGL（用于 3D、着色器、高级混合模式）noLoop()（静态生成）templates/viewer.html 开始，它提供种子导航、参数滑块和下载功能。对于简单草图或视频导出，使用裸 HTML第三步：编写草图代码
templates/viewer.html 开始。先阅读模板，保留固定部分（种子导航、操作按钮），替换算法和参数控件。这为用户提供种子上一个/下一个/随机/跳转、带实时更新的参数滑块，以及 PNG 下载——全部已连接好。randomSeed() + noiseSeed() 以确保可复现性colorMode(HSB, 360, 100, 100, 100) 以获得直观的色彩控制update() + display() 方法的类createGraphics() 用于分层合成、轨迹、遮罩第四步：预览与迭代
loadImage()/loadFont()：使用 scripts/serve.sh 或 python3 -m http.server第五步：导出
| 格式 | 方法 | 命令 |
|---|---|---|
| PNG | 在 keyPressed() 中使用 saveCanvas('output', 'png') | 按 's' 保存 |
| 高分辨率 PNG | Puppeteer 无头捕获 | node scripts/export-frames.js sketch.html --width 3840 --height 2160 --frames 1 |
| GIF | saveGif('output', 5) — 捕获 N 秒 | 按 'g' 保存 |
| 帧序列 | saveFrames('frame', 'png', 10, 30) — 10 秒 30fps | 然后 ffmpeg -i frame-%04d.png -c:v libx264 output.mp4 |
| MP4 | Puppeteer 帧捕获 + ffmpeg | bash scripts/render.sh sketch.html output.mp4 --duration 30 --fps 30 |
| SVG | 使用 p5.js-svg 的 createCanvas(w, h, SVG) | save('output.svg') |
第六步：质量验证
关键实现注意事项
性能——首先禁用 FES
Math.* 而非 p5 包装函数——速度明显更快：draw() 内使用 console.log()。绝不在 draw() 中操作 DOM。参见 references/troubleshooting.md § Performance。种子随机性——始终使用
Math.random()——仅用于性能关键的非视觉代码。视觉元素始终使用 random()。如果需要随机种子：CONFIG.seed = floor(random(99999))。生成艺术平台支持（fxhash / Art Blocks）
references/export-pipeline.md § Platform Export。色彩模式——使用 HSB
references/color-systems.md。噪声——多倍频，而非原始噪声
noise(x, y) 看起来像平滑的斑点。叠加倍频以获得自然纹理：references/visual-effects.md。createGraphics() 分层——不可省略
性能——尽可能向量化
references/troubleshooting.md § Performance。多草图使用实例模式
window。生产环境中使用实例模式：WebGL 模式注意事项
createCanvas(w, h, WEBGL) — 原点在中心，而非左上角translate(-width/2, -height/2) 获得类似 P2D 的坐标push()/pop() — 矩阵栈会静默溢出texture() 在 rect()/plane() 之前调用——而非之后createShader(vert, frag) — 在多个浏览器上测试导出——按键绑定约定
keyPressed() 中都应包含以下内容：无头视频导出——使用 noLoop()
noLoop()。否则，p5 的绘制循环会自由运行，而截图速度较慢——草图会超前运行，导致帧跳过或重复。scripts/export-frames.js 检测 _p5Ready 并在每次捕获时调用一次 redraw()，实现精确的 1:1 帧对应。参见 references/export-pipeline.md § Deterministic Capture。ffmpeg -f concat 拼接。参见 references/export-pipeline.md § Per-Clip Architecture。Agent 工作流程
1.
2.
open sketch.html，Linux 用 xdg-open sketch.html3.
python3 -m http.server 8080，然后打开 http://localhost:8080/sketch.html4.
keyPressed() 快捷键，告知用户按哪个键5.
node scripts/export-frames.js sketch.html --frames 300 用于自动化帧捕获（草图必须使用 noLoop() + _p5Ready）6.
bash scripts/render.sh sketch.html output.mp4 --duration 307.
8.
skill_view(name="p5js", file_path="references/...") 加载特定参考文件性能目标
| 指标 | 目标 |
|---|---|
| 帧率（交互式） | 持续 60fps |
| 帧率（动画导出） | 最低 30fps |
| 粒子数量（P2D 形状） | 60fps 下 5,000-10,000 |
| 粒子数量（像素缓冲区） | 60fps 下 50,000-100,000 |
| Canvas 分辨率 | 最高 3840x2160（导出），1920x1080（交互式） |
| 文件大小（HTML） | < 100KB（不含 CDN 库） |
| 加载时间 | < 2 秒到首帧 |
参考资料
| 文件 | 内容 |
|---|---|
references/core-api.md | Canvas 设置、坐标系、绘制循环、push()/pop()、离屏缓冲区、构图模式、pixelDensity()、响应式设计 |
references/shapes-and-geometry.md | 2D 基元、beginShape()/endShape()、贝塞尔/Catmull-Rom 曲线、vertex() 系统、自定义形状、p5.Vector、有符号距离场、SVG 路径转换 |
references/visual-effects.md | 噪声（Perlin、分形、域扭曲、curl）、流场、粒子系统（物理、群集、轨迹）、像素操作、纹理生成（点画、排线、半调）、反馈循环、反应扩散 |
references/animation.md | 基于帧的动画、缓动函数、lerp()/map()、弹簧物理、状态机、时间轴排序、基于 millis() 的计时、过渡模式 |
references/typography.md | text()、loadFont()、textToPoints()、动态排版、文字遮罩、字体度量、响应式文字大小 |
references/color-systems.md | colorMode()、HSB/HSL/RGB、lerpColor()、paletteLerp()、程序化调色板、色彩和声、blendMode()、渐变渲染、精选调色板库 |
references/webgl-and-3d.md | WEBGL 渲染器、3D 基元、摄像机、光照、材质、自定义几何体、GLSL 着色器（createShader()、createFilterShader()）、帧缓冲区、后处理 |
references/interaction.md | 鼠标事件、键盘状态、触控输入、DOM 元素、createSlider()/createButton()、音频输入（p5.sound FFT/振幅）、滚动驱动动画、响应式事件 |
references/export-pipeline.md | saveCanvas()、saveGif()、saveFrames()、确定性无头捕获、ffmpeg 帧转视频、CCapture.js、SVG 导出、每片段架构、平台导出（fxhash）、视频注意事项 |
references/troubleshooting.md | 性能分析、每像素预算、常见错 误、浏览器兼容性、WebGL 调试、字体加载问题、像素密度陷阱、内存泄漏、CORS |
templates/viewer.html | 交互式查看器模板：种子导航（上一个/下一个/随机/跳转）、参数滑块、下载 PNG、响应式 canvas。可探索生成艺术从此开始 |
创意发散（仅在用户请求实验性/创意性/独特输出时使用）
概念混合
1.
2.
3.
4.
SCAMPER 变换
距离联想
1.
2.
3.
修改于 2026-05-31 00:25:01