HTML5 Canvasでノイズを無限アニメーション！putImageData()を使った砂嵐エフェクトの実装方法

Canvasでノイズを無限アニメーションさせる仕組み

putImageData() メソッドは、ImageData オブジェクトが持つピクセルデータをキャンバス上に直接描画するためのAPIです。このメソッドを使って全ピクセルにランダムな値を書き込むことで、テレビの砂嵐のようなノイズ画像を生成できます。

ポイントは「ImageDataの使い回し」

キャンバスをアニメーションさせる際、毎フレーム新しい ImageData を生成するとメモリ確保とGC（ガベージコレクション）の負荷が増え、動きがカクつく原因になります。そこで、再利用可能な ImageData オブジェクトとバッファは、メインループの外側で一度だけ作成しておくのが効率的です。

var ct = c.getContext("2d", {alpha: false}); // アルファチャンネルなしのコンテキスト
var a = ct.createImageData(c.width, c.height); // 再利用するImageData
var buffer = new Uint32Array(a.data.buffer);   // 高速書き込み用のバッファ

(function loop() {
    noise(ct);
    requestAnimationFrame(loop);
})();

function noise(ct) {
    var l = buffer.length - 1;
    while(l--) buffer[l] = Math.random() < 0.5 ? 0 : -1 >>> 0;
    ct.putImageData(a, 0, 0);
}

コードの解説

1. コンテキストとバッファの準備

• getContext("2d", {alpha: false})：アルファチャンネルを無効化したコンテキストを取得します。透明度の合成処理が不要になるため、描画が高速化されます。
• createImageData(c.width, c.height)：キャンバスと同じサイズの ImageData をループ外で一度だけ生成し、以降はこれを使い回します。
• new Uint32Array(a.data.buffer)：ピクセルデータを32ビット整数として扱えるようにします。1ピクセルを1回の代入で更新でき、8ビット単位で操作するよりも大幅に高速です。

2. 無限ループの実装

loop() 内でノイズを描画した直後に requestAnimationFrame(loop) を呼び出すことで、次のフレームを予約します。これにより、ブラウザのリフレッシュレート（通常60fps）に同期した滑らかな無限アニメーションが実現します。

3. ノイズの生成ロジック

noise() 関数では、バッファの各要素に対して Math.random() の結果が0.5未満なら 0（黒）、それ以外なら -1 >>> 0（白）を代入しています。-1 を符号なし右シフト >>> 0 すると32ビットの最大値 4294967295（0xFFFFFFFF＝不透明の白）に変換されるため、黒と白がほぼ半々に混ざった砂嵐模様になります。

応用アイデア

この手法は、レトロなテレビノイズ演出のほか、ゲームの背景エフェクト、画面切り替え時のトランジション、ホラー系サイトの雰囲気づくりなど、幅広い場面で活用できます。ノイズの粒度を調整したい場合は、キャンバス自体を小さく描画してCSSで拡大表示すると、より粗い粒子感を簡単に表現できます。