Recommended
More Related Content
Similar to TouchDesigenr Beginners' workshop vol.003
Similar to TouchDesigenr Beginners' workshop vol.003 (20)
More from Dan Imagineer
More from Dan Imagineer (15)
TouchDesigenr Beginners' workshop vol.003
- 1. TouchDesigner User Group Japan / Maya Atsuki, Yuki Narumi
- 2. 自己紹介 厚木麻耶 ・お茶の水女子大学 理学部情報科学科 伊藤研究室 髪の毛をジェネラティブアートで表現 ・TouchDesigner歴 5ヶ月 ・インスタグラムにアップする写真に命をかける 量産型女子大生 ・ 鳴海侑希 ・青山学院大学 理工学部 情報学科 3年 研究テーマ模索中 ・TouchDesigner歴 5ヶ月 ・シティガールになりたいカントリーガール
- 3. Overnight Creation 真鶴 2017 https://vimeo.com/223259181
- 5. メンター：Dan IWASAKI ・某広告制作会社の、技術調査/先行開発チームのリーダー。 （筐体～電子回路～ファーム/サーバ～スマホアプリ まで幅広く） ・プライベートでは、”Imagineer”として、テクニカルと、実際のマテリアルを 組み合わせた作品を好んで制作。(Imagineer = Imagine + Engineer) ・夢の国の技術を愛する千葉県浦安市民
- 6. 作品例
- 8. Day for Night 2016 Recap https://www.youtube.com/watch?v=KZdV-lhzC74
- 9. DEVISION on TouchDesigner #2 https://www.youtube.com/watch?v=tcz4a2NfG6U
- 10. Day for Night Artist Series: Refik Anadol https://www.youtube.com/watch?v=NHWHSDXj2q8
- 13. TOKYO ART CITY by NAKED http://tokyoartcity.tokyo/ http://derivative.ca/events/2017/TokyoArtCity/
- 16. TouchDesignerとは
- 17. TouchDesignerとは？ ノードベースの、ビジュアルプログラミング言語 リアルタイムのインタラクティブ・コンテンツの制作によく用いられている プロジェクションマッピング、ビジュアル演出、インスタレーション、モーションセンサ 作品のRapid Prototypingにも向いている。 ユーザ層の幅が広い。 プログラマだけではなく、アーティストやパフォーマー、デザイナ等も利用している。
- 18. TouchDesignerの特徴 ノードベースの、ビジュアルプログラミング言語 ノードもビジュアル表示 安定度が非常に高く、そのままで商用利用も可能 試行錯誤を簡単にでき、できあがったものはそのまま作品として使用できる いろいろなデバイスへの対応 Oculus、Viveなど Pythonや、GLSL等の言語を用いて拡張する事も可能 日本のコミュニティの熱量が高い
- 19. ビジュアルプログラミングと従来型のプログラミング 旧来型の例 : OpenCV / C言語vvvv Pure Data ビジュアルプログラミング言語とは、プログラムをテキストで記 述するのではなく、視覚的なオブジェクトで作成する手法
- 20. TouchDesignerの、得手／不得手 スマホアプリ / ネイティブアプリ(Windows, OSX等) × バイナリ書き出しに対応してないため、問題外。 Webコンテンツ × 通信自体は対応してるが、HTML書き出しなどは不可能。 LIVE演出系 ○ performモードは安定しており、イベント実績も多い。GUIもつくりやすいため、向いてる。 インスタレーション系 ○ さまざまな舞台向け機材との連携を想定されているため、向いてる。 アトラクション / サイネージ / 常設系 ○ 実行形式での書き出しはないものの、それに近い状態での運用が可能。向いてる。 VR系 ○ Oculus、VIVEなどに対応している。VIVEのHMDなしにも対応しており、向いてる。[
- 22. TouchDesignerの開発背景 モジュラージャックシンセサイザの奏者だったGregは、音楽と同時に映像も生成したいと考 えた。 1980年にノードタイプのCGプログラミングアプリケーション『PRSM』を開発。 1982年、映画『TRON』で採用され、一躍有名になる。 『PRSM』は現在『Houdini』と名称を変更しているが、引き続きハリウッドにおけるデファク トスタンダードなCGソフトのうちの一つ。 しかし、Gregは演奏のようなリアルタイムでのCG生成への興味が強く、2000年に役員に 退き、Derivative社を設立。 Houdiniをベースとしたリアルタイム3DCG生成アプリケーションTouchDesignerを開発、 リリースした。
- 23. 主な適用領域 Projection Mapping Interactive Visualization Live Show Control High Performance Video Playback Real-time 3D and Custom Shaders Rapid Prototype to Application https://www.derivative.ca/088/Applications/
- 24. TouchDesigner Users Group Japan Regular workshop Facebook Group
- 25. ライセンス https://www.derivative.ca/wiki088/index.php?title=Licensing 無償版の大きな制限 ・解像度(最大1280x1280) ・商用不可
- 26. 基本的な操作方法
- 30. 基本的な考え方② 複数入力
- 32. つなぎ方の例
- 37. 基本操作⑤ 選択したOPのズーム Shift + h で、選択したノードをズームして表示
- 45. workshop 01 : 表示している画像を変更しよう Trillium.jpg Banana.tif ※Trillium.jpg も、Banana.tif も、サンプルとして、TouchDesignerがインストールされているフォルダにあります。 （Windows 088版の場合） ※フォルダ名やファイル名に日本語が入っていると正しく使用できません
- 46. Workshop 01 : ポイント ・動画/静止画を読み込むノード 「Movie File In」 ・「File」で読み込むファイルを指定 【参考情報】 ・静止画も動画も「Movie File In」で 読み込み可能 ・日本語ファイル/フォルダ名はトラ ブル多発の為使用しない方が良い。 ・解像度が「1280x1280」を超える素 材は、長辺が1280pxに制限される。
- 47. Visual Programmingと従来型のプログラミング 旧来型の例 : OpenCV / C言語vvvv Pure Data ビジュアルプログラミング言語とは、プログラムをテキストで記 述するのではなく、視覚的なオブジェクトで作成する手法
- 49. OPの操作 追加する２ 追加したいOP（例えば、Movie File In）を選択 【参考情報】 ・右上の「Basic」「All」は特に理由がなければ、 「All」を選んでおいた方が良い【088のみ】 ・左上の「Search」と薄く書かれている場所に、OP の最初の文字を打つと、該当のOPがハイライト表示 される
- 50. OPの操作 ヘルプ表示 ？ をクリックすると、OPの説明をWebブラウザで表示 ｉ をクリックすると、OPの情報を表示
- 52. OPの種類② 背景が濃いOP：Generator Movie File In：ファイルからの入力 Video Device In：カメラやキャプチャカードからの入力 Leap Motion：モーションセンサーからの入力 背景が薄いOP：Filter Level：入力されたデータのレベルを変える Cross：2つの入力をクロスフェードする Tile：入力されたデータをタイル状に並べる Out：出力する
- 56. OPの操作④ OPの変更・追加・挿入 OP上で右クリック →「Change OP Type..」で OPを変更できる 変更 追加・挿入 OP同士を繋いでいる線の上で右クリック（線が選択されると黄色になる） → 挿入：「Insert Operator」でOPを、繋いでいる線の間に挿入 追加：「Insert Operator」でOPを、繋いでいる線のOPに並列に追加 どちらも、選択後、OPの選択画面が出るので、追加・挿入したいOPを選択
- 60. workshop02：使えそうなOP Generator(入力) Movie File In:ファイルからの入力 Video Device In:内蔵カメラからの入力 Text：テキスト入力して生成した画像 Constant:指定した値の色 Level:コントラストやガンマ値などのレベルの変更 Cross:2つの入力を重ねる Tile:タイル状に並べる RGB to HSV:HSVカラースペースに変換
- 62. OPの種類 COMP : COMPonent Operator TOP : Texture OPerator CHOP : CHannel Operator SOP : Surface Operator MAT : MATerial DAT : DATa operator
- 63. ○COMP : COMPonent Operator TouchDesigner上のネットワークを作成する時に 使用する部品 ネットワーク内に置いてUIとして使用できるOPもある 外部ディスプレイ出力時に使用する「Window」もある
- 64. ◎TOP : Texture OPerator 画像ベースのデータを扱うOP 【参考情報】 動画は、連続した静止画になる
- 65. ◎CHOP : CHannel OPerator モーションセンサー等のデータ、音声、MIDIデータ を処理するOP 外部からの入力値を簡単に扱うことができる。
- 66. SOP : Surface Operator 3D モデリングの為のOP ポリゴン、カーブ、パーティクルなどの画像の生成ができる
- 68. ○DAT : DATa operator 外部とのデータのやりとりや、ネットワーク内でのデータ の保持に使用
- 69. Operator Snippet [Help]メニュー → [Operator Snippets]で起動 それぞれのOPを利用した ネットワークのサンプル
- 70. TOPとCHOPを繋ぐには？
- 77. 【参考1】四則演算について：足し算 constant chopに、3と2を代入した箱が左側にあります。各constant chopからmath chop につなぎます。 次に、math chopの中身を見てみましょう。Combine ChannelsとCombine CHOPs を両方、Addにしてみてください。 上記の図と同じように、Mathの箱が5となったと思います。 これは、Combine CHOPsをAddにしたことによって、3+2=5となった。ということを表しています。 【課題】『3－2』 『3ｘ2』 『3÷2』 を、OPを使用して表現してみましょう
- 78. 【参考2】ブール演算 And / Or / ExOr などのブール演算も可能です。
- 80. 【課題例2】 Audio Analysis TouchDesignerを起動すると、左側に、メニューのようなものがあります。これは、左上のFileの下のopen Paletteボタン で開いたり、閉じたりすることができます。画面を広く使いたいときは、閉じておくと良いでしょう。さて、その中で、 Tools>audioAnalysisを探してみてください。見つかったら、ドラッグ＆ドロップで画面に、ドロップしてみましょう。そうすると、 audioAnalysisのコンテナが画面上に現れます。 このあと使うchop タブのoperatorは、『AudioFile in』chop, 『audio device out』chop, 『null』 chop, 『select』 chopです。 どのような計算式を入力し、どのようにswitch topを作ると、次のような映像になるか、考えてみてください。 https://www.youtube.com/watch?v=gUo1dKl50Mc
- 81. その他の課題例 カメラで入力したものを、リアルタイムにエフェクトをしてみる 動画ファイルと、カメラで撮影したライブ画像をリアルタイムに合成する 手の動きに合わせて、画像の分割数を変更する
- 82. まとめ
- 83. 自習方法の例 Operator Snippet Derivative サイト内 Forum, Wiki 書籍に掲載されていたり、好きだと思う演出をまねしてみる 仲間と作品を作る
- 84. Operator Snippet [Help]メニュー → [Operator Snippets]で起動 それぞれのOPを利用した ネットワークのサンプル
- 85. Derivative サイト内 Forum, Wiki Wiki内のTutorial Videoは、英語が分から なくてもどうにかなりやすい Forum -> Beginners は英語できないと きついかも・・
- 86. Facebook内グループ TouchDesigner Help Group(英語) TouchDesigner User Group Japan(日本語OK!)
- 87. TouchDesigner Users Group Japan サイト http://touchdesigner.jp
- 90. Fin.
Editor's Notes
- Derivativeの定義 TouchDesigner is a visual development platform that equips you with the tools you need to create stunning realtime projects and rich user experiences. Whether you're creating interactive media systems, architectural projections, live music visuals, or simply rapid-prototyping your latest creative impulse, TouchDesigner is the platform that can do it all. https://en.wikipedia.org/wiki/TouchDesigner
- TouchDesigner is a visual development platform that equips you with the tools you need to create stunning realtime projects and rich user experiences. GLSL レンダリングの内容を記述して定義するプログラミング言語
- http://write.flossmanuals.net/pure-data/wireless-connections/
- 起動時に表示されているネットワークについて説明 それぞれのノードについての説明は詳しくしないけれども。。。 ・Movie File In：動画・静止画の読み込み ・noise：ノイズデータ／乱数の生成 ・Chop To：緑の枠のデータを紫のデータに変換 緑、紫は、扱うデータの種類の差。あとで説明 Displace：ここでは、２つのデータを重ね合わせて画像・動画に変化を加えるノード（のうちの１つ） Geo:3Dのレンダリングをする Out：出力する。
- 出力目的のOPも、そこから先につなげるので、Filter扱いになる
- ネットワーク： 複数のオペレーターをワイヤーでつないで作成したもの
- ネットワーク： 複数のオペレーターをワイヤーでつないで作成したもの
- ネットワーク： 複数のオペレーターをワイヤーでつないで作成したもの
- ウィンドウを動かす
- http://write.flossmanuals.net/pure-data/wireless-connections/
- 真ん中の？：Python 右上のボタンは最初のうちは使わない。以下一応説明 4. コメント：オペレーターについてのコメントを表示・編集することが出来ます。 5. 複写済みパラメータ：右クリックメニューを使ってコピーされたオペレーターを表示します。 6. ランゲージ：オペレーターで使われるスクリプト言語をPythonとtscriptの二つから選択できます。 7. 拡張・折り畳み：全てのパラメータの拡張・折り畳み表示を行います。 8. 非デフォルトパラメータ：デフォルト値から変更されたパラメータのみが表示されます。
- 出力目的のOPも、そこから先につなげるので、Filter扱いになる
- processing motion data, audio, on screen controls, MIDI data, and other input devices these operators According to the derivative wiki entry about CHOPs they “were designed to reduce the tedium(退屈) of motion editing and to help build and manage more complex motion."[7]