这是一款基于Canvas 2D 与原生 JavaScript技术实现的可拖动分界的双状态粒子对比动画。左侧粒子按较规整的方式运行，右侧粒子则呈现更自由的轨迹，冷暖背景和顶部标签强化两种状态的差异。拖动中央分界线，能改变两侧占比；点击画面也可以让分界移动到目标位置，适合概念对照和视觉叙事。
双状态粒子画面怎样随分界变化
同一画布展示两种状态。通过裁切区间分别绘制有序和混沌粒子，不依赖两段视频同步。
拖动目标经过平滑跟随。指针位置先更新目标比例，当前分界再逐渐靠近，移动不生硬。
标签跟随有效区域调整。两侧空间缩小时，说明位置与显示也会变化。
Canvas裁切与插值如何组织对比
脚本维护当前分界与目标分界，再逐帧插值。两组粒子拥有独立数据，绘制时根据分界进行裁切，因而能保持一套画布尺寸。分界被限制在接近两端的范围，避免某侧完全消失后失去操作线索。
const N = 150;
有序混沌粒子的数量和手柄在哪里调整
粒子数量、运动参数和分界计算在 script.js，背景、标签和手柄外观在 style.css，静态文案在 index.html。改造成真正的前后图片对照时，需要替换绘制内容，现有版本对比的是两种程序动画。
双境粒子对比屏的内容与触屏问题
这是两张照片的前后对比吗？
当前内容是两组粒子动画，不是图片滤镜对比。分界交互可借鉴，但换成照片需要另外绘制图像。
手机上可以拖动吗？
分界使用指针事件，可以响应触屏。嵌入长页面时应检查拖动区域与页面滚动是否冲突。
适合概念对照、视觉叙事和粒子状态展示。下载后可查看双境粒子的完整结构与参数，按自己的内容继续调整。
