女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

85
メディアアート演習B 12013.05.13 13:00-16:10 徳久悟 慶應義塾大学大学院メディアデザイン研究科 [email protected] ©dangkang interdisciplinary design lab.

Transcript of 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

Page 1: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

メディアアート演習ⅡB

第1回2013.05.13 13:00-16:10

徳久悟慶應義塾大学大学院メディアデザイン研究科[email protected]

©dangkang interdisciplinary design lab.

Page 2: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

アウトライン

• 自己紹介• 自己紹介(学生)

• 本講義のゴール• 本日の目標• Maxのインストール

• Wiiリモコンの接続

• 様々なインタラクション

©dangkang interdisciplinary design lab. 213/5/13

Page 3: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

自己紹介

©dangkang interdisciplinary design lab. 313/5/13

Page 4: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

専門分野

• Design• Interaction Design• User Experience Design• Service Design• Social Design• System Design• Design Method• Design Theory

©dangkang interdisciplinary design lab. 413/5/13

Page 5: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

web

©dangkang interdisciplinary design lab. 513/5/13

http://www.dangkang.com

Page 6: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

Contact

©dangkang interdisciplinary design lab. 613/5/13

http://www.dangkang.com

• Web• http://www.dangkang.com

• Mail• [email protected]

• Social• twitter https://twitter.com/dangkang

• facebook http://www.facebook.com/dangkang

• Linkedin http://www.linkedin.com/in/dangkang

• flickr http://www.flickr.com/photos/dangkang/

• Pinterest http://pinterest.com/dangkang/

Page 7: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

3つのキーワード

©dangkang interdisciplinary design lab. 713/5/13

Academic Startup Social

Page 8: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

3つのキーワード

©dangkang interdisciplinary design lab. 813/5/13

Academic Startup Social

Page 9: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

Keio / Political Science

©dangkang interdisciplinary design lab. 913/5/13

1998.04 - 2002.03

Page 10: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

Keio / SFC

©dangkang interdisciplinary design lab. 1013/5/13

2002.04 - 2004.03

Page 11: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

atMOS

©dangkang interdisciplinary design lab. 1113/5/13

Page 12: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

Suirin

©dangkang interdisciplinary design lab. 1213/5/13

Page 13: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

Suirin

©dangkang interdisciplinary design lab. 1313/5/13

Page 14: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

Keio / KMD

©dangkang interdisciplinary design lab. 1413/5/13

2009.04 - present

Page 15: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

bouquet

©dangkang interdisciplinary design lab. 1513/5/13

http://www.bouquet879.com

Page 16: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

3つのキーワード

©dangkang interdisciplinary design lab. 1613/5/13

Academic Startup Social

Page 17: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

UTUTU Co.,Ltd.

©dangkang interdisciplinary design lab. 1713/5/13

2004.06 - 2010.09

Page 18: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

MYSQ

©dangkang interdisciplinary design lab. 1813/5/13

Page 19: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

Sikake

©dangkang interdisciplinary design lab. 1913/5/13

2009.07 - present

Page 20: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

Povie

©dangkang interdisciplinary design lab. 2013/5/13

http://www.povie.tv

Page 21: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

Navigator Platform

©dangkang interdisciplinary design lab. 2113/5/13

2013.04 - present

Page 22: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

3つのキーワード

©dangkang interdisciplinary design lab. 2213/5/13

Academic Startup Social

Page 23: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

Wanic

©dangkang interdisciplinary design lab. 2313/5/13

2010.07 - present

Page 24: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

Wanic

©dangkang interdisciplinary design lab. 2413/5/13

Page 25: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

Wanic

©dangkang interdisciplinary design lab. 2513/5/13

Page 26: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

Wanic

©dangkang interdisciplinary design lab. 2613/5/13

Page 27: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

Wanic

©dangkang interdisciplinary design lab. 2713/5/13

http://camp-fire.jp/projects/view/618

Page 28: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

3つの裏キーワード

©dangkang interdisciplinary design lab. 2813/5/13

ProgressiveRock

Pro Wrestling Pink

Page 29: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

3つの裏キーワード

©dangkang interdisciplinary design lab. 2913/5/13

PPP

Page 30: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

Progressive Rock

©dangkang interdisciplinary design lab. 3013/5/13

http://pds.exblog.jp/pds/1/200603/05/05/b0064805_22244946.jpg

Page 31: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

Pro Wrestling

©dangkang interdisciplinary design lab. 3113/5/13

http://image.space.rakuten.co.jp/lg01/62/0000107562/34/img0b41bad3zik4zj.jpeg

Page 32: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

Pink

©dangkang interdisciplinary design lab. 3213/5/13

http://8848pp.jp/common/images/2shot.png

Page 33: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

自己紹介 (学生)

©dangkang interdisciplinary design lab. 3313/5/13

Page 34: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

自己紹介

• 1人3分以内

• 画像を使って好きなモノ・関心のあるものを説明

• 1人3点まで

©dangkang interdisciplinary design lab. 3413/5/13

Page 35: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

本講義のゴール

©dangkang interdisciplinary design lab. 3513/5/13

Page 36: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

ゴール

• 春学期• 動作する作品を作る(仕上げる) 

©dangkang interdisciplinary design lab. 3613/5/13

Page 37: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

ゴール

• 秋学期• 作品を人に見せる(魅せる)

• Asia Digital Art Award(ADAA)に応募(10/30 締切)

©dangkang interdisciplinary design lab. 3713/5/13

Page 38: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

本日の目標

©dangkang interdisciplinary design lab. 3813/5/13

Page 39: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

本日の目標

• インタラクションの身体的理解• アクション• フィードバック• ユーザエクスペリエンス

©dangkang interdisciplinary design lab. 3913/5/13

Page 40: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

ユーザインタフェース

©dangkang interdisciplinary design lab. 4013/5/13

Page 41: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

インタラクション

©dangkang interdisciplinary design lab. 4113/5/13

Page 42: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

ユーザエクスペリエンス

©dangkang interdisciplinary design lab. 4213/5/13

Page 43: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

ユーザエクスペリエンス

©dangkang interdisciplinary design lab. 4313/5/13

UserSystem

・eyes・ears・tongue・nose・body

・hands・arms・legs・body・head

・sensors・data base etc

・image・light・sound etc

purpose/ rule

1loop = t

input / User

output / User

input /System

output /System

R e a l S p a c e

Page 44: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

Max

©dangkang interdisciplinary design lab. 4413/5/13

Page 45: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

Maxとは?

• グラフィカルプログラミング環境• sound• video• interactive media application

©dangkang interdisciplinary design lab. 4513/5/13

Page 46: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

Maxとは?

• グラフィカルプログラミング環境• http://www.youtube.com/watch?

v=cSatrZW4XLI&list=PLasl9I6VeCCrlPrAl9As6v971Ab4TE5ek

©dangkang interdisciplinary design lab. 4613/5/13

Page 47: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

ダウンロードとインストール

• Download Mac Version 5.1.9

• http://cycling74.com/downloads/older/

©dangkang interdisciplinary design lab. 4713/5/13

Page 48: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

スイッチ

• サンプル素材のダウンロード1

• http://www.musicradar.com/news/tech/free-music-samples-download-loops-hits-and-multis-217833/65

©dangkang interdisciplinary design lab. 4813/5/13

Page 49: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

スイッチ

• サンプル素材のダウンロード2

• http://www.musicradar.com/news/tech/free-music-samples-download-loops-hits-and-multis-217833/80

©dangkang interdisciplinary design lab. 4913/5/13

Page 50: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

基本チュートリアル

• http://www.cycling74.com/docs/max5/tutorials/max-tut/maxindex.html

• Max5\patches\docs\tutorial-patchers\max-tut

©dangkang interdisciplinary design lab. 5013/5/13

Page 51: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

基本チュートリアル

• 01mHello.maxpat

©dangkang interdisciplinary design lab. 5113/5/13

Page 52: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

基本チュートリアル

• 02mBang.maxpat

©dangkang interdisciplinary design lab. 5213/5/13

Page 53: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

基本チュートリアル

• 04mMetroAndToggle.maxpat

©dangkang interdisciplinary design lab. 5313/5/13

Page 54: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

基本チュートリアル

• 05mMessageOrdering.maxpat

©dangkang interdisciplinary design lab. 5413/5/13

Page 55: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

基本チュートリアル

• 16mRemoteMessaging.maxpat

©dangkang interdisciplinary design lab. 5513/5/13

Page 56: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

Wiiリモコンの接続

©dangkang interdisciplinary design lab. 5613/5/13

Page 57: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

環境設定

• Osculatorのダウンロード

• http://www.osculator.net/download/

©dangkang interdisciplinary design lab. 5713/5/13

Page 58: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

環境設定

• CNMATオブジェクトのダウンロード

• http://cnmat.berkeley.edu/downloads• Latest MacOSX version

©dangkang interdisciplinary design lab. 5813/5/13

Page 59: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

環境設定

• CNMATオブジェクトのコピー

• Max5\Cycling’74\CNMAT_Externals

©dangkang interdisciplinary design lab. 5913/5/13

Page 60: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

環境設定

• Wiimote to Max.oscdをオープン

• OSCulator ƒ\Samples Library\Wiimote\Cyclying’74

©dangkang interdisciplinary design lab. 6013/5/13

Page 61: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

環境設定

• Wiimote to Max.oscdをオープン

• OSC input port を9000に変更

©dangkang interdisciplinary design lab. 6113/5/13

Page 62: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

環境設定

• Wiimote to Max.oscdをオープン

• >>をクリック

©dangkang interdisciplinary design lab. 6213/5/13

Page 63: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

環境設定

• Wiimote to Max.oscdをオープン

• Start Pairingをクリック

©dangkang interdisciplinary design lab. 6313/5/13

Page 64: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

環境設定

• Wiimote to Max.oscdをオープン

• SYNCボタンをプッシュ

©dangkang interdisciplinary design lab. 6413/5/13

Page 65: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

環境設定

• AddressにIDが表示されればOK!

©dangkang interdisciplinary design lab. 6513/5/13

Page 66: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

環境設定

• 注意点• 1人ずつ順番に設定しましょう!

• 間違って別のひとのWiiリモコンを設定してしまう可能性があります.

©dangkang interdisciplinary design lab. 6613/5/13

Page 67: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

環境設定

• TIPS• 失敗したひとはBluetooth環境設定から設定を削除しましょう!

©dangkang interdisciplinary design lab. 6713/5/13

Page 68: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

環境設定

• Wiimote to Max5.maxpatをオープン

• OSCulator ƒ\Samples Library\Wiimote\Cyclying’74

©dangkang interdisciplinary design lab. 6813/5/13

Page 69: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

環境設定

• パスの設定• Option->File Preferences

©dangkang interdisciplinary design lab. 6913/5/13

Page 70: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

環境設定

• パスの設定• Max5\Cyclying’74\CNMAT_Externals

©dangkang interdisciplinary design lab. 7013/5/13

Page 71: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

環境設定

• 接続完了

©dangkang interdisciplinary design lab. 7113/5/13

Page 72: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

インタラクションを体験する

©dangkang interdisciplinary design lab. 7213/5/13

Page 73: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

アクション

• スイッチ

©dangkang interdisciplinary design lab. 7313/5/13

Page 74: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

アクション

• 加速度

©dangkang interdisciplinary design lab. 7413/5/13

Page 75: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

アクション

• 角度

©dangkang interdisciplinary design lab. 7513/5/13

Page 76: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

アクション

• 角度

©dangkang interdisciplinary design lab. 7613/5/13

Page 77: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

スイッチ

• リモコンの操作• 1->温度を上げる

• 2->温度を下げる

• - ->Cool• +-> Warm• Home-> off

©dangkang interdisciplinary design lab. 7713/5/13

Page 78: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

スイッチ

• RGBの操作

©dangkang interdisciplinary design lab. 7813/5/13

12

Page 79: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

スイッチ

• RGBの操作

©dangkang interdisciplinary design lab. 7913/5/13

• - -> Red• +-> Blue• Home-> Green

Page 80: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

スイッチ

• 複数の音のon/off

©dangkang interdisciplinary design lab. 8013/5/13

Page 81: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

回転

• 再生スピードの変化(映像)

©dangkang interdisciplinary design lab. 8113/5/13

Page 82: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

回転

• 再生スピードの変化• 素材の読み込み(read)

• Max5\patches\media

©dangkang interdisciplinary design lab. 8213/5/13

Page 83: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

回転

• 映像の回転

©dangkang interdisciplinary design lab. 8313/5/13

Page 84: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

加速度

• 再生スピードの変化(音)

©dangkang interdisciplinary design lab. 8413/5/13

Page 85: 女子美術大学メディアアート演習ⅡB 2013 Spring 第1回

加速度

• ボリュームをコントロール

©dangkang interdisciplinary design lab. 8513/5/13