yoppa.org


openFrameworks Addon 3 – 映像を使ったインタラクション ofxOpenCv、ofxCv

今回は、Addonの利用の3回目として、ofxOpenCvとofxCvを扱います。メディアアート作品では、カメラから取得した映像を用いてインタラクションを行う事例が沢山存在しています。映像を使ったインタラクションは、特別なセンサーを使用することなく、また鑑賞者に直接接触することなく高度なインタラクションが可能となり、多くの可能性を秘めた手法です。また、近年では映像の中から物体を認識したり、映像の中の微妙な差分や動きを検出したりといった、コンピュータ・ビジョン(Computer Vision = CV)の技術が発展し、高度な映像解析が活用できるようになりました。今回は、こうしたCVの技術の中でもオープンソースで多くの利用実績のあるOpenCVというCVのためのライブラリをopenFrameworksで活用する方法について紹介していきます。

スライド資料

サンプルプログラム

アンケート

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


openFrameworks Addon 2 : 物理シミュレーション ofxBox2D

今回は物理シミュレーションを行うことができる、ofxBox2DというAddonをとりあげます。

ofxBox2Dは、Box2DというC++で書かれた2Dの物理演算エンジンをopenFrameworksのAddon化したものです。Box2Dは質量、力、速度、摩擦といった古典物理学(ニュートン力学)の演算を高速に行う、物理法則の演算のためのライブラリーで、もともとはC++で書かれていますが、現在では、Java、C#、Python、JavaScriptなど様々な言語に移植されています。ofxBox2Dを使うことで簡単な物理法則を援用したアニメーションだけでなく、2次元のゲームやインタラクティブなコンテンツなどに応用可能です。今回は、ofxBox2Dの導入から、形を定義して物理世界に追加する方法、大量の物体を追加するための工夫などを紹介していきます。

スライド資料

サンプルファイル

アンケート

授業に参加した方は、本日のアンケートに回答してください。

アンケート


TidalCycles基本

まず、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実践 7 – コンピュータービジョン: MediaPipe Pluginをつかってみる

本日のレクチャーでは、TouchDesignerでコンピュータビジョン(CV)を扱う方法について解説します。

コンピュータビジョンとは、コンピュータが画像や映像から情報を読み取り、人間の「眼」のように世界を理解するための技術分野です。この技術をTouchDesignerに応用することで、カメラに映る人の動きや表情に反応する、インタラクティブなビジュアル表現が可能になります。

今回は、そのためのツールとしてGoogleが開発した「MediaPipe」というライブラリをTouchDesignerから利用します。MediaPipeは、顔や手、身体の骨格などをリアルタイムで高精度に検出できる非常に強力なフレームワークです。専門的な知識がなくても、比較的手軽に高度な画像認識技術を扱える点が大きな魅力です。

TouchDesignerとMediaPipeを使ったCVの基本的な実装方法を学び、クリエイティブな表現の幅を広げていきましょう。

参考: MediaPipeで遊んでみる

コンピュータビジョン (CV) とは

コンピュータビジョン(CV)は、コンピュータが人間の視覚のように、画像や映像の内容を認識し理解するための一連の技術です。単に画像を表示するだけでなく、その中に何が映っているのか、それがどのような状態かをデータとして捉え、分析します。

CVを用いることで、以下のような機能が実現できます。

  • Face Tracking: 顔を検出し、目や口の開閉、表情を読み取る。
  • Hand Tracking: 手の形や指の関節の位置をリアルタイムで追跡する。
  • Pose Estimation: 人物の骨格を検出し、姿勢や動作を分析する。
  • Object Detection: 特定の物体(人、車、動物など)を識別し、その位置を特定する。

これらの技術は、スマートフォンの顔認証、自動車の自動運転支援システム、工場の製品検査、医療画像の診断支援など、すでに私たちの生活や社会の様々な場面で活用され、重要な役割を担っています。

MediaPipeについて

MediaPipe Solutions guide Google AI Edge

MediaPipeは、Googleが開発し、オープンソースで提供しているコンピュータビジョン(CV)向けのフレームワークです。特にライブ配信やストリーミングメディアでの利用を想定して設計されており、リアルタイム性が求められるインタラクティブアート制作とも相性が良い開発環境です。

主な特徴

  • 高いパフォーマンス CPUやGPUなど、様々なハードウェア上で高速に動作するよう最適化されています。これにより、PCのカメラ映像などに対して、遅延の少ないリアルタイム処理を実現します。
  • 高品質な学習済みモデル Googleによってトレーニングされた、すぐに使える高性能なモデルが多数同梱されています。ユーザーは自身で膨大なデータを集めて機械学習モデルを構築する手間なく、最先端の認識技術を直接利用できます。
  • クロスプラットフォーム AndroidやiOSといったモバイル端末から、PC(Windows, macOS, Linux)、Webブラウザ、さらにはエッジデバイスまで、幅広い環境で動作するように設計されています。

MediaPipe Vision Tasks

MediaPipeが提供するVision Task(視覚タスク)には、画像や動画の中から特定の情報を認識・分析するための、以下のような学習済みモデルが用意されています。

Image Classification (画像分類)

画像に何が写っているかを識別し、最も可能性の高いラベル(例:「猫」「犬」「車」)を割り当てます。一般的な物体認識に利用できます。

Object Detection (物体検出)

画像内にある複数の物体を検出し、それぞれの位置をバウンディングボックス(境界の四角形)で示し、ラベル付けします。人や動物、その他の特定の物体を一度に複数認識したい場合に有効です.

Face Detection (顔検出)

画像や動画から人の顔を検出します。顔の位置や大まかな傾きを特定することに特化しており、より詳細な顔のパーツを分析するタスクの第一段階として使われることもあります。

Face Landmarker (顔のランドマーク検出)

顔の輪郭、目、鼻、口などの特徴点を詳細に検出します。顔のメッシュ(トポロジー)や、視線の向き(ブレンドシェイプ)なども推定でき、表情認識やアバター操作に応用できます。

Hand Landmarker (手のランドマーク検出)

片手または両手の21個の関節点を検出します。これにより、手の形状やジェスチャーをリアルタイムで認識することが可能です。

Pose Landmarker (姿勢のランドマーク検出)

全身の主要な関節点(33点)を検出し、人物の姿勢や動きを推定します。スポーツのフォーム分析や、キャラクターアニメーションの制御などに利用されます。

Image Segmentation (画像セグメンテーション)

画像をピクセル単位で分析し、各ピクセルがどのカテゴリに属するかを分類します。例えば、「人物」「空」「背景」といった領域ごとに画像を塗り分けることができ、背景の差し替えなどに使われます。

MediaPipe TouchDesigner Pluginについて

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のプロジェクトを制作します。

MediaPipe Pluginのダウンロードとインストール

リリースセクションから最新のrelease.zipをダウンロードしてください。Zipファイルを展開して、中にあるMediaPipe TouchDesigner.toeファイルを開いてください。すべてのコンポーネントは/toxesフォルダに保存されています。メインコンポーネントはMediaPipe.toxです。

MediaPipeコンポーネントが読み込まれると、ドロップダウンからウェブカメラを選択できます。MediaPipeの様々なモデルのオン/オフやプレビューオーバーレイのオン/オフを切り替えられます。また、各モデルにはサブメニューが用意されており、さらにカスタマイズ可能です。

TouchDesigner MediaPipe Pluginを使用したプロジェクト例

※ サンプルファイルを実行する際には、releaseフォルダ内のtoxesフォルダを、サンプルファイルと同じ階層に配置してください。

例1: FaceLandmarkからSOPのメッシュ生成

MediaPipeのFaceLandmark機能で検出した顔のランドマーク(特徴点)を基に、TouchDesigner上で3Dメッシュをリアルタイムに生成してみましょう。

1. TouchDesignerの新規ファイルを作成

2. toxesフォルダから、MediaPipe.toxを配置、Detect Facial landmarks以外をOffに

3. MediaPipe.toxの右側にface_tracking.toxを配置、さらにNull SOPをその右に

4. 下記のように配線すると、顔のメッシュが生成される (ダウンロード)

5. あとは、これまでと同様にレンダリングが可能、例: ノイズマン! (ダウンロード)

例2: Hand Trackingで物体を動かす

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日 (最後の授業日の前日) とします。

以下の制作テンプレートを活用してください。

スライド資料

アンケート

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

サンプルスケッチ

最終課題制作に関連するサンプルをいろいろ作成しました。参考にしてください。


openFrameworks Addon 1: Addonについて – ofxGui

Addon(アドオン)とは、openFrameworksに機能を拡張するためのライブラリーやフレームワークです。processingのLibrariesのように、openFrameworks単体ではできなかった様々な機能を実現することが可能となります。Addonは、oF本体の開発者以外でも独自に開発して追加することが可能であり、繰り返し用いる機能や、CやC++で記述された既存のライブラリーをopenFrameworksに統合することが可能となります。

今回はAddonの導入を、まずofxGuiというプロジェクトにGUIを追加するアドオンで行います。ofxGuiを使用することで、例えば周囲の環境が異なる場所でインスタレーションを設置する時など、すぐにパラメータを最適な状態に調整して保存することができ、とても便利です。

スライド資料

サンプルファイル

アンケート

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

アンケート