✨Effect Lab
Read the full guide完整技术长文 A particle is four numbers and a deadline粒子就是四个数,加一个截止时间
🌈

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 的矩形,随机色相——正是「矩形」这个形状让它看起来像雨。

Canvas 2DfillRectRespawn
Live demo实时演示

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 文件就能跑,不需要任何库。

rainbowrain.html