| name | p5-animation |
|---|---|
| description | P5.js 创意动画代码生成器。当用户想要生成雨帘、花枝、飞燕等 P5.js 动画效果时使用。根据用户描述自动调整颜色、数量、速度等参数，返回可直接在 P5.js 官方编辑器(p5js.org)中运行的完整 sketch.js 代码。支持场景：用户说"给我一个红色飞燕动画"、"想要蓝色雨帘更密一点"、"生成粉色花朵的树枝生长动画"等。 |
P5.js 动画代码生成器 (p5-animation)
快速生成三套 P5.js 创意动画的完整 sketch.js 代码，根据用户描述自动定制参数。
包含的动画
| 编号 | 动画名称 | 效果描述 | 模板文件 |
|---|---|---|---|
| 1 | 雨帘 (Rain Curtain) | 垂直帘线上挂满雨滴，鼠标靠近可撩动，快速滑动使雨滴脱落 | templates/rainCurtain.js |
| 2 | 花枝 (Branch) | 树枝从底部自然生长、二叉分裂、花朵渐放，带有微风摇摆动画 | templates/branch.js |
| 3 | 飞燕 (Swallow) | 一群飞燕从右向左弧线飞过，翅膀扑动，Verlet 叉尾拖曳，循环飞行 | templates/swallow.js |
快速使用
基本用法
直接告诉 AI 你想要什么效果，AI 会自动匹配动画类型并返回代码：
用户：给我一个雨帘动画
AI：匹配 → 动画1(雨帘) → 使用默认参数 → 返回完整 sketch.js
指定参数
在描述中加入颜色、数量、速度等要求：
用户：要一群红色的飞燕，大概30只
AI：匹配 → 动画3(飞燕) → BIRD_COLOR=#e83e3e, FLOCK_SIZE=30 → 返回定制代码
用户：蓝色雨帘，密集一点，帘线长一点
AI：匹配 → 动画1(雨帘) → CURTAIN_COLOR=#4a90d9, 线数×1.5, CURTAIN_LENGTH=850 → 返回定制代码
用户：粉色花朵，慢慢长，只要3根树枝
AI：匹配 → 动画2(花枝) → flowerColor=#e85d75, branchGrowthSpeed=2, branchCount=3 → 返回定制代码
工作流程
- 识别动画类型：根据用户描述中的关键词匹配对应的动画模板
- 提取参数修改：从自然语言中解析颜色、数量、速度、大小等定制意图
- 读取模板文件：根据匹配的动画编号，读取
templates/目录下对应的模板文件 - 替换参数：将模板中
{{参数名}}占位符替换为用户指定的值，未指定的保持默认值 - 输出代码：先说明修改了哪些参数，然后返回完整的 sketch.js 代码
动画匹配规则
根据用户描述中的关键词判断动画类型：
| 动画 | 中文关键词 | 英文关键词 |
|---|---|---|
| 雨帘 | 雨帘、雨滴、雨丝、雨幕、撩动、水珠、帘子、下雨 | rain, curtain, drops, water |
| 花枝 | 花枝、树枝、开花、生长、花、枝条、梅花、樱花、桃花 | branch, flower, bloom, growth, plant |
| 飞燕 | 飞燕、燕子、飞鸟、鸟群、燕群、候鸟、小鸟 | swallow, bird, flock, flying |
- 如果同时匹配多个动画，选择匹配关键词最多的那个
- 如果无法确定，询问用户："你想要哪种动画？雨帘 / 花枝 / 飞燕"
各动画可调参数速查
雨帘参数
| 参数名 | 默认值 | 说明 | 常见修改场景 |
|---|---|---|---|
| CURTAIN_LINE_COUNT | 32 | 帘线数量 | "密集一点"→48, "稀疏一点"→20 |
| CURTAIN_COLOR | #7a7a7a | 帘线颜色 | "红色帘子"→#e83e3e |
| CURTAIN_STROKE_ALPHA | 128 | 帘线透明度 | "更透明"→80, "更明显"→200 |
| CURTAIN_LENGTH | 750 | 帘线长度 | "长一点"→850, "短一点"→500 |
| DROPS_PER_LINE_MIN | 5 | 每线最少雨滴 | "雨滴更多"→7 |
| DROPS_PER_LINE_MAX | 12 | 每线最多雨滴 | "雨滴更多"→16 |
| DROP_SIZE_MIN | 0.25 | 雨滴最小缩放 | "雨滴大一点"→0.4 |
| DROP_SIZE_MAX | 0.55 | 雨滴最大缩放 | "雨滴大一点"→0.8 |
| VERLET_GRAVITY | 0.18 | 重力 | "飘动更轻盈"→0.10 |
| VERLET_REPULSION_SIZE | 100 | 鼠标排斥半径 | "更容易撩到"→150 |
| DETACH_PROBABILITY | 0.18 | 脱落概率 | "雨滴容易掉"→0.35 |
| FALLING_DROP_GRAVITY | 0.55 | 脱落雨滴重力 | "掉落更快"→0.8 |
花枝参数
| 参数名 | 默认值 | 说明 | 常见修改场景 |
|---|---|---|---|
| branchCount | 10 | 树枝数量 | "3根树枝"→3 |
| branchColor | #938a82 | 树枝颜色 | "深色树枝"→#5a4a3a |
| branchGrowthSpeed | 4 | 生长速度 | "慢慢长"→1.5 |
| branchMaxLevel | 5 | 最大分枝级数 | "简单一点"→3 |
| flowerColor | #e85d75 | 花朵颜色 | "白色花"→#ffffff |
| flowerMaxDiameter | 18 | 花朵最大直径 | "大花"→28 |
| flowerBloomDuration | 45 | 开花动画帧数 | "慢慢开"→80 |
| flowerSpawnProbability | 0.06 | 每段长花概率 | "花开更多"→0.12 |
| swayAmplitude | 8 | 最大摇摆幅度 | "微风"→3, "大风"→15 |
| swayFrequency | 0.025 | 摇摆频率 | "摇得快"→0.05 |
| backgroundColor | #ffffff | 背景色 | "深色背景"→#1a1a2e |
飞燕参数
| 参数名 | 默认值 | 说明 | 常见修改场景 |
|---|---|---|---|
| FLOCK_SIZE | 20 | 燕群数量 | "30只"→30 |
| BIRD_COLOR | #2d2d44 | 飞燕颜色 | "红色燕子"→#e83e3e |
| TAIL_COLOR | #2d2d44 | 叉尾颜色 | 通常与 BIRD_COLOR 一致 |
| BG_COLOR | #ffffff | 背景色 | "深色背景"→#1a1a2e |
| BIRD_SCALE | 0.60 | 飞燕缩放 | "大一点"→0.85 |
| FLIGHT_DURATION_MIN | 2800 | 最短飞行时长ms | "飞快一点"→1800 |
| FLIGHT_DURATION_MAX | 4200 | 最长飞行时长ms | "飞快一点"→2800 |
| LOOP_INTERVAL | 5500 | 循环间隔ms | "飞个不停"→2000, "只飞一次"→0 |
| WING_FLAP_SPEED | 0.22 | 翅膀扑动速度 | "翅膀快扇"→0.35 |
| STAGGER_SPAN | 1000 | 群内错开ms | "密集飞过"→400 |
颜色映射表
| 颜色名 | Hex | 颜色名 | Hex |
|---|---|---|---|
| 红 red | #e83e3e | 粉红 pink | #e85d75 |
| 橙 orange | #f08c3c | 黄 yellow | #f5d63e |
| 绿 green | #4caf50 | 蓝 blue | #4a90d9 |
| 紫 purple | #8e5ebe | 白 white | #ffffff |
| 黑 black | #1a1a1a | 灰 gray | #7a7a7a |
| 深蓝 navy | #2d2d44 | 棕 brown | #938a82 |
| 金 gold | #d4a843 | 青 cyan | #46c4c4 |
| 深绿 dark green | #2d6a4f | 深紫 dark purple | #5c3d6e |
| 深红 dark red | #8b0000 | 浅蓝 light blue | #87ceeb |
如果用户说的颜色不在表中（如"玫红"、"天蓝"等），自动匹配最接近的 hex 色值。
输出格式
按以下格式返回：
已将[参数A]改为[值A]，[参数B]改为[值B]。
```js
// 完整的 sketch.js 代码
**关键规则：**
- 只输出 sketch.js 代码，不要输出 HTML
- 所有 CDN 图片 URL 保持不变
- 代码结构和逻辑完整不变，只修改模板中 `{{参数名}}` 标记的常量值
- 用户未指定的参数一律使用默认值
- 颜色一律使用 hex 格式（如 `#e83e3e`），不使用颜色名
- 如果用户描述无法匹配动画类型，反问用户选择
## 常见场景处理
### 场景1：标准请求
用户："给我一个雨帘动画" 处理：匹配动画1，全部使用默认值，返回完整代码
### 场景2：颜色定制
用户："我要一群红色的飞鸟" 处理：匹配动画3，BIRD_COLOR 和 TAIL_COLOR 改为 #e83e3e，其余默认
### 场景3：数量+颜色+速度组合
用户："蓝色雨帘，密集一点，雨滴大一点，容易撩掉" 处理：匹配动画1 → CURTAIN_COLOR=#4a90d9 → CURTAIN_LINE_COUNT=48, DROPS_PER_LINE_MIN=7, DROPS_PER_LINE_MAX=16 → DROP_SIZE_MIN=0.4, DROP_SIZE_MAX=0.8 → DETACH_PROBABILITY=0.35
### 场景4：背景+对比色
用户："深色背景上的金色飞燕" 处理：匹配动画3 → BG_COLOR=#1a1a2e → BIRD_COLOR=#d4a843, TAIL_COLOR=#d4a843
### 场景5：模糊请求
用户："做一个好看的动画" 处理：无法匹配，反问"你想要哪种动画？雨帘（可撩动的雨滴帘子）/ 花枝（自然生长的开花树枝）/ 飞燕（一群弧线飞过的燕子）"
## 模板文件
所有动画模板存放在 `templates/` 目录下：
- `templates/rainCurtain.js` — 雨帘动画模板，可调参数用 `{{参数名}}` 标记
- `templates/branch.js` — 花枝动画模板，CONFIG 对象中参数用 `{{参数名}}` 标记
- `templates/swallow.js` — 飞燕动画模板，外部常量用 `{{参数名}}` 标记
处理时读取对应的模板文件，将其中的 `{{参数名}}` 替换为实际值后输出。未匹配到的参数使用模板中的默认值（即 `{{参数名|默认值}}` 中竖线后面的值）。