Meteor Shower 流星雨
Each meteor is a line from its head back along its own velocity vector. 每颗流星就是一条线:从头沿自己的速度方向往回画。
Runs live on this page. Move the pointer, click, or drag — whichever the effect listens for. 就在本页实时运行。移动鼠标、点击或拖拽——看它响应哪一种。
How it works原理拆解
The trail is not a stored path — it is a single lineTo computed as head minus direction times length, so a meteor is always exactly one straight segment. Angles cluster around 60 degrees with a small random spread, which is why the shower looks coherent. The list is filtered each frame to drop anything that has left the bottom. 拖尾不是记录的历史轨迹,而是用「头部 − 方向 × 长度」一次算出来的 lineTo,所以流星永远是一条直线段。角度集中在 60 度附近、带一点点随机偏移,整场雨才会有统一的走向。每帧过滤掉飞出底部的流星。
What to change可以改的地方
- 1Widen the angle spread to 0.4 rad for a scattered shower, or tighten it to 0.05 for a meteor storm.
- 2Randomise lineWidth per meteor to fake depth.
- 1角度随机范围放宽到 0.4 弧度是散乱的流星雨,收到 0.05 就是流星暴。
- 2给每颗随机 lineWidth,能伪造出远近层次。
Source code源码
Self-contained — paste it into any HTML file and it runs. No libraries. 完全独立——粘进任意 HTML 文件就能跑,不需要任何库。