【VJ】Sound2light&TouchDesigner&Resolumeで簡単オーディオリアクティブ


この記事はIwaken labのアドベントカレンダー参加記事です

https://qiita.com/advent-calendar/2023/iwakenlab

シリーズ2の23日目↓↓

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3644489/deed87c0-959d-0283-14b1-4c30b4038c98.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3644489/959c2c6e-d9f2-8fd8-545a-e9d35ff1e915.png)

＞＞大遅刻＜＜　ごめんなさい。

# 目次
[1. はじめに](#1-はじめに)
[2. 動作環境](#2-動作環境)
[3. 必要ソフトとプラグイン](#3-必要ソフトとプラグイン)
[4. 手順①Sound2lightから音の情報をOSCで送る](#4-手順①Sound2lightから音の情報をOSCで送る)
[5. 手順②TouchDesignerで値を整える](#5-手順②TouchDesignerで値を整える)
[6. 手順③Resolumeで信号を受け取る](#6-手順③Resolumeで信号を受け取る)
[7. 実際にやってみる](#7-実際にやってみる)
[8. よくミスるポイント](#8-よくミスるポイント)
[9. 発展？](#9-発展？)
[10.最後に](#10-最後に)
[11.参考サイト](#11-参考サイト)

# 1. はじめに
VJをやるからには音に連動させた映像を出したいけれど、Ableton Liveを使用したりTouchDesignerをガッツリ使う方法は敷居が高い……。そんな貴方におススメなオーディオリアクティブ映像の作り方です。あんまり難しくないです。

(ちなみにBreakOut vol.3で行ったこちらの内容の解説となります)

https://www.instagram.com/reel/CzY6QFbAD3O/?utm_source=ig_web_copy_link&igsh=MzRlODBiNWFlZA==

#### こんな感じのものができます。




Resolumeの操作画面は

<iframe width="560" height="315" src="https://www.youtube.com/embed/9VEsUhqwzNk?si=ap8Ivuh-h7-O8Z1Z" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

結構ざっくりなオーディオリアクティブとなります。曲が大幅に変わった際はSound2Light側での操作が必要です。

<iframe width="560" height="315" src="https://www.youtube.com/embed/whugo4-cScU?si=SLafjaWDWVrJO6ib" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

これも自動化できたら良いのですが、今のところ手動です。



### 発想元
この記事が発想元となります。

https://ino2408m-pinv.hatenadiary.jp/entry/2021/05/30/143018

基本的にこちらの記事を読んで頂いて、それからプラスで出来ること、という紹介にしたいと思います。

# 2. 動作環境
windows 11

Resolume Arena 7.13.0
(Avenue7.13.2でも問題無し)

:::note warn
私のPC環境では最新版が動かないので旧バージョンになっているだけです
:::


TouchDesigner 2023.11290

# 3. 必要ソフトとプラグイン

Sound2light
　→リアルタイムで音を検出/分析するソフトです。

 TouchDesigner
　→リアルタイムで信号送ったり値を捏ねられます。

Resolume Arena(Avenue)
　→VJソフトです。映像出せます。

VB-CABLE Virtual Audio Device
　→PC内の音声ケーブルです。

# 4. 手順①Sound2lightから音の情報をOSCで送る

https://ino2408m-pinv.hatenadiary.jp/entry/2021/05/30/143018

↑まずはこちらの記事を読みましょう。ごーぐる部さんに感謝。

そうしたらSound2Lightを開き、VB-Cableを通じて音を流しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3644489/2d641d13-e763-bc6b-08a9-595bb46d7e4b.png)
今回はHigh,HiMid,LoMid,Bassの情報を送ってみます。

画面下のChannel(数字)の箇所をクリックし、OSC Messageを開きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3644489/a4a19c30-5dfc-2ae6-7f95-f568e048aee2.png)

Eos設定で良いのか分かりませんが、とりあえず問題無く動いているので良しとします。Channel NumberはBass,LoMid,HiMid,Highでそれぞれ1,2,3,4にしています。

全体のOSC設定はこんな感じです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3644489/b9fa122a-f678-9ad3-7edd-f1b915361054.png)

OSCモニターを確認してみると問題無く動いています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3644489/867bdd4c-eb27-3dbc-3704-ea75860e1c97.png)

# 5. 手順②TouchDesignerで値を整える

OSCが送信できたら、TouchDesignerで受信して値を整えましょう。
以下のようなOP構成にします。毎回使うので.toxにしてしまうと便利。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3644489/658bdc93-3b59-b87d-51c3-f62a9d53b4e8.png)

右の赤、黄色、緑、青のNullはTouchDesigner側で値を利用する時に引っ張るためのものです。

それではそれぞれのOPの中身を見ていきます。左上から



![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3644489/1d1e3924-ccda-2cb3-14a1-7435a02e9596.png)
まずOSCを受け取って、


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3644489/0045d4f9-c379-89af-3349-c10b2996c25e.png)
値を反転させ(Sound2Lightから信号が送られてきた際にResolume側のbypassをオフにしたいので)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3644489/5454f7a2-634d-9623-9788-8deddb99215a.png)
Resolume内の送りたい場所を指定し、(今回はHighをレイヤー6、HiMidを5、LoMidを4、Bassを3にしています。適宜スラッシュの間の値を変更してください)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3644489/2cc3243e-f4ed-5d49-cd90-447c70c1356f.png)
Resolumeのソフト自体への送信先を設定します。

# 6. 手順③Resolumeで信号を受け取る

最後にResolume側でクリップ(映像素材)をセットします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3644489/dfff3329-962b-dbca-47d0-cf2f70d38735.png)
今回はこういった感じにしてみました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3644489/42120602-60d8-b232-0606-7806889efb57.png)

Resolume側のOSC設定も忘れずに。


# 7. 実際に使ってみる
<iframe width="560" height="315" src="https://www.youtube.com/embed/O_ByNMoJ5z0?si=hlBGo2vfRKz7dFqG" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

# 8. よくミスるポイント
・Resolume側でレイヤーを増やしてしまい、信号を割り当てる場所が勝手に変わってしまう
・違うネットワークに繋いだ時、Sound2LightのOSC IP Adressの値の変更を忘れる

# 10.最後に
Qiitaの記事を書くのは初めてなので、間違い等々あれば教えていただけると幸いです<(_ _)>

# 11.参考サイト
https://ino2408m-pinv.hatenadiary.jp/entry/2021/05/30/143018
https://qiita.com/kezzardrix/items/49b120f806b2392b7dfb

サンプルとして使用した音源はこちら

https://dova-s.jp/bgm/play19916.html

https://dova-s.jp/bgm/play19336.html