女子美術大学メディアアート演習Ⅱb 2013 spring 第2回
TRANSCRIPT
![Page 1: 女子美術大学メディアアート演習ⅡB 2013 Spring 第2回](https://reader033.vdocuments.site/reader033/viewer/2022050817/55618d7ad8b42ae27d8b4d95/html5/thumbnails/1.jpg)
メディアアート演習ⅡB
第2回2013.05.20 13:00-16:10
徳久悟慶應義塾大学大学院メディアデザイン研究科[email protected]
©dangkang interdisciplinary design lab.
13年5月18日土曜日
![Page 2: 女子美術大学メディアアート演習ⅡB 2013 Spring 第2回](https://reader033.vdocuments.site/reader033/viewer/2022050817/55618d7ad8b42ae27d8b4d95/html5/thumbnails/2.jpg)
アウトライン
• Jitterとは
• Tips• 動画像入出力• エフェクト基礎• 位置表現• 合成• 練習
©dangkang interdisciplinary design lab. 213/5/18
13年5月18日土曜日
![Page 3: 女子美術大学メディアアート演習ⅡB 2013 Spring 第2回](https://reader033.vdocuments.site/reader033/viewer/2022050817/55618d7ad8b42ae27d8b4d95/html5/thumbnails/3.jpg)
Jitterとは
©dangkang interdisciplinary design lab. 313/5/18
13年5月18日土曜日
![Page 4: 女子美術大学メディアアート演習ⅡB 2013 Spring 第2回](https://reader033.vdocuments.site/reader033/viewer/2022050817/55618d7ad8b42ae27d8b4d95/html5/thumbnails/4.jpg)
Jitterとは?
• Maxにリアルタイム・グラフィクス/ヴィデオ処理を追加するエクステンション(機能拡張).
©dangkang interdisciplinary design lab. 413/5/18
13年5月18日土曜日
![Page 5: 女子美術大学メディアアート演習ⅡB 2013 Spring 第2回](https://reader033.vdocuments.site/reader033/viewer/2022050817/55618d7ad8b42ae27d8b4d95/html5/thumbnails/5.jpg)
Jitterでできること
• リアルタイム・グラフィクス/ヴィデオ処理
• 動画像再生• リアルタイム動画像入力• 動画像演算処理(加工/合成/エフェクト)
• 音と映像の連携• 動画像解析• 3Dグラフィックス(OpenGL)
• Quicktime形式のサポート
©dangkang interdisciplinary design lab. 513/5/18
13年5月18日土曜日
![Page 6: 女子美術大学メディアアート演習ⅡB 2013 Spring 第2回](https://reader033.vdocuments.site/reader033/viewer/2022050817/55618d7ad8b42ae27d8b4d95/html5/thumbnails/6.jpg)
Jitterでできること
• リアルタイム・グラフィクス/ヴィデオ処理
• 動画像再生• リアルタイム動画像入力• 動画像演算処理(加工/合成/エフェクト)
• 音と映像の連携• 動画像解析• 3Dグラフィックス(OpenGL)
• Quicktime形式のサポート
©dangkang interdisciplinary design lab. 613/5/18
13年5月18日土曜日
![Page 7: 女子美術大学メディアアート演習ⅡB 2013 Spring 第2回](https://reader033.vdocuments.site/reader033/viewer/2022050817/55618d7ad8b42ae27d8b4d95/html5/thumbnails/7.jpg)
Jitterオブジェクト
• jit~で始まるオブジェクト
©dangkang interdisciplinary design lab. 713/5/18
13年5月18日土曜日
![Page 8: 女子美術大学メディアアート演習ⅡB 2013 Spring 第2回](https://reader033.vdocuments.site/reader033/viewer/2022050817/55618d7ad8b42ae27d8b4d95/html5/thumbnails/8.jpg)
アトリビュート
• アトリビュート(属性)
• jitオブジェクトに新たに導入された仕組み
• “@アトリビュート名 値”で設定
©dangkang interdisciplinary design lab. 813/5/18
13年5月18日土曜日
![Page 9: 女子美術大学メディアアート演習ⅡB 2013 Spring 第2回](https://reader033.vdocuments.site/reader033/viewer/2022050817/55618d7ad8b42ae27d8b4d95/html5/thumbnails/9.jpg)
アトリビュート
• アーギュメント(引数)
• オブジェクトの動作方法や処理内容の初期値を指定
• メッセージ• オブジェクトに対する動作方法や処理内容の指示
©dangkang interdisciplinary design lab. 913/5/18
13年5月18日土曜日
![Page 10: 女子美術大学メディアアート演習ⅡB 2013 Spring 第2回](https://reader033.vdocuments.site/reader033/viewer/2022050817/55618d7ad8b42ae27d8b4d95/html5/thumbnails/10.jpg)
マトリクス
• Jitterでは,マトリクス(行列)と呼ばれるデータ形式を扱う
©dangkang interdisciplinary design lab. 1013/5/18
メッセージ
シグナル
マトリクス
13年5月18日土曜日
![Page 11: 女子美術大学メディアアート演習ⅡB 2013 Spring 第2回](https://reader033.vdocuments.site/reader033/viewer/2022050817/55618d7ad8b42ae27d8b4d95/html5/thumbnails/11.jpg)
マトリクス
• マトリクスの構成要素• ディメンジョン• セル• プレーン
©dangkang interdisciplinary design lab. 1113/5/18
13年5月18日土曜日
![Page 12: 女子美術大学メディアアート演習ⅡB 2013 Spring 第2回](https://reader033.vdocuments.site/reader033/viewer/2022050817/55618d7ad8b42ae27d8b4d95/html5/thumbnails/12.jpg)
マトリクス
• マトリクスはセルとディメンジョンでできている
• セル(cell / 細胞) : マトリクスに含まれる1つ1つの要素
• ディメンジョン(dimension / 次元) : マトリクスに含まれるセルの数(最大32次元)
©dangkang interdisciplinary design lab. 1213/5/18
15
8x6のディメンジョン
セル
13年5月18日土曜日
![Page 13: 女子美術大学メディアアート演習ⅡB 2013 Spring 第2回](https://reader033.vdocuments.site/reader033/viewer/2022050817/55618d7ad8b42ae27d8b4d95/html5/thumbnails/13.jpg)
マトリクス
• セルは複数のプレーンで構成される• カラー画像を作りたい場合• ARGBの4プレーン(最大32)
• データ型は8bit (2^8 = 256色)
©dangkang interdisciplinary design lab. 1313/5/18
ARGB
13年5月18日土曜日
![Page 14: 女子美術大学メディアアート演習ⅡB 2013 Spring 第2回](https://reader033.vdocuments.site/reader033/viewer/2022050817/55618d7ad8b42ae27d8b4d95/html5/thumbnails/14.jpg)
マトリクス
• マトリクスの構成要素• ディメンジョン 8x6
• プレーン 4(RGBA)
©dangkang interdisciplinary design lab. 1413/5/18
13年5月18日土曜日
![Page 15: 女子美術大学メディアアート演習ⅡB 2013 Spring 第2回](https://reader033.vdocuments.site/reader033/viewer/2022050817/55618d7ad8b42ae27d8b4d95/html5/thumbnails/15.jpg)
マトリクス
• マトリクスの構成要素• ディメンジョン 8x6
• プレーン 4(RGBA)
©dangkang interdisciplinary design lab. 1513/5/18
13年5月18日土曜日
![Page 16: 女子美術大学メディアアート演習ⅡB 2013 Spring 第2回](https://reader033.vdocuments.site/reader033/viewer/2022050817/55618d7ad8b42ae27d8b4d95/html5/thumbnails/16.jpg)
マトリクス
• Jit.noiseのhelpファイル
• ディメンジョン 320 x240
• プレーン 4(RGBA)
• プレーンを1にしてみよう?
©dangkang interdisciplinary design lab. 1613/5/18
13年5月18日土曜日
![Page 17: 女子美術大学メディアアート演習ⅡB 2013 Spring 第2回](https://reader033.vdocuments.site/reader033/viewer/2022050817/55618d7ad8b42ae27d8b4d95/html5/thumbnails/17.jpg)
Tips
©dangkang interdisciplinary design lab. 1713/5/18
13年5月18日土曜日
![Page 18: 女子美術大学メディアアート演習ⅡB 2013 Spring 第2回](https://reader033.vdocuments.site/reader033/viewer/2022050817/55618d7ad8b42ae27d8b4d95/html5/thumbnails/18.jpg)
jit.pwindowとjit.window
• jit.pwindow• パッチ内でマトリクスを表示するためのオブジェクト
• jit.window• パッチ外でマトリクスを表示するためのオブジェクト
©dangkang interdisciplinary design lab. 1813/5/18
13年5月18日土曜日
![Page 19: 女子美術大学メディアアート演習ⅡB 2013 Spring 第2回](https://reader033.vdocuments.site/reader033/viewer/2022050817/55618d7ad8b42ae27d8b4d95/html5/thumbnails/19.jpg)
全画面表示
• keyオブジェクト
• キーをASCII codeに変換
• ACII code... コンピュータで文字を表示するためのコード
• escキー = 27
©dangkang interdisciplinary design lab. 1913/5/18
13年5月18日土曜日
![Page 20: 女子美術大学メディアアート演習ⅡB 2013 Spring 第2回](https://reader033.vdocuments.site/reader033/viewer/2022050817/55618d7ad8b42ae27d8b4d95/html5/thumbnails/20.jpg)
動画像入出力
©dangkang interdisciplinary design lab. 2013/5/18
13年5月18日土曜日
![Page 21: 女子美術大学メディアアート演習ⅡB 2013 Spring 第2回](https://reader033.vdocuments.site/reader033/viewer/2022050817/55618d7ad8b42ae27d8b4d95/html5/thumbnails/21.jpg)
動画像再生
• jit.qt.movie~
• Quicktimeムービーを再生(ディスクベース)
• rateアトリビュートでスピードをコントロール
©dangkang interdisciplinary design lab. 2113/5/18
13年5月18日土曜日
![Page 22: 女子美術大学メディアアート演習ⅡB 2013 Spring 第2回](https://reader033.vdocuments.site/reader033/viewer/2022050817/55618d7ad8b42ae27d8b4d95/html5/thumbnails/22.jpg)
動画像録画
• jit.qt.record~
• Quicktimeムービー形式でムービーを保存(ディスクベース)
• realtimeアトリビュートを1にすると,内部クロックベースで録画可能
©dangkang interdisciplinary design lab. 2213/5/18
13年5月18日土曜日
![Page 23: 女子美術大学メディアアート演習ⅡB 2013 Spring 第2回](https://reader033.vdocuments.site/reader033/viewer/2022050817/55618d7ad8b42ae27d8b4d95/html5/thumbnails/23.jpg)
リアルタイム動画入力
• jit.qt.grab~
• Quicktimeを利用したビデオ入力(ディスクベース)
©dangkang interdisciplinary design lab. 2313/5/18
13年5月18日土曜日
![Page 24: 女子美術大学メディアアート演習ⅡB 2013 Spring 第2回](https://reader033.vdocuments.site/reader033/viewer/2022050817/55618d7ad8b42ae27d8b4d95/html5/thumbnails/24.jpg)
練習
• jit.qt.grab~とJit.recordを組み合わせて自分の動画を録画してください.
©dangkang interdisciplinary design lab. 2413/5/18
13年5月18日土曜日
![Page 25: 女子美術大学メディアアート演習ⅡB 2013 Spring 第2回](https://reader033.vdocuments.site/reader033/viewer/2022050817/55618d7ad8b42ae27d8b4d95/html5/thumbnails/25.jpg)
エフェクト基礎
©dangkang interdisciplinary design lab. 2513/5/18
13年5月18日土曜日
![Page 26: 女子美術大学メディアアート演習ⅡB 2013 Spring 第2回](https://reader033.vdocuments.site/reader033/viewer/2022050817/55618d7ad8b42ae27d8b4d95/html5/thumbnails/26.jpg)
明度・コントラスト・彩度
• jit.brcosa
• 明度,コントラスト,彩度をコントロール
• 練習• jit.qt.grabをつなげると?
©dangkang interdisciplinary design lab. 2613/5/18
13年5月18日土曜日
![Page 27: 女子美術大学メディアアート演習ⅡB 2013 Spring 第2回](https://reader033.vdocuments.site/reader033/viewer/2022050817/55618d7ad8b42ae27d8b4d95/html5/thumbnails/27.jpg)
スケール・回転
• jit.rota
• スケールと回転数をコントロール• 練習: jit.qt.grabをつなげると?
©dangkang interdisciplinary design lab. 2713/5/18
13年5月18日土曜日
![Page 28: 女子美術大学メディアアート演習ⅡB 2013 Spring 第2回](https://reader033.vdocuments.site/reader033/viewer/2022050817/55618d7ad8b42ae27d8b4d95/html5/thumbnails/28.jpg)
色の変化
• jit.scalebias
• マトリクスの各値に乗算・加算をする• sclae(乗算): 1.0より大きければ明るくなる
• bias(加算): 最大値1.0 最小値-1.0
• 練習: jit.qt.grabをつなげると?
©dangkang interdisciplinary design lab. 2813/5/18
13年5月18日土曜日
![Page 29: 女子美術大学メディアアート演習ⅡB 2013 Spring 第2回](https://reader033.vdocuments.site/reader033/viewer/2022050817/55618d7ad8b42ae27d8b4d95/html5/thumbnails/29.jpg)
位置表現
©dangkang interdisciplinary design lab. 2913/5/18
13年5月18日土曜日
![Page 30: 女子美術大学メディアアート演習ⅡB 2013 Spring 第2回](https://reader033.vdocuments.site/reader033/viewer/2022050817/55618d7ad8b42ae27d8b4d95/html5/thumbnails/30.jpg)
任意の座標での映像再生
• jit.rota
• ソース画像の大きさ(zoom),位置(anchor)をコントロール
©dangkang interdisciplinary design lab. 3013/5/18
13年5月18日土曜日
![Page 31: 女子美術大学メディアアート演習ⅡB 2013 Spring 第2回](https://reader033.vdocuments.site/reader033/viewer/2022050817/55618d7ad8b42ae27d8b4d95/html5/thumbnails/31.jpg)
映像合成
©dangkang interdisciplinary design lab. 3113/5/18
13年5月18日土曜日
![Page 32: 女子美術大学メディアアート演習ⅡB 2013 Spring 第2回](https://reader033.vdocuments.site/reader033/viewer/2022050817/55618d7ad8b42ae27d8b4d95/html5/thumbnails/32.jpg)
ピクチャ合成
• jit.matrixを使って合成
• メモリを消費しない
• レイヤー処理には向かない
©dangkang interdisciplinary design lab. 3213/5/18
13年5月18日土曜日
![Page 33: 女子美術大学メディアアート演習ⅡB 2013 Spring 第2回](https://reader033.vdocuments.site/reader033/viewer/2022050817/55618d7ad8b42ae27d8b4d95/html5/thumbnails/33.jpg)
クロスフェード合成
• jit.xfade
• 2つの動画をクロスフェードするためのオブジェクト
• xfadeアトリビュートで指定する割合でブレンド
©dangkang interdisciplinary design lab. 3313/5/18
13年5月18日土曜日
![Page 34: 女子美術大学メディアアート演習ⅡB 2013 Spring 第2回](https://reader033.vdocuments.site/reader033/viewer/2022050817/55618d7ad8b42ae27d8b4d95/html5/thumbnails/34.jpg)
マトリクス演算
• jit.op
• マトリクス同士のセルに含まれる値に対する様々な計算をするためのオブジェクト
©dangkang interdisciplinary design lab. 3413/5/18
13年5月18日土曜日
![Page 35: 女子美術大学メディアアート演習ⅡB 2013 Spring 第2回](https://reader033.vdocuments.site/reader033/viewer/2022050817/55618d7ad8b42ae27d8b4d95/html5/thumbnails/35.jpg)
マトリクス演算
• jit.op
• マトリクス同士のセルに含まれる値に対する様々な計算をするためのオブジェクト
©dangkang interdisciplinary design lab. 3513/5/18
13年5月18日土曜日
![Page 36: 女子美術大学メディアアート演習ⅡB 2013 Spring 第2回](https://reader033.vdocuments.site/reader033/viewer/2022050817/55618d7ad8b42ae27d8b4d95/html5/thumbnails/36.jpg)
マトリクス演算
• jit.op
• マトリクス同士のセルに含まれる値(ARGB)を個別に計算することも可能.
©dangkang interdisciplinary design lab. 3613/5/18
13年5月18日土曜日
![Page 37: 女子美術大学メディアアート演習ⅡB 2013 Spring 第2回](https://reader033.vdocuments.site/reader033/viewer/2022050817/55618d7ad8b42ae27d8b4d95/html5/thumbnails/37.jpg)
ピクチャ合成とマトリクス演算
©dangkang interdisciplinary design lab. 3713/5/18
13年5月18日土曜日
![Page 38: 女子美術大学メディアアート演習ⅡB 2013 Spring 第2回](https://reader033.vdocuments.site/reader033/viewer/2022050817/55618d7ad8b42ae27d8b4d95/html5/thumbnails/38.jpg)
ピクチャ合成とマトリクス演算
©dangkang interdisciplinary design lab. 3813/5/18
13年5月18日土曜日
![Page 39: 女子美術大学メディアアート演習ⅡB 2013 Spring 第2回](https://reader033.vdocuments.site/reader033/viewer/2022050817/55618d7ad8b42ae27d8b4d95/html5/thumbnails/39.jpg)
アルファチャンネル合成
• jit.alphablend
• マスク画像を使った合成のためのオブジェクト
©dangkang interdisciplinary design lab. 3913/5/18
13年5月18日土曜日
![Page 40: 女子美術大学メディアアート演習ⅡB 2013 Spring 第2回](https://reader033.vdocuments.site/reader033/viewer/2022050817/55618d7ad8b42ae27d8b4d95/html5/thumbnails/40.jpg)
クロマキー合成
• jit.chromakey
• キーカラー抽出によるクロマキー合成のためのオブジェクト
©dangkang interdisciplinary design lab. 4013/5/18
13年5月18日土曜日
![Page 41: 女子美術大学メディアアート演習ⅡB 2013 Spring 第2回](https://reader033.vdocuments.site/reader033/viewer/2022050817/55618d7ad8b42ae27d8b4d95/html5/thumbnails/41.jpg)
練習
©dangkang interdisciplinary design lab. 4113/5/18
13年5月18日土曜日
![Page 42: 女子美術大学メディアアート演習ⅡB 2013 Spring 第2回](https://reader033.vdocuments.site/reader033/viewer/2022050817/55618d7ad8b42ae27d8b4d95/html5/thumbnails/42.jpg)
練習
• 今日使ったパッチを使って,Wiiリモコンと連携させてください.
• ボタン,加速度,回転を単純に割り当ててみる.• ボタン,加速度,回転など動きの意味を考えながらインタラクションを作ってみる.
©dangkang interdisciplinary design lab. 4213/5/18
13年5月18日土曜日