今回のテーマは、流れる雲です。
推奨環境 この解説は、以下の環境を前提に作成し、動作確認等を行っています。ご確認ください。
改版履歴
今回のテーマは流れる雲。Mac OS X 10.4に添付のRSS Visualizerの背景で雲が流れていますよね。あの雰囲気を実現してみましょう。まずは、もとになる雲の画像を用意します。この画像は、縦横に並べたときにつながるようになっている必要があります。以下の画像はサンプルで使っているデータですので、これを使っていただいて結構です。
Image Importer パッチには、ちょっとおまじないが必要です。Settings で、Target を 2D に、Wrapping Mode を Repeat にします。
次に、今用意した雲の画像を2つの Sprite パッチに表示します。なぜ2つ必要かというと、雲の画像をずらして重ねてそれぞれを別の速度で動かすことで単調さがなくなり、リアルな雰囲気を表現できるためです。Sprite パッチは、両方とも Width = 2、Heigt = 2、Blending = Over とします。Width と Height は、ウィンドウいっぱいに Sprite の画像を表示するためで、 Blending は、透明度のある描画を有効にするためです。手前に表示する Sprite パッチの方は、やや透明にします。これで、2つの Sprite が重なった状態になります。
下側の Sprite には、Image Textureing Matrix というパッチがつながっていますが、これは、画像をテクスチャーとしての画像処理を行うものです。画像の「 拡大縮小 ( Scaling X/Y ), 回転 ( Rotation ), スクロール ( Translation X/Y ) 」 を行うのですが、画像をタイル上に並べたときに繋ぎ目ができないような処理をしてくれます。例えば、スクロールというのは以下のような内容です。左側の画像の右側の20ドットを切り取って左側に持ってきています。画像をタイル上に並べたときには繋ぎ目はできません。このスクロールの量を変えることで雲の重なり具合を変化させる訳です。
さらに、Scaling Y を 0.25 にして、縦にちょっとつぶして、Rotation を 180(度) にして逆さにしています。後は、Interpolation パッチで Translation X の値を変えることで、ずらしの量を徐々に変えます。結果はこんな感じです。
一応それっぽい感じになりましたが、RSS Visualizer では、球体の内側から雲を見ているような感じになっています。これにちょっと近づけてみます。
球体である Sphere パッチを使うのは以前やりましたが、球体に画像を貼付けるには、Sphere パッチの Image ポートに画像データを流し込む必要があります。Sprite パッチで画面に描画しているものをイメージデータとして取り出すことが出来ればいいのですが、まさにそのためのパッチがあります。Render in Image というパッチです。これは、子供のパッチを持つことが出来るパッチで、自分の子供が描画した内容を画像データとして出力するものです。
ですので、今まで作ったパッチ群を、配置した Render in Image パッチの中にカット&ペーストして移動します。そして、その画像を Sphere パッチに入力します。
そして、この Sphere パッチの設定ですが、ウィンドウ全体を覆うように、拡大率の Scale を 2.3 にします。そして、球体を内側から見るために、 Face Culling を Front Faces に変更します。
Interpolation パッチで Sphere を回転するようにしたら完成。
