# 🌌 Particle Lab - 粒子动效实验室

基于 Three.js 的渐进式粒子系统学习项目，从最简单的静态粒子逐步掌握 casberry.in 风格的 GPU 粒子渲染技术。

## 📚 完成的效果矩阵

| # | 效果 | 粒子数 | 核心技术 | 特色 |
|---|------|--------|----------|------|
| 01 | Hello Particles | 500 | BufferGeometry | 入门基础 |
| 02 | Moving Dots | 2000 | 正弦波动画 | 独立运动 |
| 03 | **Sphere Bloom** | 15000 | 斐波那契球面 | 霓虹发光 |
| 04 | **CUBE** | 8000 | 3D网格坐标 | 波动变形 |
| 05 | **HELIX** | 6000 | 双螺旋相位 | DNA结构 |
| 06 | **TORUS** | 8000 | 圆环参数方程 | 彩虹流动 |
| 07 | **S7777** | 10000 | 点阵字体 | 霓虹数字 |
| 08 | **NAVE** | 8000 | 箭头形状 | 飞船尾迹 |
| 09 | **LORENZ** | 6000 | 微分方程 `dx=σ(y-x)` | 蝴蝶效应 |
| 10 | **GALAXY** | 10000 | 对数螺旋 `r=ae^(bθ)` | 螺旋星系 |
| 11 | **FLOW FIELD** | 8000 | Perlin Noise | 向量力场 |
| 12 | **BLACK HOLE** | 8000 | 开普勒轨道 | 吸积盘+喷流 |
| 13 | **NEURAL** | 6000 | 网络拓扑 | 脉冲传播 |
| 14 | **VORTEX** | 8000 | 螺旋上升 | 龙卷风 |
| 15 | **FIREWORKS** | 15000 | 物理模拟 | 中国烟花 |
| 16 | **MATRIX RAIN** | ∞ | Canvas 2D | 代码雨 |

## 💻 16 - MATRIX RAIN 特色功能

### 模式切换
- **混合模式** - 代码+汉字交替出现
- **代码模式** - 编程字符流
- **汉字模式** - 纯中文流动
- **诗词模式** - 古诗词字符

### 特效
- **故障模式** - RGB分离+粒子爆炸+故障线
- **拖尾效果** - 半透明遮罩实现
- **头部高亮** - 每列首字符白色
- **随机闪烁** - 模拟真实显示器

### 经典台词
> *Wake up, Neo...*  
> *The Matrix has you...*  
> *Follow the white rabbit.*

## 🎆 15 - FIREWORKS 特色功能

### 中国传统元素
- **颜色**: 中国红、金黄、橘黄、紫红、玫红、金色、银白
- **爆炸形状**:
  - 菊花状 - 多层球面扩散
  - 心形 - 参数方程 `x=16sin³t, y=13cost-5cos2t-2cos3t-cos4t`
  - 环形 - 水平圆环爆炸
  - 垂柳状 - 向下飘落
  - 球面 - 经典3D爆炸

### 物理系统
- **重力**: 9.8m/s² 模拟
- **空气阻力**: 速度衰减
- **拖尾**: 火箭上升尾迹
- **闪烁**: 5% 粒子带闪光效果

### 交互功能
- 🎆 发射单发烟花
- 🧧 祝福模式（8发环绕+祝福语）
- ▶ 自动发射开关
- 🌃 城市夜景背景

## 🚀 运行方式

### 系统服务（推荐）
已配置为 systemd 服务，开机自动启动：

```bash
# 查看服务状态
sudo systemctl status particle-lab

# 重启服务
sudo systemctl restart particle-lab

# 停止服务
sudo systemctl stop particle-lab

# 查看日志
sudo journalctl -u particle-lab -f
```

访问地址：http://129.211.173.87:8902/

### 手动运行
```bash
cd /home/ubuntu/nanocode/particle-lab
python3 -m http.server 8902
```

## 🎯 核心技术点

| 概念 | 说明 |
|------|------|
| **BufferGeometry** | GPU 友好的几何数据存储 |
| **InstancedMesh** | 批量实例渲染 (15K+粒子@60fps) |
| **Points** | 粒子点云渲染 |
| **UnrealBloomPass** | 霓虹发光后期处理 |
| **Float32Array** | JavaScript 与 GPU 之间的数据桥梁 |
| **requestAnimationFrame** | 流畅的 60fps 动画循环 |

## 📖 参考资料

- [Three.js Particles 文档](https://threejs.org/docs/#api/en/objects/Points)
- [casberry.in AI Particle Simulator](https://particles.casberry.in/)
- [The Book of Shaders](https://thebookofshaders.com/)