# NanoFlow

**Repository Path**: ZTMYO/NanoFlow

## Basic Information

- **Project Name**: NanoFlow
- **Description**: 基于 HTML5 Canvas 的高交互粒子生成器
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-07-08
- **Last Updated**: 2025-07-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# NanoFlow

> 基于 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！

---