AetherFlow 是一款基于浏览器、高度拟真的实时 AI 手势交互粒子物理特效系统。它通过摄像头捕获用户双手，使用 Google MediaPipe Hands 算法实时定位 21 个手部骨骼关键点，并在 HTML5 Canvas 上渲染高流畅度、强交互感的物理粒子流光。系统内置多种拟真特效主题，并支持 60 FPS 本地高清录屏与多格式自适应导出。
- 🎬 60 FPS 高清本地录像：通过 Canvas 双图层融合技术，将摄像头视频帧与粒子、手势骨骼在 Canvas 底层同步镜像绘制。支持使用
MediaRecorder导出包含真人背景与特效的 60 帧极速丝滑视频。 - 📁 多格式自适应导出：提供 WebM、MP4、AVI 格式选择。支持自动嗅探浏览器硬件 H.264/MP4 编码，若不支持则以高画质 WebM 录制并自适应重映射扩展名，确保主流本地播放器（VLC、QuickTime 等）双击即可播放。
- 💥 跨手协同联动（双手互动）：
- 指尖高压电弧 (Lightning Arc) ⚡：双手食指伸出且拉开距离时，在指尖拉出实时弯折、带随机电火花溅射的跳动蓝色电弧。
- 超新星碰撞大爆炸 (Supernova) 💥：双手掌心靠近（距离 < 110px）的瞬间在中心点引爆超新星，释放同心激波冲击环并将场上所有粒子暴力吹飞，腾起 320+ 颗漫天飞散的金粉。
- 🎨 四大高拟真物理主题：
- 🔥 烈焰风暴 (Fire Storm)：炽红火星伴随受热力上升的气流，生命后期会真实膨胀并转化为逐渐消散的半透明灰色烟尘。
- 🌌 极光魔幻 (Aurora Magic)：如绸带般优雅舞动的蓝绿紫气体粒子，伴随做周期性明暗闪烁的亮白恒星尘。
- ⚡ 霓虹火花 (Neon Spark)：带运动模糊线段（Motion Blur Streaks）的抛光金属电浆火花，受重力下坠并在屏幕底部进行弹性物理碰撞反弹。
- 🌀 虚空引力 (Void Gravity)：模拟黑洞吸积盘，粒子自转速度遵循真实的开普勒轨道切变（越靠近拳心自转越快），且在进入事件视界（掌心 8px）后会被无情吞噬湮灭。
- 📊 实时运行诊断面板：玻璃魔态（Glassmorphism）面板实时监控 FPS 帧率、粒子存活总数、当前活动手部数量和手势识别状态（左手/右手分类诊断）。
- ⚙️ 深度物理调参：支持分别调节每个主题的粒子尺寸，并在引力场滑块中支持 0.0x（无引力）到 ∞（无穷大） 的非线性映射调节，拉满即可生成瞬间吸附一切的“引力奇点”。
- 帧率无关的物理积分：重力、阻尼、冲量、激波和粒子发射速率均根据真实帧间隔换算，30 FPS 与 60 FPS 下的运动速度保持一致。
- 更稳定的手势驱动：对 MediaPipe 关键点进行时间平滑，并要求连续识别到两帧新手势后才切换状态，显著减少发射器抖动和主题闪切。
- 主题专属动力学：火焰使用温度衰减和连续湍流，烟雾膨胀且采用非发光混合；极光使用连续二维流场；赛博火花在画布实际边界进行积分后碰撞；虚空使用软化反平方引力并把切向速度拉向稳定轨道速度。
- 性能保护：粒子总量限制为 3600，旧粒子会在超出上限时回收，避免连续手势爆发导致内存和绘制开销失控。
本系统支持双手同时录入与识别，常见单手及双手联动指令如下：
| 手势动作 | 识别状态 | 特效物理与关联主题 | 视觉效果 |
|---|---|---|---|
| 👋 | 张开手掌 (Open Hand) | 自动切换至 🔥 烈焰风暴 | 粒子大爆破 (Burst)：手掌展开瞬间释出火星，持续张开时掌心喷薄出白炽色上升气流与烟尘。 |
| ✊ | 捏合握拳 (Fist) | 自动切换至 🌀 虚空引力 | 重力黑洞 (Gravity Well)：对场上粒子施加极强向心力与旋转拉扯力，将其吸引向拳心。 |
| ✌️ | 胜利手势 (V Gesture) | 自动切换至 🌌 极光魔幻 | 双重极光流线 (Aurora Stream)：食指与中指指尖双轨并行，在身后拉出宽广的长生命极光云绸带。 |
| 👆 | 普通移动 (Normal) | 自动切换至 ⚡ 霓虹火花 | 金属火星拖尾 (Streak Trail)：指尖滑动在空中留下一连串重力下坠并会在屏幕底端反弹的运动模糊电浆丝。 |
| 👋...👋 | 双手掌心靠近 (距离 < 110px) | 跨手大爆炸 (Supernova) | 在中点炸开同心震荡激波圆环，产生斥力吹飞场上粒子，并溅射出 320+ 颗能量金粉。 |
| 👆...👆 | 双手食指伸出且拉开 | 双手电磁连线 (Lightning) | 在两根食指指尖拉出一道跳动闪烁、带阴影发光核心的折线高压高频电弧。 |
项目采用纯原生前端 ESM 架构，无需任何构建步骤，开箱即用。
将本仓库代码克隆或下载到本地：
git clone https://github.com/Eser-Tired/Partical_effects.git
cd Partical_effects由于浏览器安全策略，摄像头调用与 MediaPipe WebAssembly 模型加载必须运行在本地服务器环境（localhost）或安全链接（HTTPS）下。
您可以使用以下任一极其简便的方法启动本地服务：
- 方法 A：使用 Python（推荐，系统自带）
python3 -m http.server 8000
- 方法 B：使用 Node.js (
http-server)npx http-server -p 8000
- 方法 C：使用 VS Code Live Server 插件
- 在 VS Code 中打开该项目文件夹，点击右下角的 Go Live。
- 启动服务后，使用现代浏览器（推荐 Google Chrome 或 Microsoft Edge）访问： http://localhost:8000
- 授权浏览器使用摄像头权限。
- 等待 1-2 秒（AI 模型首次从 jsDelivr CDN 加载初始化），看到加载屏幕消失、“系统就绪”且右上角 FPS 开始跳动，即可摆出各种手势体验！
- JIT 粒子发光精灵缓存（Sprite Cache）：
Canvas 绘制复杂的软边缘径向渐变（Radial Gradient）非常消耗 CPU。我们在系统初始化和颜色突变时，即时（JIT）在离屏 Canvas 上将各个色彩通道编译为高清模糊气团 Sprite。运行时利用硬件加速的
drawImage绘制精灵图，配合lighter（Screen 混色）混合模式，以最低成本渲染体积感十足的发光流体。 - 线段拉伸模拟运动模糊（Motion Blur Streaks）：
对于金属火花，粒子通过连接当前位置
(x, y)与(x - vx * 1.5, y - vy * 1.5)绘制。线段长度与速度大小成正比，利用 Canvas 硬件加速的高速 stroke 线段绘制，在 2D Canvas 上呈现出电影级的相机快门运动模糊效果。 - 迟滞区间判定（Hysteresis Threshold）：
为了防止双手在靠近大爆炸临界点时，由于识别微小抖动造成大爆炸每秒重复触发百次（导致卡顿和死循环），我们引入了迟滞防抖逻辑：双手距离低于
110px触发引爆并锁定；只有当双手重新拉开距离超过150px后，引爆锁定才会解除。 - 旋转无关的手指伸缩检测： 传统 MediaPipe 手指检测依靠 Y 轴坐标对比（如指尖 Y 是否小于 MCP 关节 Y），这在手倒置或横着时会彻底失效。我们重构为腕部距离比例算法：计算指尖到手腕的距离是否显著大于第二指节（PIP）到手腕的距离。由于手指弯曲时指尖必定拉近与腕部的距离，该算法实现了完美的旋转无关性。
Partical_effects/
├── index.html # 页面结构、玻璃控制面板与 CDN 引入
├── style.css # 深色霓虹设计系统、雷达加载动画与玻璃魔态样式
├── js/
│ ├── app.js # 系统总调度、60fps 主循环与双手状态机管理器
│ ├── handDetector.js # MediaPipe 封装、自研手势分类与发光骨骼绘制器
│ ├── particleSystem.js# 粒子物理学引擎、JIT 精灵贴图缓存与超新星力场管理器
│ └── particleThemes.js# 拟真四大主题物理参数配置库
└── README.md # 项目说明文档
本项目基于 MIT License 许可证开源。