Fireworks 烟花粒子
Sixty particles per burst, spread across a full circle and then pulled down by gravity — the simplest approach that still reads as a real firework. 每次点击炸出 60 个粒子,按整圆均分角度抛出,再让重力把它们拉下来——最简单、但看起来最像真火花的做法。
Runs live on this page. Move the pointer, click, or drag — whichever the effect listens for. 就在本页实时运行。移动鼠标、点击或拖拽——看它响应哪一种。
How it works原理拆解
boom() places particles at equal angular steps (i/60*2π), so the shell opens as an even ring instead of a clump. Each particle runs its own requestAnimationFrame loop, adds 0.06 to vy every frame, and fades l by 0.015 until it stops drawing. boom() 里按 i/60*2π 均分角度,所以炸开的是一圈均匀的环,而不是一坨。每个粒子各自跑一条 requestAnimationFrame 循环,每帧给 vy 加 0.06,同时把亮度 l 减 0.015,减到 0 就停止绘制。
What to change可以改的地方
- 1Lower the 60 for a sparser, more expensive-looking shell.
- 2Add vx *= 0.99 as air drag so the burst hangs at its apex.
- 1把 60 改小,环会更稀疏,反而更像高档礼花。
- 2加一句 vx *= 0.99 模拟空气阻力,粒子会在最高点多停一会儿。
Source code源码
Self-contained — paste it into any HTML file and it runs. No libraries. 完全独立——粘进任意 HTML 文件就能跑,不需要任何库。