流体粒子时钟

一个用粒子构建的数字时钟。每个数字由数百个微小的粒子组成，当时间变化时，这些粒子会像流体一样流动、重组，形成新的数字。

这个实验探索了粒子系统与弹性运动的结合——每个粒子都有自己的目标位置，但到达目标的路径却充满了随机性和流动性。

工作原理

核心思想很简单：

1. 数字点阵：每个数字用 5×7 的点阵表示
2. 粒子分配：将粒子分配到对应的目标位置
3. 弹性运动：粒子通过弹簧力向目标移动，同时添加噪声扰动
4. 视觉效果：用半透明的彩色粒子营造流动感

// 弹性运动的核心
p.vx += (p.tx - p.x) * 0.03;  // 向目标加速
p.vx *= 0.85;                  // 阻尼
p.vx += Math.sin(time) * 0.1;  // 流动扰动

多余的粒子会在背景中自由飘荡，营造出”数字漂浮在粒子海洋中”的效果。

交互方式

• 切换格式：在 12 小时制和 24 小时制之间切换
• 切换颜色：循环四种配色方案（蓝紫、暖橙、青绿、玫红）

技术细节

• 纯 Canvas 2D 实现，无外部依赖
• 2800 个粒子同时渲染，保持 60fps
• 使用 requestAnimationFrame 实现流畅动画
• 支持 prefers-reduced-motion 媒体查询