snow noise

2016.12.12

ノイズの習作 #01

表現にちょっとしたフックに何かないかとを検討することはよくありますが、ノイズはビジュアルで利用するにしても、ロジック部分だけ利用するにしても汎用性が高いため、「拡散」と並んで登場機会が比較的多い実装の一つです。
社内の情報共有も兼ねて、いろいろな種類のノイズのロジックをまとめていきたいということで、今回はその第一弾です。

ベースの実装

まずは描画部分の実装です。
pixiやeaselJSを使いたいところですが、1ドットずつ効率よく描画するのは不得意なようなので、今回は直接canvasの2dを操作していくことにしました。

これで基本はできましたので、ここからパラメータやルールを少し変えていきます。

砂嵐

まずは一番ベーシックなノイズから始めます。
ルールは簡単で、画面内のランダムな座標にひたすらドットを書き込んでいきます。

実行するとこんなような感じになります。

1

ストライプ

単純な砂嵐に少しルールを持たせてみます。
横方向の色を同じにしてY座標を一定にするとストライプ状になります。

実行するとこんなような感じになります。

テレビっぽいノイズ

砂嵐とストライプを混ぜたら古いテレビっぽいノイズになりそうですが、2重に描画するのでは重くて動かなそうなのは何となく予想がついてしまうので、表現ベースの近似を探っていきます。
横方向のグラデーションの範囲をランダムに変化させれば、短いところは黒くとびとびで砂嵐っぽく、長いところは概ね白で線っぽくなるかもという予測で実装してみたところまあまあうまくいきました。


今回試した全コードは以下です。

[snownoise.js]

パフォーマンス

砂嵐とストライプはほぼ問題なさそうですが、テレビっぽい方は1ドットあたりの計算が多いので30fpsが限界でした。
gifやスプライトアニメーションに変換しても感覚的にはそこまで表現的に劣化はしないので、真面目にcanvasで毎フレームランダムに描画するのはやめたほうがよさそうです。
canvasで描画するにしても、5~6パターンくらいの座標セットをページ読み込み時に生成して、それをループで回す方式が実用的です。