geidai open workshop 2009
DESCRIPTION
Slides for the workshop at Tokyo Geidai in 2009TRANSCRIPT
![Page 1: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/1.jpg)
平成21年度東京芸術大学公開講座:2009年8月8~9日
フィジカルコンピューティングワークショップ
小林茂1・原田克彦2・松村誠一郎3・星卓哉3
1 岐阜県立国際情報科学芸術アカデミー/2 東京工芸大学/3 東京芸術大学芸術情報センター
![Page 2: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/2.jpg)
1日目の予定
• イントロダクション(10:00~11:00)• 基礎知識(11:00~12:00)• Funnelライブラリ紹介(13:00~14:30)• 無線通信とFIO(15:00~16:30)• アプリケーション紹介(16:30~17:00)• アイデアスケッチ(17:30~18:00)• スケッチ発表&質疑応答(18:00~19:00)
![Page 3: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/3.jpg)
2日目の予定
• 補足説明(10:00~12:00)• 制作(13:00~16:00)• プレゼンテーション&体験(16:30~18:00)• 質疑応答&まとめ(18:00~19:00)
![Page 4: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/4.jpg)
配布物一覧(1/2)
品名 品番など 数Gainer I/Oモジュール 1個USBケーブル A-BとA-miniB 各1本ブレッドボード SAD-01 1個ジャンプワイヤ(柔) SPP-100 適量ジャンプワイヤ(硬) SKS-140 適量抵抗器(橙橙茶金) 330Ω 1個抵抗器(茶緑茶金) 150Ω 2個抵抗器(茶黒橙金) 10kΩ 1個ボリューム 10kΩ(Bカーブ) 1個CdSセル 5mm 1個LED 緑・青など 1個
![Page 5: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/5.jpg)
配布物一覧(2/2)
品名 品番など 数加速度センサ KMX52-1050 1個フルカラーLED OSTA71A1D-A 1個距離センサ GP2Y0A21 1個距離センサ用ケーブル RBSCGP 1個タクトスイッチ 6mm角 1個
![Page 6: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/6.jpg)
自己紹介
• 1970年愛知県名古屋市生まれ• ローランド株式会社(1993~2004)
– サウンドデザイナー– 技術研究所– ソフトウェアエンジニア
• IAMAS(2004~)– フィジカルコンピューティング– インタラクションデザイン
![Page 7: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/7.jpg)
自己紹介:書籍(共著)
+GAINER
GainerBook Labo+くるくる研究室(九天社・2007年/オーム社・2008年)
![Page 8: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/8.jpg)
自己紹介:書籍(監修)Making Things TalkArduinoで作る「会話」するモノたち
Tom Igoe 著・小林 茂 監訳・水原 文 翻訳(オライリー・2008年)
![Page 9: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/9.jpg)
自己紹介:書籍(執筆)
Make日本語版Volume 04特集「Sketchーハードウェアでスケッチする」
オライリー・ジャパン編(オライリー・ジャパン・2008年)
![Page 10: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/10.jpg)
自己紹介:書籍(執筆)
Make日本語版Volume 05「Sketch / Prototype―素材として使える電子回路」
オライリー・ジャパン編(オライリー・ジャパン・2008年)
![Page 11: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/11.jpg)
自己紹介:書籍(執筆)
Make日本語版Volume 06「Prototyping Lab: オープンソースハードウェア開発の実際」
オライリー・ジャパン編(オライリー・ジャパン・2009年)
![Page 12: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/12.jpg)
自己紹介:書籍(執筆)
Make日本語版Volume 07「Prototyping Lab: Jamming Gear」
オライリー・ジャパン編(オライリー・ジャパン・2009年)
![Page 13: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/13.jpg)
ツールキット開発の動機
• ハードは気軽にスケッチできない• 実際に動くまでは想像で進めるしかない• デザイナーとエンジニアの共通言語がない
→プロトタイピングのプロセスで使える メソッドとツールキットが必要なのでは?
![Page 14: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/14.jpg)
フィジカルコンピューティングとは?
• ニューヨーク大学の ITP*1でTom Igoeらが中心となって教えているコースの名前
• インタラクションデザインを教えるための方法の1つ
• コンピュータが理解したり反応できる人間のフィジカルな表現の幅をいかに増やすか
• デザインやアート教育の1つの分野として定着
*1 Interactive Telecommunications Program
![Page 15: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/15.jpg)
フィジカルコンピューティングの構成要素
• センサやカメラ(例:光、圧力、音、温度、加速度など)• アクチュエータ(例:LED、モータ、ソレノイドなど)• プロセッサ(例:マイコン、I/Oモジュール+PCなど)
→ものすごく簡単にまとめると プログラミング+電子工作
![Page 16: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/16.jpg)
作品紹介1:Mountain Guitar
• 金箱淳一• 音楽表現のためのギター型インタフェース
– 親しみやすさ– 演奏の奥深さ
• 各種センサ+ I/Oモジュール+PC
• IAMAS東京展「いまからだ」などで展示• 学生CGコンテストなど受賞多数
![Page 17: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/17.jpg)
作品紹介1:Mountain Guitar(展示)• Ars Electronica 2007 campus2.0
リンツ(オーストリア)• IAMAS東京展「いまからだ」青山スパイラルガーデン(東京)
• アジアデジタルアート2007大賞展福岡アジア美術館(福岡)
• 第11回 文化庁メディア芸術祭国立新美術館(東京)
![Page 18: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/18.jpg)
作品紹介2:Jamming Gear
• 菅野創×西郷憲一郎• ギヤの組合せにより音楽を演奏
– 歯数が異なるギアの組合せによる変化– ミニマルミュージックを視覚的に表現
• 各種センサ×FIO×Max/MSP×PC
• Ars Electronica 2009 Digital Music部門Honorary Mention受賞
![Page 19: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/19.jpg)
作品紹介3:アクション! ゆびにんぎょう
• 笠原友美• ゆびにんぎょうが歩くと音が出る• 各種センサ×XBee×Funnel×PC
• Make: Tokyo Meeting 01-02やIAMAS Gangu Project展などで展示
![Page 20: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/20.jpg)
プロトタイピング・メソッド
• リサーチ• アイデアスケッチ• ハードウェアスケッチ• プロトタイプ制作• 展示• リフレクション
![Page 21: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/21.jpg)
ハードウェアスケッチ?
• 安価で簡単に加工できる材料で作る• センサやアクチュエータも組込む• 体験さえできれば最終で想定しているのと異なる実現方法でも構わない
※参照:littleBits coffemaker*2
*2 http://www.vimeo.com/1389390
![Page 22: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/22.jpg)
ハードウェアスケッチのメリット
• 早い段階で面白いかどうかを判断できる– 時間やお金をかけると捨てられなくなる– 作りながら考えることができる
• 体験を共有しながらディスカッションできる– アイデアと人格を分離できる– 過去の経験にとらわれずに判断できる
![Page 23: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/23.jpg)
フィジカルコンピューティングとは?
一般的なPCから見た人間は?
• キー情報(ASCIIキーボードから)• マウス情報(1つのマウスから)
→帯域幅はいったい何bps?
![Page 24: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/24.jpg)
Alto (1973)
出典:http://toastytech.com/guis/
![Page 25: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/25.jpg)
プログラミング+電子工作?
フィジカルコンピューティングは難しい?
• プログラミングはそれなりのスキルが必要(例:ActionScript、C、C++、Javaなど)• 電子工作にもそれなりのスキルが必要(例:回路設計、実装、検証)• 両方のスキルが必要ということは…
![Page 26: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/26.jpg)
プログラミング+電子工作?
フィジカルコンピューティングは難しい?
• 確かに習得するまでにはそれなりの努力が必要• できあがった結果は直接的に人間の感覚に訴えるものになる(はず)
![Page 27: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/27.jpg)
プログラミング+電子工作?
最近では扱いやすいプラットホームが登場
• プログラミング– Flash
– Processing
– Max/MSP
• 電子回路のスケッチ– Gainer
– Arduino
– Phidgets
![Page 28: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/28.jpg)
フィジカルな世界とつなぐ方法
マイコンのみ(例:Arduino、Wiring、PIC)a
b
c
d
A
B
C
D
マイコンmicrocontroller
program
a0]=ain.o;aout.1 = 255;
![Page 29: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/29.jpg)
フィジカルな世界とつなぐ方法
マイコン+PC(例:Arduino、Wiring)a
b
c
d
A
B
C
D
マイコンmicrocontroller
PC
USB
program
a0]=ain.o;aout.1 = 255;
program
a0]=ain.o;aout.1 = 255;
![Page 30: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/30.jpg)
Arduinoボード
写真:SparkFun Electronics
![Page 31: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/31.jpg)
フィジカルな世界とつなぐ方法
I/Oモジュール+PC(例:Gainer、Phidgets)a
b
c
d
A
B
C
D
I/OモジュールI/O module
PC
USB
program
a0]=ain.o;aout.1 = 255;
![Page 32: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/32.jpg)
Phidgets
![Page 33: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/33.jpg)
Gainerとは?
オープンソース・ハード&ソフトのツールキット
• I/Oモジュール• ソフトウェア・ライブラリ
– ActionScript 2/3
– Processing
– Max/MSP
![Page 34: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/34.jpg)
Gainer I/Oモジュール
写真撮影:高尾俊介
![Page 35: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/35.jpg)
I/Oモジュール+ブレッドボード
写真撮影:高尾俊介
![Page 36: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/36.jpg)
さまざまな電子部品
写真撮影:高尾俊介
![Page 37: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/37.jpg)
I/Oモジュール+ブレッドボード+部品
写真撮影:高尾俊介
![Page 38: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/38.jpg)
入力:曲げ
写真撮影:高尾俊介
![Page 39: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/39.jpg)
出力:LEDアレイ
写真撮影:高尾俊介
![Page 40: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/40.jpg)
出力:振動モータ
写真撮影:高尾俊介
![Page 41: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/41.jpg)
ワークショップのデザインと実践について
• 2008年度には公開・非公開合わせて8回のワークショップを開催(参加人数:約130名)
• 主な参加者層– デザインやアートを専攻する学生– 企業のインハウスデザイナー– エンジニア
![Page 42: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/42.jpg)
ワークショップの構成
• イントロダクション• 電子回路の基礎知識• 基本的な入出力• 入出力に対するさまざまな処理• テーマ設定• 制作• プレゼン
以上を最短2時間から最長3日間までで行う
![Page 43: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/43.jpg)
ワークショップの例
HELLO!!フィジカルコンピューティング
• 日時:2007.12.22-23
• 場所:山口情報芸術センター• 参加者:19名• 言語:日本語• 環境:Processing×Funnel×Gainer I/O
![Page 44: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/44.jpg)
ワークショップのデザイン
• ワークショップ中では一貫して「スケッチ」という用語を用いる
• ハードウェアでのスケッチをデザインプロセスの中の一部として位置づける
• 最後に課題に基づく制作を行ってプレゼン• 体験の一部を実現できていればOK
![Page 45: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/45.jpg)
イントロダクションのおわりに今後携帯電話は、人々にとってどのような存在になるのか?あんなに小さなキーを押して長いメールの文章をやり取りするなどということは誰も想像ができなかったと思います。携帯情報機器の進化は人間が持ち合わせた機能やセンサーの優秀さや精密さをあらためて人間に教えてくれます。予想もできなかった人間の隠された能力や機能がこのような電子機器によって露になるということがいえます。これからの驚きは、機械の進化ではなく、それを使いこなす人間の機能に気づくことだと思います。
深澤直人(携帯電話のデザインロジック・2008年)
![Page 46: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/46.jpg)
電圧~電流~抵抗
電気の流れは水の流れのようなもの
• 電圧– 2点間の高度(電位)の違い– 基準点が必要(GND)– 単位はボルト(V)
![Page 47: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/47.jpg)
電圧のイメージ図
低高
![Page 48: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/48.jpg)
電圧~電流~抵抗
電気の流れは水の流れのようなもの
• 電流– 電圧の高いところから低いところに流れる– 単位はアンペア(A)
![Page 49: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/49.jpg)
電流のイメージ図
少多
![Page 50: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/50.jpg)
電圧~電流~抵抗
電気の流れは水の流れのようなもの
• 抵抗– 電流の流れにくさ– 単位はオーム(Ω)
![Page 51: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/51.jpg)
抵抗のイメージ図
低 高
![Page 52: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/52.jpg)
電圧~電流~抵抗
よく出てくる補助単位の例
• 1,000倍を表すキロ(例:1kΩ)• 1,000,000倍を表すメガ(例:1MΩ)• 1
1,000を表すミリ(例:1mA)• 1
1,000,000を表すマイクロ(例:50µA)
![Page 53: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/53.jpg)
回路図ってなに?
![Page 54: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/54.jpg)
回路図ってなに?
回路図は電子回路の設計図
• シンボルで表した電子部品の接続を示したもの• シンボルに若干のバリエーションはあるが、基本的には全世界共通
![Page 55: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/55.jpg)
電源の回路図シンボル
+5V GND
![Page 56: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/56.jpg)
スイッチの回路図シンボルと部品例
![Page 57: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/57.jpg)
抵抗器の回路図シンボルと部品例
![Page 58: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/58.jpg)
可変抵抗器の回路図シンボルと部品例
![Page 59: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/59.jpg)
LEDの回路図シンボルと部品例
![Page 60: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/60.jpg)
ブレッドボードってなに?
• 部品の足を穴にさすことで電子回路を形成• はんだ付け不要
– 部品を再利用できる– 回路を組み間違えてもやり直しできる– 耐久性にはやや注意が必要
![Page 61: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/61.jpg)
ブレッドボードの構造
• 横方向のブロックは背面で接続• 縦方向のブロックは未接続• 電源用のエリアは専用に用意されている
![Page 62: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/62.jpg)
LEDを点灯させてみよう
![Page 63: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/63.jpg)
LEDを点灯させてみよう
どうして抵抗器が必要なの?
• LEDには適切な電流の範囲がある(例:20mA)• その範囲を超えると簡単に焼き切れてしまう• 適切な値の抵抗器を用いて電流を制限する• 適切な抵抗値はどうやって求める?→オームの法則を用いて計算する
※抵抗器で電流を制限する方法が全てではありません
![Page 64: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/64.jpg)
オームの法則
電圧~電流~抵抗の関係
V = I × R
• Vは電圧で単位はV(ボルト)• Iは電流で単位はA(アンペア)• Rは抵抗で単位はΩ(オーム)
![Page 65: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/65.jpg)
オームの法則
電源電圧− LEDの電圧 = LEDに流したい電流× R
Rを求めるためにこの式を変形
R =電源電圧− LEDの電圧LEDに流したい電流
例:電源電圧が5.0V、LEDの電圧が1.8V、電流が10mA
R =5 − 1.8
0.01=
3.2
0.01= ?
※実際には計算結果に近い値の抵抗器を用いる
![Page 66: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/66.jpg)
例:LEDを点灯させてみる
![Page 67: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/67.jpg)
参照:ジャンプワイヤの色分け
• 赤:電源の+側(+5V)• 黒:電源のー側(GND)• 白・青・黄:センサとの接続など
![Page 68: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/68.jpg)
例:LEDを点灯させてみる(NG)
の方向が違うワイヤをさす位置が違う
にささっていない
![Page 69: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/69.jpg)
実習:LEDをスイッチでオン/オフさせてみる
![Page 70: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/70.jpg)
実習:LEDをスイッチでオン/オフさせてみる
7
![Page 71: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/71.jpg)
physical × wonderflで試してみよう
フィジカルコンピューティングの難しさ
• 実際にハードウェアがないと体験できない• さまざまなコード例を一度にみることができない
![Page 72: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/72.jpg)
wonderflとは?
http://wonderfl.net
• 面白法人カヤックによるウェブサービス• ウェブブラウザ上でFlashを作成
– スクラッチから作る– 既存のコードから fork(派生)させる
• 2008年12月の公開後9,000人以上の登録ユーザと28,000以上の実働するAS3用サンプル
![Page 73: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/73.jpg)
physical × wonderflとは?
http://physical.wonderfl.net
• IAMASとカヤックの産学共同研究• wonderflにフィジカルコンピューティング用の機能を追加– ソフトウェアライブラリ(Funnel)を変更– 配線図用の画像や動画の埋め込み– ハードウェアなしで利用できるGUI
• 2009年7月24日に公開
![Page 74: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/74.jpg)
プロジェクトメンバー
• wonderfl開発チーム– 橋本 和宏– 大塚 雅和
• IAMAS wxpプロジェクト– 小林 茂・平林 真実・古堅 真彦・鈴木 宣也– 金 聖勲(hoonida-kim)・三宅 太門– 江島 和臣・大総 佑馬・菊地 礼雄・金 正運小牧 栞奈・竹本 香織・朴 永孝・三澤 太智
![Page 75: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/75.jpg)
デモ:physical × wonderfl
• オンラインでコードを書く• ハードウェアなしで動かしてみる• ハードウェアありで動かしてみる
![Page 76: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/76.jpg)
登録ユーザができること
• コードを書いて公開する• フィードバックを得る• 共有する• 質問する
![Page 77: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/77.jpg)
潜在ユーザができること
• ハードウェアなしで試す• フィジカルコンピューティングの可能性を感じる
• 実働するサンプルで学ぶ
![Page 78: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/78.jpg)
physical × wonderflのサンプルを試してみよう
• http://tinyurl.com/nbspoe
• http://tinyurl.com/nho2rx
![Page 79: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/79.jpg)
Funnelとは?:背景
Gainerで入門した後の「壁」
• Gainerはいわばシンプルなドライバ• 実世界の情報を扱うのは容易ではない• 時間軸を扱うプログラミングは複雑になりがち• プロトタイプにはそれなりのクオリティが必要
![Page 80: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/80.jpg)
Funnelとは?:背景
全用途をカバーできるツールキットはない
• 段階や目的に応じて使い分けた方が効率的• 多くのライブラリは特定のハードウェアに特化• ツールキットの使い分けは容易ではない
![Page 81: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/81.jpg)
Funnelとは?:背景
有線接続だと体験に制限がでてしまう
• 有線と比較して無線は敷居が高い– バッテリ駆動が面倒– トラブルシューティングが大変– コストがかかる– メッセージが届かないかもしれない
• 簡単に利用できる無線接続が必要
![Page 82: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/82.jpg)
Funnelとは?:基本方針
• シンプルで透明• スケッチ~プロトタイプまで使える• デザイナーとエンジニアの「共通言語」に
![Page 83: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/83.jpg)
Funnelとは?:関連Sketching User ExperiencesGetting the Design Right and the Right Design
Bill Buxton(Morgan Kaufmann Pub・2007年)
![Page 84: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/84.jpg)
Funnelとは?:関連
出典:Bill Buxton, Sketching User Experiences (2008)
![Page 85: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/85.jpg)
Funnelの特徴
• 入出力をより簡単に扱うためのフィルタ– 不要な変動を除去(Convolution)– 入力を設定した閾値で分割(SetPoint)– スケーリング(Scaler)– オシレータ(Osc)
• 複数の I/Oモジュールに対応
![Page 86: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/86.jpg)
Funnelの構成
USB XBeeBridge
GainerI/O Module
Arduino(with Firmata)
USB XBeeBridge
Funnel Server
ActionScript 3 ProcessingMax/MSPetc.
Ruby
AS3 Library Processing Library OSC LibrariesRuby Library
FIO XBeeFIO XBee
![Page 87: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/87.jpg)
なぜActionScritpt 3とProcessingか
• ActionScript 3
– デザイナーとエンジニア双方が利用する言語– さまざまな開発環境がある– 教育~商用まで幅広く利用される
• Processing
– 無償で利用できる– サンプルが充実– Javaによる拡張が容易
![Page 88: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/88.jpg)
ソフトウェアライブラリの基本方針
• 独自のプログラミング言語を設計しない• ベースとする言語に溶込む言語拡張ライブラリ• 新規性よりも普遍性を重視
![Page 89: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/89.jpg)
プログラム例(Gainer)
コード例 1 ボタンが押されたらサウンドを再生
var lastState = -1; // 前回の状態を記憶するための変数var t = 127; // 閾値(この値を基準にセンサの状態を判断)var h = 20; // ヒステリシス(誤動作を防ぐための遊び部分)var gio = new Gainer();
function loop():void
var state = lastState;
var val = gio.analogInput[0]; // センサ(アナログ入力0)の値if (val < (t - h)) // 値が一定値より小さければ
state = 0; // 状態を0 にセットelse if (val > (t + h)) // 値が一定値より大きければ
state = 1; // 状態を1 にセットif (lastState == 0 && state == 1) // 前回が0で今回が1なら
sound.start(); // サウンドを再生するlastState = state; // 現在の値を前回の値として記憶
![Page 90: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/90.jpg)
プログラム例(Funnel)
コード例 2 ボタンが押されたらサウンドを再生
var gio = new Gainer();
// 指定した値で入力を分割するフィルタをセットgio.addFilter(new SetPoint(0.5, 0.1));
// 値が0から0以外に変化するイベントに対してリスナをセットgio.addEventListener(RISING_EDGE, onButtonPress);
// イベントが発生した時に以下を実行function onButtonPress(e:Event):void
sound.start(); // サウンドを再生する
![Page 91: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/91.jpg)
フィジカルなUIをシンプルに表現するクラス
• ボタン• ボリューム• 加速度センサ• LED
• フルカラーLED
• モータドライバ(Hブリッジ)
![Page 92: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/92.jpg)
フィジカルなUIをシンプルに表現する
コード例 3 ボタンでLEDをコントロールする例
var gio:Gainer = new Gainer();
// ボタンが押されたらgio.button.addEventListener(PRESS, function(e:Event):void
gio.led.blink(200, 1); // LEDを200ms周期で1回点滅);
// ボタンが長押しされたらgio.button.addEventListener(LONG_PRESS, function(e:Event):void
gio.led.blink(200, 3); // LEDを200ms周期で3回点滅);
![Page 93: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/93.jpg)
Gainer I/Oの入力について
入力には2種類ある
• デジタル入力(din:0か1かの2段階)– スイッチなど– 状態がシンプルで取扱が簡単
• アナログ入力(ain:0~1の256段階)– 出力電圧が変化するセンサなど– 連続変化を扱うことができる
![Page 94: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/94.jpg)
din 0にスイッチを接続
![Page 95: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/95.jpg)
din 0にスイッチを接続
![Page 96: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/96.jpg)
入力が変化した瞬間をとらえる
• 前回の値と現在の値を比較する• 変化した瞬間をイベントとしてとらえる
– 立ち上がり(rising edge)– 立ち下がり(falling edge)
![Page 97: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/97.jpg)
Funnelでのイベント処理
参照:http://tinyurl.com/no7bvt
コード例 4 立ち上がりと立ち下がりを検出する例
var gio:Gainer = new Gainer();
gio.digitalInput(0).addEventListener(RISING_EDGE, function(e:Event):void
// 立ち上がり(0から1への変化));
gio.digitalInput(0).addEventListener(FALLING_EDGE, function(e:Event):void
// 立ち下がり(1から0への変化));
![Page 98: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/98.jpg)
ain 0にボリュームを接続
![Page 99: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/99.jpg)
ain 0にボリュームを接続
![Page 100: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/100.jpg)
ain 0にボリュームを接続
• SignalScope(http://tinyurl.com/kovuvl)を実行
• ボリュームを回して変化を確認• ain 1が不安定なのはなぜ?• どうしてボリュームを回すと電圧が変わるの?
![Page 101: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/101.jpg)
抵抗分圧
![Page 102: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/102.jpg)
抵抗分圧
![Page 103: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/103.jpg)
ain 0に光センサ(CdSセル)を接続
![Page 104: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/104.jpg)
ain 0に光センサ(CdSセル)を接続
![Page 105: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/105.jpg)
ain 0に光センサ(CdSセル)を接続
参照:http://tinyurl.com/mbh74x
• ボリュームの場合と何かが違う?• SignalScopeで入力の範囲を調べる• スケーリングを適切に設定する• 意図した通りになったかどうか確認
![Page 106: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/106.jpg)
Scalerを使ったスケーリング
参照:http://tinyurl.com/ktt7w8
コード例 5 Scalerを使ったスケーリングの例
gio = new Gainer();
gio.analogInput(0).filters = [new Scaler(0.2, 0.6, 0, 1, Scaler.LINEAR, true)];
![Page 107: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/107.jpg)
入力を複数の範囲に分割する
• 閾値とヒステリシス– 閾値は判断の基準となる値– ヒステリシスは不要な変動を取り除くための不感帯
• 条件分岐を組み合わせて複数の範囲に分割
![Page 108: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/108.jpg)
SetPointを使った場合
参照:http://tinyurl.com/mku948
コード例 6 SetPointを使った範囲分割の例
gio = new Gainer();
gio.analogInput(0).filters = [new SetPoint([0.5, 0.1])];
gio.analogInput(0).addEventListener(RISING_EDGE, onRisingEdge);
gio.analogInput(0).addEventListener(FALLING_EDGE, onFallingEdge);
![Page 109: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/109.jpg)
ain 0に曲げセンサを接続
![Page 110: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/110.jpg)
ain 0に距離センサを接続
![Page 111: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/111.jpg)
ain 0に距離センサを接続
![Page 112: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/112.jpg)
ain 0に距離センサを接続
• PSD測距センサの出力はリニアではない• 距離に変換するためには直線ではない→スケーリングが必要
![Page 113: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/113.jpg)
(参考)ain 0に感圧センサを接続
![Page 114: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/114.jpg)
(参考)ain 0に感圧センサを接続
![Page 115: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/115.jpg)
(参考)ain 0にSoftPotを接続
![Page 116: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/116.jpg)
(参考)ain 0にSoftPotを接続
0°
![Page 117: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/117.jpg)
(参考)ain 0にSoftPotを接続
• 押さえている間は値が安定• 指を離すと値が不定になる• どうすれば指を離した時を検出できる?
![Page 118: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/118.jpg)
ainに加速度センサを接続
![Page 119: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/119.jpg)
ainに加速度センサを接続
![Page 120: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/120.jpg)
加速度センサの用途
• 動きの検出• 傾きの検出→なぜ加速度センサで傾きが検出できるの?
![Page 121: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/121.jpg)
傾きを検出する原理
![Page 122: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/122.jpg)
センサの出力から角度を求める
参照:http://tinyurl.com/l2ojfc
• フィルタで細かい動きを取り除く• -1から+1までにスケーリングする• 逆sin関数を用いて角度に変換する• 必要に応じてラジアンから度に変換する
![Page 123: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/123.jpg)
フィルタリング
• 細かな変動を取り除く(移動平均)• 高い周波数の変動成分を取り除く(LPF)• 低い周波数の変動成分を取り除く(HPF)
![Page 124: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/124.jpg)
Convolutionを使った移動平均
参照:http://tinyurl.com/nb6xto
コード例 7 Convolutionを使った移動平均フィルタの例
gio = new Gainer();
gio.analogInput(0).filters = [new Convolution(Convolution.MOVING_AVERAGE)];
![Page 125: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/125.jpg)
加速度センサで表示をコントロールする
コード例 8 加速度センサの出力で角度をコントロールする例
public function GainerAccelerometer()
gio = new Gainer();
board = new Shape();
...
this.addChild(board);
var smoother:Convolution = new Convolution(Convolution.MOVING_AVERAGE);
var scaler:Scaler = new Scaler(0.30, 0.70, -1, 1, Scaler.LINEAR, true);
gio.analogInput(1).filters = [smoother, scaler];
addEventListener(Event.ENTER_FRAME, loop);
private function loop(event:Event):void
board.rotation = Math.asin(gio.analogInput(1).value) / Math.PI * 180;
![Page 126: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/126.jpg)
Gainer I/Oの出力について
出力には2種類ある
• デジタル出力(dout:0か1かの2段階)– LED、モータなど– 状態がシンプルで取扱が簡単
• アナログ出力(aout:0~255の256段階)*3
– LED、モータなど– 連続的な変化を扱うことができる
*3 実際にはPWMによる疑似アナログ出力
![Page 127: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/127.jpg)
マウスによる制御
コード例 9 マウスで I/Oモジュール上のLEDを制御
public function GainerLED()
...
var circle:Sprite = new Sprite();
...
this.addChild(circle);
circle.addEventListener(MouseEvent.MOUSE_DOWN, mousePressed);
circle.addEventListener(MouseEvent.MOUSE_UP, mouseReleased);
private function mousePressed(e:MouseEvent):void
gio.led.value = 1;
private function mouseReleased(e:MouseEvent):void
gio.led.value = 0;
![Page 128: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/128.jpg)
ボタンによる制御
コード例 10 ボタンで I/Oモジュール上のLEDを制御(LED button.fla)
public function GainerLED()
gio = new Gainer();
gio.button.addEventListener(PinEvent.RISING_EDGE, buttonPressed);
gio.button.addEventListener(PinEvent.FALLING_EDGE, buttonReleased);
private function buttonPressed(e:PinEvent):void
gio.led.value = 1;
private function buttonReleased(e:PinEvent):void
gio.led.value = 0;
![Page 129: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/129.jpg)
dout 0にLEDを接続
![Page 130: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/130.jpg)
dout 0にLEDを接続
![Page 131: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/131.jpg)
デジタル出力の制御
参照:http://tinyurl.com/mtrq6f
![Page 132: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/132.jpg)
aout 0にLEDを接続
![Page 133: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/133.jpg)
aout 0にLEDを接続
![Page 134: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/134.jpg)
アナログ出力の制御
参照:http://tinyurl.com/nbspoe
![Page 135: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/135.jpg)
OscでLEDを点滅させる
参照:http://tinyurl.com/nh4287
![Page 136: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/136.jpg)
Flash IDEで試してみる
• wonderflでサンプルを選ぶ• wonderflからコードをダウンロード• ファイル名をクラス名に応じて変更• flaファイルのメインクラスに指定• マウス入力をセンサ入力で置き換える
![Page 137: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/137.jpg)
配布物一覧(追加)
FIO 1個ブレッドボード EIC-801 1個ピンヘッダ 1個バッテリ 1個XBee 2個XBee Explorer USB 1個
![Page 138: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/138.jpg)
FIO (Funnel I/O)とは?
• LilyPad Arduino v1.6がベース• リチウムポリマー電池用の充電器を搭載• XBeeを搭載可能
![Page 139: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/139.jpg)
FIO (Funnel I/O) v1.3
![Page 140: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/140.jpg)
FIO (Funnel I/O) v1.3
![Page 141: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/141.jpg)
FIO (Funnel I/O) v1.3
+-
![Page 142: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/142.jpg)
FIO (Funnel I/O) v1.3
![Page 143: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/143.jpg)
FIO v1.3 vs Funnel IO Remixed
![Page 144: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/144.jpg)
Arduinoとは?
• Hernando Barraganが IDII*4にいた時に開発を始めたWiringがベース
• 電子回路をプロトタイピングするためのオープンソースのプラットフォーム
• IDEとArduino I/Oボードから構成される
*4 Interaction Design Institute Ivrea
![Page 145: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/145.jpg)
Wiring
写真:SparkFun Electronics
![Page 146: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/146.jpg)
Arduino Duemilanove
写真:SparkFun Electronics
![Page 147: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/147.jpg)
Arduino IDE
![Page 148: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/148.jpg)
オープンソース・ハードウェアとは?
• ハードウェアのデザインデータがオープン– 回路図– 基板レイアウト
• ライセンスに基づいて自由に改変できる
![Page 149: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/149.jpg)
LilyPad Arduino
写真:SparkFun Electronics
![Page 150: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/150.jpg)
Arduino Pro Mini
写真:SparkFun Electronics
![Page 151: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/151.jpg)
Arduino ProtoShield
写真:SparkFun Electronics
![Page 152: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/152.jpg)
Arduino XBee Shield
写真:SparkFun Electronics
![Page 153: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/153.jpg)
Arduinoの各部紹介
デジタル入出力 x14
アナログ入力 x6GND +5V
GND
![Page 154: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/154.jpg)
Gainer I/OとArduinoの比較
Gainer I/O Arduino Duemilanove
入出力ピン 16 20
A/D 8(8bit) 6(10bit)PWM 8(8bit) 6(8bit)
ユーザボタン 1 0
ユーザLED 1 1(D13に接続)オープンソース Yes Yes
スタンドアロン No Yes
重点 簡単 拡張性
![Page 155: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/155.jpg)
Arduinoを用いるメリットは?
• シンプルに記述できる• 非プログラマでも取り組みやすい• 多くの利用例が公開されている• 登場する「おまじない」が少ない
![Page 156: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/156.jpg)
比較:ArduinoでのLED点滅
コード例 11 Arduino言語でのLED点滅
int ledPin = 13;
void setup()
pinMode(ledPin, OUTPUT);
void loop()
digitalWrite(ledPin, HIGH);
delay(1000);
digitalWrite(ledPin, LOW);
delay(1000);
![Page 157: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/157.jpg)
比較:通常のC言語でのLED点滅
コード例 12 通常のC言語でのLED点滅の例
#include <avr/io.h>
#include <avr/pgmspace.h>
#include <avr/delay.h>
#define CLK_CALIB_DATA (FLASHEND - 3)
void init()
uint8_t osccal_data = pgm_read_byte(CLK_CALIB_DATA);
if (osccal_data != 0xff) OSCCAL = osccal_data;
DDRB = 0xff;
DDRD = 0xff;
return;
![Page 158: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/158.jpg)
比較:通常のC言語でのLED点滅
コード例 13 通常のC言語でのLED点滅の例(続き)
void delay_ms(uint16_t t)
while (t--) _delay_ms(1);
int main(void)
init();
for (; ;)
PORTB = 0xff;
delay_ms(500);
PORTB = 0x00;
delay_ms(500);
return 0;
![Page 159: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/159.jpg)
Arduinoを用いるデメリットは?
• C/C++ベースなのでサイズが大きくなりがち• 実行速度の面で不利な場合もある• デバッガは利用できない
![Page 160: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/160.jpg)
ArduinoとPCをつなぐ方法
• 有線– シリアル– USB
– Ethernet
• 無線– Bluetooth
– IEEE 802.15.4 / ZigBee
どのようにデータをやり取りするかについて取り決め(=プロトコル)が必要
![Page 161: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/161.jpg)
プロトコル:Firmata
http://firmata.org/
• Hans-Christoph Steinerが提案• MIDIを参考にしたプロトコル• Arduino 0012から標準に
![Page 162: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/162.jpg)
Firmataに対応したPC側のライブラリ
• Pd (aka Pure Data)
• Processing
• Funnel
• Linux C++
• C++/openFrameworks
![Page 163: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/163.jpg)
さまざまな無線通信の方式
BAN PAN LAN MAN
伝送速度
伝送距離1m 10m 100m 1km
1k
10k
100k
1M
10M
100M
ZigBee/IEEE 802.15.4
Bluetooth
ANT
IEEE 802.11b
IEEE 802.11a/g
IEEE 802.11n
10G
0.1m
![Page 164: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/164.jpg)
さまざまな無線通信の方式とその特徴
Wi-Fi Bluetooth 802.15.4/ZigBee
IEEE規格 802.11a/b/g/n 802.15.1 802.15.4
周波数帯 2.4GHz/5GHz 2.4GHz 866MHz/915MHz/2.4GHz
通信距離 最大100m程度 最大100m程度 100m以上(2.4GHz)最大通信速度 最大300Mbps 最大3Mbps 最大250kbps(2.4GHz)接続ノード数 32 7 65535
電池寿命 数時間 数日 数年ネットワーク構成 スター型 スター型 スター型・メッシュ型など
主な用途 無線LAN 携帯電話 セキュリティ機器
表1 主な無線通信規格の比較
![Page 165: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/165.jpg)
IEEE 802.15.4デバイスの種類
• コーディネータ(1個)• エンド・デバイス(複数)
![Page 166: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/166.jpg)
IEEE 802.15.4で可能なネットワークトポロジ
Point to Point
Point to Multi
Star
802.15.4 Coordinator802.15.4 End Device
![Page 167: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/167.jpg)
ZigBeeデバイスの種類
• コーディネータ(1個)• ルータ(複数)• エンド・デバイス(複数)
![Page 168: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/168.jpg)
ZigBeeで可能なネットワークトポロジ
MeshCoordinator
End DeviceRouter
![Page 169: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/169.jpg)
XBeeの特長
• IEEE 802.15.4とZigBeeの2つのモデル*5
– XBee 802.15.4
– XBee ZB ZigBee PRO
• 比較的低価格(国内モデルで約3500円)• 日本国内でも利用できるよう認証取得済み• 利用方法を解説した書籍がある
*5 モデル間での相互接続性はない
![Page 170: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/170.jpg)
XBeeの注意点
• 電源電圧は5Vではない• UDPと同様に相手にパケットが届くことが保証されない
• 同じチャンネルを使用するデバイス全体で帯域幅は100kbps程度
![Page 171: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/171.jpg)
XBeeの設定方法
以下をそれぞれのXBeeについて設定
• hardware/fio/tool/XBeeConfigToolを起動• シリアルポートを選択• PAN IDを設定• コーディネータ/エンドデバイスを選択• エンドデバイスの場合はMY IDを設定• Configureボタンで設定を書込み
![Page 172: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/172.jpg)
FIO:動作確認
• XBee Explorer USBをPCに接続• Arduino 16を起動• Tools→BoardからArduino Pro/ Pro Mini
(8MHz)を選択• Tools→Serial Portからシリアルポートを選択• Open→Examples→Digital→Blinkを選択• Upload to I/O Boardでアップロード
![Page 173: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/173.jpg)
FIO:準備
• hardware/fio/firmware/FioStandardFirmataを選択
• Upload to I/O Boardでアップロード
![Page 174: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/174.jpg)
FIO:動作確認
• FIOの電源をオンにする• XBee Explorer USBをPCに接続• Funnel Serverを起動• 次のサンプルで確認
– http://tinyurl.com/n4c7a5
– http://tinyurl.com/kp7jqs
![Page 175: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/175.jpg)
FIOにLEDを接続
![Page 176: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/176.jpg)
FIOに加速度センサを接続
![Page 177: Geidai Open Workshop 2009](https://reader034.vdocuments.site/reader034/viewer/2022052310/554cc8c7b4c905cf2a8b4906/html5/thumbnails/177.jpg)
平成21年度東京芸術大学公開講座:2009年8月8~9日
フィジカルコンピューティングワークショップ
小林茂1・原田克彦2・松村誠一郎3・星卓哉3
1 岐阜県立国際情報科学芸術アカデミー/2 東京工芸大学/3 東京芸術大学芸術情報センター