はじめに
おはようございます、こんにちは、こんばんは。
KAYAC Advent Calendar 2018の16日目の記事を担当します、入社２年目の大河原と申します。
普段はSG事業部でソーシャルゲームのサーバサイドエンジニアをしております。
ちなみに昨年度のKAYAC Advent Calendar 2017では「一端のゲームエンジニアが"エレベータ"について本気出して考えてみた」を投稿させていただきました。
一年はあっという間ですね。今年もお世話になりました。来年もよろしくお願いします。
さて、今回も普段の業務内容とはちとかけ離れたテーマでお送りしたいと思っております。
ズバリテーマは今年僕がドハマリした「TouchDesigner」についてです！
なるべく初心者の人に向けて書いたつもりですが、ところどころ「何言ってんだ？」となる部分があるかもしれません。（あと、「これ間違ってるだろ！」とか。）
その際は Twitter やっておりますのでそちらのほうにご連絡ください。
対象読者
- TouchDesignerが気になっているけどよくわからない人
- どうやって勉強したらいいかわからない人
- なんかクリエイティブにVJとかやってみたい人
- とにかくインスタ映えしてモテたい人
- インスタレーション作品やインタラクティブな作品を作ってみたい人
など。
お品書き
- はじめに
- TouchDesignerとは？
- どんなものが作れるの？
- 実際にTouchDesignerを使ってみよう！
- TouchDesignerのおすすめ勉強法
- さいごに
TouchDesingerとは？
「たっちでざいなー」と読みます。
まずはじめに「たっちでざいなー」の正しい表記は"TouchDesigner"です。
"touchdesigner"でも"Touch Designer"でもありません。
（インターネット上で間違えるとどこからともなくTouchDesigner警察👮🚨が現れるとか…）
TouchDesignerは一言で言ってしまえば今流行りの「ノードベースのビジュアルプログラミングツール」の一つです。
こんなイメージ！
カナダにあるDerivativeという会社が開発しているもので、様々な機能を持った箱と箱（これをノードといいます）とを線で繋いでいい感じに組み合わせることで幅広いジャンルのアートやプロダクトを制作していくことが可能です。
ちなみに似たようなノードベースのプログラミングツールとしてPureData、vvvv、Maxなどが挙げられます。
プログラミング初心者でも視覚的に工程を追うことができることからデザインやアート界隈でも最近使われることが多いツールです。（こう言ったアート + テクノロジーで表現することを""クリエイティブコーディング"と呼ぶそうです。なんか、かっこいいですね。）
また後にも紹介しますが、ArduinoやRaspberry PiはもちろんMIDIキーボードなどのハードウェアからUnityなどのソフトウェアまで様々な外部との連携が取りやすいのも特徴です。
もちろん、コードも書けます。
信号処理や画像処理が得意なC++はもちろんのこと、ゴリゴリにGLSLを書くこともできたり、Pythonにも対応しているためデータ分析や機械学習のシステムを組むことも可能です。
あえて少し大げさな表現をすれば、「デザイナ/アーティストにとってはエンジニアのようなことができるツールであり、エンジニアにとってはデザイナ/アーティストのようなことができるツール」と言えるでしょう。
どんなものが作れるの？
Derivativeの公式ブログを見ると様々な事例が紹介されています。ここでいくつか取り上げてみましょう。
① Tokyo-based Collective nor's Dyebirth Ponders "What is Life?"
Commentary movie of dyebirth - nor vimeo.com
こちらのインスタレーション作品は日本人アーティストチーム「nor」が作成した"dyebirth"です。
ライフゲームのアルゴリズムに沿って機械的に落下するカラフルな液体同士が有機的に混合しあって一つのアート作品として成り立っています。このアルゴリズムの設計であったりハードウェア(Arduino3台)の制御がTouchDesignerで行われています。ちなみに後述する日本語で書かれた数少ないTouchDesignerの参考書籍の著者である松山さんもnorに所属するメンバーの一人です。
② The Making-of Go Robot's Interactive Motion-Tracked Dance Installation
Interactive dance installation - Cinedans vimeo.com
こちらはオランダ・アムステルダムで開催されたVRのイベントで展示されたモーショントラッキングとオーディオリアクティブを組み合わせたダンスのインスタレーション作品です。オーディオの部分ではAbleton Liveと連携しています。リンクの記事を読めばわかりますが、コントローラを担う部分のユーザインターフェースまで凝っていてとても好きな作品です。こう言ったバックエンド的なシステムも同時に組み込めるのがTouchDesignerの大きな利点の一つですね。
③ ThoughtForms | Visualize and 3D Print Your Thoughts
こちらは一風変わったユニークなプロジェクトです。Emotiv Insightという名の脳波(EEG)をセンサリングする機器(Amazonで6万円!!)で、OSC通信を介して取得したデータをTouchDesignerに送信し、被験者の思考に応じた抽象的なイメージを具現化して3Dプリンティングできると言った科学的かつ芸術的な取り組みの一つです。なかなかぶっ飛んでますね。（大好きなアイドルを念じ続けたら一体どんな形になるのかやってみたい所存。）
sensiLab and MADA - ThoughtForms | Melbourne Knowledge Week 2016 www.youtube.com
④ Kazoe Nobuaki's Sensational and Highly Adaptive DEVISION VJ System
やはり紹介しないわけにはいかないでしょう。Kazoe Nobuakiさんは東京を拠点に活動されるVJグループREZのメンバーのお一人です。TouchDesignerを使って高機能なVJツール「DEVISION」を（プロトタイプはわずか２ヶ月で!）開発しています。僕も先日行われたTouchDesigner Meetupで実際に僕も生のKazoeさんのプレイ、そして実際のDEVISIONを見せてもらいましたが最高でした。
⑤Touch Designer Things - deadmau5
こちらは直接的な作品紹介とは少し異なりますが、あの世界的に有名なDJのDeadmau5がTouchDesignerのチュートリアルをTwitchで放送し始めたことがここ最近話題になりました。どうやら彼のツアーでDerivativeの人が演出を担当したとかなんとか...同じカナダなのでそこまで不思議ではありませんが、これはファンにとっては胸熱な話ですね。（でも、"Touch Designer"表記だ…）
ここで紹介した以外にも今年のCEDECであったミスiDで話題になった3D女子高生”Saya”のセッションで話題に上がったり、所変わって映画業界でも「エイリアン・コヴェナント」で利用されていた（！）り「ゼロ・グラビティ」で利用されていた（！！）りと、TouchDesignerの活躍の場の広さに改めて驚かされます。
TouchDesignerのおすすめの勉強法
私がTouchDesignerと出会ったのは今年2018年の夏前ごろでした。
本屋で松山さんの著書を手にとって「おもしろそー」と思っていたところに、たまたまTwitterでTouchDesigner Study Weekendの勉強会の情報が流れてきて勢いで参加したのがきっかけで、そこから火がつき気がついたら5ヶ月弱で130作品ほど作ってきました。
Before(2018/7/21)
After(2018/10/25) www.instagram.com
10月は1日1個のペースでSNSに作品を上げていましたね。寝る前のスクワット10回ですら三日坊主の僕がこうして続けてこれた理由は勉強法にあったと自分で思います。
ここでは5つのトピックに分けてその方法を紹介していきたいと思います。
①続けるためにコミュニティに参加しよう
人間は飽きる生き物です。飽きないためのベストプラクティスは人と会って話すことです。
TouchDesigner Study Weekendというイベントが定期的に都内（最近は都外でも）で開催されているのでTouchDesingerを使っている人・みたい人は参加してみましょう。
毎回豪華なゲスト陣がTouchDesignerを使った様々な技術や作品作りのコツなどを教えてくれます。
もちろん、初心者向けのコースもあります。運営をしているのは学生ですが、そこ関係なく技術は僕の倍くらいある人たちなので見くびることなかれ。
それからここを通して他のTouchDesignerユーザとも知り合えます。このツールは幅広い活用法があるおかげもあってユーザも様々なバックグラウンドの人がいます。エンジニア・デザイナー・ディレクター・アーティスト・映像屋・学生・ダンサーなどなど。
（僕もコミュ障ながら端っこで毎回参加しているのでぜひ声をかけていただけたらと思います…。）
②国内外問わずTutorial/Workshopの動画は出たら見るのを習慣に
TouchDesignerに限らずですが、海外で人気のツールとなると
「日本語の資料が少ないから勉強しづらい」 「英語でもいいけど質の良さが直感でわからない」
などという声をよく耳にしますが、幸運にもDerivativeのサイトには BEST OF THE BEST - TOUCHDESIGNER 088 WORKSHOP VIDEOSという勉強したい人にはうってつけのページがあります。
また他にも先日、科学未来館で開催されたMUTEK.jp 2018で同日開催された公式のWorkshopの動画もyoutubeで見ることができます。こちらは日本語でも見ることができる貴重な動画です。
Introduction to TouchDesigner (English / 日本語) www.youtube.com
それから他にも僕が大変お世話になった（なっている）TutorialとしてMatthew Ragan大先生の動画のことも紹介しておきます。
個人的には初心者はまず彼のTutorial動画を何本かひたすら真似るところから入るのが一番じゃないかと思います。
彼の資料や動画が非常にオススメできる点は「どうしてそうするとうまくいくのか、今はよくわからなくてもとりあえず真似てみてほしい」というスタイルです。
僕のような人間は何かしら作品を作るときについつい「どういう仕組みで動くんだろう」「どうしてここはこの設定だとうまくいくんだろう」「そもそももっと良い設計にした方がパフォーマンスが良くなるんじゃないか」などと本来持っていたクリエイティブの本筋からずれたところで袋小路に入ってしまい結局モノが完成しない、という経験が多々あります。
そこをMatthew Ragan大先生はあえて口に出して「とりあえずこうするといい感じになるよ」というスタイルでTutorialを進めていきます。実際つまづいた部分の大半は理解が進むと自然とわかってくる部分がほとんどなので（特にTouchDesignerの場合は）この教え方がとても強力でした。
英語もTOEIC700点の僕でも字幕見れば難なくみれるレベルなのでそこは心配いりません。
③細かいテクニック取得や辞書替わりとして本を読む
教材動画が充実していると言ってもやはり、僕のようなアナログ思考人間はついつい現物として手に持てる「本」が欲しくなってしまいます。ですが古い情報しか載っていない書籍は嫌だし、かと言って海外の書籍を持つ気にもなりません。
安心してください、2018年12月現在、（僕の観測している限りでは）TouchDesignerの日本語書籍は１冊しかありません。
その本は上でも紹介したnor所属の松山さんが執筆されています。大人の事情でリンクは貼りませんが、ググればどの本かすぐわかると思います。
前半は初心者向けのTutorialをざっくり説明しつつ、中盤は少し込み入った外部デバイスとの連携などの話を盛り込みつつ、後半は国内外のTouchDesignerを使ったアーティストやスタジオのインタビュー記事という構成になっています。1冊4000円とそこまで高くないので、TouchDesignerユーザであれば一冊持っておいて損はないと思います。（一応言っておきますが紹介マージンもらってるとかはないですよ！）
④モチベーションのために作品をSNSにあげよう
さて5ヶ月弱で130作品も作ってきたと豪語した僕ですが、もちろんほとんどが「は？」みたいなクオリティです。ではなぜそんなクオリティの作品でもSNSに上げ続けるかといえば、決して達成感とか優越感とかばかりではなく「クリエイターとしての健康」みたいな部分が大きいと感じています。まあ、この辺りは本題ではないしここまできて今更ポエムを書く気は起きないので字のごとく「健康」としてとらえてください。
作品を作る前にぼんやりと「こういう感じのものを作りたい」みたいなのをメモっておいてから実際に作ることが多いのですが、SNSにアップしておくとそれと比較して自分は「何が作りたくて」「何が実際に作れて」「何が実際に作れなかった」か、を振り返りやすいです。さらに言ってしまうと「何が評価（いいね、やお気に入り）されるか」というのも指標としてまとめることができます。わーい、一石二鳥。
特にエンジニア思考だとなりがちな、難しい技術や演出だからと言って面白いと思ってもらえるわけではない、ということを数をもって実感できます。これは以前から頭では理解しているつもりでしたが、ここ半年の活動を経てより強く感じることとなりました。もちろん、これは裏を返せば難しいことをしなくてもその人の世界観や表現がマッチすれば色んな人に好きだと思ってもらえるということです。 （アートは門外漢なので、すごく当たり前のことを言っている気がしますね。）
最近は海外のアーティストからコメントをもらったり、TouchDesignerの公式にRepostしてもらったりとハッピーな事柄が多いです。まあ、とはいえ「PRBむずくね?」「GLSL完全に理解した()」「とりあえずFeedback使って派手にするか」みたいな素人+αレベルなのでこれからもこの活動は精力的に続けていきたい所存です。
⑤理解できなくてもFaceBookグループや公式フォーラムをウォッチしよう
これは少々難易度が高いですが、非常にオススメです。
15年近く開発が続いているTouchDesignerですが、アップデートが頻繁でかつ驚くほど新しい機能が毎バージョンに追加されます。もちろん全てを理解できなくても、一体どんな機能が入る（あるいは改良される）のかを確認したり、出回っているネットの情報では網羅仕切れない部分のTipsなどを吸収するためにもFacebookグループや公式フォーラム、それからSlackグループ（近々Discordに移行するという噂も？）にはぜひ入っておくのをオススメします。そして自分が困ったり、あるいは困っている人にアドバイスできそうであれば積極的にコメントしていきましょう。 Facebookに限らず、TwitterやInstagramでもユーザ間のコミュニケーションは活発です。僕は時間があればTwitterで #TouchDesigner のハッシュタグを見るようにしています。
これは学習法とは話が変わりますが、どの技術においてもコミュニティが盛り上がっていることが一番大切です。１ユーザとして最大限学んで、最大限遊び尽くしましょう。
実際にTouchDesignerを使ってみよう！
さてここまで長いこと書いてきましたが、せっかくですのでTouchDesignerを使った作品を一つ作ってみましょう。
TouchDesignerを始めた頃の最初に感じる醍醐味は、やはりオーディオリアクティブな映像表現かと思われます。
しかし、AdventCalenderに書くにはちょっとありきたりなので、それはよそ様のサイトに任すとして今回はなるべく初めての人でも楽しめるような「くだらないプロダクトを作ろう」ということで、「自分の声で作るキーボード」を作ってみたいと思います。
github.com （toxファイルをGitHubで共有します。）
まずシステム全体を見てみます。
大きく分けて4つのパートで見ていきます。
①信号の入力と分割部分
Keyboard In CHOPは指定したキーが押されていると「1」、押されていないと「０」を返します。今回は「ドレミファソラシド」を1,2,3,4,5,6,7,8にあてていますが、MIDI In CHOPなどを使って外部デバイスから入力信号を取ることも可能です。
②映像の加工と演出部分
該当するキーが押されていると音だけではなく鍵盤部分に映像が流れるようにするためにCross TOPを使用しています。これは入力された二つの映像を0~1に対応させてMIXすることができるTOPです。ただ素直にKeyboard In CHOPの信号をCross TOPに使うと映像のON-OFFがくっきりしすぎてしまうため今回はLag CHOPを使って信号の立ち上がり/たち下がりに緩急をつけています。
③装飾（黒鍵）のデザイン部分
ここは特になんの工夫もせずにRectangle TOPを変形・変色させていい感じに配置しています。今更ですが少しチープすぎたかもしれません。笑
④出力音声処理部分
Math CHOPは非常によく使います。様々な信号処理が可能で大変便利です。今回は単純に音声を合成するためにしか使っていません。8つの動画の音声を4つずつで2つの信号に分割し、ステレオにしています。
さてこれで完成です。
さいごに
いかがだったでしょうか。当初自分は12/23担当と勘違いしており、この記事も4時間程度で書いたため、だいぶ駆け足な内容となりましたがTouchDesigner、ひいてはこういったクリエイティブコーディングの世界の面白さの片鱗でも読者の皆様に伝わっていたら幸いです。
明日は@handlenameによる「途中から始めてるDDD」という記事を予定しております。 楽しみですね。
クリスマスまで残り10日を切りました。みなさん、良い師走をお過ごしください。
