Quartz Composerにどっぷり!
アナログ時計スクリーンセーバを作る

今回のテーマ

今回のテーマは、Quartz Composerでアナログ時計スクリーンセーバを作るというのもの。

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

改版履歴

アウトライン

デジタル時計を作る : 文字列を描く

まずは、デジタル時計を作ってみます。Image With String という文字列を画像化するパッチの出力を Billboard に入力して画面に文字列を描画します。Inspector の Settings の中でフォントの指定もできます。

この Image With String パッチの String ポートに日時の文字列を入れることができれば、デジタル時計ができる訳ですが、それには「 System Time 」というパッチを使います。この System Time パッチは、2001.1.1からの現在の秒数を出力するパッチですので、これを一般的な日時の表記に変換する必要があります。この変換をするために Date Formatter パッチを使います。

日付の部分の形式は、Date Formatting Style から、時刻の部分の形式は、Time Formatting Style からメニューで選択できます。両方とも「 None 」にすると、Inspector ウィンドウの下部に描いている Format Pattern で形式をかなり柔軟に指定できます。

文字の大きさを変える

さて、表示する文字の大きさを変えるにはどうするかです。Image With String パッチには、文字の大きさを指定するための Glyph Size という設定がありますが、これを変えても文字の大きさは変わりません。なぜかというと、文字の大きさを決めるためにはいくつかの要素が絡み合っているためです。

Image With String パッチの Image Width と Image Height の設定です。これは、Image With String パッチが生成する画像の横幅と逆さを指定するものですが、デフォルトでは、どちらも 0 になっています。この横幅に 1 を指定すると、入力された文字列によって生成された画像の幅が 1 を超えないように文字列を折り返し、複数行にわたって文字列を表示するようになります。

横幅の指定が 0 になっている場合は、「 幅の制約なし 」ということになり、入力された文字列が長くなれば自動的にどんどん長くなっていきます。つまりは、必ず 1 行で表示します。

ですので、Glyph Size を大きくした場合は、Image With String パッチから出力される画像は、大きくなっているんですが、それを表示する側の Billboard パッチのサイズが 1 に指定されているので、その中に収まるように表示されます。つまり、Glyph Size を変えるだけでは表示されるサイズは変わらないのです。

Image With String パッチで生成される画像の幅に連動して、Billboard パッチの表示の幅を変える必要があります。そのためには、Image With String パッチの Display Width ポートと Billboard パッチの Width ポートをつなげばよいのです。

この状態で、Glyph Size を変えると、表示サイズも変わります。

補足:Quartz Composer 2.0 では、日本語を表示する場合は、Image With String パッチのフォントの指定を日本語フォントにしないと文字サイズの計算がうまくいかないのか、思ったような表示になりません。日本語を含む場合は、日本語のフォントを選択しておいてください。

もう少し Image With String パッチについて解説をします。先程は Image Width を 0 にすると横に伸び続けるということを書きましたが、Image Height も同様です。Image Width が 0 でないときに限りますが、入力された文字列が長くなれば長くなるほど、生成される画像も縦に長くなります。0 以外の値になっている場合は、入りきらない部分は表示されなくなります。

Image With String パッチの Settings のところを見ると、フォントの指定 ( Font ) と横方向の揃え ( Horizontal Alignment = { Justified, Left, Center, Right } ) と縦方向の揃え ( Vertical Alignment = { Justfied, Top, Middle, Bottom } ) があります。

アナログ時計にチャレンジ

次は、アナログ時計にチャレンジです。まずは完成予想図から見ていただきましょう。

カエルと3本の針がありますが、合計4枚の画像を重ね合わせています。この4枚の画像は位置の調整を楽にするために、縦横のピクセル数を同じにしています。これらの画像を適切に回転して重ね合わせているだけです。

エディタ画面を見ると、ちょっと複雑になっていますが、上から、カエル、時、分、秒の画像をBillboardで表示しています。

時、分、秒は基本的に同じ構造ですので、秒について詳しく見ていきます。Date Formatterで、現在の秒の値を取り出したいので、DateをNone、TimeをNoneにして、Format Patternに「 s 」を入れます。すると、Date Formatterから秒の値0〜59が出力されるようになります。これを、0〜360の角度に変換することになりますので、6倍の値にできればよいわけです。これには、Mathパッチを使います。Mathパッチは四則演算などのシンプルな演算を行います。

Initial Valueに秒の値を入れて、Operationで演算の種類をMultiply (乗算)にし、Operandに-6を入れています。プラスだと逆方向に回転するのでマイナス値にしています。この演算結果がResulting Valueに出力されますので、BillboardのRotationにいれれば、秒針としての動きをします。Mathパッチは、Settingsのところで、演算の個数を増減できます。デフォルトだと2つの演算をすることになっていますので、このサンプルではマイナスボタンで1つ演算を減らしています。

時と分についても同様にして作ることが出来ます。

補足:Math パッチの名前のところに「 Math ( * ( - 30 ) ) 」のように表示されていますが、Inspector ウィンドウの Imformation のところの Title に文字列を入れることで名前を変えることが出来ます。

スクリーンセーバを作る

さて、この時計をスクリーンセーバにしてみましょう。...といっても、実は何もすることはありません。というのは、Mac OS X 10.4では、このQuartz Composerのファイルをスクリーンセーバとして扱ってくれるためです。つまり、/Library/Screen Savers/ や ~/Library/Screen Savers/ にこの .qtz ファイルを入れるだけでよいのです。入れた後に、システム環境設定を開いてみると、もう動いています。

これだけでは何なので、スクリーンセーバにオプションの設定をつけてみましょう。デジタル時計の色がオプションで変えられるようにしてみます。RGB Colorという色を生成するGeneratorのパッチを配置して、BillboardのColorにつなげます。Billboardの出力イメージがこの色で塗られます。

設定画面に表示させるには、その値を「 Publish 」して外部公開する必要があります。Publishしたいパッチのコンテキストメニューを表示させると、Published Inputsというメニューがあります。

ここで、Publishしたい入力ポートを選択します。今回は、Red, Green, BlueをPublishします。メニューを選択すると、Publishするときの名前を入力することになります。ここでは、「 Clock Color Red 」「 Clock Color Green 」「 Clock Color Blue 」としました。作業はこれで終わりです。ビューワのウィンドウの右上のボタンをクリックしてツールバーを表示させると、Parameters というボタンがありますので、これをクリックしてみましょう。Publish した値の設定画面が表示されます。システム環境設定でも同様の設定画面が表示されます。

サンプル
Quartz Composerのファイル
色をPublishする

先ほど、設定のために Red, Green, Blue を別々に Publish しましたが、色として Publish してみます。Publish するときの名前は「 Clock Color 」とします。

すると、今度は、Parameters ボタンを押すと、以下のような色設定のカラーウェルが出てきます。Publish するものの種類によって、設定画面も自動的に変わります。

よりリアルな時計に

一応、それっぽい時計にはなりましたが、針の動きがまだちょっとリアルではありません。短針は 1 時間に 1 回しか動きませんが、実際の時計は、もっと細かく動きます。ちょっと複雑になりますが、分の値を 1 / 60 にして回転角度を決めるところに足してあげればよいのです。長針も秒の値を 1 / 60 にして同様に足します。

秒針は、もっとなめらかに動かすようにしてみましょう。System Time パッチは、小数点以下の値も出力していますので、小数点以下の部分を取り出して、秒の値に足すことにします。System Time の値から System Time の値の小数点以下を切り捨てた値を引くことで、小数点以下の部分を取得します。切り捨てには、Round パッチを用います。切り捨てた値は、Floor Value ポートから出てきます。これで、滑らかに動くはずです。

サンプル
Quartz Composerのファイル
クイックリファレンス