TouchDesignerとGLSLで初VJやった話

10/29のエンジニア主導DJパーティー[POP TECH PARTY -ポプテク- 2019 Autumn](https://www.facebook.com/events/2424650684483715/)で、TouchDesigner(TD)とGLSL使ったVJをやったので振り返りつつメモを書きます。これからTD始めつつあると思っている人の参考になれば。

# VJやった経緯

- エンジニアの傍らテクノDJもやっていて、VJを見るのは好きなので自分でやりたくなった
- 自分のイベントでVJをブッキングすることもあるので、自分でも感覚を知っておきたかった

ということでVJ関連イベントに行ったりTDやGLSLの勉強などをしていたが、あまり捗っていなかった。

そんな中、10月ポプテク開催の話があり、前回(5月)DJをさせてもらったので、今回は[@mactkg](https://twitter.com/mactkg)さんにDJをやってもらい、その時間VJさせてもらうことにした。5月ポプテクでOMEGA[@equal_001](https://twitter.com/equal_001)さんにお会いしてDJ/VJ依頼するようになったり、相談できる人も増えてきたのも大きい。

# 使いたかった要素
何をやるにも初めてだったが、気分が乗っていた次の2点にひとまず目標を絞った。

- TouchDesigner
- GLSL

# 展開を考える

とりあえずmactkgさんにどういう感じのDJをやるかきいた。[@masuidrive](https://twitter.com/masuidrive)さんの時間もVJやることになり、後半BPM爆上がりになることはわかっていた（前回の自分のDJでは、逆にmasuidriveさんの続きでBPM下げる形に）のでそれで展開を考えた。が、終盤は用意した絵に比べてやはりBPMが速すぎて絵が合わなくなってきたので、Noise SOPのパラメータをいじったり、LFOを追加しまくったりfrequencyを上げまくって現場で対応。

# 参考にした情報

勉強プロセス見返して、助かったなーという情報

## TouchDesigner

- 最初TDのオンラインドキュメントを読んだが、英語テキストばかりなのと具体例が少なくモチベーションが上がらなかった
- [@satoruhiga](https://twitter.com/satoruhiga)さんの講義資料を必要に応じてつまみ食い
    - [映像音響処理概論 2018](https://station.backspace.tokyo/satoruhiga/TDWS_2018/)
- 2017年のTDアドベントカレンダーのnarumin256さんの記事
    - [TouchDesigner 使いはじめた頃知りたかったことTips](https://qiita.com/narumin256/items/25710e6952079e1b3348#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB)
- ギャル電のイベントでVJしたTatsuyaさんの記事
    - [２週間後にVJをやらざるを得なくなった時に読むブログ（TouchDesignerでVJに挑戦）](http://tatsuya1970.com/?p=12875)

## GLSL

こちらが分かりやすかったのでつまみ食い

- [wgld.org](https://wgld.org/d/glsl/)

同じくdoxasさんのQiita連載

- [[連載]やってみれば超簡単！ WebGL と GLSL で始める、はじめてのシェーダコーディング（１）](https://qiita.com/doxas/items/b8221e92a2bfdc6fc211)

### NEORT

デジタルアートプラットフォームNEORTにちょくちょくアウトプットするみたいなのも区切りの付け方としてよいと思う。

- [NEORTのプロフィールページ](https://neort.io/HAdtUXwkg6cLdOGVZlHYqsm3COg1)


## イベント

今年に入ってTouchOutやVJ概論でインプットはしていたのだが、自分がVJする日を決めて追い込んでからはTDを触る頻度も増えてよかった。

- 3/30 [#VJ概論 TRIPPING THE LIGHT FANTASTIC](https://vjgairon2.peatix.com/)
- 7/7 [TOUCHOUT vol.002](https://touchout002vj.peatix.com/)
- 9/1 [TouchDesigner Summit 2019 Montreal / Report & Workshop
](https://tdsummit19-report.peatix.com/)
- 9/29 [TOUCHOUT X TUNNEL TOKYO](https://touchout003.peatix.com/)
- 10/6 [X SQUARE vol.002](https://xsquare002.peatix.com/)

イベントで渡されるTDのファイルを読んだりいじったりするだけでもかなり勉強になる。

# 勉強の進め方

- 多分最初はよくわからないので、挙げたようなまとめの入門記事をいくつか読むとよい
- 少しわかってきたら、「Feedback TOP 使い方」のようにググって出たものを片っ端から試してみる
- あと他人のTDファイル（やGLSLコード）読んで写経
- やりたいことがでてきたら、SOP、instancing、Particleなどの3D系やGLSL, OSC, MIDI, Audio Deviceという感じでやはりググりながら手を出してみる

## 手始めに覚えるとよさそうなTDのOP

いきなりTDのOP一覧見るとウッとなるので、最初は触るやつを絞る。これだけでもパラメータいじると結構いろいろできる（というか、他のやつはまだよく知らない）

## TOP
- In/Out/Movie File In/Null
- Blur/Constant/Edge/Fit/Level/Math/Noise/Ramp/Text/Transform/Tile
- Composite/Select/Merge/Switch
- Feedback
- Render

## CHOP
- In/Out/Null
- Count/Lag/LFO/Limit/Math/Speed/Timer/Transform
- Composite/Select/Merge/Switch/Rename
- Trail

# 盛り込んだ要素

- 2D背景動画素材+TDで組んだエフェクト
- 3Dのレンダリング基礎
    - カメラワーク
    - instancing
    - Noise SOP
- GLSL
    - SOPのmaterialの描画に使った
    - voronoiとかはGLSLで描いた
        - [NEORTアートワーク](https://neort.io/art/bm1e0ms3p9fd22fs6cm0)


# 早めにやればよかったこと

- Container COMP, Window COMP, Perform modeの使い方、UIの作り方
    - 絵を作る方法がわかってくると、それに熱中して現場でHDMIつないですぐ絵を出したり調整できる仕組みをおろそかにしがち
    - 現場でバタバタする不安を早い段階で減らしておく（自分はまだ慣れてない）
    - satoruhigaさんの資料では[映像音響処理概説 2018 第二十回](http://satoruhiga.com/TDWS2018/day20/)
        - とくにWindow表示するためのButtonなどはそのまま使える
    - WindowのBorder offにすると全画面表示できる、など
    - 解像度周りのトラブルを防ぐ

- キーボードショートカットを覚える(u,i,h,a,b...)
- 描画する必要がないOPはcooking offにしておく

# トラブル、やりそこねたこと

- 思った解像度でプロジェクター投影されなかったりMacBookが落ちたりでVJ開始に手間取った
- Macbook充電アダプターの電力不足のためかバッテリー残量が危機的になり、OMEGAさんにアダプタを借りてしのいだ
- MacbookのUSB-Type Cポートを充電とHDMIで使い切り、VJ概論のGearバザールでHatoto[@Hyougetsuka](https://twitter.com/Hyougetsuka)さんから買ったMIDIコントローラが使えなかった(もしかしたらWiFiで使えたかも)
- MIDIコンを使わずにパラメータいじるUIを現場に入ってから組むことに
- 実はDJ mactkgの素材を集めておいたのだが、上述のようにバタバタしておりそれどころでなかった
- 自分のVJ中の映像を撮るのを忘れた（GIFですが一部はこんな感じ）
![poptech.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281/24b723cb-e188-dafb-df54-38ea8a58b12e.gif)


# 今後やっていきたいこと

- audio reactive VJ
- センサーやカメラを使ったVJ
- Maxなど他のソフトウェア使ったVJ
- audio visualのライブ
- livecoding
- MIDI周りの回路いじり
- 音と映像を総合的に考える思索的な活動



# 感想そのほか

- [VJ概論](https://twitter.com/vjgairon)素晴らしいイベントなので改めて強調したい
- DJ/VJ gigもお待ちしてます。仲良くしてください！

# 番宣

- 12/28に福生のテクノイベント[MovemEnt vol.21 忘年会SP](https://www.facebook.com/events/558844938227637/)でVJします！

- 明大前でテクノパーティー[Vertigo](https://www.facebook.com/pg/vertigopartytokyo/events/)を時々やってるので遊びに来てください！
    - 11/21の1周年では[@mssknd](https://twitter.com/mssknd)さんのlive drawing、OMEGAさん、NIINOMI[@r21nomi](https://twitter.com/r21nomi)さん（NEORT）のVJ、Satoshi Kanno[@3to4_](https://twitter.com/3to4_)さんのTD+Ableton LIVEによるaudio visual liveがありvisual的にも充実したイベントでした

# 筆者について

- サーバーサイド・フロントエンドのフリーランスエンジニア(Ruby,Python,Go,JS etc)
- テクノパーティーVertigoのオーガナイザー、DJ
    - [ResidentAdvisor: Hackmarkt](https://www.residentadvisor.net/dj/hackmarkt/dates)
    - 最近は[Interim Report Edition4](http://interim-report.org/edition4)のCurated by NEORT枠でDJ
- そのほか、[ものづくりコミュニティfarmtory-lab](https://note.com/murasaki/m/meffc4264a313)、[旅するエンジニア向けの同人誌出版](https://nomadineers.booth.pm/)など