yoppa.org


芸大 – メディアアート・プログラミング I 2025

オリエンテーション、TouchDesigner 初めの一歩

スライド資料 (PDF)

今回は、最初の講義ですので、最初にこの講義の概要とスケジュールについて説明します。

後半は、この講義の演習パートで主に使用するTouchDesigerの紹介と、インストール方法、操作の基本について解説していきます。

「メディアアート・プログラミング I」について

講義概要

現代のメディアアート制作に不可欠なプログラミング技術を習得し、企画から実践的な作品制作までを通してその応用力を高めることを目指します。ビジュアルプログラミング環境「TouchDesigner」を活用し、インタラクティブな表現やジェネラティブなビジュアル生成など、高度なメディアアート作品の制作に必要なプログラミングスキルを体系的に身につけます。また実際のメディアアートの展覧会の企画から展示までの実務についても学びます。

自身の関心に基づいたテーマ・コンセプトを設定し、個人制作に取り組みます。演習内では、展覧会の企画・運営に関する実践的な知識も提供し、作品の立案から設営、最終発表、講評会までの一連のプロセスを体験します。これにより、プログラミング技術だけでなく、企画力、展示実装技術、批評的思考力を養います。

本演習は、プログラミングを単なる技術としてではなく、創造的な表現のための「道具」として捉え、その可能性を最大限に引き出すことを目指します。TouchDesignerなどのツールを使いこなし、自身のアイデアを具現化する力を身につけることで、将来メディアアーティストとして、あるいはメディア表現を活用する多様な分野で活躍するための基盤を築きます。

シラバス (藝大学事システムにログインが必要)

  • 開講責任部署: 美術学部 対象学生:美術(学部・修士・博士)、音楽(学部・修士)、国際(修士)
  • 講義開講時期: 前期
  • 講義区分: 芸術情報センター(AMC)
  • 基準単位数: 3
  • 開講日: 金曜日 3限、4限
  • 校地: 上野(AMC)
  • 授業を行う教員: 田所淳、森山朋絵

※ 履修制限 (定員の設定) は行いません
※ AMCのPCの台数には制限がありますので、ノートPCを持参しての受講 (BYOD) をお薦めします

この講義のざっくりとした内容

  • 演習 (田所担当) : TouchDesignerを用いたリアルタイム3DCGによる表現を中心にしたメディアート制作のための技術を学ぶ
  • 講義 (森山先生担当): 美術館での経験をもとに、現場での実践的なメディアアートの展示や企画について学ぶ
  • 学期末にはAMCのギャラリーでの作品展示を目指します

TouchDesignerについて

  • TouchDesigner
  • https://derivative.ca/
  • カナダのDerivative社が開発したビジュアルプログラミング環境
  • インスタレーションアートやプロジェクションマッピング、メディアアートなど、さまざまな映像や音楽、デジタルアートに関するシステムを簡単に構築可能
  • 詳細: https://derivative.ca/feature/application-building

TouchDesignerを使用した作品例

Astro Immersive AV Performance – Weidi Zhang

ところざわサクラタウン KADOKAWA所沢キャンパス

Fragment Shadow Generating Fragmented Shadows with Multi-Projectors Geometry and Color Calibration

Natural Encounters an emotional link between human and algorithm

404.zero live at Diage Festival, Bangkok, 2023.

Interactive live visual system with venue simulator and chart output for BABYMETAL “METALIZM” – Kezzardrix

NONOTAK – SHIRO (TEASER)

その他沢山の作品が Derivative社のShowcaseで逐次公開されています。参考にしてみてください。

TouchDesignerのインストールとキー登録

TouchDesignerのライセンス

TouchDesignerはProcessingやopenFrameworksのようなオープンソースの開発環境ではなく、Derivative社が販売している製品 (プロプライエタリソフトウェア) です。しかし、非商用の利用の場合には無料で使用可能です。

ライセンスの詳細は以下を参照。

この演習では、NON-COMMERCIAL版を使用します。以下のような制限があります。

  • 解像度は1280×1280 Pixelまでに制限
  • 個人使用または学習用の用途に限り使用可能
  • すべてのアカウントは10個の非商用キーを付与
  • 有料プロジェクトでは使用不可

最初はNON-COMMERCIAL版で使用して、もしより本格的に使用したいと思った場合はEDUCATIONAL版を購入すると良いでしょう。

インストールとキー登録の手順

TouchDesignerはアプリケーションをインストールした後に、アカウントに付与されたキーを登録する必要があります。以下の手順で行いましょう。

ユーザー登録: Derivativeのサイトからユーザー登録

  • Derivative Webサイトのページの「SIGN UP FOR AN ACCOUNT」より
  • 必要事項を記入して送信
  • 登録したemailアドレスにメールが返信されるのでリンクをクリックして登録完了

TouchDesignerをダウンロード

  • 使用しているOSにあわせてダウンロードページからインストーラーをダウンロード
  • インストーラーを起動してインストール (特に設定の変更の必要は無し)

TouchDesignerを起動してキー登録

  • インストールしたTouchDesignerを起動
  • 上部メニューから「Dialogs > Key Mangager」を選択
  • 以下の画面が出力されるので登録した情報でログイン
  • キーを選択して有効化する

アプリケーションの再起動

  • アプリケーションを起動し直すとNON-COMMERCIAL版が起動するはず

AMCのMacにインストールされているTouchDesigner使用の注意

AMCの実習室の全てのiMacにもTouchDesignerがインストールされています。しかしながら、AMCのMacのファイルは起動する度に保存したファイルは消去されて元の状態にリセットされるため、使用する際には以下の手順で毎回キーの登録と削除を行う必要があります。

ユーザーアカウントの作成

  • キーは各自のDerivativeアカウントに付与された個人のものを使用します
  • あらかじめ「SIGN UP FOR AN ACCOUNT」よりユーザー登録しましょう

起動とキーの有効化

  • コンピューターを起動し、TouchDesignerのアプリケーションを起動
  • 上部メニューから「Dialogs > Key Mangager」を選択
  • 以下の画面が出力されるので登録した情報でログイン
  • キーを選択して有効化する

TouchDesignerのアプリケーションを使用

  • 個人のノートPCで使用している人と同じようにTouchDesignerが使用可能となります

キーの削除と終了

  • アプリケーションを終了する前に必ずキーをアプリから削除します
  • 上部メニューから「Dialogs > Key Mangager」を選択
  • Disableのタブを選択し、Disable Keyボタンを押す

システム終了

  • アプリケーションを終了し、システム終了

※この操作を行わないと毎回使用できるキーが減っていってしまうので注意してください!

TouchDesignerはじめの一歩

本日は、まずTouchDesignerはじめの一歩として「バナナを回す」という課題をやってみたいと思います。以下の映像のチュートリアルに準拠しています。

さらにもう1本!

完成イメージ

より詳しくていねいに学びたい方は…

Derivative社が提供しているオンライン教材「The 100 Series: TouchDesigner Fundamentals (TouchDesigner入門)」を使用して入門から基礎的な内容を学ぶことが可能です。熱意のある受講生の方は先取りしてどんどん予習していってください。

101 – Navigating the Environment (制作環境のナビゲーション)

タッチデザイナーの文法

新しいツールや開発環境の学習の大半は、すべてのノブやボタンがどこにあるかを把握することから始まります。この最初のレッスンでは、TouchDesignerを使いこなすことに焦点を当て、必要不可欠なインターフェース要素とコントロール、そして各オペレーターファミリーの基本原則を学びます。

101-1. The User Interface (ユーザーインターフェイス)

101-2. Using the OP Create Dialog (OP作成ダイアログを使う)

101-3. Reading Network Anatomy (ネットワークの解剖)

101-4. Reading Operator Anatomy (オペレーターの解剖)

101-5. Operator Wires, References & Links (オペレータの接続、参照、リンク)

本日の課題

課題: ノイズで遊ぼう!

簡単に二次元から四次元のノイズを生成することのできるNoise TOPを使用して、試行錯誤しながら自分なりの「作品」をつくってみる。プログラムの原型は以下からダウンロードしてください。

まだ操作の基本を習得した段階ですが、まずはいろいろ試行錯誤しながら操作の基本感覚を身に付けていきましょう。その上で以下のような工夫をしてみてください。

基本: 使用されているオペレータのパラメーターを変化させてみる

  • Noise TOP (noise1)
    • ノイズの細かさ
    • ノイズの複雑さ
    • ノイズの種類
    • …など
  • LFO CHOP (lfo1)
    • 変化速度
    • 変化する波形の種類
    • …など
  • HSV Adjust TOP (hsvadj1)
    • 色相を変えてみる (hue)
    • 再度を変えてみる (saturation)
    • 明るさを変えてみる (brightness)
    • …など

応用: オペレーターを追加してみる

  • Noise TOPにNoise TOPを接続するとどうなるか?
  • HSV Adjust TOPの前後に別のTOPを追加してみる
  • LFO CHOPを追加して他のパラメータに参照させてみる
  • …など

参考資料

アンケート

本日の講義に参加した方は、以下のアンケートに回答してください。