Perlin Noise・Simplex Noiseの仕組みと使い方
Perlin NoiseとSimplex Noiseは、自然な見た目のランダムパターンを生成するアルゴリズムです。地形生成・雲・煙・木目・大理石模様など、ゲーム・映像・グラフィックデザインの分野で広く使われています。純粋な乱数と異なり、隣接するピクセルが連続した値を持つ「コヒーレントノイズ」である点が特徴です。
Perlin Noiseの仕組み
Perlin Noiseは格子点ごとにランダムな勾配ベクトルを割り当て、各点から格子点への距離ベクトルとの内積をフェード関数で滑らかに補間します。フェード関数f(t) = 6t⁵-15t⁴+10t³は二次微分まで連続なため、ピクセル間の変化が非常に滑らかです。実装は2D・3D・4Dに拡張でき、3D Perlin Noiseはアニメーションするノイズテクスチャの生成に使われます。
Simplex Noiseの優位性
Simplex NoiseはKen Perlinが2001年に発表したPerlin Noiseの改良版です。2Dでは三角格子（単体＝Simplex）を使うためPerlinより計算量が少なく、高次元でも計算コストがO(n²)からO(n)に改善されます。また方向性のアーティファクト（縦横方向に見えるパターン）が少なく、より自然な見た目になります。ゲームエンジンやシェーダーでの採用が多い理由です。
オクターブとフラクタルノイズ
複数のノイズを重ねる「フラクタルブラウン運動（fBm）」により、より詳細で自然なパターンを作れます。オクターブ数は重ねる層の数、Persistenceは各オクターブの振幅の減衰率（0.5が一般的）、Lacunarityは周波数の増加倍率（2.0が一般的）です。オクターブを増やすと細部が増え、Persistenceを上げると各層の影響が大きく荒いノイズになります。地形生成では4〜8オクターブが使われます。
Canvas APIでノイズを描画する
ブラウザのCanvas APIでノイズを描画するにはImageDataを使うのが最速です。ctx.createImageData(w, h)でピクセルバッファを確保し、各ピクセルのRGBA値を直接書き込んでctx.putImageData()で反映します。WebGLを使えばGPUで並列処理できさらに高速ですが、実装が複雑になります。Workerを使って計算をメインスレッドから分離することでUIブロッキングを防げます。