今回のテーマは、Cover Flow。Quartz Composer で、あの Cover Flow を実現します。
推奨環境 この解説は、以下の環境が必要です。ご確認ください。
改版履歴
今回のテーマは、Quartz Composer で Finder や iTunes の Cover Flow を実現することですが、多分試された方もいるのではないかと思います。しかし、Mac OS X 10.4 ではなかなか厳しかったんです。Mac OS X 10.5 になって、TimeLines パッチが増えたおかげでかなり楽に作ることが出来るようになりました。
Cover Flow は、画像のX座標が変化させつつ、Z座標もYの回転角度も透明度も同時に複雑に変化させていきます。それぞれの値を作るのがなかなか大変なんですが、TimeLines パッチで一気に解決できます。
それ以外については、Mac OS X 10.4 でもさほど難しくはないと思います。ただ、完全再現となるとなかなか大変なので、それっぽく見える程度までを解説します。下が完成予想図。
Cover Flow は、いくつもの画像が画面上を動いていきますので、まず、その画像1つ分を実現しましょう。特徴はやはり鏡像です。上下が裏返っていて、下にいくほど消えていくような感じのイメージを本体の画像の下にくっつけるわけです。
画像の表示には Sprite パッチを使用します。本体のイメージと鏡像のイメージをそれぞれ別の Sprite パッチで表示します。上下の反転には ImageTransform パッチを使います。ImageTranform パッチは、入力された画像を拡大縮小したり回転したりするためのパッチです。Y 座標の拡大率を指定する Scaling Y に -1 を入れると上下反転します。Scaling Y は、元の座標に対して掛け算を行うものですので、 -1 で上下が反転するわけです。
上下反転したら、今度は下に向かって徐々に薄くなるようにします。これには Sprite パッチの Mask Image を使います。ここに入力された画像と元の画像を掛け算した結果が画面に出てきます。つまり、真っ黒な画像(0)をいれると、元の画像と掛け算して全ての色が 0 つまり黒になります。透明な色をいれても同じくで、透明色(0)を入れると、出力画像が透明になります。
鏡像は本体よりも暗いので、50%グレーと掛け合わせることにします。徐々に薄くするためには50%グレーの透明度を高くする事で実現します。この画像を作るためには、グラデーションの画像を生成する Linear Gradient パッチを使います。
グラデージョンの開始点と終了点の座標、そして、それぞれでの色を指定します。ここでは、 ( 0, 300 ) から ( 0, 0 ) に向かったグラデーションにしました。このパッチから出力される画像はサイズが決まっていませんので、 Image Crop パッチで切り出し範囲を指定します。( 0, 0 ) から ( 300, 300 ) にして正方形のグラデーションイメージを取り出します。これを Sprite パッチの Mask Image に入れます。
ここまでで鏡像は完成です。
鏡像ができたら、これを上下にくっつくように並べます。2つの Sprite は Y 座標がずれている以外は同じ値です。さらに、X Position, Z Position, Y Rotation は刻々と変化する値で、TimeLines パッチからの入力になります。これを Input Splitter パッチで両方の Sprite パッチに入れます。
Width と Height ですが、今回は Width を固定して、画像自身の大きさから Height を計算することにしました。以前にもやりましたが Image Dimensions パッチから画像のアスペクト比を取り出して、Width を割って高さを計算します。
鏡像側の Y Position は、本体の Y Position = 0 から、Height だけ下に移動させます。つまり、 - Height の位置になります。
後、細かいところですが、Blending は、Over にしておきます。デフォルトは Replace ですが、これだと、 Sprite パッチの Z座標方向の前後関係が無視されます。
ここまで来たら、後は、動きの指定になります。TimeLines パッチで、X Position, Z Position, Y Rotation の変化を指定します。これは、Finder を観察して色々と試行錯誤しながら入力していくことになります。ここでお見せするものは、Finder と全く同じ動きになるというものではありませんが、参考になればというところでのサンプルです。色々といじってみるとよいと思います。
これは、X Position ですが、中央に来るにしたがい急激に 0.0 に近づき、1秒間 0.0 のままになるというところがポイントでしょうか。
これは、Z Position ですが、中央に来るにしたがい急激に手前に近づいてくるようにしています。
これは、Y Rotation です。-60 〜 +60 度までを変化、やはり画面中央付近で1秒間回転を止めています。
Cover Flow を観察していると、両端にあるときは画像がやや全体に透明もしくは暗くなっていますので、それも再現してみます。Sprite パッチの Color に入力する色の透明度を Timelines パッチで生成しましょう。中央で完全に不透明、両端で完全に透明になるようにしています。
ここまできたら、Timelines パッチを右クリックして Timebase を External にして、時間を外から供給してもらうようにします。そして、 LFO パッチで Type を Sawtooth Up にします。これは、いわゆるノコギリ波で、0.0 から 1.0 に直線的に上がっていって、1.0 になったら 0.0 に戻るというような波形です。これを Timelines パッチの Patch Time に入れて、Timelines に時間を供給します。
今まで作った鏡像表示のところは、Mirror というマクロパッチにまとめています。さて、ここまで来ると、1枚だけでカバーフローが可能になりました。こんな感じです。背景は、 Gradient パッチでそれっぽく塗っています。
そして、これを沢山表示するんですが、最も簡単な方法、つまり、コピペです。このサンプルでは6個表示しています。先ほどの LFO パッチの Phase を60度ずつずらすことで、並べて表示することが出来ます。
それぞれに別の画像を表示するために、Direcotry Scanner パッチを使います。指定のディレクトリ以下の画像をリストアップできます。この中から LFO パッチでリストアップされた中のどの画像を表示するかの添字の番号を決めます。Type を Random にして、0 から最大の添字になるように、 Structure Count パッチで、ファイルの個数を取得して Amplitude と Offset には半分にした値をいれます。
それをダウンロードして、今まで作ってきたカバーフローの1枚表示のところに入れます。
一応これで完成ですが、動作させる機種によっては、ちょっと動きがカクカクと重いかもしれません。特に、読み込んでいる画像の解像度が大きいと、処理に時間がかかるためです。そのため、読み込んだ直後の画像に対して、Image Resize パッチで画像を小さくしておくとよいです。必要なサイズまで画像を小さくしておきます。
Resize Mode を Fit にして、Resize Pixels Wide/Hight にリサイズしたいピクセル数を入力すればOK。これで完成です。