DOMMUNEでライブコーディングVJした

3/21(木)、DOMMUNEでVJしました。僕は自作のVJシステムVEDAを使って、GLSLのライブコーディングを行いました。

出演の経緯
僕のVJについて
- システム/機材

出演の経緯

www.dommune.com

DOMMUNEは言わずと知れた映像配信メディア。大学生の頃から観ていたので、自分が出演できることになるとは……

収録は恵比寿駅から徒歩20分のDOMMUNEのスタジオで行われた。高級マンション街に急にクラブっぽい文化が現れて不思議な感じだった。

今回のイベントは、日本のオーディオビジュアル集団BRDGと、中国の音楽レーベルFunctionLabのコラボ企画だ。 BRDGは主に東京でイベントを開催してるんだけど、これまでに何度か中国遠征をしている。今回は中国ツアーの締めくくりとして、FunctionLabのメンバーと共にDOMMUNEでライブすることになった。

僕のVJについて

僕はUnityやTouchDesignerを使ってVJすることもあるけど、今回は「ライブコーディングしてくれ」というオーダーがあったので、自作のVJシステムであるVEDAを使うことにした。

VEDAはGLSLでライブコーディングVJをするためのAtomパッケージだ。僕は昨年の東京Node学園祭やAlgoraveなど、数々のイベントでVEDAを使用してVJしてきた。

blog.gmork.in

DOMMUNEでは、DJを写したカメラの映像に、VJの映像を合成して配信する。 VJの映像は黒抜きで合成するため、映像を黒メインで作っておくと効果的、とのことだった。

「ライブコーディングっぽさ」「黒メイン」を考えた結果、僕の作戦は以下のようになった。

素材は基本モノトーンで作っておく
色収差やカラーリマッピングなどのエフェクトで色を乗せる
ライブコーディングで座標変換や変形を行う

GLSLでのVJというと、レイマーチングによる3D表現を行う人が多いけど、僕はあまりレイマーチングに慣れていないのと、シンプルな絵面を目指したので、今回はレイマーチングの採用を見送ってオール2Dで表現することにした。

VJの反省としては、ネタをシンプルに寄せすぎてしまったな〜というのがある。 DJがミニマルな感じだったので上手いことマッチして助かった……。次に向けて、もっとバキバキした絵を出せるような仕組みも持ちネタとして作っておきたい。

あと、ライブコーディング成分をもっと出せると良かったな。事前のトラブルとかで緊張してしまい、簡単な座標変換くらいしか出来なかった。

システム/機材

VJに使用したGLSLのコードは以下で公開している。

github.com

今回はVEDAの本体にも手をいれており、そのままでは動かせない。というのも、VEDAが依存しているAtomパッケージに不満が生じ、やっつけで自前実装しているからだ。具体的には、glslifyというGLSLバンドラーが重いので、単純に #include でファイルを連結できるようにした。また、#include 使用時にエラーが正しく表示されるよう、linterも自分で実装している。

この辺の修正をリリースするかどうかはまだ迷っている。できるだけ既存のエコシステムには乗っかりたいという気持ちもあるので……。

使用した機材はnanoKontrol2とLaunchpad Mini。シーンのフェードイン/アウトにnanoKontrolを、エフェクトやシーンの切り替えにはLaunchpad Miniを使用した。以前からLaunchpadのMIDI信号をOSCに変換するスクリプトをNode.jsで作って愛用してきたんだけど、今回はよりリズミカルに制御しつつテンポの変更にも対応できるよう、シーケンサー/タップテンポ機能を追加した。

github.com

リズムにあわせて一番右下のボタンを押すとループが始まる。あとは記録ボタンを押しながら適当にボタンを押すと、演奏内容を記録してループしてくれる。こんな感じ↓