Successfully reported this slideshow.

Slides AXIS WS2

1,526 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

×