2010年1月24日日曜日

QCでつくる時計


いままでの映像制作では時計を表示する事に意味はあまりありません

なぜなら時計はその時の時刻を表すものであり

制作された映像を視聴する場合

視聴者が見始めた時間により様々なので

むしろ時刻表示する事が出来ないのです

今回はQCで時刻を表示します


まずは「System Time」というパッチを配置して下さい

ここから「time」という出口がありますが、そのままつなぐと

意味不明な数字が表示されますこれは「2001.1.1」からの秒数を表す数字です


秒数で表示されても我々は時刻を認識することができません

なので「Date Formatter」パッチで秒数表示から日時へ変更します



そして前回の「tips」で紹介した

「image With String」を経由し「Billboard」につなぎ

「image With String」のフォント等をお好みで変更


これで時計の完成です


ただの時刻が表示されるだけでは寂しいので演出をほどこします

いままではイメージをそのまま描画してきましたが

今回は高度なモーションを作っていきます


「Particle System」パッチを配置して下さい

こちらは自動で粒子を発生させるパッチです

真四角のものが中央から沢山発生しています

「image」に○型のイメージをつなげれば○が発生します


「Particle System」

Enable (Boolean) 
有効フラグ。True のとき描画する、False のとき描画しない。
[ X, Y, Z ] Position (Number)
パーティクルの中心 (吹き出し口) の位置。
Color (Color)
パーティクルにつける色。
[ X, Y, Z ] [ Min, Max ] Velocity (Number)
パーティクルの初速度の範囲。この範囲の中で乱数で与えられる。
[ Min, Max ] Size (Number)
パーティクルの初期の大きさ。この範囲の中の乱数で与えられる。
Lifetime (Number)
パーティクルの寿命 (単位 - 秒)。この時間になるとパーティクルは消えて新たなパーティクルが生まれる。
Size Delta (Number)
パーティクルのサイズの変化量。プラスにすると徐々に大きくなり、マイナスにすると徐々に小さくなる。
Opacity Delta (Number)
パーティクルの透明度の変化量。徐々に透明にする。
Attraction (Number)
中心に向かう力の強さ。
Gravity (Number)
重力の強さ。プラスで下向きの重力。マイナスで上向きの重力になる。
Image (Image)
パーティクルに使用する画像
Blending (Index)
背景との重ね合わせ。単純書き込み (= None)、透明度考慮 (= Over)、加算 (= Add)。

                        (おなかすいたwikiより転記)


発生するパーティクル素材にランダムで色を付けます

色についてですがコンピューター上ではフォーマットがきめられていて

「RGB方式」「HSL方式」の2つがあります

「RGB」は色の三原則「レッド」「グリーン」「ブルー」を掛け合わせて色を表現

「HSL」は色相(Hue)、彩度(Saturation)、明度(Lightness)を掛け合わせ色を表現

あざやかな光の玉を表現する場合は

「彩度」と「明度」が一定の方がよいので

「HSL Color」パッチを採用


「Random」パッチを「Hue」につなぎ

「Particle System」の「Color」につなぎます


 左図を参考に「Particle System」の値を変更します

 カラフルな光の玉が雪のように空から振ってきます


以上で完成です


2010年1月19日火曜日

QCでビジュアライザー

QCで外部デバイスからの入力を紹介します

マウスやキーボードとからの入力は「Flash」でも可能ですが

外部機器などが認識できるのはプログラムならではの機能です

私は映像制作がメインなので「実写」かロゴの「モーショングラフィック」経験しかありません

音を認識できるQCは、普段の映像制作では出来ない演出を可能にしてくれます

今回は「音」でミュージックビジュアライザーを作ってみました

まずは完成品をご覧下さい



こちらの場合3つの構成要素からできています

・Appleロゴが音楽にあわせて動いています

・左下に音楽の周波数別のメーターが表示されています

・最前面にブログのアドレスが表示されています


まずUSBマイクをつないでくださいマイクが認識されたら


QCで「Audio input」パッチを配置してください

左図が「Audio input」パッチです

「Volume Peak」は音声のピーク値を出力します

こちらを描画したロゴの「Billboard」の「width」につなぎます

マイクに向かって音を出してみましょう

音声のピークの値が「width」の値になります

大きい音を出せばロゴが大きくなります


次は左下のオーディオメーターです

「Audio input」の「Spectrum」は周波数別の音の大きさが出力されます

「Spectrum」は今までのように「一つ」だけの数値が出力されるパッチではありません


複数のデータで構成されているものから

「一つ」だけ取り出す場合は

「Structure」というパッチをつかいます

「Structure Index Member 」というパッチは何番目のデータを

取り出すか指定するパッチです


こちらの「inspector」をひらきます

「index」というのが取り出すデータの番号になります

今回はオーディオメーターですので

複数の描画に一つずつアサインしていきます



「cube」というパッチを配置してください



「cube」は2種類ある場合もありますので

左図と同じ物を選び「inspector」を開き図と同じ数値を入力してください


cubeの「height」に先ほどの「Structure Index Member 」をつないでください

これで「Structure Index Member 」から出力された数値が「高さ」として表されます


「Structure Index Member 」と「cube」をあわせて10個ほど複製してください

しかし複製しただけでは何もおこりません

なぜなら全て重なっているからです

cubeの「X座標」を等間隔にずらして「Structure Index Member 」のindexを

左に配置された物から1ずつ上げていって下さい

こちらでオーディオメーターの完成です


今回は前回に比べ使用したパッチが多く「オーディオメーター」は

同じパッチが沢山ありわかりずらいので整理してみます

QCには「マクロ」という機能があります


「マクロ」はパッチを格納する「箱」だと考えて下さい

格納したいパッチ全部を選びQC上部の「Cleate Macro」を押して下さい

「Macro Patch」という名前の一つのパッチにすべて格納されます

マクロパッチをダブルクリックすると格納された中にはいる事が出来ます

出たい場合は「Edit Parent」を押せばマクロの中から戻ってきます

より複雑な作業を効率的にする為にマクロパッチをうまく使いましょう


それではテキストの描画です

「Image With String」というパッチを配置してください

「Billboard」のイメージとつなげて描画します

画面に「Hello World」と表示されます

※以下DJGJサイトより転記

「どんなプログラミング言語でも、最初は画面に「Hello World.」という文字を表示するのが定番です。この儀式を行わないと「K&R の呪い」がかかる、と言われています。」


では「Image With String」のinspectorをひらき「String」に出力したい文字を入力

文字の位置や色などは「Billboard」で調節して下さい


以上で完成ですマイクに聞こえるように声をだしたり

スピーカーからの音楽をながしてみましょう

音に反応してロゴやオーディオメーターが動いているのを確認して下さい


2010年1月17日日曜日

QCのマウス制御

前回のtipsではモーションでは自動で動くロゴをつくりました

しかしモーションだけならAE(After Effects)でもできますので

今回はAEではできないマウス対応を作成します


マウスをクリックするとロゴが右や左に回転していくという動きをつけます

前回のを参考にロゴを描画してください

前回は「Rotation」に「random」をつないでオートで制御しましたが

今回はマウスなのでパッチ一覧から「Mouse」を選んできてください

右図がMouseパッチです

X、Yは位置を表す座標

L、R buttonは左右クリック

Other buttonは他にボタンがついているマウス用

今回はクリックにあわせて回転していくのでL ButtonからRotationにつないでください


そして左クリックをすると、、、

おかしいですね

角度が1度だけ傾向きクリックをはなすと、もとに戻ってしまいます

Billboardの「Parameters」をひらいてもう一度マウスをクリックしてみましょう


右図にあるようにクリックすると

「1」「0」しか表示されません

これは電気信号が「流れている」「流れていない」

つまりONかOFFしか認識されていないからです


パッチの中から「Counter」を選んでください

こちらは「ON」に何回流れたかをカウントしてくれるパッチです

これで大丈夫

「Mouse」「Counter」「Billboard」とつないでください

そしてクリック、、、

1度づつ動いていきます

これで完成ですが、1度づつしか動かない場合は一回転(360度)動くのに

360回クリックしなければなりません。できれば10回程度で一回転してほしい

パッチの中から「Math」を選んでください

こちらは計算式を入力できるパッチです


カウント一回につき、30度回転していけば

12クリックで1周です、左図のように「×」30と入力

「1」増えるたびに「30」数が増えます

これで最後です


「Mouse」「Counter」「Math」「Billboard」とつないでください


上部のように右クリックもつないでみましょう

これで左クリックで左周り、右クリックで右回りになります

QCでモーションをつける

QCはプログラムです

画像を加工したり処理したりするのにはあまり適しておりません

もし画像加工をお望みならアドビ「フォトショップ」を使用してください


建築作業する場合、「段取」りといわれる作業の順番があります

いきなり家をつくろうとしても

土台から徐々に上に向かって建設していかなければなりません

プログラムやモーショングラフィックを作る場合も

まず素材となる画像などをあらかじめ制作しておいて

それを読み込み作業することになります


今回は基本となるモーションの作り方を紹介します

まずは何処からでも良いのでappleのロゴを手に入れてください

描画の際の手順に従ってロゴを配置します


画面のサイズより画像が小さい場合は

左図のように背景の上に画像が乗るように描画されます

今回はロゴだけを表示するようにします

フォトショップなどを使用されてる方はおわかりだと思いますが


「レイヤー」という概念が必要です

一番下の紙から徐々に上に紙を重ねていくという考え方です

当然一番上に真っ黒な紙をおいたら画面上が真っ黒になります

パッチの右上に数字が書いてありますこれがレイヤー番号で

「1」が一番最下層のレイヤーになります


「背景を持っていない」場合

左図のようなチェック柄が表示されています

これは透明である事をあらわしています


まずは背景を一番下に配置し

その上に画像を読み込んでいるので「画像のふち」が表示されてしまうのです

画像があらかじめ持っている背景を消す場合「描画モード」を変更します


「billboard」をクリックしてQC上部の「patch inspector」

を押してください

横の矢印を押していくと「Blending」という項目があるので

こちらをクリックしてください


「Over」「ADD」があります

こちらは説明が難しいのでより馴染んでいる方を選んでください

そして「Blending」の上の「color」で微調整をし

「画像の背景」が無くなるようにしてください

もし「Blending」などで対応が出来ない場合

画像加工ソフトで「切り抜き」をして下さい


モーションの付け方ですが

「billboard」パッチの入力部を注目してください

前回は「image」と「image」をつなぎました

image以外にもwidth、X position、rotation、、、などの穴があります

「width」は大きさです

「X position」は算数で習った座標という概念で考えてください

座標で水平になる線を「X」垂直になる線を「Y」

Xの座標の値が「X position」になります

「rotation」は角度、回転です


今回作るのはロゴが右や左に傾いて動くものを作ります

大きさや位置自体は変わらず回転で角度をつけます

つまり「rotation」に「何か」をつなげます


パッチの中から「Rndom」というパッチを選んでください

これは入力した値の中をランダムで出力するパッチです


「Rndom」の「patch inspector」をひらき

値を入力していきます

今回はminを-15 maxを15と入力します

これで計30度の回転の中をランダムに出力されます




モニタにうつっているappleのロゴが右や左に傾いて動いているのがおわかりでしょうか

素早く左右に傾くのでまるでブルブルと震えているようにもみえます


QCのモーションの付け方は

このように座標の値を数値で表しその値をかえる事によって動きが生まれます


QCの最初

DJGJのサイトをご覧いただき

QCの最初の描画を試してみましたか?

念のため私はこちらで説明します


まずQCを立ち上げてみましょう


QCにはデフォルトでサンプル等が導入されていますが

今回はゼロから作りたいので

一番左 basicを選びます


画面の見方ですが

左側がパッチ一覧

右側がモニタビューになります

もし間違って消してしまっても、これらは上部にある

「patch Library」「viewer」をクリックすれば戻ってきます


QCの画面に戻ります

バージョンによって差があるのですが

バージョン4.0の場合は始めから

「Clear」というパッチが配置されています


このパッチは「背景」を意味するパッチです

背景をなくしたい場合はこのパッチを選び「delete」キーで削除してください


まずは皆さんのお手持ちの画像ファイルを選び

QCの画面にドラック&ドロップしてください

私は「i」という名前の画像を配置したのですが



ビューモニターには何も表示されません

なぜならQCに画像を読み込んだだけなので

画像を描画する命令を与えていないからです

「Billboard」というパッチを探して配置してください

これは描画をする命令です、描画には「sprite」というパッチもあります

こちらは場合によって使い分けてください



「Billboard」には右図のように幾つもの入力口があります

つなぎ方にはルールがあり

イメージを描画したい場合はイメージの穴につなぎます


これで私の「i」画像が画面に描画されました



QCクリエイターの作品

私の場合クリエイティブな作業をするとき

つねに高い目標をもつことを意識します

なぜなら狭い土地を買いその上に家を建てるとき

土地より家の方が面積があるということはありえないからです


野球をする場合、やみくもにバットを振ればボールに当たり飛んでいく

ということは確率的に難しいです

バッターの場合、何度も素振りをしていくなかで

この辺りに来たボールは大抵打てると確信するまで素振りと打撃練習をします

そして打席にたった時、自分の打てるボールをピッチャーが投げてくるまで

球を選び自分のイメージに近い球だけを振りにいきます

多少の誤差がある場合はその場で修正をしていきます

クリエイターの場合は自分の世界を表現するにあたり

より自分の世界観に近いクリエイターを探し研究する事が一番の近道と考えています

そしてそのテクニックを学び、考え方を学びとります


クリエイティブな作業はアスリートの運動能力に近いものがあり

非常に根気と体力が必要になります

優れた作品を鑑賞する事によって

より高い目標設定と創作意欲をかきたてる作品を紹介していきます


DJGJでも活躍している

VJ、QCクリエイター、アプリ制作者、3Dデザイナーの「いも」さんの作品です


楽しそうにダンスをしています

クラブなど音楽イベントの展示では好評です

制作されているmixiアプリ「yourmusic+」のweb

http://www.yourmusicplus.net/

DJGJのQCワークショップにも参加されているので

興味のある方はQCワークショップにご参加下さい

2010年1月15日金曜日

QCのパッチ達

QCはあらかじめ幾つもの「パッチ」が用意されています

パッチは命令の種類に合わせて幾つかのカテゴリーに分かれて格納されています

下図はOSX10.4 TigerのQCの画面です

左側の青線で囲った部分がパッチの一覧になります

バージョンによりフォルダでわかれている場合など様々ですが

右図は拡大図です

Category(カテゴリー)とName(名前)

に分かれています

まず、何がしたいかを想像します

そしてその場合どのパッチが適しているかを選んでいきます

想像した効果が得られない場合、カテゴリーの中から似たようなパッチを選び

思った通りになるまで調節してください

もしうまくいかない場合はそれはパッチの問題ではありません

考え方を変えてもう一度パッチのカテゴリー選びからやり直してください

QCには様々なパッチが用意されていておよそ名前からは想像がつかない場合もあります

パッチ格納部の下にはパッチの説明があります

しかし英語の為、多くの場合理解することができません

こちらのサイトからすべてではありませんが説明があります

おなかすいたWiki!

http://wiki.onakasuita.org/pukiwiki/?Quartz%20Composer%2F%E3%83%91%E3%83%83%E3%83%81#tf0688c6

カテゴリー別に(17種)

Composite 
Controller 
Environment 
Filter 
Generator 
Gradient 
Interface 
Modifier 
Network 
Numeric 
Programming 
Renderer 
Source 
Tool 
Transition 
Virtual 
Clip

それぞれ異なった特性を持ちカテゴライズされた一覧から

狙った効果が実現できるまでパッチ一覧を良く探してみてください

また、良く使うパッチは一覧から探すのが面倒です

パッチ格納庫上部の検索窓から探しているパッチの名前を入力してください

すべてを入力しなくても一文字ごとに検索してくれるので

A、U、Dと3文字も入れれば「Audio input」が出てきます

いかに早くパッチを探し当てるかも作業効率に影響してきます

なるべく多くのパッチを使い用途を覚えてください