【超初心者向け】TouchDesigner使ってみよう

# ものすごく時間経ってからの追記（2024/12/10）
7年も前に書いた記事の自分のテンションに面食らっています。
世の中にたくさんのいい記事があるので、この記事はもはや百害あって一利なしな気もしますが、一応過去の遺跡として残しておきます。
7年経って環境は死ぬほど変わりました。ぜひ他のもっと参考になる記事をご参照ください！
森岡さんのまとめ：https://qiita.com/ToyoshiMorioka/items/763f425bc3381209a29f


# この記事について
TouchDesigner歴半年弱のさのかずや（Twitter:[@sanokazuya0306](https://twitter.com/sanokazuya0306)）が、
TouchDesigner始めようカナ…と考えている大学生とか高校生とかクリエイティブコーディングやりたい勢の方に向けて、**他の似たようなやつ、みんな使ってるやつとどう違うの？？**みたいなこととか、**で、手っ取り早くなにやったらおもしろいんですかね？**みたいなことを書いていきたいと思いまーす。

TouchDesigner公式はこちら！
[Derivative TouchDesigner](https://www.derivative.ca/)

## 前いいわけ
あんまり知ったようなこと書くと怖い人いっぱい出てくるので、**あえて深く書かない、ちゃんと書かないこともいろいろあります！**分かりやすく書くためにかなり雑にくくってるのもあると思います！
たくさん知見を持ったパイセン各位はぜひ「ここもっとこんな感じのほうがええで」とか、「いやいやそれはこうやろ」とかあったらコメントなりDMなり頂けたらうれしでーす！

## ていうかクリエイティブコーディングってなに？
なんか僕もよくわからないんですけど最近話題ですね！

[クリエイティブ・コーディングとは](http://blog.creative-code-salon.com/2016/05/08/%E3%82%AF%E3%83%AA%E3%82%A8%E3%82%A4%E3%83%86%E3%82%A3%E3%83%96%E3%83%BB%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E3%81%A8%E3%81%AF/)
ここによると…
>厳密な定義があるわけではないのですが、アート+テクノロジーによる創作の世界で使われる言葉で、デジタル・テクノロジー、特にプログラミングによって創造的な表現を生みだす「運動」を指しています。

そうか。わからん。「運動」がわからん。
たぶん創造的なことのためにコーディングすることを指すっぽい！

例えば[Scratch](https://scratch.mit.edu/)とかを使っていろいろ作るのもそれにあたるだろうし、もうちょっと難しいのだとかっこいい映像をつくるためにコードを書く**ジェネレティブ・プログラミング**とか、Arduinoみたいなごく初心者でも触りやすいマイコンを用いたりする**デジタルファブリケーション**（の中でもプログラミングをつかうやつ）とかが入ってくるんでしょうね。

きょうはジェネレティブ・プログラミングあたりの話！

# TouchDesignerと他のあれこれとの違い

その歴史の始まりは[ジョン・マエダ](https://ja.wikipedia.org/wiki/%E3%82%B8%E3%83%A7%E3%83%B3%E3%83%BB%E3%83%9E%E3%82%A8%E3%83%80)の[Design By Numbers](http://dbn.media.mit.edu/)まで遡って…
とかやってると怖い人いっぱい来るのでやめましょうか！

## ジェネレティブ・プログラミングの種類

ジェネレティブ・プログラミングにもざっくり2種類あります。

- **コードよく書く系**
    - Processing
    - openFrameworks
    - Unity
    - jsとかで頑張るWeb系
    - （プラットフォームではないが）シェーダープログラミング
- **コードあんま書かない系**
    - vvvv
    - Quarts Composer
    - Unreal Engine
    - Houdini

こんな感じでしょうか…それぞれ用途が違うけどジェネ系に使われがちなものを便宜上一絡げにしてます。**コード書く書かないはあくまで相対的なものです。**他になんかあったら教えてください。
コードあんま書かない系は、コード書かずにビジュアルでコーディングするので**ビジュアルコーディング**とか、「ノード」と呼ばれるハコをつなぎ合わせてコードにするので**ノードベースド・プログラミング**とか呼ばれたりもします。実はジェネレティブ・プログラミングに限らずビジュアルコーディングするのもありますが深そうなのでやめときます。

TouchDesignerはこれでいうと後者、**コードあんま書かない系**に位置するもの。
もちろん書けたら捗る場面もめっちゃあるけど、簡単なことならコード書く系よりはだいぶ手っ取り早くできちゃう。

## TouchDesignerのメリット・デメリット

超ざっくりと。

- メリット
    - それっぽいのを繋いでいくだけで、**なにも考えなくてもいろいろできる。**
    - 細かくいろいろ書かなくていいので**素早くたくさんつくれる。**
    - **UIをつくるのもだいぶ簡単。**サイズなど細かい指定もできる。
    - **プリセットが充実。**UIとかはポンポン出していじれば組めちゃう。参考になる例も多々あり。
    - **動画を使うのが楽。**ドラッグ＆ドロップでぽんと置けば使える。
    - **3Dの処理がめっちゃ楽。**こっちもモデルをぽんと置けば終了みたいな。
    - **WindowsでもMacでも動く。**vvvvとかはWindowsでしか動かなかったし、TouchDesignerの最近まで？Windowsでしか動かなかったのでユーザーが限られていた。


- デメリット
    - コード書くのに慣れてる人だと**「なんでこれできないの？」「なんでこれこんなめんどいの？」**とかがたくさんある。if文とか。でもたぶんPython書けるとなんとかなる。
    - みんななにも考えなくてもある程度のことができるので、**出せる絵が似通ったものになりがち。**TouchDesignerに限ったことではないけど。
    - **どういうときにどういう機能を使ったらいいかが覚えるまで全然わからない。**CHOPならCHOPの全パターン試してみるとかやりがち。

とまあいろいろあるんですけど、**素早くつくりたい！**とか、**簡単なやつでいいからつくりたい！**とかには結構向いてると思います。



# TouchDesignerをやってみよう

ということで、**簡単にいい感じになるやつ**をやってみましょう！
とはいえ、**TouchDesignerを立ち上げると出てくる一番最初のプリセットが、TouchDesignerのいいところを結構わかりやすく見せてくれている。**ので、それをいじってみましょう。
詳しい解説とかちゃんと触りたい人は[Tutorial](https://www.derivative.ca/wiki099/index.php?title=Category:Tutorials)の[First Things to Know](https://www.derivative.ca/wiki099/index.php?title=First_Things_to_Know_Part_1_Vid)とかやってほしいので、いろんな説明を省きます。

## ダウンロード
ダウンロードはこちらから。
[Derivative TouchDesigner 099 Download](https://www.derivative.ca/099/Downloads/)
特になにも考えずWindowsかMacか使ってる方でいいと思う。


##とりあえず触ってみる

とりあえず立ち上げるとこういう感じのものが現れます。

<img width="1440" alt="スクリーンショット 2017-11-30 0.21.51.png" src="https://qiita-image-store.s3.amazonaws.com/0/77925/68ff1aa0-26b0-1a14-de18-4c4d6c0cb82e.png">

順番に説明しまーす

<img width="149" alt="スクリーンショット 2017-11-30 1.09.06.png" src="https://qiita-image-store.s3.amazonaws.com/0/77925/79b8e4a9-e62c-6f50-5547-532a8b50d57b.png">
これが**画像**。これじゃないやつでもドラッグ＆ドロップでポンといれるとこんな感じですぐ使える。便利か〜

<img width="143" alt="スクリーンショット 2017-11-30 1.09.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/77925/8a5a0b61-e428-7e2d-fc1e-b8d7d7d6411b.png">
下のやつが**ノイズ。**ランダムに線形で変わる数字出してー！とやると出してくれる。便利か〜
上のやつは**数字を映像に変換するやつ。**波形に合わせて映像の濃淡が0-1の間で変化してます。

<img width="191" alt="スクリーンショット 2017-11-30 1.17.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/77925/d1b89763-8f16-22f2-4560-3fe476950cb0.png">
ちなみにwaveというランダムじゃない波形を使うとこんな感じ。

<img width="686" alt="スクリーンショット 2017-11-30 1.18.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/77925/3b32fba7-fbed-8811-3ceb-9a11d07886e5.png">
画像とノイズ映像をDisplace TOPという箱にいれると、**画像がノイズに合わせて変化する。**右側のDisplace Weightとかをいじるとノイズの乗り方が結構変わるのでいろいろお試しあれ。

<img width="242" alt="スクリーンショット 2017-11-30 1.21.10.png" src="https://qiita-image-store.s3.amazonaws.com/0/77925/bdd148e9-5d34-02e4-590b-93d234cfdec5.png">
そしておもしろいのがこれ。**なぜか簡単に立体に貼り付けられるし、うねうね動かせる。**一覧画面でも3Dを気軽に触ってみれるのがTouchDesignerのおもしろいところ。

<img width="504" alt="スクリーンショット 2017-11-30 1.22.44.png" src="https://qiita-image-store.s3.amazonaws.com/0/77925/0c60d450-c25a-676c-c31b-5c94947d2c7d.png">
これは実は、**geoという箱のうちがわでテクスチャを貼り付ける作業を行っている。**geo1の右下をクリックして、選択されている状態でキーボードのiを押すか、大きく拡大してみると箱の中に入れる。


## ちょっと応用してみる
<img width="386" alt="スクリーンショット 2017-11-30 1.24.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/77925/fa8cc0c5-fddb-e68f-2848-d2ab19579d2b.png">
ちなみにこのgeo1を映像に変換したいときは、キーボードのuを押すか小さく縮小して一覧に戻り、**なにもないところでダブルクリックしてCOMPのタブからCamera COMPとLight COMP、TOPのタブからRender TOPを置いてみよう。**そうするとRender TOPに映像が表示される。詳細はチュートリアルにあるので割愛。

<img width="646" alt="スクリーンショット 2017-11-30 1.28.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/77925/933b50d5-ddd4-b383-8c67-54086314f2c9.png">
これにたとえばLFO CHOPを置いて、Amplitudeを30にしてみる。
（キーボード適当に押しててこのパラメータ窓が出てないときは、キーボードのpを押すと出てきます）

<img width="829" alt="スクリーンショット_2017-11-30_1_30_49.png" src="https://qiita-image-store.s3.amazonaws.com/0/77925/b1aa713c-a62c-fb39-0229-af4335284b3a.png">
LFO CHOPの一番右下のマークを押してから、geo1を選択し、lfo1のchan1をgeo1のRotateの一番左(x軸)にドラッグ＆ドロップ、`Export CHOP`を選択する。

![1511973250778.gif](https://qiita-image-store.s3.amazonaws.com/0/77925/7976f2ac-4821-7e0f-9f77-474a022bacf8.gif)
**わーいめっちゃ動く！**
こんな感じで**ドラッグ＆ドロップで数字をアサインできる**、というのもTouchDesignerの超便利な点のひとつ。たまにバグって別の数字も一緒に変わっちゃったりとか、面倒なこともあるけど基本めっちゃ使いやすい。

<img width="159" alt="スクリーンショット 2017-11-30 1.37.13.png" src="https://qiita-image-store.s3.amazonaws.com/0/77925/eea04f9a-fa0f-f795-ca46-a487605c78f5.png">
最後にこいつが、**箱の外に出すやつ。**

<img width="271" alt="スクリーンショット 2017-11-30 1.52.11.png" src="https://qiita-image-store.s3.amazonaws.com/0/77925/20a0b5fd-b508-8ad6-5897-e41c6ae94818.png">
右クリックして`View...`を押してみると…

<img width="1278" alt="スクリーンショット 2017-11-30 1.52.02.png" src="https://qiita-image-store.s3.amazonaws.com/0/77925/4be84c65-06a4-7a76-64f4-39db19460688.png">
大きい画面で見ることができる。出力を確かめながら操作することも可能。

<img width="146" alt="スクリーンショット 2017-11-30 1.53.48.png" src="https://qiita-image-store.s3.amazonaws.com/0/77925/d669b2c9-b0de-7fc6-1138-c56b241df896.png">
ちなみに右下の青いボタン（Display）をオンにすると…

<img width="811" alt="スクリーンショット 2017-11-30 1.53.55.png" src="https://qiita-image-store.s3.amazonaws.com/0/77925/7c16d873-f703-0278-e05e-2c0b3e93a0ec.png">
**Viewを背景に出すことができる。**かっちょええ〜！！


## 箱の外へ

箱の外に出すやつ、と言いましたが、**実はこの画面は箱の中なのです。**キーボードのuを押すか、最大限縮小してみると…

<img width="549" alt="スクリーンショット 2017-11-30 1.38.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/77925/a1f5052a-cd21-208d-1bc3-56c234b80553.png">
**これが箱の外。**TouchDesignerの一番上位レイヤー。たぶん。
project1という箱の中にいたのでした。こんな感じで、なにもないところでダブルクリックして**Container COMP**を置けば、たくさんの箱を作ってなんでもできる。最高。

## Performモード
細かい設定はいろいろ必要なのだが、最後に**Performモード**について。

<img width="340" alt="スクリーンショット_2017-11-30_1_39_13.png" src="https://qiita-image-store.s3.amazonaws.com/0/77925/6f633a3a-506e-6e5a-3410-74c0cbc11185.png">
めっちゃ地味で目立ちにくいが、**一番左上の[WIKI]の下にあるボタンを押すとPerformモードに切り替わる。**

<img width="1282" alt="スクリーンショット 2017-11-30 1.43.30.png" src="https://qiita-image-store.s3.amazonaws.com/0/77925/ccd65ef5-b3cc-c1ce-9806-02a22deb1493.png">
こんなかんじ。さっきの箱の外に出した映像。escキーでPerformモードを終了できる。

<img width="132" alt="スクリーンショット 2017-11-30 1.44.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/77925/954f1682-a113-93fc-5bd8-6c8ebf211f2c.png">
さっきあった、このPerformという箱（**Window COMP**）で設定した映像がPerformモードに出てくる映像。

Performモードのなにがよいかというと、**Performモードの間は、必要な映像以外処理しなくてすむ。**処理することをTouchDesignerでは**Cook**という。
<img width="774" alt="スクリーンショット 2017-11-30 1.49.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/77925/dc82f632-75f7-f8a2-998e-b28bf56644b2.png">
例えばこのとき、表示したいproject1の映像とは別に、moviefilein1の*3月のウラジオストクの映像*はCookされている。もちろんDisplayをオンにしたりするとさらにCookされて、当然だが**たくさんの映像や信号を同時にCookするほど重くなる。**
これがPerformモードにすると、**最低限のもの以外Cookせず、できるだけ軽い処理で映像を出せる。**やったねIntel Iris! Appleは強靭なグラボを積んでくれ！

### 余談
Cookについては最近TwitterでTouchDesigner公式に指摘されてはじめて詳しいことを知りました
<blockquote class="twitter-tweet" data-lang="ja"><p lang="en" dir="ltr">Bypass is fine, or you can just stop Movie File In TOP from playing using ‘Play’ parameter. Also, we often use Switch TOP or Select TOP, whenever the movie is not selected the TOP will not cook (if viewer are off or its in Perform Mode)</p>&mdash; TouchDesigner (@1null1) <a href="https://twitter.com/1null1/status/934727848019005440?ref_src=twsrc%5Etfw">2017年11月26日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>



# 楽しんで頂けただろうか
ということで一通り触ってもらって、**なんかTouchDesignerっていろいろできるんちゃうか？**というのを数分で感じられたならなによりです。
もうちょっと深くやってみたい方は[Tutorial](https://www.derivative.ca/wiki099/index.php?title=Category:Tutorials)の[First Things to Know](https://www.derivative.ca/wiki099/index.php?title=First_Things_to_Know_Part_1_Vid)などから始めてみてはいかがでしょうか！英語わからなくても出ている通りにやってみたらある程度おぼえます！

あとはBNNさんから出ている書籍なんかもとってもステキです！
[Visual Thinking with TouchDesigner　プロが選ぶリアルタイムレンダリング＆プロトタイピングの極意 | 株式会社ビー・エヌ・エヌ新社](http://www.bnn.co.jp/books/8842/)

## ということで明日は
TouchDesignerアドカレ2017の2日目、Pythonやってみよう基礎編！