とりあえず使えるQuartz Composer講座➀〜音に反応させてみよう〜
自作でエフェクト作ったり、自分でプログラムして、音に合わせて動くもの作ったりしたい！そんなあなたに。
今回は「Quartz Composer」というビジュアルプログラミング言語を紹介したいと思います。
VJをやってる人は名前ぐらいは聞いたことあるかもしれません。そもそもVDMXのエフェクト自体これでつくられてるものもありますね。iTunesのビジュアライザにもそのまま流し込めたりもします。
とりあえず、これがどんなことができるかというと
だいぶ手前味噌な感じではありますが、多少齧った程度の自分でもこのぐらいはできます。もちろん自分なんかと比べ物にならない、もっとすごいVJ素材として作り込まれてたり、twitterと連携してアイコンなんかをグラフィカルにVJ素材として出しちゃう人もいます。
プログラミングといえば敷居は高いかもしれませんが、意外と簡単でパズルみたいに簡単にできますので、今回はとりあえずは使えるQuartz Composer講座をやってみたいと思います。
独学かつQuartz Composerを触るのも久々なので、間違ってたり怪しい部分はいつも通りあると思いますが、許してください、もしくは一報くだされば。
ということで今回は、Quartz Composerの基本的な構造と、音に合わせて動かすということをやってみたいと思います。
（以下Quartz Composer＝QCと略します）
①ダウンロード
http://kano-lab.org/archives/2053
大体↑ここに書いてある通りです。
Macの開発環境の一種みたいなものなので、Appleのデベロッパ登録するともらえます。
ここにApple IDとパスワード打ち込んで
上の方の右側にあるXcodeの項目へ行って、ダウンロードすると中に入ってると思います。サイズがかなり大きいです。
開くとこんな感じの画面が出てくると思います。
魔法の杖アイコン(たぶん)の「Quartz Composer」を開きます。
いろいろありますが、今回は「Basic Composition」を使いたいと思います。
触れるようになったら、他のテンプレートを見て、参考にしてみるのもいいと思います。
とりあえず、Chooseで「Basic Composition」を選んでみましょう。
はい、画面が出てきます。よくわかりません。
とりあえず、プレビュー画面を起動させましょう。
上のバーの右端にある「Viewer」をクリックしてください。
QC内で作られた映像なりなんなりは例外はありますが、最終的には大体ここに表示されます。
ここでは、Runマークが押されていることを一応確認していおいてください。
①とりあえず画像を表示してみる
QC内に適当に画像をドラック&ドロップで画像を投げ込んでみましょう。
ここでプレビューを確認しても何も映っていません。
言うなれば、今はコンテンツ自体はあるけど、それを映像として出す出力がない感じです。
そこで、映像を最終出力するモジュールを呼び出しましょう。
さきほど、Viewerを出した上部バーの左端に「Patch Library」というのがあると思います。
選択すると「Library」というものが表示されます。
ここはQCのすべてのパッチ関係が詰まっているので、覚えておくといいです。
では、検索欄で「Billboard」を入力して、出てきたものをダブルクリックなり、ドラッグなりしてQC内に入れましょう。
このBillboardパッチが出力装置の役割をしています。最終的な出力に関するパッチは大体「Billboard」のように青色をしているのでそこも頭の片隅に置いておくといいかもしれません。
では、画像とBillboardを線で繋いでみましょう。
画像には【image ○】、Bilboardには【○ image】とボタンがあると思います。
画像側の「○」をクリックして動かすと、線がくっついきます。その状態でBillboard側の「○」をクリックすると線が繋がります。
この状態でプレビューを見ると、画像が表示されているのがわかると思います。
基本的にこの構造でQCは成り立ってます。これらの間にいろいろなパッチを挟んだりしていい感じに作っていきます。
②音に反応させてみよう
音に反応する映像素材とかやっぱり自作してみたいですよね。
とりあえず、一番基本的な音に反応して画像が大きくなるというのを目指してやってみたいと思います。
「Library」で「audio」を検索して、「Audio Input」パッチと「Audio Processor」パッチを出し、下記のように繋ぎましょう。
(※基本的にはパソコンにマイクが付いている場合、自動的にマイクからの音声がオーディオとして使用されますが、もし別のオーディオインターフェイスなどを使用したいときは、 後述いたしますが上部のバーの「Patch Inspector」を押すと下記のウィンドウが出てきますので、リストから「Settings」を開き、「Select a Specific Audio Source」にチェックを入れ、オーディオデバイスやソースを選ぶことができます。)
「Audio Processor」の出力側の項目を見てみると、「Lows」「Mids」「Hights」とあります。DJとかやっている人は馴染みが深いかと思いますが、マイク等で入力された音が音域に分けられてここから出力されるというわけです。
（※「Audio Processor」パッチに関しまして、Low・Mid・Highといった曖昧な設定じゃなく、もっと細かな音域の設定をしたいという場合は「Audio Input 」パッチの後に「Structure Index Member」パッチをつなげることで、16個の指定された音域を選ぶことが出来ます。「Inspector」内のIndexに0~15の数字を入れることでそれに応じた数値が出力されます。）
さて、ここで例えば、「Billboard」の「Width」に繋げば音に合わせて大きくなる…と思いきや、大体の場合、「Audio Processor」から出力される数値が小さすぎて、 何も表示されない、微妙になんか動いているという状態だと思います。
それで数値を大きくする必要が出てきます。
「Library」から「Math」を取り出しましょう。
取り出しますと、「＋」のパッチが 出てきます。このパッチで数値に対して足したり引いたり掛けたり割ったりするわけです。
さて、ここで出てくるのが、先ほど少し注釈の中で触れました「Inspector」です。
これは最初から表示されているとは思いますが、もし表示されていない場合は上部のバーの「Patch Inspector」を押して出しましょう。
「Inspector」が表示されている状態で、「Math」パッチをクリックするとこのように表示が変わると思います。
中身を説明していくと、
・「Initial Value」現在「Math」パッチに入力されている数値
・「Operation#1」四則演算の種類を選べます。
・「Operand#1」入力された値に対して演算で使う値
つまり、「Initial Value」に1の値が入力されている状態で「Operation#1」が「＋」で「Operand#1」の値が「2」だった場合は 「1+2」で「3」という数字が 「Math」パッチから出力されるわけです。
(※○＋△×□のようなを演算の数？を増やしたい場合は「Inspector」上部の現在「Input Parameters」と書かれているところをクリックするとその中にsettingという項目があるので、その中にある「Number of Operations」の数を変えることで増やすことができます。)
この「Math」パッチを「Audio Processor」パッチと「Billboard」パッチの間にかまして値を大きくしてみましょう。
とりあえず「Math」パッチは入力された値に対して100掛けてみるという設定にしました。
音に合わせて、画像が大きくなったのがわかりますでしょうか。
一応、ここでやりたいことは完成したわけではありますが、このままでは音によって画像が大きすぎたり、小さすぎたりして、あまり汎用性がないのでもう一つ工夫をしたいと思います。
「Library」から 「Range」パッチを出しましょう。
こちらのパッチは簡単に説明すると入力された値の最小値と最大値を決めることのできるものです。
「Range」パッチの「Inspector」を見てみると、「Range Min(=最小値) 」「Range Max(=最大値)」があります。
これを使うことによって、音に反応して大きくなる画像の無音時の大きさ、音が大きくなったときの最大の大きさを指定することができるわけです。
とりあえずこの場合ではMin0.5のMax2にしてみました。
「Renage」パッチの出力は「Clipped Value」と「Rolled-Over Value」の二つあります。いまいち自分もまだわからないのですが、前者が単純に入力された数値に従って出力、後者は音が小さいかったり大きすぎた場合でもそれに合わせて平均化（？）されるようなイメージです。実際この認識で合ってるかは怪しいですが、両方試してみて、試行錯誤してみるのがいいと思います。個人的には「Clipped Value」の方が思った通りに動いてくれる気がします。
これでとりあえず、ある程度音に反応する汎用性を持った素材が作れると思います(多分)
ここに例えばMotion Blurであったり、3DTransformationだったりHSL Colorだったり、LFOや Iteratorを使ってこねくり回したりしたら、さらにいろいろできると思いますので試行錯誤していきましょう。
とりあえず基本的なQuartz Composerの使い方は理解できましたでしょうか？
なかなか自分自身も勉強中のため、拙い講座で申しわけありませんが、またわからないところ等ありましたら、出来る限り応えていきたいと思いますのでよろしくお願い致します。
これらQCで作成したファイルはそのままVDMXのバンクに突っ込んで使えます。ものによってはすぐ落ちますので注意です。その場合はQCはSyphonに対応していますのでQCから直接syphonに飛ばすなどの方法で対応していくといいと思います。(たしかsyphonのQCパッチが調べるとあるはず)
またQCでいろいろやる上で参考になるサイトなど記載しておきます。
これは未完ではありますが、わかりやすく基本が学べます。
QCでのVJ素材の作り方の講座です。
Quartz Composer/パッチ - おなかすいたWiki！
QCの様々なパッチの機能が日本語で紹介されています。
QCやる上でとても便利なサイトなので、こういうことやりたいんだよなーというときには見てみるといいと思います。
VDMXの本元のサイトにのっている、QCで作ったものをVDMX上でFXとして使用するやり方です。英語ですが、見ながらやればそんなに難しくないのでやってみると吉です。VDMX上にスライダーなどを表示させる場合、たしか大文字小文字等もしっかり同じにしないと認識されないので注意です。もしかしたら記事で書きます。
あと使ってくるとわかる諸注意など。
自分の使ってるバージョンのせいなのか、保存せずに閉じた場合、なぜかQCがまるごと落ちる不具合が起こってます。複数のファイル開いている場合だと悲惨な目にあいます。
あと、QCへの読み込み自体はmp4でもmovでもgifでもいけますが、指定したファルダ内のデータをサーチする「 Directory Scanner」はmp4は認識しません。settingでサーチを「image」にすることによってgifを読み込んだりすることは出来ます。
こんな感じで、今回は終わりたいと思います。長々と見てくれた方はありがとうございます。他にももっと良いQC講座の記事はあると思いますが、これを見てやってみようかなとなってくれましたら幸いです。
Yuichi
iphoneでライブペイントの環境をつくってみた話
iphoneに別途コネクタを挿して映像出力装置にしてしまう商品は探してみるとよく出てます。iphone5以降のLightningケーブルになると、なかなか値段は張ってしまうのですが4S以降のものなら、わりと安価でHDMIからコンポジットまでよりどりみどりだったりします。
(↑なんだかんだ言ってVGA、コンポジット、HDMIまで揃ってしまったケーブル群)
元々はiphoneのVJアプリとかと連携できればいいなと思って買ったものですが、今回、私がレギュラーで出演させていただいている「ちゃいりふ」というイベントでライブペイントをするという話になり、それにこのiphoneの映像出力環境が使えないかと思いました。
それにあたって使用した機材。
・iphone→コンポジット変換ケーブル
Amazonベーシック Apple認証 (Made for iPhone取得) iPhone用 コンポジット映像信号対応AVケーブル 2.0m
- 出版社/メーカー: AmazonBasics
- メディア: Wireless Phone Accessory
- 購入: 2人 クリック: 4回
- この商品を含むブログを見る
iphoneのosのバージョンの違いのせいもあるかもしれませんが、他のHDMI、VGAの変換はiphoneの画面自体常にミラーリングされますが、コンポジットのみミラーリングはされず特定アプリでの動作しかしませんでした。このケーブルはUSBも付いていて、画面出力しつつ充電機能も使えます。
・iphoneスタンド
中野ブロードウェイ内の確かじゃんぱら？で購入。それまではゴリラポッドでやる予定でしたが、見つけてよかったと思ってます。写真の通りかなり長さがあり、針金のように曲げて調節しますが、これがなかなかの硬さで安心感があります。
・20mビデオケーブル(秋葉原で1000円以下で購入)
これ用に買ったわけではないですが、今回これがなかったらわりと詰んでました。以外と安いので持っておいて損はないですね。
上記の変換ケーブルとビデオケーブルを繋ぐのに使用しました。実は持参してなくて、箱の方にお借りしました。本当にありがとうございました。
・iphone書画カメラアプリ「CameraVision -書画カメラ」
書画カメラとかアプリであるのかなと調べたら真っ先に出てきたアプリ。必要な機能は揃えており、イベント中一度も落ちなかったし申し分ない性能でした。iphoneのフラッシュも並行して使えるので、場合によっては別途照明器具なしでも使えるかも？
https://itunes.apple.com/jp/app/cameravision-shu-huakamera/id412366083?mt=8
今回、ぶっつけ本番ということで、暗さ等心配はあったのですが、主催が買ってきてくれた照明スタンドのおかげもあり、思った以上に良い実用に耐えうる映像を出すことができたと思います。
画像等は出しませんが、twitterにて、ハッシュタグ「#ちゃいりふ」で検索かけてもらえるとライブペイントの実際の様子が出てくると思います。
今回は箱側のモニターにて映像を出しましたが、同じようなライブペイントの条件（スケッチブックなどに直接アナログで描く）だとプロジェクターなどを使えば、かなり省スペースにライブペイントが可能なのではないかと思います。
やり方としては、本当にアイデア次第で、それこそDJを映すことも考えられますし、数台iphone持っていて、VJミキサーを噛ませればリアルタイムに映す角度を変えたりなど夢が広がります。
やはり、ビデオ出力できるカメラを持っている人はあまりいないと思いますが、iphone4を持っている人はいると思います。とりあえず初期費用があまり掛からずに出来るというのが強みではないでしょうか。
ぜひ、イベントを盛り上げる一要素として、こういうのも方法として考えてみるのもいかがですか？
