P5 Animation

Community

xxoogreymon-prog

p5-animation

P5.js 创意动画代码生成器。当用户想要生成雨帘、花枝、飞燕等 P5.js 动画效果时使用。根据用户描述自动调整颜色、数量、速度等参数，返回可直接在 P5.js 官方编辑器(p5js.org)中运行的完整 sketch.js 代码。支持场景：用户说"给我一个红色飞燕动画"、"想要蓝色雨帘更密一点"、"生成粉色花朵的树枝生长动画"等。

Overview

Publisher	xxoogreymon-prog
Repository	`SKILL-rainCurtain-branch-swallow`
Skill name	`p5-animation`
Stars	56
Forks	4
Bundled files	3
Links	Skill source Repository

Markdown instructions
A SKILL.md file the model loads on demand, so it only costs tokens when a request actually matches.
Works with any LLM
AI skills are plain Markdown, not provider-specific code, so this works with GPT, Claude, Gemini, Grok, or a local model.
3 bundled files
Scripts, templates, and references the model can read while it works. Files are read-only and never executed.
Open source
Published by xxoogreymon-prog on GitHub. Read the source before you install it.

Installation

Install the P5 Animation AI skill in TypingMind to use it with any LLM, or drop it into another agent that reads SKILL.md.

Install in TypingMind

TypingMind installs a skill straight from its GitHub folder — it reads SKILL.md, bundles the resource files, and stores the result locally.

Open the app and go to Plugins → Skills.
Choose "Install from GitHub".
Paste the skill folder URL below and confirm.
https://github.com/xxoogreymon-prog/SKILL-rainCurtain-branch-swallow/tree/main
Enable the skill in any chat where you want it available.

Plugins → Skills → Add skill → From GitHub URL, then paste the folder URL and press Continue.

Install in another agent

Any agent that reads the Agent Skills format can use this skill — copy the folder into that agent's skills directory.

Claude Code — .claude/skills

git clone --depth 1 https://github.com/xxoogreymon-prog/SKILL-rainCurtain-branch-swallow.git \
  .claude/skills/p5-animation

Restart Claude Code after copying so it picks up the new skill.

Use it in TypingMind

Enable P5 Animation in any TypingMind chat and the model takes it from there. Its name and description sit in the system prompt, and the moment a request matches, the model loads the full instructions itself — you never invoke it by hand, and it costs no tokens until it is actually used.

The model loads P5 Animation on its own as soon as a request matches it.

Works with any AI model

AI skills are plain Markdown instructions rather than provider-specific code, so P5 Animation is not tied to the model it was written for. Install it once in TypingMind and use it with GPT-5, Claude, Gemini, Grok, DeepSeek, Mistral, Llama, or a local model you run yourself — all on your own API keys.

Loaded only when it is needed
The system prompt carries just the name and description. The instructions are fetched on the first matching request, so an idle skill costs nothing.
Switch models mid-chat
Because the skill is instructions rather than code, changing model does not break it — the next model reads the same SKILL.md.

Skill instructions

This is the SKILL.md content the model loads. Read it before installing — a skill is instructions your model will follow.

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` — 飞燕动画模板，外部常量用 `{{参数名}}` 标记

处理时读取对应的模板文件，将其中的 `{{参数名}}` 替换为实际值后输出。未匹配到的参数使用模板中的默认值（即 `{{参数名|默认值}}` 中竖线后面的值）。

Bundled files

The model reads these on demand while the skill is loaded. They are exposed as readable files and are never executed.

Frequently asked questions

What does the P5 Animation AI skill do?

Why use P5 Animation on TypingMind?

Because you install it once and use it with any model. P5 Animation is plain Markdown rather than provider-specific code, so the same skill runs on GPT-5, Claude, Gemini, Grok, or a local model — and you can switch model mid-chat without it breaking. TypingMind runs on your own API keys, so you pay providers directly instead of a per-seat subscription, and your skills and chats stay in your own storage.

How do I install P5 Animation in TypingMind?

Open Plugins → Skills → Install from GitHub in TypingMind and paste https://github.com/xxoogreymon-prog/SKILL-rainCurtain-branch-swallow/tree/main. TypingMind reads its SKILL.md and bundles its files and installs it as a skill you can enable per chat.

Which AI models can use P5 Animation?

Any model you connect in TypingMind. AI skills are plain Markdown instructions rather than provider-specific code, so GPT, Claude, Gemini, Grok, and local models can all load this skill when a request matches it.

How many AI models can I use with P5 Animation?

As many as you like. As long as a model supports skills, you can use P5 Animation with it — GPT, Claude, Gemini, Grok, DeepSeek, Mistral, Llama and more — all on TypingMind with your own API keys.

Is the P5 Animation AI skill free?

It is published on GitHub by xxoogreymon-prog. Check the repository for licensing terms. You only pay your own AI provider for the tokens you use.

What are AI skills?

An AI skill is a reusable instruction bundle that teaches an AI model how to do one specific task. It follows the open Agent Skills format: a SKILL.md file with a name and description, plus any scripts, templates or reference files the model may need. The model reads the instructions only when your request matches the skill, so an installed skill costs nothing until it is used.

How are AI skills different from plugins or MCP servers?

A plugin or MCP server gives a model new tools to call — code that runs somewhere and returns a result. An AI skill gives the model knowledge and process instead: how to approach a task, which steps to follow, what good output looks like. Skills are plain Markdown, so they need no server, no API key and no runtime, and they work with any model.

View all

Concept Diagrams

NousResearch

OrganizationPopular

Generate flat, minimal educational SVG visuals as HTML.

Hyperframes

Render MP4/WebM videos from HTML compositions.

Ip As Logo

Design minimal cute IP mascot marks readable at 32px.

Mono Color

Generate one- or two-ink editorial print poster images.

Overview

Installation

Install in TypingMind

Install in another agent

Use it in TypingMind

Works with any AI model

Skill instructions

P5.js 动画代码生成器 (p5-animation)

包含的动画

快速使用

基本用法

指定参数

工作流程

动画匹配规则

各动画可调参数速查

雨帘参数

花枝参数

飞燕参数

颜色映射表

输出格式

Bundled files

Frequently asked questions

Related AI Skills

Set up your own AI workspace now