クリエイティブコーディング
ブラウザでの数学的シミュレーション・自然現象の可視化・生成アートの実装技法
他のトピック
初めての方は /start →このトピックに効く比較ガイド
関連記事で繰り返し参照されている比較記事を、次の実践ステップとしてまとめました。
12 件
セルオートマトンの世界 — ライフゲームから波動関数崩壊まで
ライフゲーム、WaveFunctionCollapse、SandFallの実装を通じて、ルールベースのセルオートマトンの設計パターンとUint8Arrayによるグリッド最適化手法を解説する。
ブラウザで流体シミュレーション — 100×60グリッドで実現するリアルタイム演算
Navier-Stokes方程式を簡略化し、100×60のグリッドでリアルタイムに流体を動かす。拡散・移流・圧力ソルバーの実装詳細。
フラクタルの数学をブラウザで描く — マンデルブロ集合からバーンズリーのシダまで
複素数反復、エスケープタイムアルゴリズム、IFS（反復関数系）、再帰描画を使い、ブラウザでフラクタルを描画する実装解説。
Perlinノイズで自然な地形を生成する — ランダムなのに美しい理由
勾配ノイズの数学的な仕組みからオクターブ合成、Canvas上での3Dメッシュ描画まで、Perlinノイズによる自然な地形生成をステップごとに実装・解説する。
波動方程式をブラウザで可視化する — 干渉・回折・共鳴の世界
1D・2D波動方程式を差分法で実装し、干渉・回折・共鳴パターンをCanvasで可視化する。WaveInterference、WaveEquation、ChladniPlateの描画手法と物理の対応を解説。
N体問題をブラウザで — 万有引力シミュレーションの実装
NBody、SolarSystem、GravityWellコンポーネントで使った万有引力計算、ベクトル演算、積分法、軌道描画の実装詳細。
Reaction-Diffusionのパラメータ空間を探索する — Gray-Scottモデルの4つの顔
Gray-Scott Reaction-Diffusionモデルのfeed/kill率を変えると、斑点・縞模様・珊瑚・細胞分裂と全く異なるパターンが現れる。200×200グリッドでの実装と探索記録。
砂山モデルと自己組織化臨界 — BTWモデルをブラウザで動かす
Bak-Tang-Wiesenfeld砂山モデルの実装を通じて、自己組織化臨界現象をブラウザで可視化する。べき乗則に従う雪崩分布の計測とフラクタルパターンの生成過程を解説。
二重振り子のカオスを数値で見る — RK4積分と初期値鋭敏性の実装
二重振り子シミュレーションの実装を通じて、ラグランジュ力学による運動方程式の導出、RK4積分の安定性、NaN対策、初期値鋭敏性の可視化までを解説する。
Fourier級数で音を作る — 倍音構成と波形合成の実装
矩形波・鋸歯状波・三角波をFourier級数で合成し、エピサイクルで可視化する。倍音の加算が音色をどう変えるか、Web Audio APIによる音合成の実装を通じて体感する。
アリの巣シミュレーション — フェロモンで創発する群知能
フェロモンベースの経路探索をエージェントベースモデルで実装し、アリの群知能をブラウザで再現する。蒸発・拡散パラメータの調整で創発パターンがどう変わるかも検証した。
Canvas APIで60fpsパーティクル — 200個でもヌルヌル動く設計
requestAnimationFrame、固定タイムステップ、DPI対応、空間分割を駆使して、Canvas APIで200個以上のパーティクルを60fpsで動かす設計手法を解説。