Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Slides AXIS WS2

1,543 views

Published on

Slides for the workshop at AXIS Gallery on December 27th

Published in: Education
  • Be the first to comment

Slides AXIS WS2

  1. 1. IAMAS Gangu Project - Work in Progress “Sketching in Hardware”ワークショップ 小林茂(IAMAS:岐阜県立国際情報科学芸術アカデミー) 2008 年 12 月 27 日:AXIS Gallery
  2. 2. 自己紹介 • 1970年名古屋市生まれ • 電子楽器メーカー(1993∼2004) – サウンドデザイナー – 技術研究所 – ソフトウェアエンジニア • IAMAS(2004∼) – フィジカルコンピューティング – インタラクションデザイン
  3. 3. 自己紹介:ツールキット開発の動機 • ハードは気軽にスケッチできない →ソフトが動いた段階で気がついても遅い • 実際に動くまでは想像で進めるしかない →建設的なディスカッションが行われにくい • デザイナーとエンジニアの共通言語がない →コミュニケーション上の齟齬が多発する →インタラクションデザインのプロセスで使える  ツールキットが必要なのでは?
  4. 4. 自己紹介:書籍(執筆) Make日本語版Volume 04 特集「Sketchーハードウェアでスケッチする」 オライリー・ジャパン編(オライリー・ジャパン・2008年)
  5. 5. 自己紹介:書籍(執筆) Make日本語版Volume 05 「Sketch / Prototype―素材として使える電子回路」 オライリー・ジャパン編(オライリー・ジャパン・2008年)
  6. 6. 自己紹介:書籍(共著) +GAINER GainerBook Labo+くるくる研究室(九天社・2007 年/オーム社・2008 年)
  7. 7. 自己紹介:書籍(監修) Making Things Talk Arduinoで作る「会話」するモノたち Tom Igoe 著・小林 茂 監訳・水原 文 翻訳(オライリー・2008年)
  8. 8. 本日の予定 • イントロダクション – フィジカルコンピューティングとは – ツールキットの紹介(Gainer) – 事例紹介 – ツールキットの紹介(Funnel) • 実習 – 実習1:電子回路の基礎知識 – 実習2:Funnel入門 – 実習3:Funnel応用
  9. 9. フィジカルコンピューティングとは? • ニューヨーク大学のITP*1 でTom Igoeらが 中心となって教えているコースの名前 • インタラクションデザインを教えるための 方法の1つ • コンピュータが理解したり反応できる人間の フィジカルな表現の幅をいかに増やすか • デザインやアート教育の1つの分野として定着 *1 Interactive Telecommunications Program
  10. 10. ITPの紹介 ITP Winter Show 2008 • ITPで学ぶ学生の展覧会で毎年春冬2回開催 • 12月17日から18日まで開催 • http://itp.nyu.edu/shows/winter2008/
  11. 11. フィジカルコンピューティングとは? 一般的なPCから見た人間は? • キー情報(ASCIIキーボードから) • マウス情報(1つのマウスから)
  12. 12. Alto (1973) 出典:http://toastytech.com/guis/
  13. 13. フィジカルコンピューティングとは? • PC+標準入出力デバイスの世界で実現できる インタラクションには限界がある – 人間が直接触れて感じることができない – PCのパラダイムに縛られてしまう • 統一されたプラットホームならではの良さも 勿論ある (例:Flashなどによるウェブ上での表現)
  14. 14. フィジカルコンピューティングとは? • 物理的な入出力を活用することによって 表現力は拡大する(例:Nintendo Wii) • 電子楽器などではずいぶん昔からのテーマ • iPhoneが注目される理由とも大きく関連 • フィジカルなインタラクションデザインの メソッド確立はまだまだこれから?
  15. 15. フィジカルコンピューティングの構成要素 • センサ (例:光、圧力、音、温度、加速度など) • アクチュエータ (例:LED、モータ、ソレノイドなど) • プロセッサ (例:マイコン、I/Oモジュール+PCなど) →ものすごく簡単にまとめると  プログラミング+電子工作
  16. 16. プログラミング+電子工作? フィジカルコンピューティングは難しい? • プログラミングはそれなりのスキルが必要 (例:ActionScript、C、C++、Javaなど) • 電子工作にもそれなりのスキルが必要 (例:回路設計、実装、検証) • 両方のスキルが必要ということは…
  17. 17. プログラミング+電子工作? フィジカルコンピューティングは難しい? • 確かに習得するまでにはそれなりの努力が必要 • できあがった結果は直接的に人間の感覚に 訴えるものになる(はず)
  18. 18. プログラミング+電子工作? 最近では扱いやすいプラットホームが登場 • プログラミング – Flash – Processing – Max/MSP • 電子回路のスケッチ – Gainer – Arduino – Phidgets
  19. 19. 電子工作は大変? • 誰でもはんだ付けくらいはやったことがある • まずは必要最小限のこと(だけ)を覚えれば スタートできる – 電圧∼電流∼抵抗 – 回路図の読み方 – オームの法則など – よく使う部品のシンボルと特徴 • 失敗しながら覚えていけばいい • でもUNDOはきかない(=人生と一緒)
  20. 20. フィジカルな世界とつなぐ方法 マイコンのみ(例:PIC、AVR) a b c d A B C D マイコン microcontroller program a0]=ain.o; aout.1 = 255;
  21. 21. フィジカルな世界とつなぐ方法 マイコン+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;
  22. 22. Arduino I/Oボード 写真:SparkFun Electronics
  23. 23. フィジカルな世界とつなぐ方法 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;
  24. 24. Phidgets
  25. 25. Gainerとは? オープンソース・ハード&ソフトのツールキット • I/Oモジュール • ソフトウェア・ライブラリ – ActionScript 2/3 – Processing – Max/MSP
  26. 26. Gainer I/Oモジュール 写真撮影:高尾俊介
  27. 27. I/Oモジュール+ブレッドボード 写真撮影:高尾俊介
  28. 28. さまざまな電子部品 写真撮影:高尾俊介
  29. 29. I/Oモジュール+ブレッドボード+部品 写真撮影:高尾俊介
  30. 30. 入力:曲げ 写真撮影:高尾俊介
  31. 31. 出力:LEDアレイ 写真撮影:高尾俊介
  32. 32. 出力:振動モータ 写真撮影:高尾俊介
  33. 33. ワークショップ HELLO!!フィジカルコンピューティング • 日時:2007.12.22-23 • 場所:山口情報芸術センター • 参加者:19名 • 言語:日本語 • 環境:Processing×Funnel×Gainer I/O
  34. 34. 作例:Mountain Guitar • 金箱淳一 • 音楽表現のためのギター型インタフェース – 親しみやすさ – 演奏の奥深さ • 各種センサ+I/Oモジュール+PC • IAMAS東京展「いまからだ」などで展示 • 学生CGコンテストなど複数で受賞
  35. 35. 作例:Mountain Guitar(スケッチ)
  36. 36. 作例:Mountain Guitar(1号)
  37. 37. 作例:Mountain Guitar(2号)
  38. 38. 作例:Mountain Guitar(2号の製作中)
  39. 39. 作例:Mountain Guitar(3号)
  40. 40. 作例:Mountain Guitar(4号)
  41. 41. 作例:Mountain Guitar(4号の製作中)
  42. 42. 作例:Mountain Guitar(4号の配線)
  43. 43. 作例:Mountain Guitar(5号)
  44. 44. 作例:Mountain Guitar(5号の内部)
  45. 45. Funnelとは?:コンセプト • 単純で透明 • スケッチ∼プロトタイプまで使える • デザイナーとエンジニアの「共通言語」
  46. 46. FunnelとGainerの違い • Gainer – シンプルなドライバ的なもの – Gainer I/Oと1:1対応 – 入門書がある • Funnel – フレームワーク的なもの – ArduinoやXBeeも利用可能 – 入門書がない
  47. 47. Funnelとは?:関連 Sketching User Experiences Getting the Design Right and the Right Design Bill Buxton(Morgan Kaufmann Pub・2007年)
  48. 48. Funnelとは?:関連 出典:Bill Buxton, Sketching User Experiences (2008)
  49. 49. Funnelの特徴 • 疑似コード風のコーディング • 入出力をより簡単に扱うためのフィルタ – ローパス、ハイパス(Convolution) – 入力を設定した閾値で分割(SetPoint) – スケーリング(Scaler) – オシレータ(Osc) • 複数のI/Oモジュールに対応
  50. 50. Funnelの構成 USB XBee Dongle Gainer I/O Module Arduino (with Firmata) USB XBee Dongle Funnel Server ActionScript 3 Processing Max/MSP etc. Ruby AS3 Library Processing Library OSC LibrariesRuby Library Funnel I/O Digi International XBee Funnel I/O Digi International XBee
  51. 51. Arduino Duemilanove 写真:SparkFun Electronics
  52. 52. LilyPad Arduino 写真:SparkFun Electronics
  53. 53. Arduino Pro Mini 写真:SparkFun Electronics
  54. 54. Arduino ProtoShield 写真:SparkFun Electronics
  55. 55. Arduino XBee Shield 写真:SparkFun Electronics
  56. 56. FIO: Funnel I/O Module v1.3
  57. 57. FIO: Funnel I/O Module v1.3
  58. 58. FIO: Funnel I/O Module v1.3 +-
  59. 59. XIO: XBee I/O Board v1.0
  60. 60. XIO: XBee I/O Board v1.0
  61. 61. Funnel:今後の開発予定 ビルド009のリリースを近日中に予定 • I2Cデバイスのサポートを追加 • XBeeおよびFIOのサンプルとツールを追加 • バグ修正や細かな改良など
  62. 62. 配布物一覧 品名 品番など 数 Gainer I/Oモジュール 1個 USBケーブル 1本 ブレッドボード SAD-01 1個 ジャンプワイヤ SPP-100 適量 抵抗器(橙橙茶金) 330Ω 2個 抵抗器(茶黒橙金) 10kΩ 1個 ボリューム 10kΩ(Bカーブ) 1個 CdSセル 5mm 1個 LED 白色 1個 加速度センサ KMX52-1050 1個 タクトスイッチ 6mm角 1個
  63. 63. 電圧∼電流∼抵抗 電気の流れは水の流れのようなもの • 電圧 – 2点間の高度(電位)の違い – 基準点が必要(GND) – 単位はボルト(V)
  64. 64. 電圧のイメージ図 低高
  65. 65. 電圧∼電流∼抵抗 電気の流れは水の流れのようなもの • 電流 – 電圧の高いところから低いところに流れる – 単位はアンペア(A)
  66. 66. 電流のイメージ図 少多
  67. 67. 電圧∼電流∼抵抗 電気の流れは水の流れのようなもの • 抵抗 – 電流の流れにくさ – 単位はオーム(Ω)
  68. 68. 抵抗のイメージ図 低 高
  69. 69. 電圧∼電流∼抵抗 よく出てくる補助単位の例 • 1,000倍を表すキロ(例:1kΩ) • 1,000,000倍を表すメガ(例:1MΩ) • 1 1,000 を表すミリ(例:1mA) • 1 1,000,000 を表すマイクロ(例:50µA)
  70. 70. 回路図ってなに?
  71. 71. 回路図ってなに? 回路図は電子回路の設計図 • シンボルで表した電子部品の接続を示したもの • シンボルに若干のバリエーションはあるが、 基本的には全世界共通
  72. 72. 電源の回路図シンボル +5V GND
  73. 73. スイッチの回路図シンボルと部品例
  74. 74. 抵抗器の回路図シンボルと部品例
  75. 75. 可変抵抗器の回路図シンボルと部品例
  76. 76. LEDの回路図シンボルと部品例
  77. 77. ブレッドボードってなに? • 部品の足を穴にさすことで電子回路を形成 • はんだ付け不要 – 部品を再利用できる – 回路を組み間違えてもやり直しできる – 耐久性にはやや注意が必要
  78. 78. ブレッドボードの構造 • 横方向のブロックは背面で接続 • 縦方向のブロックは未接続 • 電源用のエリアは専用に用意されている
  79. 79. 実習:LEDを点灯させてみよう
  80. 80. LEDを点灯させてみよう どうして抵抗器が必要なの? • LEDには適切な電流の範囲がある (例:20mA) • その範囲を超えると簡単に焼き切れてしまう • 適切な値の抵抗器を用いて電流を制限する • 適切な抵抗値はどうやって求める? →オームの法則を用いて計算する ※抵抗器で電流を制限する方法が全てではありません
  81. 81. オームの法則 電圧∼電流∼抵抗の関係 V = I × R • Vは電圧で単位はV(ボルト) • Iは電流で単位はA(アンペア) • Rは抵抗で単位はΩ(オーム)
  82. 82. オームの法則 電源電圧 − LEDの電圧 = LEDに流したい電流 × R Rを求めるためにこの式を変形 R = 電源電圧 − LEDの電圧 LEDに流したい電流 例:電源電圧が5.0V、LEDの電圧が1.8V、電流が10mA R = 5 − 1.8 0.01 = 3.2 0.01 = ? ※実際には計算結果に近い値の抵抗器を用いる
  83. 83. 例:LEDを点灯させてみる
  84. 84. 参考:ジャンプワイヤの色分け • 赤:電源の+側(+5V) • 黒:電源のー側(GND) • 白・青・黄:センサとの接続など
  85. 85. 例:LEDを点灯させてみる(NG) の方向が違う ワイヤをさす位置が違う にささっていない
  86. 86. 実習:LEDをスイッチでオン/オフさせてみる
  87. 87. 実習:LEDをスイッチでオン/オフさせてみる 7
  88. 88. Processing入門 • 基本的な操作方法 • 用語 • 簡単なプログラム
  89. 89. 参考書籍 Built with Processing [改訂版] デザイン/アートのためのプログラミング入門 前川 峻志+田中 孝太郎(ビー・エヌ・エヌ新社・2008年)
  90. 90. Processing入門:基本的な操作方法 • 起動 • サンプルを開く • 実行 • 終了
  91. 91. Processing入門:用語 • Processing Development Environment • Sketch • Display Window
  92. 92. Processing入門:簡単なプログラム1 コード例 1 Hello World! println("Hello World!");
  93. 93. Processing入門:簡単なプログラム2 コード例 2 ウィンドウを表示してみる // 最初に1回だけ実行される void setup() { // Display Windowのサイズ(横、縦) size(200, 200); } // 毎フレームごとに実行される void draw() { // 背景の色(赤、緑、青) background(255, 255, 255); }
  94. 94. Processing入門:簡単なプログラム3 コード例 3 直線を描画してみる void setup() { size(200, 200); } void draw() { background(0); stroke(255); line(0, 0, 199, 199); }
  95. 95. Processing入門:簡単なプログラム4 コード例 4 マウスの状態を読み取る void setup() { size(200, 200); } void draw() { if (mousePressed) { background(255); } else { background(0); } }
  96. 96. Processing入門:簡単なプログラム5 コード例 5 マウスイベントを扱う int brightness = 0; void setup() { ... void draw() { background(brightness); } void mousePressed() { brightness = 255; } void mouseReleased() { brightness = 0; }
  97. 97. Funnel入門 • 出力をコントロールしてみる – マウスでI/Oモジュール上のLEDを制御 – I/Oモジュール上のボタンでLEDを制御 • 入力を扱ってみる – ボリューム – CdSセル
  98. 98. Funnel入門:Gainer I/Oの出力について 出力には2種類ある • デジタル出力(dout:0か1かの2段階) – LED、モータなど – 状態がシンプルで取扱が簡単 • アナログ出力(aout:0∼1の256段階)*2 – LED、モータなど – 連続的な変化を扱うことができる *2 実際にはPWMによる疑似アナログ出力
  99. 99. Funnel入門:マウスによる制御 コード例 6 マウスでI/Oモジュール上のLEDを制御( 01 ControlLEDByMouse) import processing.funnel.*; Gainer gainer; void setup() { size(200, 200); frameRate(30); gainer = new Gainer(this, Gainer.MODE1); gainer.autoUpdate = true; } void draw() { background(100); }
  100. 100. Funnel入門:マウスによる制御 コード例 7 マウスでI/Oモジュール上のLEDを制御( 01 ControlLEDByMouse続き) void mousePressed() { gainer.led().value = 1.0; } void mouseReleased() { gainer.led().value = 0.0; }
  101. 101. Funnel入門:ボタンによる制御 コード例 8 ボタンでI/Oモジュール上のLEDを制御( 02 ControlLEDByButton) import processing.funnel.*; Gainer gainer; void setup() { size(200, 200); frameRate(30); gainer = new Gainer(this, Gainer.MODE1); gainer.autoUpdate = true; } void draw() { background(100); }
  102. 102. Funnel入門:ボタンによる制御 コード例 9 ボタンでI/Oモジュール上のLEDを制御( 02 ControlLEDByButton続き) void gainerButtonEvent(boolean pressed) { if (pressed) { gainer.led().value = 1.0; } else { gainer.led().value = 0.0; } }
  103. 103. Funnel入門:aout 0にLEDを接続
  104. 104. Funnel入門:aout 0にLEDを接続
  105. 105. Funnel入門:アナログ出力の制御 コード例 10 ボタンでaout 0に接続したLEDを制御 // _02_ControlLEDByButtonの以下の部分だけを変更する void gainerButtonEvent(boolean pressed) { if (pressed) { gainer.analogOutput(0).value = 1.0; } else { gainer.analogOutput(0).value = 0.0; } }
  106. 106. Funnel入門:Gainer I/Oの入力について 入力には2種類ある • デジタル入力(din:0か1かの2段階) – スイッチなど – 状態がシンプルで取扱が簡単 • アナログ入力(ain:0∼1の256段階) – 出力電圧が変化するセンサなど – 連続変化を扱うことができる
  107. 107. Funnel入門:ain 0にボリュームを接続
  108. 108. Funnel入門:ain 0にボリュームを接続
  109. 109. Funnel入門:ain 0にボリュームを接続 • 03 SimpleScopeを開いて実行 • ボリュームを回して変化を確認 • チャンネル数を2に増やす • ain 1が不安定なのはなぜ? • どうしてボリュームを回すと電圧が変わるの?
  110. 110. Funnel入門:抵抗分圧
  111. 111. Funnel入門:抵抗分圧
  112. 112. Funnel入門:サンプルをボリュームで制御 • 04 Treeを開く*3 • 変更を加えるために別名で保存 • Funnelを使うための準備 • mouseXをain 0の値で置き換える *3 Topics/Fractals and L-Systems/Treeと同じものです
  113. 113. Funnel入門:ain 0に光センサを接続
  114. 114. Funnel入門:ain 0に光センサを接続
  115. 115. Funnel入門:ain 0に光センサを接続 • 改変した 04 Treeを再度実行 →ボリュームの場合と何かが違う? • 03 SimpleScopeで入力の範囲を調べる • Scalerをフィルタとして追加する • 意図した通りになったかどうか確認
  116. 116. Funnel入門:Scalerの追加 コード例 11 Scalerを追加した 05 Tree import processing.funnel.*; Gainer gainer; void setup() { size(400, 400, P3D); ... gainer = new Gainer(this, Gainer.MODE1); Filter f[] = { new Scaler(0.3, 0.9, 0, 1, Scaler.LINEAR, true) }; gainer.analogInput(0).filters = f; }
  117. 117. Funnel応用:ainに加速度センサを接続
  118. 118. Funnel応用:ainに加速度センサを接続
  119. 119. Funnel応用:ainに加速度センサを接続 • 03 SimpleScopeを開く • 表示するチャンネル数を3に増やす • x, y, zそれぞれの軸の動きを確認 – 傾けてみる – 振ってみる
  120. 120. Funnel応用:加速度センサの用途 • 動きの検出 • 傾きの検出 →なぜ加速度センサで傾きが検出できるの?
  121. 121. Funnel応用:傾きを検出する原理
  122. 122. Funnel応用:センサの出力から角度を求める • フィルタで細かい動きを取り除く • 03 SimpleScopeで変化幅を確認する • -1から+1までにスケーリングする • 逆sin関数を用いて角度に変換する
  123. 123. Funnel応用:加速度センサを使ってみる • 05 RGBCube Mouseを開く*4 • マウスを動かして動作を確認する • マウス操作を加速度センサに置き換える *4 3D and OpenGL/Form/RGBCubeを一部改変
  124. 124. IAMAS Gangu Project - Work in Progress “Sketching in Hardware”ワークショップ 小林茂(IAMAS:岐阜県立国際情報科学芸術アカデミー) 2008 年 12 月 27 日:AXIS Gallery

×