Processing でオーロラ・改 （特別付録「作り方解説」）

前回のオーロラを、Windows 以外（というか Mac）でも見られるようにしました。こちらで公開しています。

@black_tercel きれいなオーロラがiMacでみれた！！2011年8月29日 20:12 via YoruFukurou秀々車輪
Syusyu_Syarin

どうやら Windows と Mac では、Java 仮想マシンの実装（仕様？）が違うらしく、あまりにも贅沢にメモリを使おうとすると、実行環境によってはうまくいかなくなってしまうようです。

そこで、前回実装していた、『テクスチャの先読み機能』を削る事で、Mac 環境でもオーロラを楽しめるようになりました。わーい。

Mac でも動作するようになったオーロラ（Ver.2）

---

【オーロラの作り方概論】

せっかくですので、オーロラの作り方について基礎の基礎の部分だけ触れておきたいと思います。

実を言うと、ひとつのオーロラは、単なる 1 枚の長方形の板をぐにゃぐにゃ歪ませた形状をしています。

オーロラの正体

これに、グラデーションしたテクスチャ画像を貼りつけただけで、オーロラになります。簡単ですね。

テクスチャマッピングされたオーロラ

上記のような複雑な凹凸のある形状をどうやってプログラムしているのかが気になるという方もいらっしゃるかと思います。

そこで、ここからは、もう少し詳しく知りたい方向けの解説をしたいと思います。

まずはじめに、平らな板を用意します。板は、縦横等間隔に分割しておきます（下図参照）。

分割された平らな板

先ほどの平面の分割領域の境界すべてに対して、適当な『高さ』情報を与えます（下図参照。与えられた高さは、黄色い線で視覚化されている）

『高さ』情報の与えられた板

分割された各領域の頂点を、与えられた高さの情報を考慮してふたたび線で結ぶと下図のようになります（うまく説明できなくてごめんなさい）。これが、凹凸面のワイヤーフレームになります。

面を張ると、凹凸が浮き彫りに。

たったこれだけです。

もともとの板は平面ですから、2次元の情報しか持っていません。

そして、「高さ」は、単なる 1 次元の情報です。

2 次元と 1 次元の情報を足す事で、3 次元の複雑な形状が作れてしまうのです。

逆に言うと、作ろうとしている形状が複雑だからといって、必ずしも 3 次元空間で考える必要はないのです。

この手法はなかなかに効果的なので、僕は好んで使います。

---

次に、高さ情報をいかにして与えるかというお話です。

様々な方法が考えられますが、今回は Perlin ノイズを使いました。これは、煙や炎のような自然物のテクスチャを簡易的に生成するために裏技的に用いられるテクニックですが、そんな Perlin ノイズを今回は形状の制御に使用しています。

Processing では、noise() メソッドを使って Perlin ノイズを生成できます。実際には、ノイズは float 型の数値として得られますが、ここでは簡単のため視覚化したものを下図に載せます。

noise() メソッドで生成した Perlin ノイズ

重要なのは、このノイズの濃淡値です。

たとえば、白っぽいほど高さの値を大きく（あるいはその逆でも可）としましょう。

この情報を基に、平面に凹凸を与えていきます。

Perlin ノイズに、分割された平面を重ね合わせた結果

先ほど述べた方法で、凹凸を与えた結果を、以下に示します。すると、まるで曲面のような形状が得られるではありませんか。

Perlin ノイズを基に、分割領域に高さを与えた結果

これで、オーロラ（の形だけ）が完成しました。やったー！

---

……で。

オーロラで使われている工夫は、ほかにもたくさんあります。

本当は、『透き通ったテクスチャの作り方』とか、『光りを放つように見せる方法』とかに関しても言及したいところですが、残念ながらこれらを全部書くだけのモチベーションが残っていません。

OpenProcessing の 当該ページにすべてのソースコードを載せていますので、気になる方はぜひ挑戦してみてください。