Rainbow Rain 彩虹雨
Rain is just 3×12 rectangles in random hues, and it is the rectangle shape that makes them read as rain. 雨就是一堆 3×12 的矩形,随机色相——正是「矩形」这个形状让它看起来像雨。
Runs live on this page. Move the pointer, click, or drag — whichever the effect listens for. 就在本页实时运行。移动鼠标、点击或拖拽——看它响应哪一种。
How it works原理拆解
Each drop has a fixed vy and a random hue assigned once at birth, so drops keep their colour all the way down. When y passes the bottom, both y and x are re-randomised — resetting x matters, otherwise the rain gradually clusters into vertical stripes. 每滴雨出生时定好 vy 和色相,所以整段下落过程中颜色不变。y 越过底部时,y 和 x 一起重新随机——重置 x 很重要,否则雨会慢慢聚成竖条。
What to change可以改的地方
- 1Make the rectangles taller (3×20) for heavier rain, shorter for drizzle.
- 2Add a slight x drift per frame so the rain falls at an angle.
- 1矩形加高到 3×20 是大雨,压扁就是毛毛雨。
- 2每帧给 x 加一点偏移,雨就是斜着下的。
Source code源码
Self-contained — paste it into any HTML file and it runs. No libraries. 完全独立——粘进任意 HTML 文件就能跑,不需要任何库。