AtomエディターでVJしました

f:id:amagitakayosi:20170925232054p:plain

先日予告した通り、この度VJデビューしました。
VJ行為には自作のAtomパッケージ glsl-livecoder を利用しています。

これまでのあらすじ
pastak生誕祭 @東京
SMTP++ @京都
課題
まとめ

これまでのあらすじ

GLSLとは、OpenGLやWebGLといった3Dグラフィックスで用いられるシェーディング言語である。シェーダーはその名の通りライティングや影の計算に用いられるが、単体でもパワフルなグラフィックス表現が可能であり、シェーダーアートという分野が存在する。僕は今年GLSLにハマり、AtomでGLSLのライブコーディングできるパッケージを作った。そしてこの度晴れてVJデビューすることになったのだ。

pastak生誕祭 @東京

初VJです。

動画は無音で失礼。

2時間半という長丁場なので、ライブコーディング成分は控えめに、普通にVJ素材を入れ替えつつGLSLでちょちょいとエフェクトをかける、という方針。友人の誕生祭というフレンドリーな場であったため、途中でバグを踏んだらラッキーくらいの気持ちで臨んだ。

DJのうち一人がWindows95のアイコンをプリントしたTシャツでDJしていたので、おもむろにChromeを開いて Windows 95 で画像検索し、テスクチャとしてロードして背景に表示する、といったパフォーマンスも披露。

キャプチャ動画を見返してみると、f.luxを切り忘れて画面全体が黄色くなってしまっていたり、Atomをフルスクリーン表示するのを忘れてメニューバーが見えてしまっている……。

あんまりがっつりコードを書いたりエフェクトをかける余裕はなかったけど、初めての割に目立ったトラブルなくやり遂げる事ができて良かった！

SMTP++ @京都

わずか1週間後に2度目のVJ。こんどは2時間。

前回の準備不足を反省し、今回は担当DJのアイコンや写真をあらかじめ用意しておいた。また、僕の前のVJがDJネームを画面いっぱいに表示してるのが良いなと思ったので、急遽SketchでDJネームを入れた画像素材を用意したりした。

f:id:amagitakayosi:20170925224907p:plain

今回はちゃんとAtomをフルスクリーンにしてたんだけど、途中ちょっと集中力が切れた時、いつものクセで Cmd + Tab を押してしまってChromeが表示されるという失態をさらしてしまった 😇

今回の会場は外国人観光客が多く、かつ何故かプログラマーの人が多くて、2回ほど「それってOpenGLでやってんの？」とか「なんて言語？GLSL？知らねえｗ」みたいに話しかけられて良い体験だった。よい旅を！

課題

今回のVJで、いくつかglsl-livecoderに欲しいと感じた機能がある。

まずは、映像を別ウインドウや別ディスプレイに表示する機能。現在のglsl-livecoderではコードの背景に映像が表示される。ライブコーディングという用途ではこれでバッチリだけど、普通のVJソフトとして使うにはコードが邪魔になるので、別ウインドウに表示する機能が必要なのだ。別ウインドウにWebGLのキャンバスを置いたり、Fullscreen APIに対応することで実現できるだろう。一時的にコードを隠す機能があれば尚良いけど、これは何も書かれていない新規タブを開くことで実現できる気がする。

あとは、任意のHTMLを表示できるようになったら良いなあと思った。定番VJソフトのVDMXだと、テロップを簡単に流せる機能がある。 glsl-livecoderでもテロップを流したいけど、テロップだけのために専用の機能を作るのは筋が悪い気がする。設定ファイルで表示したい .html ファイルを指定し、ユーザーが任意のJS/CSSを利用出来るようにするのが良さそうだ。テロップしたかったらCSSとかmarqueeで良いしね。

あとは個人的に気をつけたいこと。