yoppa org – 2024

第1課題出題 – 生成コレクション

課題: 「生成コレクション」

課題: 生成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日: 全課題展示、講評

TouchDesigner基本 2 – TOPを極める!

本日の内容

TOPを極める!

Derivative社提供のThe 100 Series: TouchDesigner Fundamentalsの中から102 – TOPs: Working with Imagesをやっていきます!
TOPsで画像 (Texture) を扱う様々な方法についてマスターしていきましょう!
ファイルのインポートからビジュアルFXの構築まで、画像やビデオをどのように扱うか、またTouchDesignerでどのように操作できるかについて
今回は分量が多いのでビデオを観ることはせず、サンプルファイルを使用しながら直接学んでいきます
後半は演習を行います!

[スライド資料]

TOP – 画像 (テクスチャー) を扱うオペレーター

TOPs 画像を扱う – 全体の流れ

画像ファイルを扱う
動画ファイルを扱う
画像の補正
形と色
画像合成の基本
マットとマスク
パターンの生成
コンテンツのルーティング
Bloom (光沢) エフェクト
フィードバックループの作成
ライブ入力
画像と動画の保存

102-1 Working with Image Files (画像ファイルを扱う)

テクスチャオペレータ（TOP）は、リアルタイムでGPUベースの合成と画像操作を提供する
Movie file in TOPは、ムービーと静止画の両方をTOPにロードするために使用する
はじめに、画像ファイルを読み込んでから、インタラクティブビューワを使って画像を詳しく見ていく

サンプルファイル

102-2 Working with Video Files (動画ファイルを扱う)

このビデオでは、Movie File In TOPを使用して、動画を読み込みや動画の再生と制御に関する重要な事項について見ていく
Movie File In TOPには、ユーザーがファイルの再生モードを制御できるパラメータがある (シーケンシャル、タイムラインにロック、インデックス指定)
TouchDesignerでは動画のフレームレートを「image per second」または「サンプルレート」と呼ぶ
ファイルのサンプルレートは、Index指定モードを使用する場合に特に重要

サンプルファイル

102-3 Adjusting Images (画像の補正)

TOPを使って画像を補正するいくつかの異なる方法を見ていく
- Level TOP
- HSV Adjust TOP
- Edge TOP
- Open Color IO
- Monochrome TOP
- Composit TOP

サンプルファイル

102-4 Shapes & Colors (形と色)

入力画像を扱うだけでなく、TOPでいくつかの基本的な図形を作成することもできる
- Circle TOP
- Rectangle TOP
- など
この例では、回転するインジケータ、多角形、ビネット、ドロップシャドウ付きのボタンを作成する方法を見ていく

サンプルファイル

102-5 Basic Compositing (合成の基本)

コンポジット (画像の合成) は、リアルタイムグラフィックスを扱う際によく使われる操作
背景の追加、グラフィックの合成、画像のブレンドなど
Composite TOP
- 2つ以上の画像を合成、ブレンドモードがある
2つのTOP入力に対して単一のタイプの演算を実行するTOPもある
- Add TOP, Subtract TOP, Multiply TOP

サンプルファイル

102-6 Mattes & Masks (マットとマスク)

マットとマスクは、トランジション、レイアウト、さらに複雑な合成を作成するためによく使用される
- Matte TOP
Composit TOPやMultiply TOPでエレメントをマスクできることはすでにみた
さらに、Matte TOPを使って、より複雑なコントロールすることができる

サンプルファイル

102-7 Building Patterns (パターンの生成)

TouchDesignerでは、TOPを使ってパターンを作成する方法が数多くある
Tile TOPは反射または鏡面された重なり合うパターンを作成するために使用
Mirror TOPは万華鏡のようなタイル状のパターンを作成するために使用
Composit TOPにはトランスレート・ステップという便利なパラメータがあり、トランスレートとタイルの両方のパラメータを使用することで、タイルブロックを構築し、それを調整することで詳細な繰り返しシーケンスを作成することができる

サンプルファイル

102-8 Routing Your Content (コンテンツのルーティング)

オペレータ信号のルーティングは、ワイヤとリンクの両方で行うことができる
- Cross TOPとSwitch TOPは、オペレータワイヤを使用
- Select TOPはリンクを使用
Null TOPは、時間を節約し、ネットワークの変更を簡単にする
In TOPとOut TOPは、TOPネットワークを他のコンポーネントを通してルーティングするために使用される

サンプルファイル

102-9 Creating a bloomEffect (Bloomエフェクトの作成)

高速ブルーム(光沢)フィルタの例

サンプルファイル

102-10 Creating a Feedback (フィードバックの作成)

Feedback TOPは、無限再帰ループを作成することなくフィードバックループを作成できる
軌跡の描画、パターン生成、その他の視覚効果の作成方法

サンプルファイル

102-11 Live Sources (ライブ入力)

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でライブビデオを受信する他の方法

サンプルファイル

102-12 Saving Images & Video (画像と動画の保存)

動画の保存: ファイルメニューから利用できるムービーエクスポートダイアログを使用するのが最も簡単
よりカスタムな書き出し処理を行うには、Movie File Out TOPを使うこともできる
書き出しのコーデック、圧縮、フィールド、マルチチャンネル、メタデータ、色深度、オーディオコーデック、ビットレートを設定可能

サンプルファイル

本日の実習

本日の演習: タイル + フィードバックで遊んでみる!

ここまでで習得したFeedback TOP、Tile TOP、Composit TOP、HSV Adjust TOPなどを駆使してオリジナルの映像を作成してみましょう!
サンプル01: フィードバックタイル
サンプル02: 生成万華鏡

アンケート

本日の演習に参加した方は以下のアンケートに答えてください。

アンケート

かたちとコード / 基本図形と色彩による画面構成

この講義では、p5.jsを使用してコードによるデザインを行います。その最初の一歩として、コードによって「かたち」を描くにはどうすれば良いのか考えていきます。

まず始めに、1950年代〜70年代の、コンピューター黎明期から発展期におけるコード（プログラム）による様々な視覚表現について紹介します。過去の作家がどのようなアイデアで、何を表現しようとしてきたのか、その歴史を辿ります。

後半は、そうした歴史を踏まえた上で、 p5.js 実際に図形を描いていきます。まずp5.js の操作基本を解説し、簡単な図形を描きながらp5.jsでのプログラミングの基本を学びます。

スライド資料

かたちとコード / 基本図形と色彩による画面構成

次回までの課題

テーマ: 「p5.js基本図形と色による画面構成」

ここまで解説したp5.jsの機能を活用して画面構成をしてみましょう

キャンバスのサイズは 800 x 600 pixelでcreateCanvas(800, 600);
点、線、矩形、楕円、円といった基本図形
背景色、塗りの色、線の色
完成したら何かタイトルをつける
座標、色、数値による図形の描画に慣れるのが目的です
完成した作品はOpenProcessingに投稿してURLを提出
mitmedia240425 でタグ付けする!
授業の最後の時間で簡単に作品発表をします!

課題提出フォーム

アンケート

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

アンケート

TouchDesigner基本 2 – TOPを極める!

本日の内容

TOPを極める!

Derivative社提供のThe 100 Series: TouchDesigner Fundamentalsの中から102 – TOPs: Working with Imagesをやっていきます!
TOPsで画像 (Texture) を扱う様々な方法についてマスターしていきましょう!
ファイルのインポートからビジュアルFXの構築まで、画像やビデオをどのように扱うか、またTouchDesignerでどのように操作できるかについて
今回は分量が多いのでビデオを観ることはせず、サンプルファイルを使用しながら直接学んでいきます
後半は演習を行います!

[スライド資料]

TOP – 画像 (テクスチャー) を扱うオペレーター

TOPs 画像を扱う – 全体の流れ

画像ファイルを扱う
動画ファイルを扱う
画像の補正
形と色
画像合成の基本
マットとマスク
パターンの生成
コンテンツのルーティング
Bloom (光沢) エフェクト
フィードバックループの作成
ライブ入力
画像と動画の保存

102-1 Working with Image Files (画像ファイルを扱う)

テクスチャオペレータ（TOP）は、リアルタイムでGPUベースの合成と画像操作を提供する
Movie file in TOPは、ムービーと静止画の両方をTOPにロードするために使用する
はじめに、画像ファイルを読み込んでから、インタラクティブビューワを使って画像を詳しく見ていく

サンプルファイル

102-2 Working with Video Files (動画ファイルを扱う)

このビデオでは、Movie File In TOPを使用して、動画を読み込みや動画の再生と制御に関する重要な事項について見ていく
Movie File In TOPには、ユーザーがファイルの再生モードを制御できるパラメータがある (シーケンシャル、タイムラインにロック、インデックス指定)
TouchDesignerでは動画のフレームレートを「image per second」または「サンプルレート」と呼ぶ
ファイルのサンプルレートは、Index指定モードを使用する場合に特に重要

サンプルファイル

102-3 Adjusting Images (画像の補正)

TOPを使って画像を補正するいくつかの異なる方法を見ていく
- Level TOP
- HSV Adjust TOP
- Edge TOP
- Open Color IO
- Monochrome TOP
- Composit TOP

サンプルファイル

102-4 Shapes & Colors (形と色)

入力画像を扱うだけでなく、TOPでいくつかの基本的な図形を作成することもできる
- Circle TOP
- Rectangle TOP
- など
この例では、回転するインジケータ、多角形、ビネット、ドロップシャドウ付きのボタンを作成する方法を見ていく

サンプルファイル

102-5 Basic Compositing (合成の基本)

コンポジット (画像の合成) は、リアルタイムグラフィックスを扱う際によく使われる操作
背景の追加、グラフィックの合成、画像のブレンドなど
Composite TOP
- 2つ以上の画像を合成、ブレンドモードがある
2つのTOP入力に対して単一のタイプの演算を実行するTOPもある
- Add TOP, Subtract TOP, Multiply TOP

サンプルファイル

102-6 Mattes & Masks (マットとマスク)

マットとマスクは、トランジション、レイアウト、さらに複雑な合成を作成するためによく使用される
- Matte TOP
Composit TOPやMultiply TOPでエレメントをマスクできることはすでにみた
さらに、Matte TOPを使って、より複雑なコントロールすることができる

サンプルファイル

102-7 Building Patterns (パターンの生成)

TouchDesignerでは、TOPを使ってパターンを作成する方法が数多くある
Tile TOPは反射または鏡面された重なり合うパターンを作成するために使用
Mirror TOPは万華鏡のようなタイル状のパターンを作成するために使用
Composit TOPにはトランスレート・ステップという便利なパラメータがあり、トランスレートとタイルの両方のパラメータを使用することで、タイルブロックを構築し、それを調整することで詳細な繰り返しシーケンスを作成することができる

サンプルファイル

102-8 Routing Your Content (コンテンツのルーティング)

オペレータ信号のルーティングは、ワイヤとリンクの両方で行うことができる
- Cross TOPとSwitch TOPは、オペレータワイヤを使用
- Select TOPはリンクを使用
Null TOPは、時間を節約し、ネットワークの変更を簡単にする
In TOPとOut TOPは、TOPネットワークを他のコンポーネントを通してルーティングするために使用される

サンプルファイル

102-9 Creating a bloomEffect (Bloomエフェクトの作成)

高速ブルーム(光沢)フィルタの例

サンプルファイル

102-10 Creating a Feedback (フィードバックの作成)

Feedback TOPは、無限再帰ループを作成することなくフィードバックループを作成できる
軌跡の描画、パターン生成、その他の視覚効果の作成方法

サンプルファイル

102-11 Live Sources (ライブ入力)

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でライブビデオを受信する他の方法

サンプルファイル

102-12 Saving Images & Video (画像と動画の保存)

動画の保存: ファイルメニューから利用できるムービーエクスポートダイアログを使用するのが最も簡単
よりカスタムな書き出し処理を行うには、Movie File Out TOPを使うこともできる
書き出しのコーデック、圧縮、フィールド、マルチチャンネル、メタデータ、色深度、オーディオコーデック、ビットレートを設定可能

サンプルファイル

本日の実習

本日の演習: タイル + フィードバックで遊んでみる!

ここまでで習得したFeedback TOP、Tile TOP、Composit TOP、HSV Adjust TOPなどを駆使してオリジナルの映像を作成してみましょう!
サンプル01: フィードバックタイル
サンプル02: 万華鏡の基本
サンプル03: 生成万華鏡

アンケート

本日の演習に参加した方は以下のアンケートに答えてください。

アンケート

TouchDesigner基本 1 – オペレータについて TOP CHOP SOP DAT COMP MAT

本日の内容

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次元の画像や動画

Working with TOPs
動画
サンプルファイル
TOPs（テクスチャオペレーター）は、2Dイメージ処理に用いられる。これには色のあるイメージやビデオのほか「深度」などのデータ表現も含まれる。
TOPsは視覚的要素の作成や変更に頻繁に使用される。オリジナルのアートワーク、ポストプロセス効果、プロシージャルデザインなど。
TOPsはGPUにより、複雑なネットワークでも高速に動作する。
GLSL TOPsを利用してシェーダーコードを書くことができるし、C++に精通していれば「dll」を作成してカスタムオペレーターを作ることも可能。
スクリプトTOPを使えばPythonでイメージ操作が行えるが、GPU加速はされない点に注意が必要。

CHOP: Channel Operator – 数値や数値の連なり(配列、信号、音声)

Working with CHOPs
動画
サンプルファイル
CHOPs（チャンネルオペレーター）は、TouchDesignerネットワークの神経系と考えることができる
センサーデータ、大規模な配列、アニメーションデータの処理、タイミングやイベントの調整などに使用される。
CHOPsには、シングルサンプル(単一の数値)とマルチサンプル(数値の連なり)の2種類がある。すべてのCHOPはチャンネルとサンプルで構成されている。
チャンネルは、オペレーター内で上から下へと名前が並べられている。例えば、Mouse In CHOPには「tx」と「ty」という2つのチャンネルがあり、これらは画面上のマウスのx位置とy位置に対応している。

DAT: Data Operator – テキスト、表データ、Pythonスクリプト、外部との連携

Working with DATs
動画
サンプルファイル
DATs（データオペレーター）は、データやスクリプトを保持するために使用される。
DATsにはテキストタイプとテーブルタイプの2種類がある。テキストタイプのDATsは、Pythonコードやシェーダーなどの複数行のテキストを保持する。
テーブルタイプのDATsは、行と列のセルで構成され、各セルにはテキスト文字列が含まれる。
基本的なDATオペレーターには、テキストDATとテーブルDATがある。どちらも最初は空であり、そこから構築していく。
テキストDATsでは、TouchDesignerネットワークの変更を調整したり、サードパーティライブラリにアクセスしたり、Python拡張機能でCOMPsの機能を拡張したりするために、機能的なPythonコードを書くことができる。
テーブルDATsは、プロジェクトで使用される表形式のデータを保持、整理、再配置するために使用される。また、複数のテーブルを手続き的に結合し、内容をソートするためにも使用される。

SOP: Surface Operator – 3次元の形状やその加工

Working with SOPs
動画
サンプルファイル
SOPs（サーフェスオペレーター）は、TouchDesignerで3Dサーフェスを生成、インポート、修正、組み合わせるために使用される。
TouchDesignerでは、これらのオペレーターを手続き的に修正し、変更して、他のジオメトリを作成することができる。
SOPsのネットワークは、3Dシーンを生成したり、LEDやプロジェクションマッピングのためのモデルを作成したり、その他多くの用途に使用される。

COMP: Compornent – 複数のオペレーターをまとめる

Working with COMPs
動画
サンプルファイル
COMPs（コンポーネントオペレーター）は、他のオペレーターとは異なり、TouchDesigner内で完全なネットワークを内包することができる。
COMPsには4種類があり、それぞれ3Dオブジェクト（レンダリング用）、パネル（ユーザーインターフェース作成用）、ダイナミクス（シミュレーション用）、その他（雑多なタスク用）として使用される。
一般的なCOMP構成には、3Dレンダリングネットワークのセットアップが含まれる。通常、カメラCOMP、ジオメトリCOMP、ライトCOMPが必要とされる。
2Dユーザーインターフェースのセットアップも一般的なCOMP構成である。Window COMPを使用して、任意のオペレーターからフローティングウィンドウを作成できる。
プロジェクトのパフォーマンスを最適化するためには、通常、一つのWindow COMPのみを開き、その中で出力とUIを配置することが推奨される。

実習: いろいろなオペレーターを組み合わせる

本日学習した教材のサンプルファイルを素材として組みあわせて、新たな作品を制作してみましょう!

ファイルは以下のリンクからダウンロードしてください。

制作例: 回転するリング

height:460px
ダウンロード

アンケート

本日の講義を受講した方はアンケートに答えてください。

アンケート

Taechable Machineで機械学習プログラミング

[スライド資料]

いよいよ、AIを用いた作品制作を実践します! 本日は、Googleによって開発されたWeb上で機械学習を体験できるサイト “Teachable Machine” を使用してプログラミングを行います。

視覚的にとても分かりやすく機械学習について学ぶことが可能です。実際にいろいろな題材を学習させながら、機械学習による分類 (Classification) のイメージを把握していきましょう。

Teachable Machineで機械学習を体験

実習 1: Teachable Machineで機械学習

まずは学習を試してみる

Teachable Machineで新規のImageプロジェクトを作成
数種類 (クラス) の画像セットをWebカメラで撮影
「Train Model」ボタンで学習開始
Previewで確認、いまいちな場合は画像の撮影からやり直し

最初は「Image Project」が簡単なのでおすすめです。どのような画像のセットを学習させると面白いか考えながらいろいろ試してみましょう!

学習モデルを書き出す

Teachable Machineでは学習させたモデルを書き出してプログラムで利用することが可能です。様々な開発環境に対応して、サンプルのソースコードの生成まで簡単に行うことが可能です。

対応している環境

Tensorflow
Tensorflow Lite
Tensorflow.js
p5.js + ml5.js ← 今回はこちらを使用

学習モデルの書き出し手順

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 の値)の一覧を表示するサンプル

sketch.js

実行結果

Emoji Cam

ちょっと工夫してみる。表情によって絵文字を表示するカメラのサンプル。この例では、普通の顔 (normal)、笑顔 (smile) 、悲しい顔 (sad) の3種類を学習してみました。

sketch.js

実行結果

転移学習 – 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でダウンロードして活用してください!

https://github.com/tado/TeachableMachineExample

AIとアート – アーティストと作品の紹介

[スライド資料]

前回の課題、調査結果発表

前回のリサーチ課題「生成AIを用いて創作された作品について」の発表を行います。一人10分程度でリサーチしてきた成果を発表してください。

前回の課題: 生成AIを用いた創作された作品について

課題の内容を確認します。

生成AIを用いた創作された作品について調査
- アート (メディアアート、インタラクティブアート …etc)
- デザイン (グラフィック、プロダクト、ファッション ..etc)
- 音楽
- …etc
できれば自分の興味がある分野で
どのような生成AIを使用しているのか
調査には生成AIを用いて構いません (むしろ積極的に使用してください) ただしどのように用いたのか記録しておくこと

参考: AIを使用したアーティストと作品

今回リサーチして発表を行ったアーティストや作品以外にも AIを使用して作品を制作しているアーティストは沢山います。膨大な作品の中からいくつか有名なものを紹介していきます。今後の作品制作の参考にしてください。

Harold Cohen, AARON (1973)

Harold Cohen, a Pioneer of Computer-Generated Art, Dies at 87

Gene Kogan, A Book from the Sky 天书 (2015)

ml4a (Machine Learning for Art)

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を用いた作品を制作している

Global Directory of AI Artists 世界のAIアーティスト達のアーカイブ

参考図書、参考テキスト

AIartist.org

AI Artist.org

歴史的に重要な人工知能アートや創造的実践に役立つAIアート・ツールをキュレーションし、AIがアートや文化に与える影響について発信している情報センター。

参考図書

徳井直生. “創るための AI: 機械と創造性のはてしない物語.” (2021).

参考テキスト

Lev Manovich, “The AI Brain in the Cultural Archive” (2023)
MoMA magazine に掲載されたショートバージョン

ChatGPTによる要約

この記事「The AI Brain in the Cultural Archive」では、デジタル時代における文化的アーカイブとAIの役割について詳しく述べています。著者のLev Manovichは、AIが文化的データをどのように処理し、解析するか、そしてそれが人間の文化的理解や歴史の見方にどう影響を与えるかを探求しています。

要約

デジタルアーカイブの進化:
- デジタル技術の進化により、過去の文化的資料がデジタルフォーマットで保存され、容易にアクセス可能になった。
- この大量のデータは、AIを用いて新しい方法で解析される機会を提供している。
AIの役割:
- AIは、画像、テキスト、音楽など、異なるメディア形式の文化的アーカイブを解析するために使用されている。
- AIによる分析は、パターン認識、意味の抽出、関連性の見出しといった形で行われる。
文化的理解への影響:
- AIによるデータの解析は、文化的テキストやイメージに対する新しい理解を提供する。
- しかし、この技術はまだ発展途上であり、どのように文化的コンテクストを完全に理解し解釈するかは継続的な課題である。
未来への展望:
- AIがさらに進化することで、人間が見過ごしていた文化的データの側面を解明する可能性がある。
- 文化的アーカイブにおけるAIの使用は、文化研究に革命をもたらす可能性が高い。

著者は、AI技術が文化的アーカイブの分析をどのように変えていくか、その可能性と限界について考察しています。AIの適用により文化的資料から新しいインサイトを引き出す一方で、その解釈には依然として人間の介入が必要であると述べています。

TouchDesigner基本 1 – オペレータについて TOP CHOP SOP DAT COMP MAT

本日の内容

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次元の画像や動画

Working with TOPs
動画
TOPs（テクスチャオペレーター）は、2Dイメージ処理に用いられる。これには色のあるイメージやビデオのほか「深度」などのデータ表現も含まれる。
TOPsは視覚的要素の作成や変更に頻繁に使用される。オリジナルのアートワーク、ポストプロセス効果、プロシージャルデザインなど。
TOPsはGPUにより、複雑なネットワークでも高速に動作する。
GLSL TOPsを利用してシェーダーコードを書くことができるし、C++に精通していれば「dll」を作成してカスタムオペレーターを作ることも可能。
スクリプトTOPを使えばPythonでイメージ操作が行えるが、GPU加速はされない点に注意が必要。

CHOP: Channel Operator – 数値や数値の連なり(配列、信号、音声)

Working with CHOPs
動画
CHOPs（チャンネルオペレーター）は、TouchDesignerネットワークの神経系と考えることができる
センサーデータ、大規模な配列、アニメーションデータの処理、タイミングやイベントの調整などに使用される。
CHOPsには、シングルサンプル(単一の数値)とマルチサンプル(数値の連なり)の2種類がある。すべてのCHOPはチャンネルとサンプルで構成されている。
チャンネルは、オペレーター内で上から下へと名前が並べられている。例えば、Mouse In CHOPには「tx」と「ty」という2つのチャンネルがあり、これらは画面上のマウスのx位置とy位置に対応している。

DAT: Data Operator – テキスト、表データ、Pythonスクリプト、外部との連携

Working with DATs
動画
DATs（データオペレーター）は、データやスクリプトを保持するために使用される。
DATsにはテキストタイプとテーブルタイプの2種類がある。テキストタイプのDATsは、Pythonコードやシェーダーなどの複数行のテキストを保持する。
テーブルタイプのDATsは、行と列のセルで構成され、各セルにはテキスト文字列が含まれる。
基本的なDATオペレーターには、テキストDATとテーブルDATがある。どちらも最初は空であり、そこから構築していく。
テキストDATsでは、TouchDesignerネットワークの変更を調整したり、サードパーティライブラリにアクセスしたり、Python拡張機能でCOMPsの機能を拡張したりするために、機能的なPythonコードを書くことができる。
テーブルDATsは、プロジェクトで使用される表形式のデータを保持、整理、再配置するために使用される。また、複数のテーブルを手続き的に結合し、内容をソートするためにも使用される。

SOP: Surface Operator – 3次元の形状やその加工

Working with SOPs
動画
SOPs（サーフェスオペレーター）は、TouchDesignerで3Dサーフェスを生成、インポート、修正、組み合わせるために使用される。
TouchDesignerでは、これらのオペレーターを手続き的に修正し、変更して、他のジオメトリを作成することができる。
SOPsのネットワークは、3Dシーンを生成したり、LEDやプロジェクションマッピングのためのモデルを作成したり、その他多くの用途に使用される。

COMP: Compornent – 複数のオペレーターをまとめる

Working with COMPs
動画
COMPs（コンポーネントオペレーター）は、他のオペレーターとは異なり、TouchDesigner内で完全なネットワークを内包することができる。
COMPsには4種類があり、それぞれ3Dオブジェクト（レンダリング用）、パネル（ユーザーインターフェース作成用）、ダイナミクス（シミュレーション用）、その他（雑多なタスク用）として使用される。
一般的なCOMP構成には、3Dレンダリングネットワークのセットアップが含まれる。通常、カメラCOMP、ジオメトリCOMP、ライトCOMPが必要とされる。
2Dユーザーインターフェースのセットアップも一般的なCOMP構成である。Window COMPを使用して、任意のオペレーターからフローティングウィンドウを作成できる。
プロジェクトのパフォーマンスを最適化するためには、通常、一つのWindow COMPのみを開き、その中で出力とUIを配置することが推奨される。

実習: いろいろなオペレーターを組み合わせる

本日学習した教材のサンプルファイルを素材として組みあわせて、新たな作品を制作してみましょう!

ファイルは以下のリンクからダウンロードしてください。

制作例: 回転するリング

height:460px
ダウンロード

コードによる表現 – Creative Coding

今回はまずCreative Codingについて解説していきます。Creative Codingとはコンピュータプログラミングの一種で、プログラミングによって機能の実現ではなく何かを表現することを目的とするものです。画像、アニメーション、映像、音響、音楽、3Dグラフィックなど様々な手段を用いて表現します。Creative Codingのための様々な開発環境が存在します。まずそれらの簡単な歴史と関連について説明していきます。

後半は、この授業で主に扱っていくp5.jsの開発環境を構築します。Visual Studio Codeにp5.jsの開発のための機能拡張をインストールしていきます。環境構築が完了したらVisual Studio Codeを用いたp5.jsの開発のやり方について実際にコーディングしながら解説します。

スライド資料

コードによる表現 – Creative Coding

アンケート

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

アンケート

自己紹介 – 簡単な経歴

スライド

自己紹介 – 簡単なこれまでの経歴

田所がこれまでどのような経緯で現在に至っているのか簡単に紹介します。

これまで何をしてきたのか。だいたい10年ごとに変遷。

1990s : Computer Music
2000s : Creative Coding
2010s : Audio Visual
現在 : Live Coding, Media Art (Installation)

Computer Music

1990年代、コンピュータ音楽の研究と創作

プログラミングで波形単位で音響生成
当時はリアルタイムに合成するのはマシンパワー的に無理
ノンリアルタイムにレンダリングしてミックスしてテープ(DAT)に録音

Transition (for tape) 1996
https://soundcloud.com/tadokoro/transition

CLM (Common Lisp Music)

当時使用していたコンピュータ音楽のためのプログラミング環境
Lispを使用して楽器を定義して演奏

(definstrument simp (start-time duration frequency amplitude)
  (let* ((beg (floor (* start-time *srate*)))
     (end (+ beg (floor (* duration *srate*))))
     (j 0))
    (run
      (loop for i from beg below end do
        (outa i (* amplitude (sin (* j 2.0 pi (/ frequency *srate*)))))
    (incf j)))))

(with-sound () (simp 0 0.25 440.0 0.2))

当時使用していたハードウェア: NeXT Computer