p5.js オーロラ
p5.jsを使って「オーロラ」を描くプログラムを作ってみました。
黒い影が「山」、白い点が「星」、緑と紫の線が「オーロラ」を表現しています。
デモページとソースコードは以下にあります。
よかったら見てみてください。
上記のようなオーロラを描く仕組みは単純です。
１．黒色のキャンバスを用意する
２．山のラインを決める
３．山のラインより上の部分を紫色で塗る
４．紫色で塗った部分を緑色で上塗りする
５．白い点をランダムに配置する
これだけです。
山のラインを決めるときには「パーリンノイズ」という手法を使っています。
パーリンノイズとは簡単に言うと「なめらかな乱数生成手法」のことです。
一般的な乱数生成法（random関数）はとびとびの値を生成しますが、
パーリンノイズ（noise関数）は前回生成した値に近い値を生成します。
「パーリンノイズを使った場合」と「一般的な乱数生成法を使った場合」の違いは以下のような感じになります。
自然な感じの地形を表現したいときなどにはパーリンノイズを使用すると便利です。
実際にオーロラを描くまでの流れは以下のような感じになります。
キャンバスの背景色を黒色にします。
パーリンノイズを使って山のラインを決めつつ、上の部分を紫色で塗っていきます。
このとき、山のデコボコ具合によって紫色の透明度を変えています。
紫色の部分を緑色で上塗りします。
ここでも、山のデコボコ具合によって緑色の透明度を変えています。
最後に白い点を配置したら完成です。
今日はここまで。
最後まで読んでいただきありがとうございました。
