基于 HTML5 Canvas 的高交互粒子生成器

文字/图片粒子化 · 多模式图像处理 · 自定义颜色 · 实时交互动画 · 响应式设计 · 一键导出

---

✨ 项目亮点

• 多模式粒子生成：支持文字、图片（原图/二值化/去背景）粒子化，实时预览。
• 丰富交互动画：推开、吸引、环绕、爆炸等多种物理交互，极致动感体验。
• 颜色与主题系统：纯色、线性/径向渐变，手动上色，亮/暗主题一键切换，支持自定义参数。
• 参数可调节：密度、缩放、弹性系数、力度、粒子大小等参数实时调节。
• 多格式导出：支持 HTML（含交互）、PNG、SVG、JPG、WebP、TXT 等多种导出方式。
• 响应式与可访问性：桌面/移动端自适应，基础无障碍支持。

---

🚀 快速开始

快速体验

直接打开 nanoflow.html 即可本地体验全部功能，无需后端依赖。

本地部署

1. 克隆或下载本项目
2. 使用任意 Web 服务器（如 VSCode Live Server、Python SimpleHTTPServer 等）
3. 访问 nanoflow.html，即可使用全部功能

---

🏗️ 技术架构

• 核心技术：HTML5 Canvas + JavaScript (ES6+) + CSS3
• 架构模式：单页面应用（SPA），无依赖，纯前端实现
• 主要模块：
  • 粒子系统：物理模拟、动画渲染、状态管理
  • 动画引擎：双弹簧动力学模型（位置/速度弹簧）、速度衰减曲线优化、基于时间戳的运动补偿算法
  • 参数控制：实时调节同步、防抖处理、状态快照管理
  • 文字/图片处理：字体测量、点阵生成、图片二值化/去背景
  • 颜色系统：HSL空间插值算法（色相环形渐变）、LAB色彩平滑过渡、主题感知的动态色域映射
  • 交互系统：鼠标/触摸事件、物理反馈、动画驱动
  • 导出系统：多格式导出、模板渲染、文件生成
  • 工具函数库：颜色空间转换、坐标映射、视口适配

---

🎮 主要功能与交互

1. 文字粒子生成

• 支持多字体、字号调节，最多150字
• 自动分行、居中排版，实时点阵预览

2. 图片粒子生成

• 支持原图、二值化（阈值/反选）、去背景（吸色/容差）
• 实时参数调节，预览粒子化效果

3. 交互动画

• 鼠标/触摸推开、吸引、环绕、爆炸等多种物理交互

4. 颜色与主题

• 纯色/线性/径向渐变，支持自定义方向、中心、大小
• 手动上色模式，支持一键填充、清除、恢复画板
• 亮/暗主题一键切换，自动适配系统主题

5. 参数调节

• 密度、缩放、弹性系数、力度、粒子大小等参数实时调节

6. 导出功能

• HTML交互模板：
  • 支持三种基础交互模式（推开/吸引/环绕）
  • 保留粒子坐标、颜色参数、物理属性等完整状态
  • 自动生成自包含的CSS+JS文件
• 图片导出：
  • 矢量格式：SVG（路径优化压缩）
  • 位图格式：PNG/JPG/WebP（支持2x/3x超采样）
  • 透明通道：自动处理背景保留/去除
• 文本导出：
  • 自定义前景和背景符号，将文本或二值化图像模式下的点阵导出为txt文本

---

📄 License

MIT

---

👤 作者

石榴（@ZTMYO）

---

⭐ 如果 NanoFlow 对你有帮助，请为本项目点亮 Star！

---