Fire Simulation 火焰模拟
Flames are just circles that shrink their hue as they age — the fire colours are a formula, not a palette. 火焰其实就是一堆会变色的圆——颜色是算出来的,不是配好的色板。
Runs live on this page. Move the pointer, click, or drag — whichever the effect listens for. 就在本页实时运行。移动鼠标、点击或拖拽——看它响应哪一种。
How it works原理拆解
Particles are emitted upward with negative vy and a slight random x drift; every frame vy increases, so they arc. The colour is hsl(20 + l*30, 100%, 50 + l*30), which means a fresh particle is bright yellow and a dying one is deep orange-red. The 0.2-alpha clear leaves a soft glow behind each flame. 粒子以负 vy 向上喷出,x 方向带一点随机漂移,每帧 vy 增加所以走抛物线。颜色是 hsl(20 + l*30, 100%, 50 + l*30):刚生成时是亮黄,快熄灭时是深橙红。每帧 0.2 透明度的清屏给火苗留了一圈柔光。
What to change可以改的地方
- 1Add a tiny random vy per particle so the flame flickers instead of pulsing.
- 2Emit from a wider base (×120 instead of ×40) for a bonfire rather than a candle.
- 1给每个粒子一点随机 vy,火焰会跳动而不是整体脉动。
- 2发射口从 ×40 放宽到 ×120,就从烛火变成篝火。
Source code源码
Self-contained — paste it into any HTML file and it runs. No libraries. 完全独立——粘进任意 HTML 文件就能跑,不需要任何库。