炎図鑑

ATSM.WTF の焚き火は、いろんな作者がそれぞれの方法で燃やしている。
同じ火を、違う技で。全部ライブで燃えている。

Canvas パーティクル炎

🔥 Kenny / アツメ開発

Canvas 2D · 加算合成パーティクル

白熱コアから橙→赤へ冷えていく火片を lighter 合成で積む。最新のトップページ採用版。

▷ prompt Canvas 2D の加算合成 (globalCompositeOperation:"lighter") で、白熱コア→黄→橙→赤へ冷えていく火片を 4 本の炎舌から噴き上げる写実的な焚き火を書いて。各パーティクルは寿命で色と半径が変化、上昇しながら中心へ引き寄せ、風(gust)と火勢(realism)で横揺れする。

WebGL 黒体放射炎

🔥 濱田優貴

WebGL · fbm 乱流 + 黒体放射シェーダー

fbm 乱流・黒体放射・火の粉・残り火ベッド・煙を 1 枚のフラグメントシェーダーで描く自己完結炎。

▷ prompt 依存ゼロの WebGL フラグメントシェーダー 1 枚で焚き火を描いて。fbm 乱流のドメインワープで炎の形を作り、黒体放射のカラーランプで着色、舞い上がる火の粉・残り火ベッド・薪・立ち上る煙まで全部 GLSL で。uIntensity uniform で火勢を 0〜2.5 可変に。

CSS/SVG 乱流炎

🔥 アツメ開発 (v3)

CSS keyframes + SVG feTurbulence

5 層の radial-gradient 炎を burn keyframe で揺らし、SVG 乱流フィルタで歪ませた初代炎。

▷ prompt JavaScript を使わず、CSS と SVG だけで焚き火を書いて。5 層の radial-gradient 楕円(暗赤→赤→橙→金→白熱)を border-radius と scale の burn keyframe で揺らし、SVG の feTurbulence + feDisplacementMap で全体を有機的に歪ませる。seed と scale をで動かして乱流を生かす。