# Pixel Flow · 图片粒子化与手势还原（MiniMax M3.1 Flash / max）

## 原始提示词

见 [完整原始输入](prompt.md)。该输入与主题提示词 v1 正文一致（含中英文两版）。

## 实现说明

单文件 `index.html`，Three.js r160（ESM CDN）+ MediaPipe Hands（CDN），其余代码内联。

### 粒子化

- 上传本地图片（或拖拽到页面，或使用内置示例图）后，用 Canvas API 缩放到 96px 量级并按「采样密度」滑块逐格取样，每个采样点成为一个 `THREE.Points` 顶点，携带原始颜色与尺寸权重。
- 粒子初始位于一个随机散布的三维空间中（宽 12 × 高 8 × 深 6），呈飘散的粒子流而非原图。
- 每个粒子同时保存**目标位置**与**打散位置**，并维护一个 0→1 的还原进度；每帧按进度在两者之间做 smoothstep 插值，因此粒子是从粒子流"重组成"图片，而不是直接切换。

### 手势与力场

- MediaPipe Hands 实时取手部 21 个关键点，用「指尖到腕距离 > 第二关节到腕距离」判断每根手指是否伸展：
  - **张开手掌**（≥4 指伸展）：激活吸引，粒子向原图位置回归。
  - **握拳**（≤1 指伸展）：暂停吸引，粒子保持当前状态。
  - **过渡手势**：只跟随不吸引。
- 掌心位置映射到场景坐标，形成半径可调的**力场**：场内的粒子额外获得吸引力，并沿切向叠加涡旋扰动，产生被"吸回去"的流动感。
- 摄像头画面在面板中镜像显示，检测到的手部位置用高亮圆环标出，状态栏实时显示当前手势。

### 其他

- 采样密度、还原速度、力场半径三个滑块实时生效；「重新打散」「全部还原」「自动演示」「开启摄像头」「保存截图」按钮均可用。
- 自动演示模式在没有摄像头或未授权时用脚本驱动虚拟手部轨迹，完整演示吸引与暂停两种状态。

## 运行与验证

Playwright + Chromium 自动化校验（模型生成的实现，均通过）：

- Three.js 画布创建成功；MediaPipe Hands 脚本从 CDN 加载完成（`window.Hands` 为函数）。
- 示例图生成 576 个粒子，粒子数显示正确。
- 自动演示开启后还原进度由 0.094 上升到 0.213，虚拟手部位置与手势状态（open / fist）可读。
- 「重新打散」后进度归 0；「全部还原」后进度为 1。
- 导出 PNG 返回有效 `data:image/png;base64`（约 83KB）。
- 390px 视口无水平溢出；控制台无错误。
- 已知限制：测试环境无摄像头，手势识别链路（`hands.send`）未在真机上验证；示例图为程序生成，不是照片。

<!-- archive:start -->
## 当前归档信息（自动生成）

- 实验 ID：`pixel-flow--minimax-m3-1-flash-max-r01`
- 模型：MiniMax M3.1 Flash；推理档位：max
- 类型：app；预览：static；网络：required
- [完整原始输入快照](prompt.md) · [主题与其他版本](../../../../topic.html?id=pixel-flow)
- 输入记录：完整原始输入快照，与主题提示词 v1 正文一致（含中英文两版要求）。
- 工具：Claude Code CLI（当前会话，模型 MiniMax-M3.1-Flash，档位 max）。单会话直接实现，未使用子代理；本地用 Playwright/Chromium 以 file:// 与 390px 视口做自动化校验（无摄像头环境，使用自动演示模式验证还原逻辑）。
- 运行方式：浏览器直接打开本目录入口；CDN/外部素材需要联网。
- 费用记录：MiniMax 批次合计 金额未记录（11 个案例；批次 minimax-m3-1-flash-max-2026-10-19；未记录单案例费用）
- [粒子还原主页面](../../../../demos/pixel-flow/runs/minimax-m3-1-flash-max-r01/index.html)

### 部署适配记录

- Three.js 与 MediaPipe Hands 均通过 CDN 引入，因此预览标记为 network: required。
- 新增『自动演示』模式：在没有摄像头或未授权时，用脚本驱动虚拟手部轨迹，仍可完整体验粒子还原过程（提示词未要求，属于可用性补充）。
- 迁移来源：F:\dev\ai-coding-demo-test 的 experiment/minimax-m3-1-flash-max 分支，提交 871beb18e0e85d6dd542cadca398e67aa4ff1247；保留该提交中的任务输入、实现源码和原有说明。
- 维护者于 2026-10-20 按本仓库统计规则为网页入口引用公共 assets/analytics.js；原始任务输入未改动。
- 维护者于 2026-10-20 在本仓库本地 HTTP 预览中补拍真实桌面截图，并按案例评分规则 v2 逐项复核。
- 维护者于 2026-10-20 按用户要求重新逐图评分，原始 PNG、输入及实现不变；旧分、新分、逐项观察和规则快照保存在 catalog/score-reviews/2026-10-20-minimax-m3-1-flash-max-v2.json。
- 维护者于 2026-10-22 按 v3 对本轮桌面、手机及补充状态逐图重评并绑定 captures 证据；旧截图和 v2 评分见 catalog/score-reviews/2026-10-21-v3-source.json。未重跑模型或改写实验源码，截图不证明完整功能、算法、手势或性能。
<!-- archive:end -->