TouchDesigner Workshop 2021 by TDSW ダイジェスト



こんにちは、naruminです。
Tokyo Developers Study Weekend、通称TDSWというビジュアルプログラミングコミュニティの運営をしています。
TDSWは2018年からTouchDesignerを中心に月2回程度ワークショップを実施している組織で、４年目となる2021年も元気にたくさんのワークショップをYouTube配信してきました。
ワークショップのアーカイブは運営費や講師への登壇料を賄うためPatreonというサービスを利用して月額$20以上で全て見放題となっております。
この記事では2021年に開催したワークショップの概要を紹介しますので、逆引き的に学習したかった内容のチュートリアルが見つかる機会になればいいなと思います。

##無料で視聴できるWS
###KOHUI X TDSW Create an audiovisual environment in a virtual space with Kohui
instructor: [Kohui](https://www.instagram.com/ko_hui_/)

https://www.youtube.com/watch?v=UBXnInY1hL8&t=2381s

このワークショップでは、Kohui氏のワークフローに沿って、仮想空間にオーディオビジュアル環境を作成していきます。リアルな地面、山脈、空を持つ仮想空間を作り、ランダムなイベントを作り、仮想空間をオーディオビジュアル環境に発展させることができるようになります。

- ゲームエンジンでどのように仮想空間が作られているかを見て、それを参考に、TouchDesignerで映像化したい仮想空間をどのように作るかを企画するプロセスについてお話します。
- これから、地面、山脈、空を作ります。次に、Noiseを使ってテクスチャを作成します。その後、光を作って完全な仮想環境を作ります。
-  2Dフィードバックやインスタンシングを利用して、ランダムなタイミングでイベントを発生させます。
- 仮想空間で発生したイベントのランダムな値がUDPでAbletonのmax for liveに送られ、値によって変化するユニークなサウンドがFMで生成されます。

---
###Introduction to ZIGCAM

https://youtu.be/G6AZKU8GGlE

instructor: [Toyoshi Morioka](https://twitter.com/mogamogamachine)
PhoneとARKitが持つさまざまな情報をPCに送信できるZIGCAM。
ZIGCAMのデータをTouchDesignerで受け取るサンプルプログラムの作り方を学びました。

ZIGCAMアプリ　
developed by [Tech Director's Association](https://tech-director.org/)
https://apps.apple.com/jp/app/zigcam/id1570755292

---
###TDSW YouTube Academy

https://www.youtube.com/playlist?list=PLH6Y6o7cLK9hj0KpPr-5iWVUZcrioBMY8

instructor: [narumin](https://twitter.com/narumin256)

TouchDesignerの入門から基本操作までをガッツリ勉強できます！

---
###Getting Started with GLSL on TouchDesigner | TouchDesignerではじめるGLSL(日本語 / EN subs)

https://www.youtube.com/playlist?list=PLH6Y6o7cLK9jZGSyiAkDxePeBouxU_-eT

instructor: [chimanaco](https://twitter.com/chimanaco)

TouchDesignerでのGLSLの入門から基本操作までをガッツリ勉強できます！

##Patreon登録で視聴できるWS
https://www.patreon.com/tdsw

$20/month で以下のWSを全て視聴することができます！
もちろんサンプルファイル付き！

###TouchDesigner Vol.038 Real-time animations with Tsumikiroom

Date:　2021.2.28
instructor: [Tsumikiroom](https://twitter.com/tsumiki_room)
![Frame _Youtube.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160720/4abdde57-6ab6-d234-c737-d6c86f5d1f75.png)

TouchDesignerでのTOPを使ったインスタンシング、テクスチャアニメーション、カメラパスやポストプロセッシングなど、リアルタイムアニメーションに必要な要素を作例から複合的に学習しました。
パッチングのみで作成しますのでプログラミングが苦手な人でも安心してご参加ください。
DATもテキストエディタもいっさい使いません。

-----------
###TouchDesigner Vol.040 Extend TouchDesigner with TouchDesigner

Date:　2021.3.14
instructor: [Yea Chen](https://twitter.com/yeataro)
![Frame _Youtube (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160720/8740d341-267b-3efd-d65b-607a8d13410a.png)

TouchDesignerは地球上で最も優れたマルチメディア開発環境のひとつですが、もしかしたらあなたの手でもっと良くすることができるかもしれません。
なたはいつもTouchDesignerを使って次から次へと課題をこなしていますが、あなたの仕事仲間は様々なDCC（デジタルコンテンツ制作）環境に慣れていることが多く、このような自由なノードベースのオーサリング環境にすぐに飛びつくことができない場合があります（もちろんHoundiniユーザーは除きます^^）。日常的な作業を行うためのカスタム・ユーザー・インターフェースが必要だと感じることもあるのではないでしょうか？

TouchDesignerのユーザーインターフェースはTouchDesigner自身によって書かれています。
つまり、上記のような問題は、あなたの熟練したTDスキルによって解決することができますし、TDに馴染みのないお友達にも、初めてTouchDesignerに親しみを持って触れてもらうことができます。
あるいは、単純にインターフェイスハッカーとして楽しむこともできます。）

- TDユーザーインターフェースネットワーク
- TDのユーザーインターフェースを変更する（パレット、メニュー、OP作成ダイアログ...など）
- TDのインストール環境を知り、フォルダの中の無視できないファイルを活用する
- TDインターフェースの翻訳（ローカライズ）。
- ワークスペースをカスタマイズするためのヒント
- TDのユーザーインターフェースをインタラクティブにモニターする方法
- カスタムUIコンポーネント
- オープンソースコンポーネントの紹介

-----------
###TouchDesigner Vol.041 Line animation using ZIG SIM

Date: 2021.3.28
instructor: [Ken-ichi KAWAMURA](https://twitter.com/kenichikawamura)
![Frame _Youtube (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160720/0c815b0e-90e0-8bde-079a-8522f39c1039.png)

ZIG SIMを使って、スマートフォンのセンサーの値をTouchDesignerに取り込み、ビジュアライズを行いました。
スマートフォンを使って空間に光の線を描くようなビジュアルを作ってみましょう。
受講に当たってスマートフォンにZIG SIMのインストール（無料版）が必要です。

ZIG Simulator
developed by [1-10, Inc. ](https://www.1-10.com/)
https://zig-project.com/

スマートフォンに標準で内蔵されている各種センサを利用することで、迅速なプロトタイプ開発を可能にするアプリケーション(©1-10, Inc.)

-----------
###TouchDesigner Vol.042 Twisted Torus in SOPs

Date: 2021.4.18
instructor: [Yugo Minomo](https://twitter.com/minoge1001)
![Frame _Youtube (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160720/739561c6-b210-09db-195f-8abc9bdd2487.png)

本講義では、Twisted Torus（3次元的にねじれたトーラス）やTorus Knot（トーラス結び目）の作成を通して、各種SOPの使用法やポイントアトリビュートの扱い方を包括的に学びました。
また、講義の後半では、Umbilic Torus（アンビリック・トーラス）を例に取り、頂点数の多いTwisted TorusをGLSLで動かす手法についても解説しました。

-----------
###TouchDesigner Vol.043 Generative Visuals with Kinect 2

Date: 2021.5.30
instructor: [Crystal Jow](https://www.crystaljow.com/)
![Frame _Youtube (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160720/484158c2-045a-6ef4-a3a0-c424e175b126.png)
Sneak Peak
https://www.youtube.com/watch?v=e_Gxmk3BDPs&t=159s

リアルタイムのモーションデータから、インタラクティブ＆ジェネレイティブなビジュアルを作りました。
このワークショップでは、Microsoft Kinect 2を使用するための基礎知識を学びました。
ワークショップに参加するのにデバイスは必要ありません。

- Kinect 2 センサーのデータの読み取り方
- Kinect2デバイスがなくても Kinect Studio を使って録音や再生を行う方法
- TouchDesignerでKinect データを使ってグリーンスクリーン効果
- 2D インタラクティブビジュアル
- 3D ポイントクラウド

Kinect 2 を使ったジェネレーティブなコンテンツを作成する方法を学びました。

-----------
###TouchDesigner Vol.044 TouchDesigner as an integrated tool in the research scene

Date: 2021.6.6
instructor: [Shunichi Kasahara](https://twitter.com/shn_kasa)
![Frame _Youtube (5).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160720/a0ba96a3-80cd-a01d-76f9-7043f43a43b2.png)

Sneak Peak
https://www.youtube.com/watch?v=HNkG8yyYLEU

このワークショップでは、TouchDesignerを様々な研究プロジェクトの統合ツールとして使用することで、簡単な視覚的実験の構築、実験の実施とデータの記録、データを視覚化して分析する方法を学びました。
ワークショップの後半では、TouchDesignerを統合ツールとして使ったいくつかの研究プロジェクトを紹介しました。

-----------
###TouchDesigner Vol.045 Data Visualization in TouchDesigner

Date: 2021.6.27
instructor: [Caroline Reize](http://carolinereize.com/)
![Frame _Youtube (6).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160720/46a5df0e-31e1-38b6-ed69-925777967e85.png)
Sneak Peak https://www.youtube.com/watch?v=HNkG8yyYLEU

このワークショップでは、データビジュアライゼーションの基本と、データビジュアライゼーションのためのTouchDesignerの使い方を学びました。
最初に簡単な2Dと3Dの例を見て、その後、より複雑なデータビジュアライゼーションを見ていきます。
また、DATやインスタンスを使った作業方法や、データビジュアライゼーションを行う際のワークフローについても、講師の個人的な仕事を取り上げながら説明します。



-----------
###TouchDesigner Vol.046 Collage media & ideas to bloom your originality

Date: 2021.7.18
instructor: [Saeko Ehara](https://twitter.com/Sko_hr)
![Frame _Youtube (7).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160720/23e282f4-0bc7-5dee-bbbc-2002f2b58e54.png)
Sneak Peak

https://www.youtube.com/watch?v=D9P_4rhHmpg

本講座では、TouchDesignerを使用してキラキラしたお花畑を制作しました。
目で見るリアルな世界ではなく、スクリーンの中のオリジナルの世界を構築する方法をご紹介いたします。
L-System、インスタンス、キーフレームアニメーション、カメラ、ライティング、マテリアル、レンダリングした後の映像の加工の仕方、ムービーの書き出し形式や他アプリケーションでの加工について学びました。
その他、参考にしたチュートリアルの紹介や、チュートリアルをどのように活用させていただいているかをお話しいたします。本講座後に、ぜひみなさんだけの世界を制作してください。

-----------
###TouchDesigner Vol.047 Dive into UI/UX development for Event Production

Date: 2021.9.26
instructor: [Atsushi Kobayashi](https://twitter.com/atsushi_kb_)
![cover-BIfo5EP8TKAZY59m5FQIrX0cQb9SQffq.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160720/5772bd25-3a36-2c7f-ae6e-bd8215fad287.png)
Sneak Peak

https://www.youtube.com/watch?v=h7XUrKeGF4c

TouchDesignerを使ってフォトブースコンテンツを制作しました。
ビジュアル制作だけだと思われがちなTouchDesignerですが、画面遷移を伴うエンターテインメント用のコンテンツも制作可能です。
実際にアメリカ・ハリウッドのイベントプロモーションで使用されたコンテンツのプロトタイプを制作するほか、現場でのTouchDesignerの使用事例を豊富に紹介します。

- UI構築、画面遷移設計、各パーツの作り方
- ペイントインタフェースの制作
- ビジュアル制作ではあまり使用しないが重要なCHOPたちの使用例
- Pythonを用いたスクリプト制作
- Snapchatフィルターとの連携

-----------
###TouchDesigner Vol.048 Journey to Mastering CHOPs

Date: 2021.10.13
instructor: [Joe Ohara](https://twitter.com/Joe0hara)
![Frame _Youtube (8).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160720/b1bdc0a7-61af-c56d-8f50-a66c05749f89.png)
Sneak Peak

https://www.youtube.com/watch?v=Xrdmcyt5U5g

TouchDesignerで最も使われているオペレータのCHOPを基礎の基礎から学びました。
システムの構築やコンテンツ制御に欠かせない数値による処理を、より思い通りに、より簡易に行うことを目的とします。
以下の要点に沿って進めていきます。

- CHOPの基礎
- よく使うCHOP達
- UI構築とCHOPの活用
- TimelineとCHOPの関係性
- 実践的なCHOPの使い方

-----------
###TouchDesigner Vol.49 AUDIO & VISUAL LAYERED FRUIT PARFAIT

Date:2021.11.28
instructor: [toru izumida](https://twitter.com/toruizumida)
![Frame _Youtube (9).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160720/878afc85-38ee-ba04-4bed-ee2966c11787.png)
Sneak Peak

https://www.youtube.com/watch?v=oQl_8iz-bn4

インストラクターがオーディオビジュアルパフォーマンスセットの構築方法を紹介しました。
パフェを作るときに重ねていくフルーツのようにセットを構築していきます。
このコンテンツ概要文詩的でいいですね。あなただけのフルーツパフェ的オーディオビジュアルセットができますように。

- Audio Visual基礎設計
- 画像からカラーパターンを取り出す
- Rectangle TOPとTransform TOPを使ったヴィジュアル表現


-----------
###TouchDesigner Vol.050&051 Intro to Deep Learning for Graphics Programmers - From Training to Inference

Date:2021.12.5 & 2021.12.12
instructor: [Scott Allen](https://twitter.com/Scott_Allen__)
![Frame _Youtube_f1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/160720/803a85c4-95dd-a1f3-9d15-febcada95b65.png)


グラフィクスプログラマのための深層学習入門　ー学習から推論までー
現在深層学習の発展により，AIを使ったシステムが至るところで稼働しています。
グラフィクスプログラミング表現においても、物体認識や姿勢推定などの識別モデルでカメラ映像から様々な解析を行なった結果を使用したり、GANやVAEをはじめとした生成モデルで直接フレームを生成することで，古典的なプログラムとはひと味違う表現が可能になります。
このワークショップでは深層学習を活用するための第一歩として、Google Colaboratoryを使って自身で設計したアーキテクチャで学習し、TouchDesigner上で推論するためのプロセスを簡単な識別モデル／生成モデルそれぞれについてレクチャーしました。

-----------

今年もTDSWはTouchDesignerに関する有識者・アーティスト・クリエイターのWSをたくさん実施し、知見をコミュニティに共有するお手伝いをさせていただきました！
ご協力いただいた全てのインストラクターの皆さん、聞き手の皆さん、配信スタッフの皆さん、本当にありがとうございました。
来年もワクワクする楽しいWSをガンガン企画していく所存ですのでぜひTDSWを引き続き応援していただけると嬉しいです！