应用于 Web 物理模拟教学演示、引擎渲染压力测试、时间驱动模型参考等场景。项目以极简的运动学公式驱动数千粒子零卡顿运行，展示了帧率解耦的精准时间管理与 Canvas 渲染优化技巧，可作为新员工理解确定性动画逻辑的代码范本。面向数字艺术展陈、沉浸式空间投影、生成艺术 NFT 元数据等跨界场景。该项目探索了确定性规则下的复杂视觉涌现，既可独立作为算法艺术装置，亦可封装为 SDK 嵌入 APP 或官网，为用户提供冥想级的凝视体验，体现团队在前沿交互美学上的探索能力。适用于品牌 H5 营销活动、展会大屏互动背景、产品发布会概念展示等场景。通过纯 Canvas 渲染的粒子涌现动画，营造科技感与未来感，无需依赖第三方库，单页即开即用，可作为高端视觉资产的轻量级嵌入方案，有效提升页面停留时长与品牌调性。
一、核心涌现机制
分层递增加速度
系统每隔 0.28 秒从中心源点生成一批新粒子。每批粒子数量递增（第 1 批 1 个，第 2 批 2 个，以此类推），且每批粒子被赋予独立的、终身不变的加速度。加速度公式为 2.0 + 批次号 × 0.5 px/s²——批次越晚，加速度越大。
独立运动学模型
每个粒子从诞生起便以初速度 1 px/s 沿随机角度向外做匀加速直线运动。其位置由公式 r = v₀t + ½at² 实时计算，完全与帧率解耦，确保动画在任何刷新率下物理轨迹一致。
边界自动消亡
粒子半径超过 1000 px 后自动从系统中移除，维持画布内粒子总数的动态平衡，同时为外层高速粒子腾出视觉空间。
二、交互控制功能
功能 操作 说明
重置宇宙 点击「⟳ 重置宇宙」按钮 清空所有粒子，重置批次计数与加速度起点，从第一批重新开始涌现
暂停/继续 点击「⏸️ 暂停/生长」按钮 冻结时间推进，粒子静止于当前位置；再次点击恢复物理模拟与涌现节奏
画布凝视 无需操作 纯观看体验，适合作为背景动画、冥想辅助或数字艺术装置
单文件自包含架构
├── HTML (结构层) → canvas 画布 + 控制面板 UI
├── CSS (表现层) → 毛玻璃效果 + 深空渐变 + 响应式适配
└── JavaScript (逻辑层) → 物理引擎 + 涌现调度 + 渲染管线
技术点 方案 理由
渲染引擎 Canvas 2D API 轻量、兼容性好、满足粒子数量需求
时间基准 performance.now() 亚毫秒级精度，与帧率解耦
动画循环 requestAnimationFrame 浏览器原生调度，节能且流畅
依赖管理 零依赖 确保代码可独立运行、长期可维护
基于原生 Canvas 2D 与 requestAnimationFrame，采用时间驱动的运动学模型（r = v₀t + ½at²）实现帧率解耦，粒子数据极简设计支持数千实例流畅运行，零依赖单文件架构，即开即用。
评论