TouchDesignerでLyricMotion

今年も**TouchDesigner**のAdventCalenderに参加しました。

私は∀RroWsという電子音楽×デジタル技術のユニットで活動していますが、最近はバンドのVJ案件が増えています。特に、バンドの映像演出で多いのが**LyricMotion**だと思います。
歌詞が歌に合わせてバンバン動くやつですね。写真は私が以前やっていたバンドですが、後ろでLyricMotionをやっています。
![111.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311653/bb4122ff-d6bb-5553-76a4-1987fd8851e3.jpeg)
例えばこんな感じで歌詞が動きます。
https://youtu.be/adyb0c9NoXI?t=88

一般にLyricMotionをするには、以下の3つの方法が考えられます。

**①PowerPointまたはKeynote**
　これが最も簡単ですが、要は背景を黒にしてアニメーションでテキストを動かせば良いです。クリックで歌に合わせて表示できます。ただし、あアニメーションのバリエーションが限られるので、個性を出すには物足りなくなってきます。

**②AfterEffects**
　キーフレームをうって、こつこつ文字を動かします。これは地道な感じですが、ちょうど良いAfterEffectsのプラグインがあり、**TypeMonkey**を使うと、楽にLyricMotion映像を作れるので、こちらもオススメです。
https://flashbackj.com/product/typemonkey
　ただし、AfterEffectsで作ると映像を書き出して再生する形になるため、実際の演奏時に曲のテンポが速くなると、文字の動きと歌のタイミングがずれる課題があります。私自身はTouchDesignerでVJシステムを組んでいるので、再生速度を変えれるようにしていて、タイミングを微調整しています。

**③TouchDesigner**
　TouchDesignerUserたるもの、やはりここは独自性のあるものを作りたいですよね。特にTouchDesignerだと3Dで文字を動かしたりもできるので自由度も高いです。自分のタイミングで歌詞を送れるので、速度調整も不要です。今回はこの方法を解説します。実際にやってみましょう。

# サンプルプログラム
最初に私が作成したサンプルプログラムを紹介します。これを応用すれば色々作れると思います。

**■サンプルプログラム**
https://github.com/snafkinliberty/TouchDesigner/blob/master/LylicMotion.zip
下のDownloadからダウンロードして下さい。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">TouchDesigner Advent Calendar 2020の10日目担当分ですが、こんなLyricMotionの作り方をまとめています。サンプルプログラムあり。<a href="https://t.co/wZt1ijx5of">https://t.co/wZt1ijx5of</a> <a href="https://t.co/euP4tSkAps">pic.twitter.com/euP4tSkAps</a></p>&mdash; 𝘈𝘙𝘳𝘰𝘞𝘴 𝘛𝘰𝘮𝘰𝘺𝘢 (@snufkinliberty) <a href="https://twitter.com/snufkinliberty/status/1336692337372667904?ref_src=twsrc%5Etfw">December 9, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
注意：Macの方だと、Pattern1でtextSopが日本語フォントだと以下の写真でシルバーっぽく見えているところが、黒くなる現象が確認されています(不具合で日本語のフォントの法線ベクトルが逆なのかな？)。日本語以外や他のPatternは大丈夫だと思います。

**■使い方**
![Top画面.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311653/7850ef42-0aaf-1383-7a56-aeb2e1bb4a3d.jpeg)
4つのパターンを用意しています。左上の**PatternSelect**の4つのボタンでパターンを切り替えれます。
まず歌詞を、真ん中下の**table1Dat**の表に1行ずつ入力します。
その下の**Button**をクリックすると文字を一つずつ送れます。
さらに下の**Reset**をクリックすると、最初に戻ります。
歌詞を入力する行数を増やすには下の赤枠で表示している**RowNum(ConstantChop)**の**RowNum**の数値を変えてください(この値に連動してcount1Chop、table1Datの値が変わります)。
色々動作やプログラムを確認してみて下さい。

# プログラムのポイント
Pattern1に関し、プログラムのポイントをここで説明したいと思います。
Pattern1のプログラムの本体はbase１の中にあります。

**【3Dの文字の生成】**
![キャプチャ.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311653/3065fcea-585a-891e-b01b-7cd45eba6a18.jpeg)

3Dの文字はtext1Sopで生成しますが、table1Datから文字を引用します。in1Dat、null7Datを介してbase1の中にtable1Datを持ってきます。さらにbuttonを押した回数を数えているcount1Chopもin3Chop,null1Chopで持ってきます。

text1Sopのtextに書いた文字が3Dで生成されるので、ここに以下のpythonの式を書きます。
**str(op('null7')[int(op('null1')[0]),0])**
op('null1')[0]でnull1Chopの値を取得しています。そしてint()で整数にしています。
op('null7')[int(op('null1')[0]),0]でtableの中の表示する歌詞のデータを取得しています。str() で文字に変換しています。

**【文字の切り替え機能の作成】**
![無題.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311653/eacc625a-b5b2-2116-27e0-2e681c2e6ab4.jpeg)
ButtonはButton TypeをMomentaryにします。これでクリックしたときだけ1になります。
この1になった回数を数えるのがcount1Chopです。CountのLimitをLoop Min/Maxにし、Limit Maximumを**op('null3')['RowNum']-1**にします。RowNumの値をnull3Chopから引用しています。table1Datのデータと数合わせのため-1にしてます。これを入れ忘れるとnoneが表示されます。

**【文字の動きの機能の作成】**
![11222.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311653/6e74a636-9a91-e247-bc55-6d0e07564c47.jpeg)
このサンプルではz方向の動きをつけていて、手前に飛んできて元(0座標)に戻るようにしています。
これはtransformSopのTranslateのz座標にnull3Chopの値をアサインしています。
z座標の変化のさせ方ですが、画像の上のchopのライン上に並んでいるところですが、①logicChop、②triggerChop、③envelopeChop、④mathChopで作っています。
count1ChopをinChopで持ってきて、nullChopを介してlogicChopにつないでいます。
値を初期値から変えているところだけを画像で載せておくと、
![a.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311653/a4c78b3d-18e0-6032-2328-e7c0b9d00d53.jpeg)
logicChopでは数値が変化したときに1になるようにしています。
![b.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311653/72597534-8e1e-9571-d0f8-a6019c817670.jpeg)
その1になった瞬間にtriggerChopで値が一定時間変化するようにしています。
![c.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311653/3fca9a34-d04d-9efb-62c3-bf5b9a5702f3.jpeg)
その変化をenvelopeChopで、
![d.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311653/95f10368-5c8b-7ba5-5691-fc2a7aed5b6f.jpeg)
値の変化の大きさをmathChopで調整している流れです。
![e.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311653/57fd78ce-ecb7-b9b0-00ef-eac472f63433.jpeg)
ボタンを押した時の数値の挙動はtrailChopで可視化するとこんな感じです。



ポイントは以上でしょうか。
簡単な説明だったので、不明点があれば、コメントかTwitterにメッセージ頂ければと思います。

2020/12/19(土)京都で、ビギナー向けにTouchDesignerの解説/実演/体験イベントをします。
![130599965_1659200334249952_4430607920272260872_n - コピー.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311653/b2f6231a-3ce4-5bf3-1062-19f52a42f0b3.jpeg)
ここでは、VJ/LJシステム構築の話をしますが、主に照明制御に関し、Qiitaにもこのイベントに合わせて記事を作成していこうと思います。