課題: 「生成コレクション」
Sarah Meyohas, Infinite Petals
課題: 生成AIを用いて、架空のコレクションを作成して展示する
Dall-E やStable Diffusion やMidjourney などここ数年で生成AIを用いた画像生成の技術が爆発的に進歩しています。工学デザイン実習IIIcの第1課題は、画像生成AIを積極的に活用して作品を制作します。画像生成AIの魅力のひとつは、単一のプロンプト (画像の生成を指示する文章) から大量のバリエーションの画像を生成できる点です。この性質を利用して、パッケージデザインやカーデザイン、建築のイメージスケッチなど様々な分野で活用が始まっています。今回の課題は、この画像生成AIの大量に類似画像を生成できるという点に着目して、何かのテーマによって収集された架空のコレクションを作成して作品として展示を行います。
画像生成AIを用いて「架空のコレクション」を作成する
題材は自由だが、テーマの「架空のコレクション」を想起させるものとする
展示を前提に、グリッド状に生成された「標本」画像を陳列して展示する (フォーマットは別途提供)
全てのコレクションを収集し編集した映像も作成する予定 (オープンキャンパスでの展示に活用)
使用する画像生成AIは好みのサービスを各自選択する
参考作品
今後のスケジュール (暫定)
4月29日: 第1課題出題
5月06日: 休日 (こどもの日)
5月13日: 第1課題制作方法解説
5月20日: エスキース 1
5月27日: エスキース 2
6月03日: 中間講評、第2課題出題
6月10日: 第2課題制作方法解説
6月24日: エスキース 1
7月01日: エスキース 2
7月08日: エスキース 3
7月15日: エスキース 4
7月22日: 展示設営
7月29日: 全課題展示、講評
本日の内容
TOPを極める!
[スライド資料 ]
TOP – 画像 (テクスチャー) を扱うオペレーター
TOPs 画像を扱う – 全体の流れ
画像ファイルを扱う
動画ファイルを扱う
画像の補正
形と色
画像合成の基本
マットとマスク
パターンの生成
コンテンツのルーティング
Bloom (光沢) エフェクト
フィードバックループの作成
ライブ入力
画像と動画の保存
VIDEO
テクスチャオペレータ（TOP）は、リアルタイムでGPUベースの合成と画像操作を提供する
Movie file in TOPは、ムービーと静止画の両方をTOPにロードするために使用する
はじめに、画像ファイルを読み込んでから、インタラクティブビューワを使って画像を詳しく見ていく
サンプルファイル
VIDEO
このビデオでは、Movie File In TOPを使用して、動画を読み込みや動画の再生と制御に関する重要な事項について見ていく
Movie File In TOPには、ユーザーがファイルの再生モードを制御できるパラメータがある (シーケンシャル、タイムラインにロック、インデックス指定)
TouchDesignerでは動画のフレームレートを「image per second」または「サンプルレート」と呼ぶ
ファイルのサンプルレートは、Index指定モードを使用する場合に特に重要
サンプルファイル
VIDEO
TOPを使って画像を補正するいくつかの異なる方法を見ていく
Level TOP
HSV Adjust TOP
Edge TOP
Open Color IO
Monochrome TOP
Composit TOP
サンプルファイル
VIDEO
入力画像を扱うだけでなく、TOPでいくつかの基本的な図形を作成することもできる
Circle TOP
Rectangle TOP
など
この例では、回転するインジケータ、多角形、ビネット、ドロップシャドウ付きのボタンを作成する方法を見ていく
サンプルファイル
VIDEO
コンポジット (画像の合成) は、リアルタイムグラフィックスを扱う際によく使われる操作
背景の追加、グラフィックの合成、画像のブレンドなど
Composite TOP
2つのTOP入力に対して単一のタイプの演算を実行するTOPもある
Add TOP, Subtract TOP, Multiply TOP
サンプルファイル
VIDEO
マットとマスクは、トランジション、レイアウト、さらに複雑な合成を作成するためによく使用される
Composit TOPやMultiply TOPでエレメントをマスクできることはすでにみた
さらに、Matte TOPを使って、より複雑なコントロールすることができる
サンプルファイル
VIDEO
TouchDesignerでは、TOPを使ってパターンを作成する方法が数多くある
Tile TOPは反射または鏡面された重なり合うパターンを作成するために使用
Mirror TOPは万華鏡のようなタイル状のパターンを作成するために使用
Composit TOPにはトランスレート・ステップという便利なパラメータがあり、トランスレートとタイルの両方のパラメータを使用することで、タイルブロックを構築し、それを調整することで詳細な繰り返しシーケンスを作成することができる
サンプルファイル
VIDEO
オペレータ信号のルーティングは、ワイヤとリンクの両方で行うことができる
Cross TOPとSwitch TOPは、オペレータワイヤを使用
Select TOPはリンクを使用
Null TOPは、時間を節約し、ネットワークの変更を簡単にする
In TOPとOut TOPは、TOPネットワークを他のコンポーネントを通してルーティングするために使用される
サンプルファイル
VIDEO
サンプルファイル
VIDEO
Feedback TOPは、無限再帰ループを作成することなくフィードバックループを作成できる
軌跡の描画、パターン生成、その他の視覚効果の作成方法
サンプルファイル
VIDEO
Video Device In TOP: ライブビデオをキャプチャする
Video Device In TOPは、コンピュータ上でローカルにビデオストリームを公開する他のアプリケーションとも連動できる
OBS、Notch、Snap Camなど
NDI In TOP、Syphon Spout In TOP、Video Stream In TOP、WebRTCはTouchDesignerでライブビデオを受信する他の方法
サンプルファイル
VIDEO
動画の保存: ファイルメニューから利用できるムービーエクスポートダイアログを使用するのが最も簡単
よりカスタムな書き出し処理を行うには、Movie File Out TOPを使うこともできる
書き出しのコーデック、圧縮、フィールド、マルチチャンネル、メタデータ、色深度、オーディオコーデック、ビットレートを設定可能
サンプルファイル
本日の実習
本日の演習: タイル + フィードバックで遊んでみる!
アンケート
本日の演習に参加した方は以下のアンケートに答えてください。
本日の内容
TOPを極める!
[スライド資料 ]
TOP – 画像 (テクスチャー) を扱うオペレーター
TOPs 画像を扱う – 全体の流れ
画像ファイルを扱う
動画ファイルを扱う
画像の補正
形と色
画像合成の基本
マットとマスク
パターンの生成
コンテンツのルーティング
Bloom (光沢) エフェクト
フィードバックループの作成
ライブ入力
画像と動画の保存
VIDEO
テクスチャオペレータ（TOP）は、リアルタイムでGPUベースの合成と画像操作を提供する
Movie file in TOPは、ムービーと静止画の両方をTOPにロードするために使用する
はじめに、画像ファイルを読み込んでから、インタラクティブビューワを使って画像を詳しく見ていく
サンプルファイル
VIDEO
このビデオでは、Movie File In TOPを使用して、動画を読み込みや動画の再生と制御に関する重要な事項について見ていく
Movie File In TOPには、ユーザーがファイルの再生モードを制御できるパラメータがある (シーケンシャル、タイムラインにロック、インデックス指定)
TouchDesignerでは動画のフレームレートを「image per second」または「サンプルレート」と呼ぶ
ファイルのサンプルレートは、Index指定モードを使用する場合に特に重要
サンプルファイル
VIDEO
TOPを使って画像を補正するいくつかの異なる方法を見ていく
Level TOP
HSV Adjust TOP
Edge TOP
Open Color IO
Monochrome TOP
Composit TOP
サンプルファイル
VIDEO
入力画像を扱うだけでなく、TOPでいくつかの基本的な図形を作成することもできる
Circle TOP
Rectangle TOP
など
この例では、回転するインジケータ、多角形、ビネット、ドロップシャドウ付きのボタンを作成する方法を見ていく
サンプルファイル
VIDEO
コンポジット (画像の合成) は、リアルタイムグラフィックスを扱う際によく使われる操作
背景の追加、グラフィックの合成、画像のブレンドなど
Composite TOP
2つのTOP入力に対して単一のタイプの演算を実行するTOPもある
Add TOP, Subtract TOP, Multiply TOP
サンプルファイル
VIDEO
マットとマスクは、トランジション、レイアウト、さらに複雑な合成を作成するためによく使用される
Composit TOPやMultiply TOPでエレメントをマスクできることはすでにみた
さらに、Matte TOPを使って、より複雑なコントロールすることができる
サンプルファイル
VIDEO
TouchDesignerでは、TOPを使ってパターンを作成する方法が数多くある
Tile TOPは反射または鏡面された重なり合うパターンを作成するために使用
Mirror TOPは万華鏡のようなタイル状のパターンを作成するために使用
Composit TOPにはトランスレート・ステップという便利なパラメータがあり、トランスレートとタイルの両方のパラメータを使用することで、タイルブロックを構築し、それを調整することで詳細な繰り返しシーケンスを作成することができる
サンプルファイル
VIDEO
オペレータ信号のルーティングは、ワイヤとリンクの両方で行うことができる
Cross TOPとSwitch TOPは、オペレータワイヤを使用
Select TOPはリンクを使用
Null TOPは、時間を節約し、ネットワークの変更を簡単にする
In TOPとOut TOPは、TOPネットワークを他のコンポーネントを通してルーティングするために使用される
サンプルファイル
VIDEO
サンプルファイル
VIDEO
Feedback TOPは、無限再帰ループを作成することなくフィードバックループを作成できる
軌跡の描画、パターン生成、その他の視覚効果の作成方法
サンプルファイル
VIDEO
Video Device In TOP: ライブビデオをキャプチャする
Video Device In TOPは、コンピュータ上でローカルにビデオストリームを公開する他のアプリケーションとも連動できる
OBS、Notch、Snap Camなど
NDI In TOP、Syphon Spout In TOP、Video Stream In TOP、WebRTCはTouchDesignerでライブビデオを受信する他の方法
サンプルファイル
VIDEO
動画の保存: ファイルメニューから利用できるムービーエクスポートダイアログを使用するのが最も簡単
よりカスタムな書き出し処理を行うには、Movie File Out TOPを使うこともできる
書き出しのコーデック、圧縮、フィールド、マルチチャンネル、メタデータ、色深度、オーディオコーデック、ビットレートを設定可能
サンプルファイル
本日の実習
本日の演習: タイル + フィードバックで遊んでみる!
アンケート
本日の演習に参加した方は以下のアンケートに答えてください。
本日の内容
TouchDesignerのオペレーター (Operators) について理解する
TOP CHOP SOP DAT COMP MATそれぞれの役割
基本的な使用方法をマスターする
実習
先週の復習 – TouchDesignerのキー登録
起動とキーの有効化
コンピューターを起動し、TouchDesignerのアプリケーションを起動
上部メニューから「Dialogs > Key Mangager」を選択
以下の画面が出力されるので登録した情報でログイン
キーを選択して有効化する
TouchDesignerのアプリケーションを使用
個人のノートPCで使用している人と同じようにTouchDesignerが使用可能となります
キーの削除と終了
アプリケーションを終了する前に必ずキーをアプリから削除します
上部メニューから「Dialogs > Key Mangager」を選択
Disableのタブを選択し、Disable Keyボタンを押す
オペレーターについて
本日はオペレーターについて概観していきます。それぞれのオペレーターの種類と役割についてしっかりと理解していきましょう。
TOP: Texture Operator – 2次元の画像や動画
CHOP: Channel Operator – 数値や数値の連なり(配列、信号、音声)
DAT: Data Operator – テキスト、表データ、Pythonスクリプト、外部との連携
SOP: Surface Operator – 3次元の形状やその加工
COMP: Compornent – 複数のオペレーターをまとめる
MAT: Material Operator – 3次元の物体の質感(マテリアル)
TOP: Texture Operator – 2次元の画像や動画
VIDEO
Working with TOPs 動画 サンプルファイル TOPs（テクスチャオペレーター）は、2Dイメージ処理に用いられる。これには色のあるイメージやビデオのほか「深度」などのデータ表現も含まれる。
TOPsは視覚的要素の作成や変更に頻繁に使用される。オリジナルのアートワーク、ポストプロセス効果、プロシージャルデザインなど。
TOPsはGPUにより、複雑なネットワークでも高速に動作する。
GLSL TOPsを利用してシェーダーコードを書くことができるし、C++に精通していれば「dll」を作成してカスタムオペレーターを作ることも可能。
スクリプトTOPを使えばPythonでイメージ操作が行えるが、GPU加速はされない点に注意が必要。
CHOP: Channel Operator – 数値や数値の連なり(配列、信号、音声)
VIDEO
Working with CHOPs 動画 サンプルファイル CHOPs（チャンネルオペレーター）は、TouchDesignerネットワークの神経系と考えることができる
センサーデータ、大規模な配列、アニメーションデータの処理、タイミングやイベントの調整などに使用される。
CHOPsには、シングルサンプル(単一の数値)とマルチサンプル(数値の連なり)の2種類がある。すべてのCHOPはチャンネルとサンプルで構成されている。
チャンネルは、オペレーター内で上から下へと名前が並べられている。例えば、Mouse In CHOPには「tx」と「ty」という2つのチャンネルがあり、これらは画面上のマウスのx位置とy位置に対応している。
DAT: Data Operator – テキスト、表データ、Pythonスクリプト、外部との連携
VIDEO
Working with DATs 動画 サンプルファイル DATs（データオペレーター）は、データやスクリプトを保持するために使用される。
DATsにはテキストタイプとテーブルタイプの2種類がある。テキストタイプのDATsは、Pythonコードやシェーダーなどの複数行のテキストを保持する。
テーブルタイプのDATsは、行と列のセルで構成され、各セルにはテキスト文字列が含まれる。
基本的なDATオペレーターには、テキストDATとテーブルDATがある。どちらも最初は空であり、そこから構築していく。
テキストDATsでは、TouchDesignerネットワークの変更を調整したり、サードパーティライブラリにアクセスしたり、Python拡張機能でCOMPsの機能を拡張したりするために、機能的なPythonコードを書くことができる。
テーブルDATsは、プロジェクトで使用される表形式のデータを保持、整理、再配置するために使用される。また、複数のテーブルを手続き的に結合し、内容をソートするためにも使用される。
SOP: Surface Operator – 3次元の形状やその加工
VIDEO
Working with SOPs 動画 サンプルファイル SOPs（サーフェスオペレーター）は、TouchDesignerで3Dサーフェスを生成、インポート、修正、組み合わせるために使用される。
TouchDesignerでは、これらのオペレーターを手続き的に修正し、変更して、他のジオメトリを作成することができる。
SOPsのネットワークは、3Dシーンを生成したり、LEDやプロジェクションマッピングのためのモデルを作成したり、その他多くの用途に使用される。
COMP: Compornent – 複数のオペレーターをまとめる
VIDEO
Working with COMPs 動画 サンプルファイル COMPs（コンポーネントオペレーター）は、他のオペレーターとは異なり、TouchDesigner内で完全なネットワークを内包することができる。
COMPsには4種類があり、それぞれ3Dオブジェクト（レンダリング用）、パネル（ユーザーインターフェース作成用）、ダイナミクス（シミュレーション用）、その他（雑多なタスク用）として使用される。
一般的なCOMP構成には、3Dレンダリングネットワークのセットアップが含まれる。通常、カメラCOMP、ジオメトリCOMP、ライトCOMPが必要とされる。
2Dユーザーインターフェースのセットアップも一般的なCOMP構成である。Window COMPを使用して、任意のオペレーターからフローティングウィンドウを作成できる。
プロジェクトのパフォーマンスを最適化するためには、通常、一つのWindow COMPのみを開き、その中で出力とUIを配置することが推奨される。
実習: いろいろなオペレーターを組み合わせる
本日学習した教材のサンプルファイルを素材として組みあわせて、新たな作品を制作してみましょう!
ファイルは以下のリンクからダウンロードしてください。
制作例: 回転するリング
ダウンロード
アンケート
本日の講義を受講した方はアンケートに答えてください。
[スライド資料]
いよいよ、AIを用いた作品制作を実践します! 本日は、Googleによって開発されたWeb上で機械学習を体験できるサイト “Teachable Machine ” を使用してプログラミングを行います。
視覚的にとても分かりやすく機械学習について学ぶことが可能です。実際にいろいろな題材を学習させながら、機械学習による分類 (Classification) のイメージを把握していきましょう。
Teachable Machineで機械学習を体験
Teachable Machine 実習 1: Teachable Machineで機械学習
まずは学習を試してみる
Teachable Machineで新規のImageプロジェクト を作成
数種類 (クラス) の画像セットをWebカメラで撮影
「Train Model」ボタンで学習開始
Previewで確認、いまいちな場合は画像の撮影からやり直し
最初は「Image Project」が簡単なのでおすすめです。どのような画像のセットを学習させると面白いか考えながらいろいろ試してみましょう!
学習モデルを書き出す
Teachable Machineでは学習させたモデルを書き出してプログラムで利用することが可能です。様々な開発環境に対応して、サンプルのソースコードの生成まで簡単に行うことが可能です。
対応している環境
学習モデルの書き出し手順
Teachable Machineで新規のImageプロジェクト を作成
数種類 (クラス) の画像セットをWebカメラで撮影
「Train Model」ボタンで学習開始
Previewで確認、いまいちな場合は画像の撮影からやり直し
問題無ければ「Export Model」ボタンを押す
Tensorflow.js > Upload (shareable linke) > p5.jsを選択して「Upload my model」ボタンを押す
書き出し設定
学習させたモデルをp5.jsに読み込む
p5.js Editorにログイン
ファイルを保存して自分のプロジェクトに
p5.jsのサンプルコード をp5.js Editorで開くモデルのURLを書き換える
... (前略) ...
// Classifier Variable
let classifier;
// Model URL
let imageModelURL = ''; // ← ここをアップロードしたモデルのURLに
... (後略)...実習2: Teachable Machine + p5.jsで独自のスケッチを作ってみる
Teachable Machine + p5.js + ml5.jsをローカルでプログラミングする手順
オフィシャルに提供されている p5.jsのサンプルコード をベースに
indx.htmlをサンプルと同じものに
sketch.jsをコピー&ペースト
モデルのURLを書き換え
サンプルコードに日本語のコメントを入れたバージョンを作成しました
実行結果
ポイント! サンプルコードのどこで分類を行っているのかを読み解く
重要なのは、下記の関数
// 分類結果を取得
function gotResult(error, results) {
// エラー処理
if (error) {
console.error(error);
return;
}
// 結果をコンソールに表示
console.log(results[0]);
// 分類結果のラベルを取得
label = results[0].label;
// 再度分類処理を行う
classifyVideo();
}重要なのは、results[] 配列
画像を解析してその確度 (そのクラスである確率) が高い順番に配列に格納されている
ラベル名 (lavel) と確度 (confidence) が取得できる
例えば一番確度の高い結果のラベルとその確度を取得するには
let label = result[0].label; //ラベル
let confidence = result[0].confidence; //確度分類結果のラベル (文字列) と信頼度 (0.0 – 1.0 の値)の一覧を表示
分類結果のラベル (文字列) と信頼度 (0.0 – 1.0 の値)の一覧を表示するサンプル
実行結果
Emoji Cam
ちょっと工夫してみる。表情によって絵文字を表示するカメラのサンプル。この例では、普通の顔 (normal)、笑顔 (smile) 、悲しい顔 (sad) の3種類を学習してみました。
実行結果
転移学習 – TeachableMachineの原理
一般的に画像のクラス分け (Classification) には膨大な画像データが必要
例: ImageNet
物体認識ソフトウェアの研究で用いるために設計された大規模な画像データベース
2024年4月現在、14,197,122個のラベルと画像のセット
では何故Teachable Machineでは数十枚程度の画像で正確なクラス分けができているのか?
→ 転移学習 (Transfer Learning) という手法を採用している
転移学習
転移学習とは、あるタスク向けに学習したモデルを、類似したタスクを実行するモデルの開始点として使用するディープラーニングの手法
転移学習によるネットワークの更新と再学習は、ゼロからネットワークを学習させるよりも高速で簡単
転移学習は画像分類、オブジェクト検出、音声認識などのアプリケーションに使用される
参考: Transfer Learning – 転移学習 – MathWorks
転移学習のイメージ
次回までの課題
Teachable Machine + p5.js + ml5.jsで何ができるか考える!
ここまでの内容を踏まえて、Teachable Machine + p5.js + ml5.jsの組み合わせでオリジナルのスケッチを作成してみましょう
あまり壮大なものでなく、ちょっとしたアイデアで
例:
指の向きで図形を移動
表情とEmojiを対応させる
笑顔で変化する
..etc.
しかし、1週間で自分のオリジナルにのコードによる作品を完成するのは大変かもしれません。以下の2つのステップで可能なところまで目指してください。
ステップ 1: 作品のアイデアを発表 (全員)
実際にコーディングして完成するところまでは至らず作品のアイデアだけ発表
どんなことが実現できたら面白いか、ただし今回の環境で技術的に範囲で
以下の内容を含むこと
何の画像を学習させるのか、題材とそのバリエーションについて
その画像を使用してどのような反応をさせるのか
自分が面白いと思うポイント
ステップ 2: 実際にコーディング (できる人は目指して欲しい)
ステップ1で考案したアイデアを実際に実現してみる!
Teachable Machine + p5.js + ml5.jsで
制作テンプレート
以下にここまで解説してきた制作用のテンプレートとサンプル一式が格納されています。Zipでダウンロードして活用してください!
[スライド資料]
前回の課題、調査結果発表
前回のリサーチ課題「生成AIを用いて創作された作品について」の発表を行います。一人10分程度でリサーチしてきた成果を発表してください。
前回の課題: 生成AIを用いた創作された作品について
課題の内容を確認します。
生成AIを用いた創作された作品について調査
アート (メディアアート、インタラクティブアート …etc)
デザイン (グラフィック、プロダクト、ファッション ..etc)
音楽
…etc
できれば自分の興味がある分野で
どのような生成AIを使用しているのか
調査には生成AIを用いて構いません (むしろ積極的に使用してください) ただしどのように用いたのか記録しておくこと
参考: AIを使用したアーティストと作品
今回リサーチして発表を行ったアーティストや作品以外にも AIを使用して作品を制作しているアーティストは沢山います。膨大な作品の中からいくつか有名なものを紹介していきます。今後の作品制作の参考にしてください。
Harold Cohen, AARON (1973)
Gene Kogan, A Book from the Sky 天书 (2015)
Sarah Meyohas, Generated Petals Interpolating (2016)
Qosmo, The Latent Future (2017)
BIGYUKI × Qosmo, John Connor Project (2023)
Refik Anadole, Unsupervised — Machine Hallucinations — MoMA (2023)
Memo Akten, Layers of Perception (2024)
その他にも大勢のアーティストがAIを用いた作品を制作している
参考図書、参考テキスト
AIartist.org
AI Artist.org
歴史的に重要な人工知能アートや創造的実践に役立つAIアート・ツールをキュレーションし、AIがアートや文化に与える影響について発信している情報センター。
参考図書
徳井直生. “創るための AI: 機械と創造性のはてしない物語.” (2021).
参考テキスト
ChatGPTによる要約
この記事「The AI Brain in the Cultural Archive」では、デジタル時代における文化的アーカイブとAIの役割について詳しく述べています。著者のLev Manovichは、AIが文化的データをどのように処理し、解析するか、そしてそれが人間の文化的理解や歴史の見方にどう影響を与えるかを探求しています。
要約
デジタルアーカイブの進化:
デジタル技術の進化により、過去の文化的資料がデジタルフォーマットで保存され、容易にアクセス可能になった。
この大量のデータは、AIを用いて新しい方法で解析される機会を提供している。
AIの役割:
AIは、画像、テキスト、音楽など、異なるメディア形式の文化的アーカイブを解析するために使用されている。
AIによる分析は、パターン認識、意味の抽出、関連性の見出しといった形で行われる。
文化的理解への影響:
AIによるデータの解析は、文化的テキストやイメージに対する新しい理解を提供する。
しかし、この技術はまだ発展途上であり、どのように文化的コンテクストを完全に理解し解釈するかは継続的な課題である。
未来への展望:
AIがさらに進化することで、人間が見過ごしていた文化的データの側面を解明する可能性がある。
文化的アーカイブにおけるAIの使用は、文化研究に革命をもたらす可能性が高い。
著者は、AI技術が文化的アーカイブの分析をどのように変えていくか、その可能性と限界について考察しています。AIの適用により文化的資料から新しいインサイトを引き出す一方で、その解釈には依然として人間の介入が必要であると述べています。
本日の内容
TouchDesignerのオペレーター (Operators) について理解する
TOP CHOP SOP DAT COMP MATそれぞれの役割
基本的な使用方法をマスターする
実習
先週の復習 – TouchDesignerのキー登録
起動とキーの有効化
コンピューターを起動し、TouchDesignerのアプリケーションを起動
上部メニューから「Dialogs > Key Mangager」を選択
以下の画面が出力されるので登録した情報でログイン
キーを選択して有効化する
TouchDesignerのアプリケーションを使用
個人のノートPCで使用している人と同じようにTouchDesignerが使用可能となります
キーの削除と終了
アプリケーションを終了する前に必ずキーをアプリから削除します
上部メニューから「Dialogs > Key Mangager」を選択
Disableのタブを選択し、Disable Keyボタンを押す
オペレーターについて
本日はオペレーターについて概観していきます。それぞれのオペレーターの種類と役割についてしっかりと理解していきましょう。
TOP: Texture Operator – 2次元の画像や動画
CHOP: Channel Operator – 数値や数値の連なり(配列、信号、音声)
DAT: Data Operator – テキスト、表データ、Pythonスクリプト、外部との連携
SOP: Surface Operator – 3次元の形状やその加工
COMP: Compornent – 複数のオペレーターをまとめる
MAT: Material Operator – 3次元の物体の質感(マテリアル)
TOP: Texture Operator – 2次元の画像や動画
VIDEO
Working with TOPs 動画 TOPs（テクスチャオペレーター）は、2Dイメージ処理に用いられる。これには色のあるイメージやビデオのほか「深度」などのデータ表現も含まれる。
TOPsは視覚的要素の作成や変更に頻繁に使用される。オリジナルのアートワーク、ポストプロセス効果、プロシージャルデザインなど。
TOPsはGPUにより、複雑なネットワークでも高速に動作する。
GLSL TOPsを利用してシェーダーコードを書くことができるし、C++に精通していれば「dll」を作成してカスタムオペレーターを作ることも可能。
スクリプトTOPを使えばPythonでイメージ操作が行えるが、GPU加速はされない点に注意が必要。
CHOP: Channel Operator – 数値や数値の連なり(配列、信号、音声)
VIDEO
Working with CHOPs 動画 CHOPs（チャンネルオペレーター）は、TouchDesignerネットワークの神経系と考えることができる
センサーデータ、大規模な配列、アニメーションデータの処理、タイミングやイベントの調整などに使用される。
CHOPsには、シングルサンプル(単一の数値)とマルチサンプル(数値の連なり)の2種類がある。すべてのCHOPはチャンネルとサンプルで構成されている。
チャンネルは、オペレーター内で上から下へと名前が並べられている。例えば、Mouse In CHOPには「tx」と「ty」という2つのチャンネルがあり、これらは画面上のマウスのx位置とy位置に対応している。
DAT: Data Operator – テキスト、表データ、Pythonスクリプト、外部との連携
VIDEO
Working with DATs 動画 DATs（データオペレーター）は、データやスクリプトを保持するために使用される。
DATsにはテキストタイプとテーブルタイプの2種類がある。テキストタイプのDATsは、Pythonコードやシェーダーなどの複数行のテキストを保持する。
テーブルタイプのDATsは、行と列のセルで構成され、各セルにはテキスト文字列が含まれる。
基本的なDATオペレーターには、テキストDATとテーブルDATがある。どちらも最初は空であり、そこから構築していく。
テキストDATsでは、TouchDesignerネットワークの変更を調整したり、サードパーティライブラリにアクセスしたり、Python拡張機能でCOMPsの機能を拡張したりするために、機能的なPythonコードを書くことができる。
テーブルDATsは、プロジェクトで使用される表形式のデータを保持、整理、再配置するために使用される。また、複数のテーブルを手続き的に結合し、内容をソートするためにも使用される。
SOP: Surface Operator – 3次元の形状やその加工
VIDEO
Working with SOPs 動画 SOPs（サーフェスオペレーター）は、TouchDesignerで3Dサーフェスを生成、インポート、修正、組み合わせるために使用される。
TouchDesignerでは、これらのオペレーターを手続き的に修正し、変更して、他のジオメトリを作成することができる。
SOPsのネットワークは、3Dシーンを生成したり、LEDやプロジェクションマッピングのためのモデルを作成したり、その他多くの用途に使用される。
COMP: Compornent – 複数のオペレーターをまとめる
VIDEO
Working with COMPs 動画 COMPs（コンポーネントオペレーター）は、他のオペレーターとは異なり、TouchDesigner内で完全なネットワークを内包することができる。
COMPsには4種類があり、それぞれ3Dオブジェクト（レンダリング用）、パネル（ユーザーインターフェース作成用）、ダイナミクス（シミュレーション用）、その他（雑多なタスク用）として使用される。
一般的なCOMP構成には、3Dレンダリングネットワークのセットアップが含まれる。通常、カメラCOMP、ジオメトリCOMP、ライトCOMPが必要とされる。
2Dユーザーインターフェースのセットアップも一般的なCOMP構成である。Window COMPを使用して、任意のオペレーターからフローティングウィンドウを作成できる。
プロジェクトのパフォーマンスを最適化するためには、通常、一つのWindow COMPのみを開き、その中で出力とUIを配置することが推奨される。
実習: いろいろなオペレーターを組み合わせる
本日学習した教材のサンプルファイルを素材として組みあわせて、新たな作品を制作してみましょう!
ファイルは以下のリンクからダウンロードしてください。
制作例: 回転するリング
ダウンロード
本日の内容
実習の概要について
生成AIについて調査
生成AI解説
次回までの課題発表
工学デザイン実習IIIc – 概要
今期の工学デザイン実習IIIcのテーマ
生成AIを使い倒す!
今期の工学デザイン実習IIIcでは、現在世界中で注目されている「生成AI」についてとりあげます。生成AIの技術的進歩は凄まじく世の中に多大な影響を与えています。アートやデザインの分野でも無視できません。そこで、今期のは人工知能、特に生成AIの基礎から応用までを探求し、AIを用いた創造的作品を作成するプロセスを探求していきます。
まず始めにGoogleのTeachable Machineを活用してAIの基本を学び、さらにプログラミング支援、テキストと画像生成、音楽、インタラクティブメディアの生成、パフォーマンスアートとAIについて掘り下げていきます。ここまでの内容を元に中間発表を行った上で、受講者はそれぞれで生成AIを用いた創作プロジェクトを企画します。後半は受講者それぞれが企画したプジェクトについて発表し、それを元にディスカッションを行い最終プロジェクトの作成に取り組みます。最後にそれぞれの作品を元にした展覧会を企画し、作品を展示し講評会を行います。
疑問 – 生成AIを使って良いの?
※ この意見はあくまでこの実習の担当田所の個人的なものです。生成AIの使用の可否はそれぞれの講義や実習の担当の教員の指示に従ってください
生成AIの登場は、約30年前にインターネットでの検索エンジンのサービスが開始した当時と良く似ている
Yahoo!(1994)、Infoseek(1996)、Google(2000)
今までは想像もできないことだった
多くの知識が一般に開放された
それまでの常識 (勉強、調査、研究) を覆した
検索サービス開始当初は反対する人も多くいた
倫理的な視点「ネット検索はずるい」「コピペでレポート」
学習効率的な視点「ネットで調べても勉強にならない」
著作権的な視点「勝手に情報収集」
「政府で規制すべき!」という人も
現在はどうなったか?
ネット検索はあまりにも強力で利便性が高い
人類はもう元の社会には戻れない
いろいろな問題はありつつ、積極的に利用する方向へ
ネット検索を使えないことのほうが問題に
生成AIは検索よりもさらに強力な可能性を秘めている
「検索」から「相談」へ
膨大なデータから新たなものを創造(生成)可能
様々なメディアに対応 (文章、画像、音楽、映像、プログラム)
誰でもすぐに「巨人の肩の上に立つ」ことが可能
ただし問題点も…
書かれている内容には嘘が含まれている可能性
情報漏洩 – 機密情報や個人情報などを安易にChatGPTに送信することは危険
著作権を侵害しているという問題提起
社会に対する影響 (教育・研究活動)
「生成AIはチート(いんちき、ずるい)」という意見もあり
「人類はこの数ヶ月でもうすでにルビコン川を渡ってしまったのかもしれない」https://utelecon.adm.u-tokyo.ac.jp/docs/20230403-generative-ai
どのようにしたら問題を生じないようにできるのか
方向性を見出すべく行動することが重要
活用の可能性を積極的に探る
生成AIは今後アートやデザインといった創作の分野でも無視できない存在となっていくのは確実
今期のデザイン実習IIIcでは「生成AI」に正面から取り組んでいきたい
まだ非常に新しい分野
いろいろ試行錯誤しながら…
今年やった内容が来年にはもう古くなっている可能性もあり
まだ誰もやっていなかった新たな作品を創作できる可能性大
John Maeda, The Design in Tech Report 2017
一緒に探求しながら新たなデザインを開拓していきましょう!
実習課題
さっそく、生成AIを駆使して調査をしてみる
以下の内容について調査して発表してください (調査時間1時間)
以下の4つの用語について、それぞれの定義について
人工知能、AI
機械学習、マシーンラーニング、ML
深層学習、ディープラーニング、DL
生成AI、ジェネラティブAI、GenAI
GPTとは何か?
(ChatGPTに使われている意味でのGPT)
GPTとは何か?
「G」「P」「T」それぞれの意味
※ 調査には生成AIを用いて構いません! ただしどう使用したかを記録しておくこと。
参考: 調査に有効な生成AIサービス
ChatGPT
https://chat.openai.com
OpenAIの提供する人工知能チャットボット
登録無しでも使用できるようになった (GPT-3.5)
ただし有料版のGPT-4のほうが格段に強力
画像生成、コード生成なども可能
Microsoft Copilot
https://copilot.microsoft.com
Microsoftによるサービス
OpenAI同様、GPTを使用している
Bing検索と組み合わせたネット情報の調査が得意
画像生成、コード生成なども可能
Claude AI
https://claude.ai
会話の流暢さはChatGPTやCopilotを凌ぐ印象
ただし、まだハルシネーションがきつい
現在は限定公開
用途によっては有用
解説 – 生成AIについて
映像資料を観ながら生成AIについて理解していきましょう
Introduction to Generative AI – Google
VIDEO
ChatGPT: 30 Year History | How AI Learned to Talk
VIDEO
But what is a GPT? Visual intro to Transformers | Chapter 5, Deep Learning
VIDEO
次週までの課題
この実習では生成AIを用いた創作について探求します。そこで以下の内容について調査してください。次回一人10分ずつくらいで発表してもらいます。
生成AIを用いた創作された作品について
生成AIを用いた創作された作品について調査
アート (メディアアート、インタラクティブアート …etc)
デザイン (グラフィック、プロダクト、ファッション ..etc)
音楽
…etc.
できれば自分の興味がある分野で
どのような生成AIを使用しているのか
調査には生成AIを用いて構いません (むしろ積極的に使用してください) ただしどのように用いたのか記録しておくこと
次週までの課題その2
Githubの学生会員になる
今回は、最初の講義ですので、最初にこの講義の概要とスケジュールについて説明します。
後半は、この講義の演習パートで主に使用するTouchDesigerの紹介と、インストール方法、操作の基本について解説していきます。
スライド資料
「クリエイティブコーディング」について
講義概要
テーマ: コードで創造的に表現する
クリエイティブコーディングとは、機能ではなく表現のためのコンピュータプログラミングだ。この講義ではクリエイティブコーディングのためのアプリケーションを活用し、グラフィクス、アニメーション、オーディオビジュアル、ジェネラティブデザイン、インタラクションといったクリエイティブコーディングのための制作のための技術の基礎から応用までを学んでいく。現在多くのアーティストや制作現場で実際に使用されている制作環境であるTouchDesignerをメインの開発環境として、制作環境の基本操作から始めて最終的に自身の作品を制作できる技術の習得を目指す。このような能力は、デザイナー、エンジニア、アーティストなど、様々なクリエイティブな職業で求められるものであり、本講義はその基盤となる。
TouchDesignerについて
TouchDesignerを使用した作品例
Astro Immersive AV Performance – Weidi Zhang
Interactive live visual system with venue simulator and chart output for BABYMETAL “METALIZM” – Kezzardrix
WE ARE NONOTAK 2K19
その他沢山の作品が Derivative社のShowcase で逐次公開されています。参考にしてみてください。
TouchDesignerのインストールとキー登録
TouchDesignerのライセンス
TouchDesignerはProcessingやopenFrameworksのようなオープンソースの開発環境ではなく、Derivative社が販売している製品 (プロプライエタリソフトウェア) です。しかし、非商用の利用の場合には無料で使用可能です。
ライセンスの詳細は以下を参照。
この演習では、NON-COMMERCIAL版を使用します。以下のような制限があります。
解像度は1280×1280 Pixelまでに制限
個人使用または学習用の用途に限り使用可能
すべてのアカウントは10個の非商用キーを付与
有料プロジェクトでは使用不可
最初はNON-COMMERCIAL版で使用して、もしより本格的に使用したいと思った場合はEDUCATIONAL版を購入すると良いでしょう。
インストールとキー登録の手順
TouchDesignerはアプリケーションをインストールした後に、アカウントに付与されたキーを登録する必要があります。以下の手順で行いましょう。
ユーザー登録: Derivativeのサイトからユーザー登録
TouchDesignerをダウンロード
使用しているOSにあわせてダウンロードページ からインストーラーをダウンロード
インストーラーを起動してインストール (特に設定の変更の必要は無し)
TouchDesignerを起動してキー登録
インストールしたTouchDesignerを起動
上部メニューから「Dialogs > Key Mangager」を選択
以下の画面が出力されるので登録した情報でログイン
キーを選択して有効化する
アプリケーションの再起動
アプリケーションを起動し直すとNON-COMMERCIAL版が起動するはず
TouchDesignerはじめの一歩
これから先の数回は、Derivative社が提供しているオンライン教材「The 100 Series: TouchDesigner Fundamentals (TouchDesigner入門) 」を使用して入門から基礎的な内容を学んでいきます。熱意のある受講生の方は先取りしてどんどん予習していってください。
本日は、101 – Navigating the Environment (制作環境のナビゲーション) の前半部分をやっていきましょう!
101 – Navigating the Environment (制作環境のナビゲーション)
タッチデザイナーの文法
新しいツールや開発環境の学習の大半は、すべてのノブやボタンがどこにあるかを把握することから始まります。この最初のレッスンでは、TouchDesignerを使いこなすことに焦点を当て、必要不可欠なインターフェース要素とコントロール、そして各オペレーターファミリーの基本原則を学びます。
101-1. The User Interface (ユーザーインターフェイス)
VIDEO
101-2. Using the OP Create Dialog (OP作成ダイアログを使う)
VIDEO
101-3. Reading Network Anatomy (ネットワークの解剖)
VIDEO
101-4. Reading Operator Anatomy (オペレーターの解剖)
VIDEO
101.5. Operator Wires, References & Links (オペレータの接続、参照、リンク)
VIDEO
本日の課題
課題: ノイズで遊ぼう!
簡単に二次元から四次元のノイズを生成することのできるNoise TOPを使用して、試行錯誤しながら自分なりの「作品」をつくってみる。プログラムの原型は以下からダウンロードしてください。
まだ操作の基本を習得した段階ですが、まずはいろいろ試行錯誤しながら操作の基本感覚を身に付けていきましょう。その上で以下のような工夫をしてみてください。
参考資料
基本: 使用されているオペレータのパラメーターを変化させてみる
応用: オペレーターを追加してみる
Noise TOPにNoise TOPを接続するとどうなるか?
HSV Adjust TOPの前後に別のTOPを追加してみる
LFO CHOPを追加して他のパラメータに参照させてみる
…など
次週までの予習課題
以下の映像を事前に観ておく
101 – Navigating the Environment (制作環境のナビゲーション)
アンケート
本日の講義に参加した方は以下のリンクからアンケートに回答してください。
4月11日
4月18日
今回は、最初の講義ですので、最初にこの講義の概要とスケジュールについて説明します。
後半は、この講義の演習パートで主に使用するTouchDesigerの紹介と、インストール方法、操作の基本について解説していきます。
「メディアアート・プログラミング I」について
講義概要
メディアアートのためのプログラミングの技術を駆使して、実践的な作品制作のための技術とコンセプトメイキングについて学ぶ。個人制作をベースにしながら、立案した作品テーマやコンセプトを掘り下げて作品として制作し展示する。具体的には現在多くのアーティスト達や制作現場で実際に使用されている制作環境であるTouchDesignerをメインの開発環境として、制作環境の基本操作から始めて最終的に自身の作品を制作できる技術の習得を目指す。
シラバス (藝大学事システムにログインが必要) 開講責任部署: 美術学部 対象学生：美術（学部・修士・博士）、音楽（学部・修士）、国際（修士）
講義開講時期: 前期
講義区分: 芸術情報センター（AMC）
基準単位数: 3
開講日: 金曜日 3限、4限
校地: 上野(AMC)
授業を行う教員: 田所淳、森山朋絵
※ 履修制限 (定員の設定) は行いません
この講義のざっくりとした内容
演習 (田所担当) : TouchDesignerを用いたリアルタイム3DCGによる表現を中心にしたメディアート制作のための技術を学ぶ
講義 (森山先生担当): 美術館での経験をもとに、現場での実践的なメディアアートの展示や企画について学ぶ
学期末にはAMCのギャラリーでの作品展示を目指します
TouchDesignerについて
TouchDesignerを使用した作品例
Astro Immersive AV Performance – Weidi Zhang
Interactive live visual system with venue simulator and chart output for BABYMETAL “METALIZM” – Kezzardrix
WE ARE NONOTAK 2K19
その他沢山の作品が Derivative社のShowcase で逐次公開されています。参考にしてみてください。
TouchDesignerのインストールとキー登録
TouchDesignerのライセンス
TouchDesignerはProcessingやopenFrameworksのようなオープンソースの開発環境ではなく、Derivative社が販売している製品 (プロプライエタリソフトウェア) です。しかし、非商用の利用の場合には無料で使用可能です。
ライセンスの詳細は以下を参照。
この演習では、NON-COMMERCIAL版を使用します。以下のような制限があります。
解像度は1280×1280 Pixelまでに制限
個人使用または学習用の用途に限り使用可能
すべてのアカウントは10個の非商用キーを付与
有料プロジェクトでは使用不可
最初はNON-COMMERCIAL版で使用して、もしより本格的に使用したいと思った場合はEDUCATIONAL版を購入すると良いでしょう。
インストールとキー登録の手順
TouchDesignerはアプリケーションをインストールした後に、アカウントに付与されたキーを登録する必要があります。以下の手順で行いましょう。
ユーザー登録: Derivativeのサイトからユーザー登録
TouchDesignerをダウンロード
使用しているOSにあわせてダウンロードページ からインストーラーをダウンロード
インストーラーを起動してインストール (特に設定の変更の必要は無し)
TouchDesignerを起動してキー登録
インストールしたTouchDesignerを起動
上部メニューから「Dialogs > Key Mangager」を選択
以下の画面が出力されるので登録した情報でログイン
キーを選択して有効化する
アプリケーションの再起動
アプリケーションを起動し直すとNON-COMMERCIAL版が起動するはず
AMCのMacにインストールされているTouchDesigner使用の注意
AMCの実習室の全てのiMacにもTouchDesignerがインストールされています。しかしながら、AMCのMacのファイルは起動する度に保存したファイルは消去されて元の状態にリセットされるため、使用する際には以下の手順で毎回キーの登録と削除を行う必要があります。
ユーザーアカウントの作成
起動とキーの有効化
コンピューターを起動し、TouchDesignerのアプリケーションを起動
上部メニューから「Dialogs > Key Mangager」を選択
以下の画面が出力されるので登録した情報でログイン
キーを選択して有効化する
TouchDesignerのアプリケーションを使用
個人のノートPCで使用している人と同じようにTouchDesignerが使用可能となります
キーの削除と終了
アプリケーションを終了する前に必ずキーをアプリから削除します
上部メニューから「Dialogs > Key Mangager」を選択
Disableのタブを選択し、Disable Keyボタンを押す
システム終了
※この操作を行わないと毎回使用できるキーが減っていってしまうので注意してください!
TouchDesignerはじめの一歩
これから先の数回は、Derivative社が提供しているオンライン教材「The 100 Series: TouchDesigner Fundamentals (TouchDesigner入門) 」を使用して入門から基礎的な内容を学んでいきます。熱意のある受講生の方は先取りしてどんどん予習していってください。
本日は、101 – Navigating the Environment (制作環境のナビゲーション) の前半部分をやっていきましょう!
101 – Navigating the Environment (制作環境のナビゲーション)
タッチデザイナーの文法
新しいツールや開発環境の学習の大半は、すべてのノブやボタンがどこにあるかを把握することから始まります。この最初のレッスンでは、TouchDesignerを使いこなすことに焦点を当て、必要不可欠なインターフェース要素とコントロール、そして各オペレーターファミリーの基本原則を学びます。
101-1. The User Interface (ユーザーインターフェイス)
VIDEO
101-2. Using the OP Create Dialog (OP作成ダイアログを使う)
VIDEO
101-3. Reading Network Anatomy (ネットワークの解剖)
VIDEO
101-4. Reading Operator Anatomy (オペレーターの解剖)
VIDEO
101-5. Operator Wires, References & Links (オペレータの接続、参照、リンク)
VIDEO
本日の課題
課題: ノイズで遊ぼう!
簡単に二次元から四次元のノイズを生成することのできるNoise TOPを使用して、試行錯誤しながら自分なりの「作品」をつくってみる。プログラムの原型は以下からダウンロードしてください。
まだ操作の基本を習得した段階ですが、まずはいろいろ試行錯誤しながら操作の基本感覚を身に付けていきましょう。その上で以下のような工夫をしてみてください。
基本: 使用されているオペレータのパラメーターを変化させてみる
応用: オペレーターを追加してみる
Noise TOPにNoise TOPを接続するとどうなるか?
HSV Adjust TOPの前後に別のTOPを追加してみる
LFO CHOPを追加して他のパラメータに参照させてみる
…など
参考資料
アンケート
本日の講義に参加した方は、以下のアンケートに回答してください。
