daily-work-20261021:基于 Canvas 2D 的交互式粒子流场可视化项目

可快速打开体验旋涡粒子流场的交互效果,通过鼠标施加外力观察粒子轨迹变化。项目使用 Canvas 2D 原生绘制 1200 个粒子在旋涡力场中的运动,零依赖、单文件即可离线运行,每天自动更换配色与参数。【此简介由AI生成】

分支1Tags0

旋涡粒子流场 · 1021期

移动指针,观察粒子随旋涡与外力运动

一千二百个粒子在旋涡力场中运动,移动鼠标可施加局部外力,观察速度阻尼与轨迹变化。

架构图

实际运行截图


功能特性

特性 说明
粒子更新 更新1200个粒子的位置与速度
旋涡力场 根据粒子角度与距离施加旋涡速度
局部外力 鼠标运动影响附近粒子
轨迹演示 通过半透明重绘显示运动轨迹,不求解流体方程

系统架构

整体分为四层:

  1. 输入层 — 接收滑块、按钮或画布指针操作
  2. 状态层 — 保存模式参数及粒子、系数或节点状态
  3. 更新层 — 执行对应演示的数值更新
  4. 绘制层 — Canvas 2D 绘制图形与视觉反馈

技术栈

  • Canvas 2D — 全部视觉效果的原生绘制,无任何图形库
  • requestAnimationFrame / 定时器 — 逐帧渲染与世代节拍
  • 种子化伪随机(mulberry32) — 当日种子决定布局与配色,每天面貌一新
  • 原生 JavaScript (ES2020+) — 零依赖、零构建,单个 index.html 即可运行

快速开始

# 直接双击 index.html 用浏览器打开即可,离线可用

期号

1021 期 · 由每日锻造流水线自动生成,同主题次日会换上全新配色与参数。

许可证

MIT

项目介绍

可快速打开体验旋涡粒子流场的交互效果,通过鼠标施加外力观察粒子轨迹变化。项目使用 Canvas 2D 原生绘制 1200 个粒子在旋涡力场中的运动,零依赖、单文件即可离线运行,每天自动更换配色与参数。【此简介由AI生成】

定制我的领域