example-p5-animation

用途：该技能用于将 P5.js 与 Helios 配合使用，适合制作创意编程草图或生成艺术动画。核心思路是采用 P5 的 Instance Mode，并由 Helios 的状态驱动 draw() 循环，使画面时间由 Helios 控制，而不是依赖 P5 自带的动画循环。

主要能力：

• 通过 helios.getState() 获取 currentFrame 与 fps，据此计算时间并驱动动画。
• 通过 helios.subscribe() 在帧变化时调用 P5 实例的 redraw()，实现响应式绘制。
• 提供快速开始示例，将 P5 sketch 挂载到指定容器，并暴露 window.helios 供渲染器与播放器驱动。

使用方式要点：

1. 使用 Instance Mode（new p5(sketch)），避免全局变量污染，并保证与模块打包工具兼容。
2. 在 setup() 中调用 p.noLoop() 关闭 P5 内部循环，避免其 requestAnimationFrame 独立运行。
3. 不依赖 P5 的 frameCount，而是用 Helios 的 currentFrame 计算位置等动画参数。
4. 订阅 Helios 状态变化并调用 instance.redraw() 完成逐帧重绘。

适用场景：需要与 Helios 时间轴、渲染器或播放器同步的 P5.js 动画、创意编程与生成艺术项目。

限制：资料仅给出集成模式与示例代码，未提供安装步骤之外的依赖版本、性能数据、平台支持或收费信息，这些内容暂未提供。