blog

2025/10/12に渋谷のclubasiaでオーディオビジュアルイベントdraw(tokyo); #3が開催されました。

さだきち（@sadakkey）さんのDJにVJとして出演し、前回のdraw(tokyo); #2に引き続き、Sh4derJockeyを使ったGLSLライブコーディングによるVJを行いました。

本記事では、前回からの改善点と当日の振り返りを紹介します。

パフォーマンスの動画

本番時のフルバージョンの画面録画です。

観客の方が撮影してくださったライブ映像です。臨場感や会場の雰囲気が伝わってきます。

draw(tokyo); #2からの改善点

システムの基本構成はdraw(tokyo); #2と同様ですが、シーンやポストエフェクトを追加したほか、いくつかの改善を加えました。

MIDIコントローラーのレイアウト整理

前回はMIDIコントローラー（nanoKONTROL2）のボタン・スライダーの割り当てが整理しきれていない部分がありましたが、今回はカテゴリー別に整理しました。

レイアウトを整理したことで、本番中に目当てのボタンをすぐに操作できるようになりました。

MIDIコントローラー nanoKONTROL2 のボタン割り当てレイアウト図（カテゴリー単位）

各ボタンごとの詳細は下の図のようにしました。

MIDIコントローラー nanoKONTROL2 のボタン割り当てレイアウト図（詳細）

ドロップ前の上昇音などで映像のスピードが加速していく演出については、スライダー1の「BPM調整」で手動でBPMを合わせていました。

スライダー0の点滅（ポストエフェクトのカテゴリー）とスライダー1のBPM調整（システムのカテゴリー）が並んでいるのは違和感を覚えるかもしれませんが、この2つは同時に値を上げる調整をすることが多いので、操作性向上のために意図的に隣に配置しました。

シーン切り替え時のbeat位相リセット

draw(tokyo); #2の課題として、beatの位相（開始タイミング）をリセットする機能がなかったので、Sh4derJockeyのtime（時間）をリセットすることでしか音楽と映像のタイミングを合わせる手段がなく、不便でした。

Sound2Lightで音楽のBPMは自動取得していますが、位相については自動的に同期させるための仕組みは今回も実装しませんでした。

今回はシーンを切り替えると同時にbeatカウンターをリセットする仕組みを追加しました。これにより、曲の切り替わりに合わせてシーンを切り替えることによって位相を合わせることができ、音楽と映像の同期がやりやすくなりました。

WORMHOLEなど既知BPMの楽曲への対応

今回のセットでは、さだきちさんと一緒に制作したデモシーン作品「WORMHOLE」と「Transcendental Cube」の楽曲を使いました。

これらの楽曲はBPMが既知なため、Sound2Lightを使ったBPM自動同期を一時的に停止し、事前に決めたBPMに固定する仕組みを用意しました。

なぜかこの2曲はSound2LightのBPM検出がうまくいかないという理由もありました。

また、楽曲の特定タイミングにbeatカウンターを同期させる専用の仕組みも実装し、曲の展開や盛り上がりに合わせた演出ができるようにしました。

UVを引き伸ばすポストエフェクト

今回は万華鏡やミラーなどUVを加工する系のポストエフェクトを数多く追加しましたが、その中でもUVを引き伸ばすポストエフェクトは実装が簡単な割に効果的で個人的にお気に入りです。

// UVをclampして引き延ばす
float a = 2 * (fract(beat) - 0.5);
uv.y = clamp(uv.y, -1 + a, a);

WORMHOLEのテキストに利用したシェーダーと原理は同じです。詳しくは次の記事の「演出3: 出現と消失アニメーション」を参考にしてください。

まとめ

久しぶりにさだきちさんと一緒に活動できて、とても楽しかったです。

とくに、WORMHOLEのdraw(tokyo); #3 versionのアレンジがすごくカッコよくてテンションが上がりました。

こちらはWORMHOLEの前後だけ切り取った動画です。

会場に足を運んでくださった皆さん、クルーやスタッフの方々、そしてさだきちさん、最高のイベントをありがとうございました！

スライドによるVJ解説

レイトレ合宿11のセミナーでGLSL VJについて発表した時のスライドです。

X（Twitter）の反応