🐧

TouchDesignerを知っているか

2023/12/20に公開

adventcalendar

TouchDesigner

tech

この記事は公立はこだて未来大学 Advent Calendar 2023 20日目の記事です。

はじめに

こんにちは　知能システムコース２年のみきとです。

今月の9日から17日までハッカソンに参加し、はじめてやることばかりで賞は頂けなかったですがとても楽しかったです。

皆さんはTouchDesignerを知っていますか？

TouchDesignerとは

TouchDesignerはトロントに本社を置くDerivativeが開発したプログラミング言語です。
公式サイトからTouchDeisngerの概要を引用します

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 rapid-prototyping your latest ideas, TouchDesigner is the platform that can do it all.
上文をdeeplで翻訳したもの
TouchDesignerは、魅力的なリアルタイムプロジェクトやリッチなユーザー体験を作成するために必要なツールを備えたビジュアル開発プラットフォームです。インタラクティブ・メディア・システム、建築プロジェクション、ライブ音楽ビジュアル、最新アイデアのラピッドプロトタイピングなど、TouchDesignerはすべてを可能にするプラットフォームです。

概要から作れるものをまとめると

インタラクティブ・メディア・システム
建築プロジェクション
ライブ音楽ビジュアル
最新アイデアのラピッドプロトタイピング

プロジェクションマッピングやクリエイティブコーディングなどに用いられています。

TouchDesignerはノードベースプログラミング言語です。
ノードをつなげる様子
上の動画の様に、オペレータと呼ばれるそれぞれ機能を持った箱どうしを繋げてプログラミングをします

僕がTouchDesignerをはじめるに至った経緯

1年前期でクリエイティブコーディングに興味をもち、クリエイティブコーディングサークルARTiSに参加しTouchDesignerを知りました。
実際にTouchDesigner触り始めたのは今年の３月頃です。TDSWさんが投稿されたTouchDesignerチュートリアルに沿って基本操作を学びました

TouchDesignerを使ってできる物

TouchDesignerを用いた映像を紹介します。

講義での活用

TouchDesignerを講義で活用することもできます。

例:情報処理演習Ⅱ

Arduinoとのシリアル通信をするときProcessingを用いることを講義では示されます。
しかしどうしてもProcessingを使えない、使いたくないときありますよね。
僕はProcessingを公式サイトからインストールできず、先生から渡されたインストーラもOSが違うものだったので使えませんでした。

TouchDesignerを使えばいいじゃない

TouchDesignerにはSerial Datというシリアル通信ができるオペレータがあります。これを使ってArduinoとのSerial通信をしてみます。

輝度センサから出力された値をTouchDesignerに送ります

Arduino側のコードは以下のようになっています

const int SENSOR = A0;
const int LED =9;

float n = 0;
void setup() {
  // put your setup code here, to run once:
  Serial.begin(9600);
  pinMode(LED,OUTPUT);
}

void loop() {
  // put your main code here, to run repeatedly:
  int value = analogRead(SENSOR);
  int out = map(value,0,200,0,254);
  Serial.write(out);

  if(value<90){
    value=0;
  } 
  analogWrite(LED,out);

  delay(10);
}

TouchDesignerでは以下の様にオペレータを設置しました

Serial2オペレータではArduinoから送信されたバイトがテーブルで格納されています。
その値をChopに送り調整をし、transformオペレータへ値を送っています。

実行した際の様子です。

いかがでしたか

TouchDesignerのことを簡単にでも知っていただけたでしょうか。クリエイティブコーディングや映像を作っている方はぜひ使ってみてください。

おすすめのTutorials

僕の技量では見せれませんが、TouchDesignerを用いてすごい映像表現、作品を作っている方々がいます。数人ご紹介します。

Komakinexさん

miwa maroonさん

さいごに

現在、未来大学でオーディオビジュアルライブを開催しようと企画しています。オーディビジュアルライブとは音と映像を連動させて演出するイベントです。

しかし現在企画メンバーは僕1人しかおらず、開催するために必要な力が足りません。
TouchDesignerに限らず、p5.jsやopenFrameworksなどクリエイティブコーディングに興味ある方、音を使った表現・演出をしたい方、ぜひ僕に連絡してください。
https://twitter.com/vgvgvgk

ここまで読んでいただきありがとうございました。
明日はろくさんの　推しの死体を拝みたくないか？？？（プロムン作品はいいぞ）　です。