SimulationPhysicsCanvas APIMath
ブラウザで流体シミュレーション — 100×60グリッドで実現するリアルタイム演算
更新 2026年5月27日8 分で読める
このトピックを深掘りする
クリエイティブコーディング
ブラウザでの数学的シミュレーション・自然現象の可視化・生成アートの実装技法
全12本中 2 本目。
次に読む記事
フラクタルの数学をブラウザで描く — マンデルブロ集合からバーンズリーのシダまで
複素数反復、エスケープタイムアルゴリズム、IFS（反復関数系）、再帰描画を使い、ブラウザでフラクタルを描画する実装解説。
Perlinノイズで自然な地形を生成する — ランダムなのに美しい理由
勾配ノイズの数学的な仕組みからオクターブ合成、Canvas上での3Dメッシュ描画まで、Perlinノイズによる自然な地形生成をステップごとに実装・解説する。
波動方程式をブラウザで可視化する — 干渉・回折・共鳴の世界
1D・2D波動方程式を差分法で実装し、干渉・回折・共鳴パターンをCanvasで可視化する。WaveInterference、WaveEquation、ChladniPlateの描画手法と物理の対応を解説。
シリーズ全体の流れを見ながら、次に読む記事へ進めます。 初めての方は /start →
よくある質問
- Q. ブラウザで流体シミュレーションをリアルタイムに動かすことは可能ですか？
- 可能。100×60のグリッドにNavier-Stokes方程式を簡略化した3ステップ（拡散・移流・圧力補正）を適用し、Float32ArrayとImageDataで高速描画することで60fpsで動作する。
- Q. 流体シミュレーションの拡散ステップで反復回数はどれくらい必要ですか？
- ガウス・ザイデル反復法で20回が標準だが、リアルタイム描画なら4回まで減らしても視覚的にはほぼ変わらない。
- Q. FluidSimulationとFluidPipesの違いは何ですか？
- FluidSimulationはNavier-Stokes方程式ベースの連続流体シミュレーション。FluidPipesはパイプネットワーク上の圧力差から流量を計算する離散モデルで、計算手法がまったく異なる。