Particle Fountain 粒子喷泉
Particles leave the bottom centre with upward velocity, and gravity plus a translate() does the rest. 粒子从底部中央以向上速度喷出,剩下的交给重力和一个 translate()。
Runs live on this page. Move the pointer, click, or drag — whichever the effect listens for. 就在本页实时运行。移动鼠标、点击或拖拽——看它响应哪一种。
How it works原理拆解
Each particle starts with vy between -8 and -12 and vx within ±2. Every frame vy increases by 0.3, which arcs the trajectory from up to down, and the rendered position is a plain translate(x, y). The loop stops when y becomes positive, meaning the particle has fallen back past its origin. 每个粒子的初始 vy 在 -8 到 -12 之间,vx 在 ±2 内。每帧 vy 加 0.3,轨迹就从上升转成下落,而实际渲染位置只是一个 translate(x, y)。y 变成正值(也就是落回起点以下)时循环结束并销毁。
What to change可以改的地方
- 1Randomise vx more widely for a wider, messier fountain.
- 2Add opacity tied to y so particles fade as they fall back down.
- 1把 vx 的随机范围放大,喷泉会变宽、变乱。
- 2让透明度跟随 y,下落时逐渐变淡,会更有重量感。
Source code源码
Self-contained — paste it into any HTML file and it runs. No libraries. 完全独立——粘进任意 HTML 文件就能跑,不需要任何库。