AIPMAndy Andy-P5JS
AI驱动的p5.js创意编码工作流 - 从灵感到动画一站式解决方案。
🎯 核心能力
- 灵感发现 - 从 OpenProcessing 搜索优质模板
- 代码生成 - 使用 Gemini 3.1 Pro Canvas 生成高质量代码
- 实时预览 - p5.js Web Editor 在线预览和调试
- 本地优化 - 本地部署和视觉效果增强
- 视觉验证 - 使用 testiv/snapstack 进行视觉回归测试
- 视频输出 - Cap 录屏或 ChatCut 剪辑
🔄 标准工作流
灵感搜索 → AI生成 → 在线预览 → 本地优化 → 视觉验证 → 视频输出
↓ ↓ ↓ ↓ ↓ ↓
OpenProcessing Gemini p5js.org 本地服务器 MCP工具 Cap/ChatCut
📋 使用场景
- 创意动画快速原型
- 生成艺术作品
- 交互式可视化
- 教学演示动画
- 社交媒体视觉内容
🎨 示例项目
- 宇宙级蒲公英飞鸟动画
- 3D粒子效果系统
- Fibonacci球体分布算法
- 多层辉光渲染
⚙️ 配置要求
- webbridge MCP 服务器（必需）
- testiv/snapstack（可选，用于视觉测试）
- photopea（可选，用于图像后处理）
- rrweb-stack（可选，用于交互录制）
- Cap 或 ffmpeg（可选，用于视频录制）
🚀 快速开始
# 调用技能
/andy-p5js
# 或指定需求
/andy-p5js 创建一个3D粒子爆炸效果
实现步骤
Step 1: 灵感搜索（OpenProcessing）
使用 webbridge 访问 https://openprocessing.org/ 搜索相关主题的优质模板。
搜索策略：
- 使用英文关键词（如 "particle system", "3D animation", "generative art"）
- 筛选高点赞数/收藏数的作品
- 优先选择有清晰代码结构的项目
- 注意查看开源协议
webbridge 操作：
// 1. 访问 OpenProcessing
navigate("https://openprocessing.org/")
// 2. 搜索相关主题
fill("input[type='search']", "particle system 3D")
send_keys("Enter")
// 3. 截图保存灵感
screenshot("openprocessing-inspiration.png")
Step 2: AI代码生成（Gemini Canvas）
三步提示词工程法：
第一步 - 生成动画风格提示词：
请为以下p5.js动画需求生成一个详细的视觉风格描述提示词：
需求：[用户需求]
输出格式：
- 视觉风格（色彩、光影、氛围）
- 动画效果（粒子数量、运动轨迹、交互方式）
- 技术要点（3D/2D、物理引擎、算法选择）
第二步 - 使用生成的提示词生成代码：
使用以下风格描述，生成完整的p5.js动画代码：
[第一步生成的提示词]
要求：
- 完整的HTML文件（包含p5.js CDN）
- 使用WEBGL模式（如果是3D）
- 参数化配置（CONFIG对象）
- ES6 Class结构
- 响应式设计
- 注释清晰
第三步 - 验证和优化：
- 在 Gemini Canvas 中直接预览生成的代码
- 调整参数直到满意
- 复制完整代码
webbridge 操作：
// 访问 Gemini Canvas
navigate("https://gemini.google.com/app?hl=en_GB")
// 选择 Gemini 3.1 Pro
click("button[aria-label='Open mode picker']")
// 选择 Pro 模式
// 输入提示词
fill("textarea[aria-label='Enter a prompt']", promptText)
send_keys("Enter")
// 等待生成并截图
screenshot("gemini-generated-code.png")
Step 3: 在线预览（p5.js Web Editor）
访问 https://editor.p5js.org/ 进行在线预览和快速迭代。
优势：
- 无需本地环境配置
- 实时预览和调试
- 内置示例和文档
- 支持多文件项目
- 可分享和嵌入
webbridge 操作：
// 1. 访问 p5.js Editor
navigate("https://editor.p5js.org/")
// 2. 粘贴代码（需要拆分为 sketch.js）
// 注意：将HTML中的<script>部分提取到 sketch.js
// 3. 点击运行
click("button[aria-label='Play']")
// 4. 截图预览
screenshot("p5js-editor-preview.png")
Step 4: 本地部署优化
将代码保存到本地并启动开发服务器。
操作流程：
# 1. 保存文件
# 使用 Write 工具保存为 .html
# 2. 启动本地服务器
python3 -m http.server 8765 &
# 3. 使用 webbridge 打开
navigate("http://localhost:8765/animation.html")
# 4. 视觉优化
# - 调整参数（粒子数量、颜色、速度）
# - 增强效果（多层辉光、拖尾、粒子系统）
# - 性能优化（降低复杂度或优化算法）
优化检查清单：
- 3D效果是否流畅（使用WEBGL）
- 色彩是否和谐（检查配色方案）
- 动画是否自然（使用缓动和噪声）
- 性能是否达标（60fps目标）
- 响应式是否正常（windowResized）
- 参数是否可配置（CONFIG对象）
Step 5: 视觉验证（MCP工具）
使用视觉工具进行质量验证。
testiv - 视觉回归测试：
// 建立基线
testiv_capture("animation-baseline")
// 修改后对比
testiv_compare("animation-baseline", "animation-optimized")
snapstack - 截图管理：
// 捕获关键帧
snapstack_capture("keyframe-1")
snapstack_capture("keyframe-2")
// 生成时间轴
snapstack_timeline()
photopea - 图像后处理：
// 增强截图效果
photopea_open("animation-screenshot.png")
// 手动调整后保存
Step 6: 视频输出
方案A - Cap录屏（推荐）：
# 使用 Mac 上的 Cap 应用
# 1. 打开 Cap
# 2. 选择浏览器窗口
# 3. 开始录制
# 4. 停止并导出
方案B - ffmpeg录屏：
# macOS 屏幕录制
ffmpeg -f avfoundation -i "1" -t 30 -r 60 animation.mp4
# 压缩优化
ffmpeg -i animation.mp4 -c:v libx264 -crf 23 -preset medium animation-compressed.mp4
方案C - rrweb-stack交互录制：
// 录制用户交互
rrweb_start_recording()
// 执行操作...
// 停止并保存
rrweb_stop_recording("animation-interactive.json")
视频剪辑 - ChatCut：
- 访问 https://app.chatcut.io/
- 上传录制的视频
- AI辅助剪辑（自动字幕、转场、配乐）
- 导出最终版本
📊 质量标准
视觉质量
- ✅ 宇宙级美感（多层次、深度感、光影效果）
- ✅ 色彩和谐（配色方案符合主题）
- ✅ 动画流畅（60fps，无卡顿）
- ✅ 细节丰富（粒子、拖尾、辉光）
代码质量
- ✅ 结构清晰（Class-based架构）
- ✅ 参数化配置（易于调整）
- ✅ 注释完整（关键算法说明）
- ✅ 响应式设计（适配不同屏幕）
性能标准
- ✅ 初始加载 < 2秒
- ✅ 帧率稳定 ≥ 60fps
- ✅ 内存占用 < 200MB
- ✅ CPU使用率 < 50%
🎓 技术要点
Fibonacci球体分布算法
// 在球面上均匀分布点
const phi = acos(1 - 2 * (index + 0.5) / total);
const theta = PI * (1 + sqrt(5)) * (index + 0.5);
const position = createVector(
sin(phi) * cos(theta),
sin(phi) * sin(theta),
cos(phi)
);
多层辉光效果
// 渲染3-5层渐变光晕
for (let r = 5; r >= 1; r--) {
let alpha = map(r, 5, 1, 20, 150);
fill(glowColor + alpha.toString(16).padStart(2, '0'));
sphere(radius * (1 + r * 0.15));
}
Perlin噪声自然运动
// 使用噪声生成自然飘动
let noise = createVector(
map(noise(pos.x * 0.01, time * 0.1), 0, 1, -0.5, 0.5),
map(noise(pos.y * 0.01, time * 0.1), 0, 1, -0.5, 0.5),
map(noise(pos.z * 0.01, time * 0.1), 0, 1, -0.5, 0.5)
);
velocity.add(noise);
轨迹拖尾系统
// 记录历史位置
this.trail.push(this.pos.copy());
if (this.trail.length > CONFIG.trailLength) {
this.trail.shift();
}
// 渲染渐变拖尾
for (let i = 0; i < this.trail.length - 1; i++) {
let alpha = map(i, 0, this.trail.length, 0, 100);
stroke(color + alpha.toString(16).padStart(2, '0'));
line(trail[i].x, trail[i].y, trail[i].z,
trail[i+1].x, trail[i+1].y, trail[i+1].z);
}
🔗 资源链接
- OpenProcessing: https://openprocessing.org/
- p5.js Web Editor: https://editor.p5js.org/
- Gemini Canvas: https://gemini.google.com/app?hl=en_GB
- ChatCut: https://app.chatcut.io/
- p5.js 文档: https://p5js.org/reference/
- p5.js 示例: https://p5js.org/examples/
💡 最佳实践
- 先搜索后创造 - 站在巨人的肩膀上，从优秀作品中学习
- AI辅助而非替代 - 用AI生成初版，人工精调优化
- 在线调试本地部署 - 利用在线工具快速迭代，本地环境深度优化
- 参数化一切 - CONFIG对象集中管理所有可调参数
- 性能优先 - 60fps是底线，牺牲细节保证流畅度
- 视觉验证必不可少 - 截图对比，确保优化效果可量化
🐛 常见问题
Q: Gemini生成的代码运行报错？ A: 检查p5.js版本，确保使用1.7.0+，WEBGL模式需要完整的3D API支持。
Q: 动画卡顿怎么办？ A: 减少粒子数量、降低绘制复杂度、使用对象池优化内存分配。
Q: 如何导出高质量视频？ A: 使用Cap录制原始视频（60fps），然后用ChatCut进行无损剪辑。
Q: OpenProcessing的代码能直接用吗？ A: 大部分可以，但需要注意开源协议，建议作为参考学习而非直接复制。
📈 未来扩展
- 支持Three.js高级3D渲染
- 集成Tone.js音频可视化
- 支持WebGL Shader自定义
- 集成ml5.js机器学习交互
- 支持VR/AR输出格式
License: MIT
Repository: https://github.com/andyai/andy-p5js (待创建)
Author: Andy AIPM
Version: 1.0.0