yoppa.org


前橋工科大学 – クリエイティブコーディング2025

TouchDesigner基礎 – TOPを学ぶ

スライド資料

TOPについて

TOPは、Texture Operatorの略で、画像や映像を扱うためのオペレーターです。TouchDesignerでは、TOPを使って2Dのビジュアルコンテンツを生成、編集、合成することができます。本日の講義は、このTOPを中心に学んでいきましょう!

TouchDesignerはじめの一歩

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

さらにもう1本!

完成イメージ

height:480

応用: TOPによる画像処理

さらにこのプログラムを発展させて、TOPを使用した画像処理やスイッチングなどの基本的な操作を学びます。

【 TouchDesigner初級講座 】簡単な画像処理とFeedback #02

画像処理を行うためのTOP

TOPの入力を元に画像処理を行うオペレーターが多数用意されています

  • Edge TOP: エッジ検出
  • Blur TOP: ぼかし
  • Bloom TOP: 輝いているような効果
  • Level TOP: レベル補正
  • emboss TOP: 凹凸のあるような効果

など。実際に試してみましょう。

TOPを切り替える

いろいろな画像処理をした結果を、切り替えながら見ることができるように、TOPを切り替えるためのオペレーターを使用してみます。

  • Switch TOP: 複数のTOPを切り替える

フィードバック効果

  • Feedback TOP: フィードバック効果を作成するためのTOP

少し接続が難しいですが、フィードバック効果を作成するためのTOPです。実際に作成しながら解説していきます。

タイリング

  • Tile TOP: タイリングを行うTOP

TOPをタイル状に並べることができるTOPです。実際に作成しながら解説していきます。

TOPの基本を使用したプログラム例

height:480

TOPの基本を使用したプログラム例 02

さらに激しく変化させてみました!

height:400

本日の課題

課題: ノイズで遊ぼう!

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

height:400px

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

参考資料

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

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

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

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

ノイズを使用した作品例 1

  • ノイズ+ノイズ、Bloomエフェクトの追加
height:420

ノイズを使用した作品例 2

  • 万華鏡のようなパターンを生成
height:420

実習!

  • ノイズを使用した作品を作成してみましょう!
  • 次回の講義で作品の発表を行います

アンケート

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