Light Trail 光轨拖尾
Mouse positions are pushed into an array and each one becomes a dot with its own remaining life. 把鼠标坐标不断塞进数组,每个点自带一条剩余寿命,边画边衰减。
Runs live on this page. Move the pointer, click, or drag — whichever the effect listens for. 就在本页实时运行。移动鼠标、点击或拖拽——看它响应哪一种。
How it works原理拆解
mousemove pushes {x, y, l:1}; the render loop filters out dead points, draws each with globalAlpha set to its life value, then decrements l by 0.02. The rainbow is Date.now()/5 % 360, so colour advances with real time rather than with distance travelled. mousemove 推入 {x, y, l:1};渲染循环先过滤掉 l<=0 的点,绘制时把 globalAlpha 设成 l,然后每帧减 0.02。彩虹色来自 Date.now()/5 % 360,所以颜色跟着真实时间走,而不是跟着移动距离。
What to change可以改的地方
- 1Push only every other mousemove event — dots get sparser and the trail looks more deliberate.
- 2Swap the hue formula for a fixed hue to get a single-colour comet instead of a rainbow.
- 1每隔一次 mousemove 才推一个点,轨迹会变稀疏,更像刻意画的。
- 2把色相换成固定值,就从彩虹彗星变成单色光笔。
Source code源码
Self-contained — paste it into any HTML file and it runs. No libraries. 完全独立——粘进任意 HTML 文件就能跑,不需要任何库。