【TouchDesignerで映像作り】初心者でも簡単に使えるTOPとCHOPを図＆GIFで紹介！

![画面収録 2024-12-27 18.04.44.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3747635/f5ea4266-8107-5b5a-c6ce-ed279afb6455.gif)

**この記事を読むと**　↑ こんなのが作れるようになる
※あくまで趣味で楽しんでいるので、センスの有無に関しては温かい目で見守ってください🙏



# はじめに
最近ハマっているのはTouchDesignerというソフトを使った映像作りです。

TouchDesignerは日本語の資料がまだ少なく、主に英語の動画や教材を使って学んでいます。しかし字幕がついていないものも多いため、試行錯誤しながら学んでいる状況です。

そのため、今回はTouchDesignerの初心者向けの操作方法を、図やGIFを使ってわかりやすく自分なりにまとめてみました。少しでも参考になれば幸いです。

:::note info
この記事では、初心者向けの機能であるオペレータのみを紹介します
:::

# Touch Designerとは？
TouchDesigner は、ビジュアルプログラミングを用いて映像や音をリアルタイムで作成・操作するソフトウェアです。簡単に言うと、映像や音の「演出」や「エフェクト」を作成するためのツールです。

音楽に合わせて動く映像や、カメラで捉えた動きに反応する映像を作ることができます。
ミュージックビデオ（MV）やパフォーマンス映像の作成に向いています。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3747635/5eed197a-8eea-0cbb-42f7-81e59b2d8b58.gif" width=50%>

※ こちらのような映像が作りたい方は、記事の最後にある[参考①](#参考)をご覧ください。


# オペレータについて
Touch Designer ではオペレータをつなぎ合わせてビジュアルプログラミングをしていきます。
オペレーターは一つの◻︎で構成されます
![画面収録 2024-12-27 15.47.52.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3747635/3a955830-944f-01c6-470e-d43dff5f09f6.gif)

オペレーターは大きく分けて7つあります

![スクリーンショット 2024-12-27 15.50.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3747635/05ebe59e-2985-cb3b-1f0d-afdcf2ce0987.png)

今回はそのうちの2つ。TOPとCHOPについて取り上げます。

# TOP
TOPは主に平面的(2D)な画像や映像の処理に関わるものです。
たくさんありすぎるので、一部紹介します。

![スクリーンショット 2024-12-27 0.30.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3747635/144796a4-c5a3-4b18-0f04-9ec4dd045c6d.png)

### circle
丸を作る

三角形△や六角形などの多角形を作りたい場合は、
`Polygon:On`にして、`Sides`で角の数を変更できる。
![スクリーンショット 2024-12-27 20.54.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3747635/f27696da-8eef-48a9-a6de-7d06a435607e.png)


### rectangle
長方形を作る

![スクリーンショット 2024-12-27 20.56.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3747635/8675b67c-23b4-9749-0042-c25f4b3a8b3c.png)



### movie file in

画像ファイルを読み込む

![スクリーンショット 2024-12-27 20.59.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3747635/30cebea3-a584-c050-7b52-730473618204.png)



### Text
文字を入れる

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3747635/0b685938-b4a7-2798-5b3a-b511cd6f51cd.png" width=50%>

### noise
ノイズ（ランダムで不規則なデータ）を作る

ノイズそのものを生成するだけではなく、自然界の動きや物体の変化を再現するのに役立つ

![画面収録 2024-12-27 14.29.20 (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3747635/4cfe31bd-17c9-ec74-d286-ef354cfbd93b.gif)

設定では、定数で静的なノイズを生成し、変数を使って時間に応じた動的な制御ができる。
例えば、`absTime.seconds * 0.25` のように時間経過を変数として使用すれば、ノイズを動的に変化させることができる。

↓（例） ノイズを使った、不規則に動く映像
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3747635/dcd65e7b-0bd7-e8b0-776c-7e17c3ef7d4b.gif" width=50%>


### video device in
カメラから映像を取り込む 
映像をリアルタイムでTouchDesignerに取り込み加工することが可能

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3747635/815b51b3-dfc1-e6aa-5b69-997c834bfa35.png" width=50%>

寝ぼけた猫の映像もリアルタイムで取り込める！





###  displace
歪みを表現する
例：水面にいるかのようにゆらゆらとしたような映像を作る

![スクリーンショット 2024-12-26 22.42.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3747635/5bc11e06-fe0b-c9fa-eae4-c88c142c9476.png)

### level
画像の加工
明度を上げる・透明度を変える・色を反転させる　などの加工ができる

![スクリーンショット 2024-12-26 22.45.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3747635/80d6ef1d-0000-b4f5-8e5e-bc24be8514ae.png)

### constant
背景をベタ塗りする

![スクリーンショット 2024-12-26 22.48.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3747635/5be11703-b3f5-58eb-fbf8-08685235ec50.png)

### crop
トリミング。
余白を切り取りたい時に使う

![スクリーンショット 2024-12-26 22.49.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3747635/7377cc84-33d2-7a42-7ff4-b25c8f3efe9d.png)

### over
画像の上に画像を載せる

![スクリーンショット 2024-12-26 22.51.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3747635/7dcb93e9-0737-d810-c6c0-0602f74fd3b0.png)

イメージ
![スクリーンショット 2024-12-27 16.31.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3747635/76d96ce9-cc2d-63ec-448e-05f4431e6bfb.png)


### ramp
グラデーションを作る

![スクリーンショット 2024-12-26 23.22.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3747635/121a46e1-4459-0545-e516-78b932c78342.png)


### composite
重ね合わせる（overのような）使い方ができますが、特徴的なのは、存在が共通している部分のみを重ね合わせるといった使い方です。

![スクリーンショット 2024-12-26 23.02.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3747635/b2c22614-337e-90f1-be20-6ee742035afb.png)

**overとの違い**
デジタル絵を描くとき、「選択範囲」を指定してその部分だけを重ね合わせるような作業をすることがありますよね。この感覚に似ています。

![無題59_20241227161037.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3747635/48297b47-0bbe-9f4b-b3f4-81d7846a1eef.png)

### look up

色のバランスを維持しながら、別の色に変える

例えば、青い部分を赤く変えたいときに使います。
色を全体的に統一して変えたいときや、特定の色を別の色に変えたい場合に便利

![スクリーンショット 2024-12-27 11.30.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3747635/948725c3-a335-9342-e7c1-e03e7ef6cf3d.png)

### edge
枠だけを描写する
![スクリーンショット 2024-12-26 23.18.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3747635/ff221b57-4a24-eef6-da28-04dbbc9e292d.png)

### transform
画像を移動、回転、拡大縮小する

![スクリーンショット 2024-12-27 2.10.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3747635/f617cb7f-1cda-664c-6475-6a259935c689.png)


### tile
タイルのように画像の数を増やしたりできる
(画像では、鏡のように左右・上下反転したりする設定をつけています)

![スクリーンショット 2024-12-26 23.36.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3747635/68438129-f95c-4590-9ecf-65d049075668.png)

### blur
ぼかし

![スクリーンショット 2024-12-27 0.31.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3747635/edf63f08-a753-f15e-6e49-8c191f93066b.png)

### feedback
残像を作る
feedback単体で使うことは少なく、他のオペレータと組み合わせて使う

![スクリーンショット 2024-12-27 0.09.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3747635/f3ba1a04-98c4-7d3a-cb52-dc7c596c255e.png)
feedback TOPは、過去のフレーム（例えば、0.5秒前の画像など）を取り出す機能。イメージとしては↓

![スクリーンショット 2024-12-27 0.16.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3747635/a9f343e4-472c-120a-de53-1d7c85645ce4.png)

その過去のフレームをlevel TOPを使って半透明にし、over TOPを使って加算することで、「残像」感を生み出すことができます。


# CHOP

CHOPとは、時間的な変化（動きや変調）を扱うためのものです。主に数値データや時間軸に沿った値を操作するために使います

![スクリーンショット 2024-12-27 14.44.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3747635/15d9a942-27f0-9617-fc2c-fc318be7b4a7.png)

（例）**音に合わせて**, 渦巻きの変化をつけたい
![画面収録 2024-12-27 0.50.09.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3747635/85c1284d-4316-6369-bee2-62b304856512.gif)



ここからはCHOPにはどんなものがあるかを紹介します。

### audio file in
音声ファイル(mp3など)を取り込む

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3747635/d84cb388-c788-ffc8-e4ba-4ea3bda509dd.png" width=50%>


### audio device in

リアルタイムでデバイスから音を取り込む

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3747635/8726042b-3b80-0d6f-4bac-4eff32962d14.png" width=50%>

例えば、手を叩くとその音を瞬時に反応させることができるので、即興ライブパフォーマンスの作品作りにぴったり。

### audio device out
音を出力する

自分は、音に合わせて映像が動いているかの動作確認をしたい場合に使用しています

![スクリーンショット 2024-12-27 1.01.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3747635/6e8c6e40-c118-0433-2a05-d164ca72e453.png)

### lfo

「定期的に繰り返す動き」を作る
例えば、上下に動くような動きを作ったり、0から1まで増えて、また0に戻る動きを繰り返すことができる

![画面収録 2024-12-28 19.22.07.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3747635/a94f74b0-877e-a0cc-ab19-b41587813d2d.gif)



### trail
時間の経過による数値の変化をグラフ化する

![画面収録 2024-12-27 1.36.00.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3747635/053ae24c-4631-5052-c6d5-88b364cb194d.gif)

### math
数値の計算や範囲調整を行う

例えば、前のオペレーターからのデータを使って足し算や掛け算を行い、その結果を出力する。
また、数値の範囲を変更したり、値を拡大・縮小したりすることもできる。例えば、0から1の範囲を-1から1に変えることができる。

![スクリーンショット 2024-12-27 1.47.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3747635/0b254cae-fdfa-780a-76c2-0bf9b6b6dfa2.png)
↑(例)１つ前のオペレータの値 ✖️10　する

**組み合わせる**
CHOPのLFOとMath,Null と  TOPのCircleの組み合わせ

![画面収録 2024-12-27 1.54.50.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3747635/dd054721-819f-feff-c67f-d3e6cafbb02b.gif)


### analyze

音の波形や動きのデータを使って、そのデータの特徴や変化を簡単に調べられる。

例えば、音楽の中で「一番大きな音」や「音の平均的な大きさ」を調べたり、動きのデータから「一番速く動いた瞬間」や「動きの平均」を計算することができる

![スクリーンショット 2024-12-27 12.45.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3747635/9ce8ba0d-708f-fe78-2d1a-bcfb197bee99.png)

### trigger
閾値を超えたら、発火させる。

例えば、音の波形データを使って、音量が0.1を超えたら何かを始める、という設定ができる。発火を遅延させることも可能。
（例）音が大きくなったときに、アニメーションを開始する

![スクリーンショット 2024-12-27 12.51.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3747635/ad6d79bb-c8cb-eca7-a248-16a63e69284b.png)


### keyboard
キーボード入力を使って何かのイベントを起こす時に使う

例えば、キーを押したときにアニメーションをスタートさせる、特定のキーで数値を変更する、などの操作を簡単に設定できる

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3747635/5f28f23e-8e7d-e3cb-ebb4-1e75d01db7d6.gif" width=50%>

### count
入力された値を加算（カウント）する

例えば、ある数値が増えるごとにカウントアップしたり、何回イベントが発生したかをカウントしたりするのに使う。

最大値や最小値を設定して、その範囲に達した時にカウントをリセットすることもできる

![画面収録 2024-12-27 14.09.46.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3747635/55e9ef3a-9844-c5d6-d182-ecf9f0016d34.gif)


### switch
複数の入力からどれか1つを選んで出力する
例えば、値が「1」のときは映像Aを、値が「2」のときは映像Bを表示するといった切り替えができる

**組み合わせる**
![画面収録 2024-12-27 14.06.31.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3747635/68288462-b4a5-9c36-3d22-f9fa70730fd9.gif)





# 参考

① 記事の最初に出てきた映像はこちらのチュートリアルを見ながら作り、アレンジしたものです。

https://www.youtube.com/watch?v=nIu72b68Aps&t=19s

**初心者におすすめ**

② TDSWさんのTouchDesigner講座
日本語で１つ１つ説明してくれて、とてもわかりやすい！

https://www.youtube.com/watch?v=toCz5-2g3p4

③ TouchDesigner 日本語ドキュメント
自分は困った時の辞書として、常に見れるようにしてあります

http://ted-kanakubo.com/touchdesigner-jp/



# 感想
いかがだったでしょうか。

最初は、綺麗な映像を作るどころか、**「何を触ればどうなるの？」** すらわからないほど機能が多くて驚きました。

今後、さらに自分がレベルアップできたら、次は3Dに関わるオペレーターについてもまとめてみたいと思っています。



![画面収録 2024-12-27 17.21.54 (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3747635/9bc51861-4025-a371-2d83-97c759853dc7.gif)


<details><summary>今回載せたものだけ使用！ 作り方はこちら</summary>

全体図
![スクリーンショット 2024-12-27 17.10.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3747635/3d05b868-44b6-a4ce-6349-6a7ece904277.png)

1. rectangleで長方形を作成
2. noiseを作成
     - 時間経過によって動きを入れたいので、`transform`タブの`translate`のtz(3つ目）を`absTime.seconds * 0.45`に設定
     - 細かいノイズにしたいので、`Noise`タブの`Period`を0.58に設定
3. displaceに1と2を繋げて、歪んだ長方形を作る
4. noiseを作成
     - 時間経過によって動きを入れたいので、`transform`タブの`translate`のtz(3つ目）を`absTime.seconds * 0.25`に設定
     - 荒めのノイズにしたいので、`Noise`タブの`Period`を1.08に設定
5. levelで明るくする
     - `Brightness`: 1.58
6. null （ここなくてもok）
7. feedbackを生成
8. level
    - feedbackを少し透過させる Postタブ内の`Opacity`:0.728
9. overを使って、透過したfeedbackと元の映像を繋げる
10. rampでグラデーションを生成
11. look up を使って、黒っぽい色は白に近づけ、白っぽい色は赤に近づける
12. textを生成
13. overで文字を上に載せて完成！  

</details>

最後まで読んでいただき、ありがとうございました！