今回のテーマは、立方体に天気予報を表示するアニメーションを作るというものです。

推奨環境 この解説は、以下の環境を前提に作成し、動作確認等を行っています。ご確認ください。

• Mac OS X 10.4.1
• Quartz Composer 2.0

改版履歴

• 1 : 2005.05.27 : 新規作成。
• 2 : 2005.06.01 : 読み込み前の画像表示とプリデファインのInterpolationのカーブの図を追加。
• 3 : 2005.06.04 : サンプル動画を追加。
• 4 : 2005.06.13 : リファレンスを追加。
• 5 : 2005.06.23 : アウトラインを追加。
• 6 : 2005.07.02 : Interpolation のリファレンス用動画を追加。

アウトライン

• Cube による直方体の表示。
• Image Downloader による画像のダウンロード。ファイルとインターネットより。
• Interpolation による 2 つの数値の間の値を出力。
• Multiplexer による入力のスイッチング。
• Counter による数値のカウントアップ。
• リファレンス ( Cube, Image Downloader, Multiplexer, Interpolation )。

今回のサンプルの完成予想図をまずは見ていただきましょう。名付けて「 キュービック天気予報 」。立方体の6面にいろんな天気予報の画像をインターネットからダウンロードしてきて貼付けてぐるぐる回すというものです。まさに、スクリーンセーバにはぴったり?ですね(^_^)。

Quartz Composerには、Cubeという直方体を表示するパッチが用意されています。それぞれの面には、色と画像の指定ができるようになっていますので、天気予報のサイトから画像をダウンロードしてきて、Cubeに流し込めば終わりです。

画像のダウンロードを行うのは、Image Downloaderというパッチです。ダウンロードする画像のURLをInspectorで入力して、Cubeの6つの「 xxx Image」の入力ポートに繋ぎます。URLは画像であればどこでも構いませんが、このサンプルではヤン坊マー坊天気予報のサイトを使わせていただいています。

• http://www.yanbohmarboh.jp/tenki/image/kanto_kyo.jpg
• http://www.yanbohmarboh.jp/tenki/image/gms00.jpg
• http://www.yanbohmarboh.jp/tenki/image/typh-A.jpg
• http://www.yanbohmarboh.jp/tenki/image/fish_kanto_kyo.jpg
• http://www.yanbohmarboh.jp/tenki/image/kinki_kyo.jpg
• http://www.yanbohmarboh.jp/tenki/image/zenkoku_kyo.jpg

スクリーンセーバにするのであれば、このURLの部分をPublishして、ユーザが設定可能にするとよいでしょう。

後は、ぐるぐる回すだけです。LFO でも回すことが出来ますが、今回は、Interpolation パッチを使います。このパッチは、指定した 2 つの値の間を生成するものです。開始値を 0、終了値を 360 にしておけば、この間の値を順に生成してくれます。これで、ぐるぐる回すことが出来ます。

回転するには、Cube の [ X, Y, Z ] Rotation に Interpolation の Result を繋ぎます。3 つの Interpolation を作ることで、回転が単調にならないようにしています。先ほど書いたように、Start Value を 0、End Value を 360 にします。Duration で、この値の変化を何秒で行うかを指定します。大きくすればゆっくり変化します。Repeat Mode で、None = 1 回のみ、Loop = 同じ方向に繰り返し、 Mirrored Loop = 行ったり来たりを繰り返し、Mirrored Loop Once = 行ったり来たりを1回のみのどれかを選べます。Interpolation では、開始値と終了値までをどのように値を変化させていくかを指定できます。Linear だと時間変化に対して値の変化が一定です。Inspector の Settings を見ると視覚的に確認できます。下の図は、「 Quadratic In-Out 」です。スロースタートで途中速くなり、またゆっくりと変化して終了値に辿り着きます。この画面の「 Customized Interpolation Curve 」のラジオボタンをオンにすることで、このカーブを自分で自由に定義することもできます。

Quartz Composerのファイル

アニメーションがスタートしてから画像のダウンロードが完了するまでの間、真っ白いキューブが表示されるのでちょっとかっこわるいですよね。そこで、「 COMING SOON? 」画像をダウンロード完了するまで表示させてみることにします。

本当は6面全部に同じ処理をするべきですが、ごちゃごちゃするので Front Image のみに COMING SOON? を表示しています。回転がゆっくりなので、他の面が見えるようになるまでに画像のダウンロードは終わることが多いでしょう(^_^;。COING SOON? の画像は Image Importer で読み込みます。

Image Importer と Image Downloader の両方の画像を Multiplexer というパッチに入れています。Multiplexer パッチは、複数の入力のうち、どれか1つを Output ポートに出力します。どれを出力するかは、Souce Index ポートの数字によって決まります。0が入力されている場合は、 Source #0 が出力される訳です。この図では、Source は2つしかありませんが、Inspector の Settings で Source の数を増やすことが出来ます。

ということで、画像がダウンロード完了するまでの間 Souce Index に 0 を入力し、完了したら 1 を入力するようにすればよいのです。そのために、Counter パッチを使います。この Counter パッチは、Increasing Signal に True が入力されたらカウンター自身の値が1つ増え、Decreasing Signal に True が入力されたら値が1つ減るというものです。カウンターの値の初期値は0です。

Image Downloader パッチは、ダウンロード完了時に Done Signal から True が出力されますので、これを Counter パッチに入力しておけば、ダウンロード完了とともに Image Downloader の Image が Front Image に流れるようになります。

Quartz Composerのファイル

• Cube : 直方体を描画
  • 入力 : Enable ( Boolean ) : 有効フラグ。True のとき描画する、False のとき描画しない。
  • 入力 : [ X, Y, Z ] Position ( Number ) : Cube の中心位置。
  • 入力 : [ X, Y, Z ] Rotation ( Number ) : Cube の回転角度 ( 単位 : 度 )。
  • 入力 : [ Width, Height, Depth ] ( Number ) : Cube の大きさの指定。X 軸方向 ( = Width )、Y 軸方向 ( = Height )、Z 軸方向 ( = Depth )。
  • 入力 : [ Front, Left, Right, Back, Top, Bottom ] Color ( Color ) : Cube の各面の色。
  • 入力 : [ Front, Left, Right, Back, Top, Bottom ] Image ( Image ) : Cube の各面に貼付ける画像。画像は、面全体にアスペクト比を無視して拡大される。
  • 入力 : Blending ( Index ) : 背景との重ね合わせ。単純書き込み ( = None )、透明度考慮 ( = Over )、加算 ( = Add )。
  • 入力 : Face Culling ( Index ) : 削る面の指定。削らない ( = None )、裏面を削る ( = Back Faces )、表面を削る ( = Front Faces )。
• Image Downloader : 指定 URL から画像をダウンロードする
  • 入力 : Image URL ( String ) : ダウンロードする画像の URL。
  • 出力 : Image ( Image ) : ダウンロードした画像。
  • 出力 : Donw Signal ( Boolean ) : ダウンロードが完了したときに True になる。
• Multiplexer : Source のうちのどれか 1 つを選んで Output に出力する
  • 入力 : Souce Index ( Index ) : Source #N のどれを Output に出力するかのインデックス値。
  • 入力 : Source #N ( Virtual ) : 入力データ。Settings で増やすことが出来る。N は、0 から始まる。
  • 出力 : Output ( Virtual ) : Source #0 〜 #N のうちの Source Index で選択されたものが出力される。
  • 設定 : Number Of Inputs ( Index ) : 入力データを増減する。
  • 設定 : Inputs Type ( Index ) : 入力データに入れるデータの種類。
• Interpolation : 2つの値の間の値を出力する
  • 入力 : Start Value ( Number ) : 初期値。
  • 入力 : End Value ( Number ) : 終了値。
  • 入力 : Duration ( Number ) : 初期値から終了値に変化するまでの時間 ( 単位 : 秒 )。
  • 入力 : Repeat Mode ( Index ) : 初期値から終了値まで一度変化させて終わり ( = None )、初期値から終了値への変化を繰り返す ( = Loop )、初期値から終了値、終了値から初期値を繰り返す ( = Mirrored Loop )、初期値から終了値、終了値から初期値までを一度変化させて終わり ( = Mirrored Loop Once )。
  • 入力 : Interpolation ( Index ) : 初期値から終了値までの変化のタイプ。下の図を参照 ( Linear, Quadratic In, Quadratic Out Quadratic In-Out, Cubic In, Cubic Out, Cubic In-Out, Exponential In, Exponential Out, Exponential In-Out, Sinusodial In, Sinusodial Out, Sinusodial In-Out )。

Linear
Sinusodial In	Sinusodial Out	Sinusodial In-Out
Quadratic In	Quadratic Out	Quadratic In-Out
Cubic In	Cubic Out	Cubic In-Out
Exponential In	Exponential Out	Exponential In-Out