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