炎と木目（パーリンノイズの習作）
＝前置き＝
「炎々」の移植にあたり、パーリンノイズの習作として「炎」と「木目」の処理を組み込むことにしたので、その部分だけ抽出してUPしてみた。
「炎々」の方はもうちょっと調整してから、土日に上げる予定。
＝wonderfl＝
wonderfl build flash online | 面白法人カヤック
できることはマウスで線を引いてそこを燃やすだけ。一応、リロードすれば木目の模様が変わる。（毎回ランダム生成）
以下、解説。
＝パーリンノイズ＝
パーリンノイズについては以下のサイトの画像を参考のこと
今回は「白い部分(0xFF)と黒い部分(0x00)が存在する」ということだけわかっていればOK。砂嵐のノイズみたいに値が完全にバラバラに存在するのではなく、黒と白の間にはちゃんと灰色が存在するようなノイズ＝値の変化が滑らかなノイズだと思ってもらえれば良い。
＝炎＝
炎の処理の基本的なアルゴリズムはwonderfl build flash online | 面白法人カヤックを参考にさせてもらった。以下、自分用に書き直したのでその解説。
基本的な流れは、以下のことをしているだけ。
- 発火元を描く
- パーリンノイズでムラをつけつつ炎を消す
- 炎を上にスクロールする
もう少し具体的に書くと、以下のような感じ。
- 火元になる部分を0xFFで描き加える
- 0x00の部分は炎がない部分、0x80だと炎が半分消えてる部分、という状態
- この値をpaletteMapで実際の炎の色に置き換えている
- パーリンノイズでムラをつけつつ値を減少させる
- 炎がだんだん消えるようにする
- 早く消える部分と遅くまで残る部分により、「揺らぎ」ができる
- 炎の上昇と一緒にスクロールさせることで、その偏りを持続させている
- 炎を上にスクロールする
- 燃え上がる表現のため、全体を上にスクロールさせる
- 表示前にスクロールさせると、発火部分がズレて見えるので、表示後にスクロールさせる
- 調整
- これだけだと炎が四角に見えたので、ブラーをかけることでロウソクっぽくした
- パーリンノイズを少し左右に振動させることで、揺らぎを強化した
重要なのは「パーリンノイズで消す」こと。これによって「早く消える部分」と「遅くまで残る部分」ができる。さっきのサイトの画像で言えば、「白い部分は早く消える」「黒い部分は遅くまで残る」「それが上にスクロールする」という状況。これにより、「同じ高さでも消える部分と残る部分ができる」「炎が本体から切り離される」などの状況が生まれる。
＝木目＝
木目は「パーリンノイズに周期的に色を割り当てる」ことで実現している。
さきほどの画像で見たとおり、パーリンノイズの色の変化は
- 白→薄い灰色→灰色→濃い灰色→黒
という風に変化している。
これらの色を、
- 茶→黒→茶→黒→茶
という色になるように変更すれば、「地図の等高線」の要領で木目のような周期的な画像ができる。
今回は完全にランダムにやったものの、質を考えるとランダムではなく「それっぽく見える値」を探して設定＆調整した方が良いと思う。
＝予定＝
土日はようやく「炎々」の移植が完了してUPできる予定。見た目がちょっとおかしいけど、以前と同じく「隣接するマスに炎が移っていく」というものにする予定。できればもっと自然に広がるバージョンも作りたかったけど、どうせなら別のものを作りたいので来週はまた別のものを作る予定。
