今回は、Addonの利用の3回目として、ofxOpenCvとofxCvを扱います。メディアアート作品では、カメラから取得した映像を用いてインタラクションを行う事例が沢山存在しています。映像を使ったインタラクションは、特別なセンサーを使用することなく、また鑑賞者に直接接触することなく高度なインタラクションが可能となり、多くの可能性を秘めた手法です。また、近年では映像の中から物体を認識したり、映像の中の微妙な差分や動きを検出したりといった、コンピュータ・ビジョン（Computer Vision = CV）の技術が発展し、高度な映像解析が活用できるようになりました。今回は、こうしたCVの技術の中でもオープンソースで多くの利用実績のあるOpenCVというCVのためのライブラリをopenFrameworksで活用する方法について紹介していきます。
本日の授業に参加した方は、以下のアンケートに答えてください。
今回は物理シミュレーションを行うことができる、ofxBox2DというAddonをとりあげます。
ofxBox2Dは、Box2DというC++で書かれた2Dの物理演算エンジンをopenFrameworksのAddon化したものです。Box2Dは質量、力、速度、摩擦といった古典物理学(ニュートン力学)の演算を高速に行う、物理法則の演算のためのライブラリーで、もともとはC++で書かれていますが、現在では、Java、C#、Python、JavaScriptなど様々な言語に移植されています。ofxBox2Dを使うことで簡単な物理法則を援用したアニメーションだけでなく、2次元のゲームやインタラクティブなコンテンツなどに応用可能です。今回は、ofxBox2Dの導入から、形を定義して物理世界に追加する方法、大量の物体を追加するための工夫などを紹介していきます。
授業に参加した方は、本日のアンケートに回答してください。
まず、TidalCyclesのインストール方法について、オフィシャルページのInstallationを参照しながら解説していきます。
TidalCyclesはHaskellというプログラミング言語のライブラリーです。Haskellは「関数型プログラミング言語」に分類されるプログラミング言語で、これまで習ってきたProcessing (JAVA) やJavaScript、C++などとはその言語のパラダイムが大きく異なります。しかし、TidalCyclesを使用する目的に限定すれば、Haskellの言語自体を詳しく習得する必要はありません。あくまでパターンを生成する関数の使用方法に精通すれば良いのです。
今回は、TidalCyclesでのパターン生成の基本をステップバイステップで解説していきます。
本日の講義に出席した方は以下のアンケートに答えてください。
----------------------------------
--
-- TidalCycles基本
--
----------------------------------
-- シーケンス
d1 $ sound "bd"
-- 同じ種類のサウンドのバリエーション
d1 $ sound "bd"
d1 $ sound "bd:1"
d1 $ sound "bd:2"
d1 $ sound "bd:3"
d1 $ sound "bd:4"
-- 複数のサンプル
d1 $ sound "bd sn"
-- リズムのくりかえし
d1 $ sound "bd sn"
d1 $ sound "hh hh hh hh"
d1 $ sound "arpy"
-- サンプルの数を増やしてみる
d1 $ sound "bd sn"
d1 $ sound "bd sn hh cp mt arpy drum"
d1 $ sound "bd sn hh cp mt arpy drum odx bd arpy bass2 feel future"
-- 休符
d1 $ sound "bd cp ~ hh"
-- 演奏の停止
d1 silence
hush
-- サブシーケンス
d1 $ sound "[bd sn sn] cp"
d1 $ sound "bd [sn sn]"
d1 $ sound "bd [sn sn sn]"
d1 $ sound "bd [sn sn sn sn]"
d1 $ sound "[bd bd] [sn sn sn sn]"
d1 $ sound "[bd bd bd] [sn sn]"
d1 $ sound "[bd bd bd bd] [sn]"
-- サブシーケンスの入れ子
d1 $ sound "[bd bd] [bd [sn [sn sn] sn] sn]"
-- レイヤー化 (同時並行に演奏)
d1 $ sound "[bd bd bd, sn cp sn cp]"
d1 $ sound "[bd bd bd, sn cp sn cp, arpy arpy, odx]"
d1 $ sound
"[bd bd bd, [sn sn] cp, arpy [arpy [arpy arpy] arpy arpy], odx]"
-- くりかえし
d1 $ sound "bd*2"
-- n回に一度演奏
d1 $ sound "bd/2"
d1 $ sound "[bd sn]*2 cp"
d1 $ sound "[bd sn] cp/2"
d1 $ sound "[[bd sn] cp]*2"
d1 $ sound "[[bd sn] cp]/2"
-- パターンの中のパターン
d1 $ sound "[bd sn sn*3]/2 [bd sn*3 bd*4]/3"
d1 $ sound "[bd [sn sn]*2]/2 [bd [sn bd]/2]*2"
-- 反転
d1 $ rev $sound "[bd bd] [bd [sn [sn sn] sn] sn]"
-- 反転: 複雑な例
d1 $ every 4 (rev) $ sound "bd*2 [bd [sn sn*2 sn] sn]"
-- スローダウン
d1 $ slow 4 $ sound "bd*2 [bd [sn sn*2 sn] sn]"
-- スピードアップ
d1 $ density 4 $ sound "bd*2 [bd [sn sn*2 sn] sn]"
-- $ と ()
d1 $sound "bd cp"
d1 (sound "bd cp")
-- 全て同じ構造
d1 $ every 4 (density 4) $ sound "bd*2 [bd [sn sn*2 sn] sn]"
d1 $ every 4 (density 4) (sound "bd*2 [bd [sn sn*2 sn] sn]")
d1 (every 4 (density 4) (sound "bd*2 [bd [sn sn*2 sn] sn]"))
d1 $ sound (every 4 (density 4) "bd*2 [bd [sn sn*2 sn] sn]")
d1 (sound (every 4 (density 4) "bd*2 [bd [sn sn*2 sn] sn]"))
-- エフェクト: 音量
d1 $ sound "bd*4" # gain "0.5"
-- 複数のエフェクト: 音量、ディレイ
d1 $ sound "bd*4" # gain "0.5" # delay "0.5"
-- エフェクトのシーケンス
d1 $ sound "bd*4" # gain "1 0.8 0.5 0.7"
d1 $ sound "bd*4 sn*4" # gain "[[1 0.8]*2 [0.5 0.7]]/2"
d1 $ sound "bd*4" # gain (every 3 (rev) $ "1 0.8 0.5 0.7")
d1 $ gain "1 0.8 0.5 0.7" # sound "bd"
-- サンプルの再生スピード
d1 $ sound "arpy" # speed "1"
d1 $ sound "arpy" # speed "0.5"
d1 $ sound "arpy" # speed "2"
-- 再生スピードのシーケンス
d1 $ sound "arpy*4" # speed "1 0.5 2 1.5"
d1 $ sound "arpy*4" # speed "-1 -0.5 -2 -1.5"
d1 $ sound "arpy*12" # up "0 1 2 3 4 5 6 7 8 9 10 11"
-- アルペジオ
d1 $ sound "arpy*12" # up (run 12)
-- ランダムな音階
d1 $ sound "arpy*12" # up (irand 12)
-- 以上です!!
hush
本日のレクチャーでは、TouchDesignerでコンピュータビジョン（CV）を扱う方法について解説します。
コンピュータビジョンとは、コンピュータが画像や映像から情報を読み取り、人間の「眼」のように世界を理解するための技術分野です。この技術をTouchDesignerに応用することで、カメラに映る人の動きや表情に反応する、インタラクティブなビジュアル表現が可能になります。
今回は、そのためのツールとしてGoogleが開発した「MediaPipe」というライブラリをTouchDesignerから利用します。MediaPipeは、顔や手、身体の骨格などをリアルタイムで高精度に検出できる非常に強力なフレームワークです。専門的な知識がなくても、比較的手軽に高度な画像認識技術を扱える点が大きな魅力です。
TouchDesignerとMediaPipeを使ったCVの基本的な実装方法を学び、クリエイティブな表現の幅を広げていきましょう。
参考: MediaPipeで遊んでみる
コンピュータビジョン（CV）は、コンピュータが人間の視覚のように、画像や映像の内容を認識し理解するための一連の技術です。単に画像を表示するだけでなく、その中に何が映っているのか、それがどのような状態かをデータとして捉え、分析します。
CVを用いることで、以下のような機能が実現できます。
これらの技術は、スマートフォンの顔認証、自動車の自動運転支援システム、工場の製品検査、医療画像の診断支援など、すでに私たちの生活や社会の様々な場面で活用され、重要な役割を担っています。
MediaPipe Solutions guide Google AI Edge
MediaPipeは、Googleが開発し、オープンソースで提供しているコンピュータビジョン（CV）向けのフレームワークです。特にライブ配信やストリーミングメディアでの利用を想定して設計されており、リアルタイム性が求められるインタラクティブアート制作とも相性が良い開発環境です。
MediaPipeが提供するVision Task（視覚タスク）には、画像や動画の中から特定の情報を認識・分析するための、以下のような学習済みモデルが用意されています。
Image Classification (画像分類)
画像に何が写っているかを識別し、最も可能性の高いラベル（例:「猫」「犬」「車」）を割り当てます。一般的な物体認識に利用できます。
Object Detection (物体検出)
画像内にある複数の物体を検出し、それぞれの位置をバウンディングボックス（境界の四角形）で示し、ラベル付けします。人や動物、その他の特定の物体を一度に複数認識したい場合に有効です.
Face Detection (顔検出)
画像や動画から人の顔を検出します。顔の位置や大まかな傾きを特定することに特化しており、より詳細な顔のパーツを分析するタスクの第一段階として使われることもあります。
Face Landmarker (顔のランドマーク検出)
顔の輪郭、目、鼻、口などの特徴点を詳細に検出します。顔のメッシュ（トポロジー）や、視線の向き（ブレンドシェイプ）なども推定でき、表情認識やアバター操作に応用できます。
Hand Landmarker (手のランドマーク検出)
片手または両手の21個の関節点を検出します。これにより、手の形状やジェスチャーをリアルタイムで認識することが可能です。
Pose Landmarker (姿勢のランドマーク検出)
全身の主要な関節点（33点）を検出し、人物の姿勢や動きを推定します。スポーツのフォーム分析や、キャラクターアニメーションの制御などに利用されます。
Image Segmentation (画像セグメンテーション)
画像をピクセル単位で分析し、各ピクセルがどのカテゴリに属するかを分類します。例えば、「人物」「空」「背景」といった領域ごとに画像を塗り分けることができ、背景の差し替えなどに使われます。
https://github.com/torinmb/mediapipe-touchdesigner
このプラグインは、GoogleのMediaPipeフレームワークをTouchDesignerで簡単に利用できるようにしたカスタムコンポーネント（.toxファイル）です。
通常、MediaPipeのような外部のライブラリをTouchDesignerで使うには、Pythonスクリプトによる複雑な実装が必要になります。しかし、このプラグインをプロジェクトに読み込むだけで、Face Mesh（顔の検出）やPose（姿勢推定）、Hand Tracking（手の追跡）といったMediaPipeの強力な機能を、TOPやCHOP、SOPのオペレーターとして直接扱えるようになります。
これにより、プログラミングの知識が豊富でなくても、リアルタイムの人物トラッキングなどを活用した高度なインタラクティブ作品を直感的に制作できます。
今回は、このTouchDesigner MediaPipe Pluginを使用して、CVを活用したTouchDesignerのプロジェクトを制作します。
リリースセクションから最新のrelease.zipをダウンロードしてください。Zipファイルを展開して、中にあるMediaPipe TouchDesigner.toeファイルを開いてください。すべてのコンポーネントは/toxesフォルダに保存されています。メインコンポーネントはMediaPipe.toxです。
MediaPipeコンポーネントが読み込まれると、ドロップダウンからウェブカメラを選択できます。MediaPipeの様々なモデルのオン/オフやプレビューオーバーレイのオン/オフを切り替えられます。また、各モデルにはサブメニューが用意されており、さらにカスタマイズ可能です。
※ サンプルファイルを実行する際には、releaseフォルダ内のtoxesフォルダを、サンプルファイルと同じ階層に配置してください。
MediaPipeのFaceLandmark機能で検出した顔のランドマーク（特徴点）を基に、TouchDesigner上で3Dメッシュをリアルタイムに生成してみましょう。
1. TouchDesignerの新規ファイルを作成
2. toxesフォルダから、MediaPipe.toxを配置、Detect Facial landmarks以外をOffに
3. MediaPipe.toxの右側にface_tracking.toxを配置、さらにNull SOPをその右に
4. 下記のように配線すると、顔のメッシュが生成される (ダウンロード)
5. あとは、これまでと同様にレンダリングが可能、例: ノイズマン! (ダウンロード)
Hand Tracking (hand_tracking.tox) を用いると、両手の各指の細かな座標が全て取得可能です。インタラクティブな様々なプロジェクトに応用可能となります。(ダウンロード)
例えば、Hand Trackingで手の座標を取得して、その情報を元に人差し指の先に球体を配置してみました。詳細はパッチを使用して説明していきます! (ダウンロード)
今期の情報メディアデザインの最終課題「パラメトリック・ロゴデザイン」では、ここまでの内容でパラメトリックに変化させるようになった自分自身のロゴ (= Visual Identity, VI) をなめらかにアニメーションさせて最終作品とします。今回は動き、つまりアニメーションを作る部分に焦点をあてます。
前回までの内容で、スライダーでパラメータを操作して作成したVI (Visual Identity) を変化させられるようになりました。今回はこのパラメータを自動的に変化するように動きをつけていきます。今回の内容が最終的な課題になります。しっかり理解して制作していくようにしてください。
Tokyo Dome City | PROJECT | Andform
パラメーターがなめらかに変化することでアニメーションする、あなた自身のロゴ (VI, Visual Identity) をデザインしてください。制作した作品はOpenProcessingに mitmedia24final のタグをつけて投稿してください。投稿したURLを以下のフォームから提出してください。提出の締切は、2024年7月17日 (最後の授業日の前日) とします。
以下の制作テンプレートを活用してください。
本日の講義に参加した方は下記のアンケートに回答してください。
最終課題制作に関連するサンプルをいろいろ作成しました。参考にしてください。
Addon(アドオン)とは、openFrameworksに機能を拡張するためのライブラリーやフレームワークです。processingのLibrariesのように、openFrameworks単体ではできなかった様々な機能を実現することが可能となります。Addonは、oF本体の開発者以外でも独自に開発して追加することが可能であり、繰り返し用いる機能や、CやC++で記述された既存のライブラリーをopenFrameworksに統合することが可能となります。
今回はAddonの導入を、まずofxGuiというプロジェクトにGUIを追加するアドオンで行います。ofxGuiを使用することで、例えば周囲の環境が異なる場所でインスタレーションを設置する時など、すぐにパラメータを最適な状態に調整して保存することができ、とても便利です。
本日の授業に参加した方は、以下のアンケートに答えてください。
