いまどきのMacなら無料で使えるビジュアル・プログラミング環境Quartz Composerに関して、そして、それを使って僕がどんなことしてるのか、中身や背景について書きます。
このエントリについて 僕はかれこれ30年ぐらい、音や楽曲を創ったり打ち込んだりするのが好きです。この10年ぐらいは、加えてライブステージなどで映像投射することも好きになりました。最近はむしろ後者ばかりになり、自分で作曲したり音を出すことは減ってきました。
いまは、感性とスキル吸収力さえあれば、誰でもこういったイメージ・プロジェクションを行うことができます。Quartz Composer も無料で利用できます。以下がQuartz Composerであれこれしている画面の例です。
僕はミクシィで新卒採用の仕事もしています。なので、技術的興味と吸収力に優れ、感性にも富んだ学生さんと接する機会が多くあります。リアルタイムCG, VR, AR, IoTといったキーワードが渦巻く現在、openFrameworks やProcessing といったビジュアルなプログラミング環境でいろんなことを試しているかたもいます。いまどきだと学校のカリキュラムにも入っていたりしますね。
採用として必要なコミュニケーションは、相手に興味と魅力を持っていただくこと と、相手のスキルの方向と広がりと成長速度をおしはかること のふたつです。相手とスキルと興味ベクトルの双方が交わる領域を見つけることは重要です。
「こんなことをしてるんです」を示すうまい単語もないですね。「VJ」が一番わかりやすく近いのですが、クラブのフロアの奥でドゥンドゥン4つ打ちEDMブースからウェーイというイメージが強すぎて、なんか違います。
(もちろんVJ要素も含んでると思いますし、大箱やフェスでの、明け方4時ぐらいのドラッギーな高揚感も好きですよ)
なので、どんなものを使って、どんなことしてるのかを説明します。自分のサイト の内容もこの手の活動の説明に寄せ、メモ も追記しました。
Quartz Composerとは Quartz (クォーツ) というのは、21世紀に入ってからのMac (Macintosh) のOSレベルのグラフィック表示機能のことです (無茶苦茶ざっくり説明してます)。
Quartzは、文字や色や画像あるいは動画の重ねあわせといったいろんな機能を持っている表示エンジンです。高機能なので、プログラマが文字で書くプログラムだけでは、Quartzができることを充分に引き出してやるのは困難です。なので、文字プログラミングだけでなく、ビジュアルにプログラミングできる環境もAppleから提供されています。このQuartz開発環境がQuartz Composer です。開発環境なので、Xcodeの仲間のひとつです。Appleの開発者向けサイトから無料でダウンロードできます。
(ちなみに似たような環境としては、vvvv がWindows向けに、Max がWindowsとOS X向けにあります)
Quartz Composerを実行すると、プログラミング部品を置いていく画面(Editor)と、結果を表示する画面(Viewer)の2つが開きます。背景を真っ黒に消去するClear という部品だけが、デフォルトで置かれています。
Quartz Composerのcomposition Quartz Composerの部品には、動画や静止画といった画像情報を扱うもの、それを表示するもの、数値演算を行うもの、ネットワークや各種デバイスからの入力を受け取るものなどがあります。部品(ノード)は画面上では四角い箱として見え、それぞれの特質によって入力や出力があります。入出力の種類は、数値だったり、静止画だったり、あるいは動画、文字列、音声、RSS情報、MIDI情報だったり、多岐にわたっています。これらの箱を組み合わせ、互いの入出力をマウスでつなぎ合わせていき、望むグラフィック出力を得る。これがQuartz Composerでのプログラミングです。
Quartz Composerで作ったプログラムはComposition と呼ばれます。具体的には拡張子qtzのファイルです(昔はXML、いまはバイナリ)。OS Xに付いている各種スクリーンセーバや、iTunesのビジュアライザーも実はQuartz Composerのコンポジションです。
静止画・動画・文字の重ねあわせ では、基本技を組み合わせたコンポジションを紹介します。Plumusic Vol.9というイベントで、女性シンセアーティストmi-on さんの背景にVJしたときのものです。
Drawing Flower, Deep River by mi-on
和音
mi-on
エレクトロニック
¥2000
まず、いくつかの静止画をQuartz Composerにdrag & dropするだけで、Image というノードが生まれます。単に静止画を出力するだけのノードです。
これを表示するため、Billboard というノードも置きます。Quartz Composerが司る3D空間上に現れる、常にこちらを向いた一枚モノの表示領域です。3D座標変換を意識しない四角いポリゴンと考えてもいいでしょう。
そして、Imageの出力をBillboardのImage入力につなぎます。これで、画面の中央に画像が出てきます。これがHello, World的な、Quartz Composerプログラミングの最初の一歩です。
さらに表現を加えましょう。一定間隔で、さまざまな画が出てくるようにしましょう。
Multiplexer という部品を置きます。これは複数個の入力を受け、指定した一つだけを選んで出力するものです。表示したい画をいくつかImageとして置き、Multiplexerの入力につないでいきます。これだけで、ライブステージでMultiplexerのパラメータをいじってやれば、いろんな画をぱしぱし出し分けるVJの基本ができます。
さらに自動化するにはInterpolation を使います。これは開始値(Start Value)から終了値(End Value)まで、Durationで指定した速度で連続的に値を発生するものです。機械でいうと回転歯車、プログラミング言語でいうとforループのようなものです。
Imageを10個つないであるのなら、Start Value 0からEnd Value 9までInterpolationで連続値を発生させ、MultiplexerのSource Indexに接続。これでパラパラ漫画ができます。
さらに実際には、視覚的心地よさのため、画の切り替わりがスムーズにフェードするようにしましょう。
Billboardを2枚用意して重ね、透明度(Alpha)によって背景にあるモノが透けるようBlendingをOverに設定します。(当然ながら、Alpha BlendingなBillboardやSpriteがシーンに増えるほどGPU描画負担は増えます)
さらに、Billboardの透明度をパラメータで調整できるようにします。Billboardは直接はAlphaパラメータを持っていないので、HSL Color という「色」を出力するノードを設置し、これの出力をBillboardの入力Colorにつなぎます。HSL Colorは、その名の通りHue, Satulation, Luminosityに加えてAlphaの4入力から色を生成して出力するノードです (RGB Colorというノードもありますし、これらの逆関数Color to HSL, Color to RGBもあります)。なので、HSL Colorの入力Alphaに0.0から1.0の範囲で、画像の切り替えにしたがっていい感じに透明度が増えたり減ったりする入力を入れてやればいいのです。
もちろん、奥にもう一枚用意したBillboardには、一つ前だか後の画を入力しておいてやり、いい感じに今の画と次の画を重ね、透明度を変化させ、クロスフェードさせます。このあたりのロジックは、MultiplexerやInterpolationと、各種数値演算ノードを好きなように組み合わせて実現しましょう。楽しい頭の体操ですし、うまく動くと、いくつもの歯車を組み合わせてメカを作り上げたような面白さがあります。
(ここでは、与えた番号の画像と、次の画像を出力する部分をまとめてグルーピングというかモジュール化し、ひとつのノードとして扱っています)
実際にはImage With String という、指定した文字列から画像を生成するノードも組み合わせています。
また、背景に出てくる揺れる蝋燭は、静止画ではなく動画ですが、Quartz Composerに動画をdrag & dropするとImageではなくMovie Importer というノードになるので、あとは静止画と同じように扱えます。Movie Importerには、動画再生を全体クロックに合わせループ再生するか、非同期に自分のクロックとスタート・ストップシグナルを受けて動作するかの属性切り替えもあります。ほら、だんだん面白そうに思えてきたでしょう?
なお、Billboardは3Dを意識しない、常にこちらを向いた一枚ポリゴンですが、3Dのアフィン座標変換が可能なSplite というノードもあります。なのでSpliteにはX, Y, ZのPositionとRotationパラメータが一気に増えます。これを使った例も示します。
実際のプレイ 実際には、ある程度まで組み上げた半完成状態のCompositionを当日のステージに持っていきます。このほうが、実際の現場のノリや変更、あるいは演奏者の表情や目配せといったものに追従できますし、それこそがプレイだからです 。当日初めて会った演奏者と意気投合して急遽何かやるなんてこともできますしね。
現場では、Quartz Composerの画面にて、各種パラメータを出し、現場判断でいじり、見せたり消したり、色味や大きさや速さやマテリアルを変えていきます。ロジカルな構成や構造を変えてしまうこともあります。加えて、MacのOS XとQuartzとGPUが同時に処理できる能力には限りがある ので、不要なノードやモジュールをそっとdisableしたり、逆に見えないレイヤの下に置き、観客の注意力の隙間をみて事前にenableしておく(温めておく)こともします。このあたりはGPU計算量への洞察 が必要です。
こうして、アナログ・シンセサイザーのパッチングや、ギターのエフェクターつなぎ変えのごとく、現場でリアルタイムで感性を理性に変換してぱしぱし制作していけるのが、グラフィカルな開発環境であるQuartz Composerの強みです。openFrameworksやProcessingといった文字プログラミングでは、なかなかこうはできません。演者の表情を見て、あっこいつ、次のブレイクで何か仕掛けるつもりだな、よーし、と、コンポジションを再構成して備えることすらできます。いわば「8小節あとが納期のハック 」です。右脳と左脳を全力で使う、心地良い頭脳スポーツです。
そもそもの表現者としてのポリシ に立ち戻ると、通常、VJはあくまでも、演奏内容や演者の表現をいい感じに補完 し、観客に総合的な「いい体験 」をもたらすのが役目です。決して「VJとしてのオレはこんなことができる!」というドヤ顔な各論の見せびらかしをするためにいるのではありません。演者がよい歌、よい表情、よい演奏を視覚的に提供しているとき、VJはそれへの集中を観客から奪うべきではありません。アンサンブルこそが結果であり、料理でいえば最後に口に入る味です。VJが提供する視覚効果はステージにおける調味料であり、いわば、おいしいパンに塗るバター、お刺身に添えるわさびです。お客さんの口に、山盛りバターや大匙のわさびをねじ込むようなことはすべきでありません。
ただ、ここで紹介しているいくつかは、比較的ビジュアル・プロジェクションに寄せたケースです。演奏者が一人で淡々とシンセを弾いているとか、黙々と即興演奏(インプロビゼーション)を繰り広げているので、ビジュアル表現の鑑賞にも重みをおいて味わっていただく、あるいはそういった即興とVJとの阿吽の呼吸をも来場者に楽しんでいただく、といった風合いのものです。こういうケースでは、プロジェクションの表現の自由と幅が広がり、責任も増してきます。
さらなるコンポジション もう少し、Quartz Composerのいろんな部品を使ってみましょう。
Sphere という部品は、名前の通り球です。Image入力に与えられた画像が球全体にカラー・テクスチャマッピングされます。具体的には分割されたポリゴンの集まりです。ポリゴン分割は割と粗めで、素直に高解像度な画像をマッピングしてやると「ゴツゴツしてんなぁ…」という見た目になってしまうのですが、ここは逆に持ち味にもっていきましょう。
綺麗な画像をそのまま入力せず、前段に「粗さが味」になるようなフィルタをかましてやります。ここではHexagonal Pixellate というフィルタをかまして、六角形のモザイクをかけましょう。そして、モザイクの粗さもInterporationを使って動的に変化させます。さらにSphere本体もぐるぐる回し、かつ位置もZ座標軸上を前後に動かします。
これをコンポジションの基本としてやっているのがこれです。Hexagonal Pixellateのパラメータをベンドしていくのはなかなか気持ちいいので、僕は時々使います。
SFH 5 / SFH
この六角モザイクフィルタをかける前の画像はこんなものです。Sound Leavesという名前のイベントなので、何かしらモティーフに「葉」を使うのですが、これがああなるというのは、まさにユニークなフィルタが醸し出すケミカルです。
これをさらに現場でぐちゃぐちゃにインプロヴァイズしたものが、下のSound Leaves 6 / SFH (excerpt)の0:45ごろからの流れです。
特にSphereが遠ざかっていくシーンでは、背景バッファのClearをわざとdisableし、Z軸のむこうに過去フレームの描画ゴミが溜まっていくまま にして、ドラッギーな気持ちよさを醸し出しています。
また、String to Imageには、単なる文字列指定のほかにフォント指定、カーニングやオフセットといったパラメータもあり、このあたりを動的にいじるのもツボです。先ほどのビデオの頭の方でも使っていますが、積極的に使っているのがこれです。
映写環境 プロジェクションを映写するフロアの環境によっても、心地良い効果を作り出すことができます。
以下は、六本木のバーのさらに奥にある、ダンスレッスンの部屋 かつ 岩盤浴もできるガラス張りのスタジオでのパフォーマンスの録画です。四面に鏡があるので、東南アジアのパーカッシブなテクノに般若心経を載せた曲調にあいまって、プロジェクションがさらにプロジェクションを生むという不思議な空間になっていきます。(文字間カーニングを異常な値にセットしたString to Imageでのお経横流しもしています)
Heart Supra / 211 apart
また別のアイディアとして、投射する壁面の手前、演者と観客のあいだに紗幕を何枚も垂らすことができるフロア (西麻布Bullet's ) では、空間にいくつものレイヤが重なっているような気持ちよさを演出できたりします。
素材のフィールドワーク こういった出演依頼は急に飛び込んできたりしますし、締め切りや時間に追われてネタと発想の両方を考えるのもつまらないので、たまに、なんでもない日に動画や静止画のフィールドワークに出かけます。出先でふと空いた時間にこれを行うこともあります。
静止画などはCreative Commonsで変更・上映可能なライセンスのものを探したり、あたりを付けておくと便利です。flickrのライセンス指定検索機能がおすすめです。
フィールドワークは、感性のみで行動します。「この商店街の奥の切れかけた蛍光灯のノイズを再生速度50%に落としてマスクフィルタとして使うと白日夢のなかの憔悴みたいな雰囲気になって良いかも」といったわけのわからない思考 を行う必要があるので、通常の頭の使い方とは違います。なので、他の用事と同時にするのも難しいです。
たとえば以下はアガるシーンにも、鎮静(chill)なシーンにも合い、ループ性も高い便利な動画マテリアルですが、これは確か江古田のラーメン屋の店先の電飾看板 です。「ラーメン 餃子 チャーハン 」といった文字パターンが流れる電球群をスマホで動画接写し、縦横倒したもの。仮アテしてある音はさすがにラーメン屋のものではなく、手元のmicroKORGか何かかな。
なるべく意外で予想もできないマテリアルを使ったほうが面白いですし、こうしてブログのネタにもなります。狙ってやるのでないかぎり、ベタなネタや演出はやりたくありません。「爽やかな広がり」で青空ぼやーん、「夜のさざめき」で東京タワーや行き交うタクシーの夜景なんて、カラオケ屋の「ロケ地東京」じゃあるまいし、くそくらえです。センスの悪いものをお客さんの目に入れるのは失礼なことです。
これは1990年代に新宿でやったライブにPV的に画を当てたものですが、イントロなどに出てくる建築的なマテリアルは、島根の漁港に置いてあった漁礁 です。加えて、出会い系サイトに並んでいた大量の女の子の顔写真 をzshとwgetか何かでバッチ取得し、フィルタ処理をかけまくったものを2フレーム周期ぐらいで目が痛くなるよう麻薬的に入れ替えています。3:23あたりから、同じく中華料理屋の電飾マテリアルも断続的に出てきます。
Quartz Composerの入門については良い本がありますが、
VJの道具として使う視点での技術的背景やフィールドワーク、ライブプレイ実施について書かれたものはほとんど見たことがありません。なので書いてみました。何かの参考、触媒になれば幸いです。そして、面白いものができたり、プレイするとき、呼んでください!
![【Amazon.co.jp限定】マイ・インターン ブルーレイ&DVDセット(初回仕様/2枚組/デジタルコピー付)(B2ポスター付) [Blu-ray]](https://images-fe.ssl-images-amazon.com/images/I/51h6Oj%2BFmML._SL160_.jpg "【Amazon.co.jp限定】マイ・インターン ブルーレイ&DVDセット(初回仕様/2枚組/デジタルコピー付)(B2ポスター付) [Blu-ray]")
![Phaedra [Japanese Mini-LP Sleeve] by Tangerine Dream (2013-12-03)](https://m.media-amazon.com/images/I/51ta-AwVKBL.jpg "Phaedra [Japanese Mini-LP Sleeve] by Tangerine Dream (2013-12-03)")
![Non-Stop Erotic Cabaret [Explicit]](https://m.media-amazon.com/images/I/61Kuvu2CcoL.jpg "Non-Stop Erotic Cabaret [Explicit]")
