QCWS #5 レポート

2010年1月30日(土)
アップルストア銀座3F
「Quartz Composer ワークショップ #5　エンジルチカラ２篇」

今回は3作品の展示とQCの可能性をご覧いただきました

ゲストは前回「エンジルチカラ篇」でおなじみの女優「白山カラン」

・QCでつくる「IR Pen」

・QCでつくる「３D映像」

・QCでつくる「ビデオインスタレーション」

３人の作者の作品はそれぞれ異なる技術や感性、発想で制作されていて

作者のバックボーンとなる知識や感性の上に「新しい開発環境」として

表現の幅を広げる可能性があるという提案でした

私がDJGJの主宰である奥平氏と出会ったのは５、６年前のことです

実写映像制作がメインであった私は活動の幅を広げるため「AfterEffects」での

モーショングラフィック映像を制作に挑戦していたころ

作品発表の場として考えたのが「VJ」といわれるクラブでの映像演出でした

SNSでVJを募集していた奥平氏に出会い、共に活動し勉強していく中で

多くのクリエイターと交流し「otonaVJ」というVJ集団に発展していきました

現在は「DJGJ」として

アップルストア銀座で行われる「QCWS」

アップルストア渋谷では「VJWS」を作品の発表の場として活動されています

「DJGJ」とは交流の場としての集まりであって

メンバーか非メンバーのような区別もなく

「知り合い」と「その知り合い」といった程度

mixiの「マイミク」に近い感覚です

イベントの後に「喉かわいたからお茶しようか」から始まった「お茶会」

人とつながるのが「面白い」とお茶会に積極的参加いただく方も多いです

高い参加費を払わされるイベント業者の「交流会」と違い

近所の飲食店でお茶をして「割り勘」という「打ち上げ形式」

機材を運ぶ為、車移動メインになるのでノンアルコールでも許されるお茶会は

学生や全くの素人、他業種の方からも好評の様子

「QCWS」でおなじみのクオーツプログラマー「横堀」氏は

QCWS#1のお客さんでしたが本人曰く「ミイラがミイラ取りになった」そうです

石井氏からは「人間もQCパッチと同じだ。つながれ！」との名言がうまれました

次回QCWSは４月開催です

奥平　DJGJ　http://blog.djgj.jp/

横堀　Dasaq’s　http://dasaq.wordpress.com/toc/

石井　yourmusic+　http://www.yourmusicplus.net/index.php

白山からん　ブロGOOD Days　http://ameblo.jp/s-karan/

「Quartz Composer ワークショップ #5 エンジルチカラ２篇」

2010年1月30日(土)
アップルストア銀座3F　無料

17:00-18:00

Quartz Composer User Group による、無料ソフト「Quartz Composer」をトークとパフォーマンスで探求するワークショップです。
第5弾は昨年、圧倒的な演技で魅了した「エンジルチカラ」のパート2です。
舞台女優・イラストレータと独自の世界を演出している 白山からん と共に、Quartz Composer で生み出される、インタラクティブな映像をご覧頂きます。
アーティストと Quartz Composer の新しい関係をお楽しみ下さい。
Quartz Composer をまだお使いでない方でも楽しめる内容です。

DJGJ　http://blog.djgj.jp/

（※DJGJサイトより転記）

QCでRSS表示

RSSは、ニュースやブログなど各種のウェブサイトの更新情報を簡単にまとめ、配信するための幾つかの文書フォーマットの総称である。（wikiより転記）

AEで作る映像とは全てオフラインでありネットワークを使いオンラインでデータを取得する事はできません

QCではRSSを取得しリアルタイムで描画することができます

「RSS inporter」を配置して下さい

バージョンによっては名称が違いますが「RSS」は一緒です

「Information（全体の情報）」「Article List（記事の内容）」「Downloard Progress（未解読）」「Done Signal（未解読）」になります

こちらは「Structure」つまり複数のデータが混在しているデータ形式になりますので

そのまま描画パッチの「Billbord」や「Sprite」につないでも描画されません

「Structure」を解読するには「Structure Index Member 」を経由し「Billboard」にして下さい

画面に「apple hot news」と表示されるのを確認して下さい

これはアップルのニュースサイトからRSSを取得しているからです

「RSS inporter」のパラメーターを開き取得したい「URL」を入力して下さい

URLの入力で気をつけなければならないのは

「http://」は削除し「feed://」に書き換えて下さい

これで「RSS」の取得は完了です

しかしこのままでは取得した「RSS」の全体のタイトルを表示したにすぎません

記事を表示するには「RSS inporter」の「Article List」につないで下さい

「Article List」の中には「title（タイトル）」「url（URL情報）」「 description （中身）」

が含まれています

こちらを取り出すには「Structure Key Member」が必要です

「Key」に「title」と入力する事によって記事のタイトルを表示する事が出来ます

「Structure Index Member 」の後に「Structure Key Member」を追加し

前回も登場した「image With String」でお好みのフォントを指定し「Billboard」につなぎます

つまり指定した「URL」の「０」の記事の「title」を描画したことになります

しかしこれでは「０」の記事しか読む事が出来ません

RSSは幾つもの記事が集合しているので「Structure Index Member 」が「０」のままでは

都合が悪いので自動的に変わるようにしていきます

「Structure Count」を配置してください

こちらはStructureデータが幾つあるかを数えるパッチです

つぎに「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

（おなかすいたwikiより転記）

非常に便利なパッチですので必ず覚えておきましょう

下記の図のように配置してください

これでRSSの内容が順番に表示されていきます

最後に演出をほどこします

私は記事が変わるときに急にかわるより、徐々に消えていって徐々に現れる

つまり「フェードイン」「フェードアウト」してほしいので

「Billboard」のカラーに「Interpolation」と「HLS color」をつなぎます

「AE」などの映像ソフトの場合はディゾルブというエフェクトが

あらかじめあります。また「透明度」を調節する事によってフェード効果が演出できます

QCの場合もレイヤーですので「HLS color」にある「アルファチャンネル」の値を「０」

にすることによって画像は描画されているが透明にすることが可能です

「interpolation」は初期値０から終了値１を指定

「inspector」モード名の矢印で「seting」モードにします

左図のような座標が表示されます

下を「０」上を「１」になっています

このままだと「フェードイン」は適応されますが

「フェードアウト」は適応されません

「customized」を選択し右図のようにグラフを変更します

これで「０」「１」「０」つまり「フェードイン」

「フェードアウト」ができます

最後に画面の寂しい部分にお好みのデザインを描画し完成です

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方式」の２つがあります

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

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

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

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

「HSL Color」パッチを採用

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

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

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

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

以上で完成です

QCでビジュアライザー

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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」で調節して下さい

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

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

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

QCのマウス制御

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

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

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

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

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

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

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

右図がMouseパッチです

X、Yは位置を表す座標

L、R buttonは左右クリック

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

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

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

おかしいですね

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

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

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

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

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

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

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

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

これで大丈夫

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

そしてクリック、、、

１度づつ動いていきます

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

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

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

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

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

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

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

これで最後です

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

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

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

QCでモーションをつける

QCはプログラムです

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

「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のモーションの付け方は

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