Post on 27-May-2015
description
Make: Tokyo Meeting 03
ワークショップ：Jamming Gearを作ってみよう
小林茂（国際情報科学芸術アカデミー [IAMAS]）＋菅野創（情報科学芸術大学院大学 [IAMAS]）
2009年 5月 23・24日：デジタルハリウッド 八王子制作スタジオ
配布物一覧
品名 品番など 数Pepper 1個ブレッドボード EIC-801 1個ジャンプワイヤ（柔150mm） 3本ジャンプワイヤ（固） 適量抵抗器（橙橙茶金） 330Ω 2個ボリューム 10kΩ（Bカーブ） 1個LED 白色など 1個フォトインタラプタ GP1A53HRJ00F 2個ギアなど おりこうブロック 適量回転読み取り用紙 1枚のりパネ 20mm×20mm 8枚
自己紹介：書籍（執筆）
Make日本語版Volume 04特集「Sketchーハードウェアでスケッチする」
オライリー・ジャパン編（オライリー・ジャパン・2008年）
自己紹介：書籍（執筆）
Make日本語版Volume 05「Sketch / Prototype―素材として使える電子回路」
オライリー・ジャパン編（オライリー・ジャパン・2008年）
自己紹介：書籍（執筆）
Make日本語版Volume 06「Prototyping Lab: オープンソースハードウェア開発の実際」
オライリー・ジャパン編（オライリー・ジャパン・2009年）
自己紹介：書籍（執筆）
Make日本語版Volume 07「Prototyping Lab: メイキング・オブ・Jamming Gear」
オライリー・ジャパン編（オライリー・ジャパン・2009年）
• Jamming Gearの概要• プロトタイピングの過程の紹介• 簡易版Jamming Gearを作ってみよう
自己紹介：書籍（監修）Making Things TalkArduinoで作る「会話」するモノたち
Tom Igoe 著・小林 茂 監訳・水原 文 翻訳（オライリー・2008年）
自己紹介：書籍（共著）
＋GAINER
GainerBook Labo＋くるくる研究室（九天社・2007年／オーム社・2008年）
自己紹介：ツールキット開発の動機
• ハードは気軽にスケッチできない→ソフトが動いた段階で気がついても遅い
• 実際に動くまでは想像で進めるしかない→建設的なディスカッションが行われにくい
• デザイナーとエンジニアの共通言語がない→コミュニケーション上の齟齬が多発する
→プロトタイピングのプロセスで使える ツールキットが必要なのでは？
本日の予定
• フィジカルコンピューティングとは• 実習1：Processing入門• 実習2：電子回路の基礎知識• 実習3：基本的な入出力• 実習4：Jamming Gearを作ってみよう
フィジカルコンピューティングとは？
• ニューヨーク大学の ITP*1でTom Igoeらが中心となって教えているコースの名前
• インタラクションデザインを教えるための方法の1つ
• コンピュータが理解したり反応できる人間のフィジカルな表現の幅をいかに増やすか
• デザインやアート教育の1つの分野として定着
*1 Interactive Telecommunications Program
フィジカルコンピューティングとは？
一般的なPCから見た人間は？
• キー情報（ASCIIキーボードから）• マウス情報（1つのマウスから）
Alto (1973)
出典：http://toastytech.com/guis/
フィジカルコンピューティングとは？
• PC＋標準入出力デバイスの世界で実現できるインタラクションには限界がある– 人間が直接触れて感じることができない– PCのパラダイムに縛られてしまう
• 統一されたプラットホームならではの良さも勿論ある（例：Flashなどによるウェブ上での表現）
フィジカルコンピューティングとは？
• 物理的な入出力を活用することによって表現力は拡大する（例：Nintendo Wii）
• 電子楽器などではずいぶん昔からのテーマ• iPhoneが注目される理由とも大きく関連• フィジカルなインタラクションデザインのメソッド確立はまだまだこれから？
フィジカルコンピューティングの構成要素
• センサやカメラ（例：光、圧力、音、温度、加速度など）• アクチュエータ（例：LED、モータ、ソレノイドなど）• プロセッサ（例：マイコン、I/Oモジュール＋PCなど）
→ものすごく簡単にまとめると プログラミング＋電子工作
プログラミング＋電子工作？
フィジカルコンピューティングは難しい？
• プログラミングはそれなりのスキルが必要（例：ActionScript、C、C++、Javaなど）• 電子工作にもそれなりのスキルが必要（例：回路設計、実装、検証）• 両方のスキルが必要ということは…
プログラミング＋電子工作？
フィジカルコンピューティングは難しい？
• 確かに習得するまでにはそれなりの努力が必要• できあがった結果は直接的に人間の感覚に訴えるものになる（はず）
プログラミング＋電子工作？
最近では扱いやすいプラットホームが登場
• プログラミング– Flash
– Processing
– Max/MSP
• 電子回路のスケッチ– Gainer
– Arduino
– Phidgets
電子工作は大変？
• 誰でもはんだ付けくらいはやったことがある• まずは必要最小限のこと（だけ）を覚えればスタートできる– 電圧～電流～抵抗– 回路図の読み方– オームの法則など– よく使う部品のシンボルと特徴
• 失敗しながら覚えていけばいい• でもUNDOはきかない（＝人生と一緒）
フィジカルな世界とつなぐ方法
マイコンのみ（例：PIC、AVR）a
b
c
d
A
B
C
D
マイコンmicrocontroller
program
a0]=ain.o;aout.1 = 255;
フィジカルな世界とつなぐ方法
マイコン＋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;
Arduino I/Oボード
写真：SparkFun Electronics
フィジカルな世界とつなぐ方法
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;
Phidgets
Gainerとは？
オープンソース・ハード＆ソフトのツールキット
• I/Oモジュール• ソフトウェア・ライブラリ
– ActionScript 2/3
– Processing
– Max/MSP
Gainer I/Oモジュール
写真撮影：高尾俊介
I/Oモジュール＋ブレッドボード
写真撮影：高尾俊介
さまざまな電子部品
写真撮影：高尾俊介
I/Oモジュール＋ブレッドボード＋部品
写真撮影：高尾俊介
入力：曲げ
写真撮影：高尾俊介
出力：LEDアレイ
写真撮影：高尾俊介
出力：振動モータ
写真撮影：高尾俊介
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
重点 簡単 拡張性
オープンソースハードとしてのGainer I/O
• SparkFun Electronics（PSoCベース）– Gainer PSoC Development Board
• Morecat Lab.（AVRベース）– Pepper
– Ginger
– Sugar
• RT（PICベース）– Gainer mini
Gainer I/OとPepperの比較
Gainer I/O Pepper
入出力ピン 16 4
A/D 8 3
PWM 8 2
ユーザボタン 1 0
ユーザLED 1 0
オープンソース Yes Yes
マイコン PSoC AVR
USB FTDI FT232RL V-USB
基板サイズ 28mm×75mm 11mm×31mm
ワークショップ
HELLO!!フィジカルコンピューティング
• 日時：2007.12.22-23
• 場所：山口情報芸術センター• 参加者：19名• 言語：日本語• 環境：Processing×Funnel×Gainer I/O
作品紹介：Jamming Gear
• 菅野創×西郷憲一郎• ギヤの組合せにより音楽を演奏
– 歯数が異なるギアの組合せによる変化– ミニマルミュージックを視覚的に表現
• 各種センサ×FIO×Max/MSP×PC
• Make: Tokyo Meeting 01-02やIAMAS Gangu Project展などで展示
Jamming Gear（プロトタイプ1号機）
Jamming Gear（プロトタイプ2号機）
Jamming Gear（プロトタイプ3号機・モック）
Jamming Gear（プロトタイプ4号機）
Jamming Gear（プロトタイプ5号機）
Jamming Gear（プロトタイプ6号機・モック）
Jamming Gear（プロトタイプ6号機）
Funnelとは？：コンセプト
• 単純で透明• スケッチ～プロトタイプまで使える• デザイナーとエンジニアの「共通言語」
FunnelとGainerの違い• Gainer
– シンプルなドライバ的なもの– Gainer I/Oと1:1対応– 入門書がある
• Funnel
– フレームワーク的なもの– ArduinoやXBeeも利用可能– 入門書がない
Funnelとは？：関連Sketching User ExperiencesGetting the Design Right and the Right Design
Bill Buxton（Morgan Kaufmann Pub・2007年）
Funnelとは？：関連
出典：Bill Buxton, Sketching User Experiences (2008)
Funnelの特徴
• 疑似コード風のコーディング• 入出力をより簡単に扱うためのフィルタ
– ローパス、ハイパス（Convolution）– 入力を設定した閾値で分割（SetPoint）– スケーリング（Scaler）– オシレータ（Osc）
• 複数の I/Oモジュールに対応
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
Arduino Duemilanove
写真：SparkFun Electronics
LilyPad Arduino
写真：SparkFun Electronics
Arduino Pro Mini
写真：SparkFun Electronics
Arduino ProtoShield
写真：SparkFun Electronics
Arduino XBee Shield
写真：SparkFun Electronics
FIO v1.3
XIO: XBee I/O Board v1.0
XIO: XBee I/O Board v1.0
Processing入門
• 基本的な操作方法• 用語• 簡単なプログラム
参考書籍
Built with Processing [改訂版]デザイン/アートのためのプログラミング入門
前川 峻志＋田中 孝太郎（ビー・エヌ・エヌ新社・2008年）
Processing入門：基本的な操作方法
• 起動• サンプルを開く• 実行• 終了
Processing入門：用語
• Processing Development Environment
• Sketch
• Display Window
Processing入門：簡単なプログラム1
コード例 1 Hello World!
println("Hello World!");
Processing入門：簡単なプログラム2
コード例 2 ウィンドウを表示してみる
// 最初に1回だけ実行されるvoid setup()
// Display Windowのサイズ（横、縦）size(200, 200);
// 毎フレームごとに実行されるvoid draw()
// 背景の色（赤、緑、青）background(255, 255, 255);
Processing入門：簡単なプログラム3
コード例 3 直線を描画してみる
void setup()
size(200, 200);
void draw()
background(0);
stroke(255);
line(0, 0, 199, 199);
Processing入門：簡単なプログラム4
コード例 4 マウスイベントを扱う
int brightness = 0; // 背景の明るさを指定するための変数
void setup()
...
void draw()
background(brightness); // 現在のbrightnessの値で塗りつぶす
void mousePressed()
brightness = 255; // マウスのボタンが押されたら背景を255に
void mouseReleased()
brightness = 0; // マウスのボタンが離されたら背景を0に
電子回路の基礎知識
• 電圧～電流～抵抗• オームの法則• ブレッドボードの使い方
電圧～電流～抵抗
電気の流れは水の流れのようなもの
• 電圧– 2点間の高度（電位）の違い– 基準点が必要（GND）– 単位はボルト（V）
電圧のイメージ図
低高
電圧～電流～抵抗
電気の流れは水の流れのようなもの
• 電流– 電圧の高いところから低いところに流れる– 単位はアンペア（A）
電流のイメージ図
少多
電圧～電流～抵抗
電気の流れは水の流れのようなもの
• 抵抗– 電流の流れにくさ– 単位はオーム（Ω）
抵抗のイメージ図
低 高
電圧～電流～抵抗
よく出てくる補助単位の例
• 1,000倍を表すキロ（例：1kΩ）• 1,000,000倍を表すメガ（例：1MΩ）• 1
1,000を表すミリ（例：1mA）• 1
1,000,000を表すマイクロ（例：50µA）
回路図ってなに？
回路図ってなに？
回路図は電子回路の設計図
• シンボルで表した電子部品の接続を示したもの• シンボルに若干のバリエーションはあるが、基本的には全世界共通
電源の回路図シンボル
+5V GND
スイッチの回路図シンボルと部品例
抵抗器の回路図シンボルと部品例
可変抵抗器の回路図シンボルと部品例
LEDの回路図シンボルと部品例
ブレッドボードってなに？
• 部品の足を穴にさすことで電子回路を形成• はんだ付け不要
– 部品を再利用できる– 回路を組み間違えてもやり直しできる– 耐久性にはやや注意が必要
ブレッドボードの構造
• 横方向のブロックは背面で接続• 縦方向のブロックは未接続• 電源用のエリアは専用に用意されている
実習：LEDを点灯させてみよう
LEDを点灯させてみよう
どうして抵抗器が必要なの？
• LEDには適切な電流の範囲がある（例：20mA）• その範囲を超えると簡単に焼き切れてしまう• 適切な値の抵抗器を用いて電流を制限する• 適切な抵抗値はどうやって求める？→オームの法則を用いて計算する
※抵抗器で電流を制限する方法が全てではありません
オームの法則
電圧～電流～抵抗の関係
V = I × R
• Vは電圧で単位はV（ボルト）• Iは電流で単位はA（アンペア）• Rは抵抗で単位はΩ（オーム）
オームの法則
電源電圧− LEDの電圧 = LEDに流したい電流× R
Rを求めるためにこの式を変形
R =電源電圧− LEDの電圧LEDに流したい電流
例：電源電圧が5.0V、LEDの電圧が1.8V、電流が10mA
R =5 − 1.8
0.01=
3.2
0.01= ？
※実際には計算結果に近い値の抵抗器を用いる
例：LEDを点灯させてみる
基本的な入出力
• 出力をコントロールしてみる– マウスでLEDをオン／オフ– マウスの位置でLEDの明るさを制御
• 入力を扱ってみる– ボリューム
基本的な入出力：Gainer I/Oの出力について
出力には2種類ある
• デジタル出力（dout：0か1かの2段階）– LED、モータなど– 状態がシンプルで取扱が簡単
• アナログ出力（aout：0～1の256段階）*2
– LED、モータなど– 連続的な変化を扱うことができる
*2 実際にはPWMによる疑似アナログ出力
基本的な入出力：aout 0にLEDを接続
基本的な入出力：aout 0にLEDを接続
基本的な入出力：マウスによる制御1
コード例 5 マウスでLEDのオン／オフを制御（ 01 ControlLEDByMouse）
import processing.funnel.*;
Gainer gainer;
void setup()
size(200, 200);
gainer = new Gainer(this, Gainer.MODE1);
void draw()
background(100);
基本的な入出力：マウスによる制御1
コード例 6 マウスでLEDのオン／オフを制御（ 01 ControlLEDByMouse続き）
void mousePressed()
gainer.analogOutput(0).value = 1.0;
void mouseReleased()
gainer.analogOutput(0).value = 0.0;
基本的な入出力：マウスによる制御2
コード例 7 マウスでLEDの明るさを制御（ 02 ControlLEDByMouseX）
import processing.funnel.*;
Gainer gainer;
void setup()
size(200, 200);
gainer = new Gainer(this, Gainer.MODE1);
void draw()
float val = (float)mouseX / (width - 1);
background(255 * val);
gainer.analogOutput(0).value = val;
基本的な入出力：Gainer I/Oの入力について
入力には2種類ある
• デジタル入力（din：0か1かの2段階）– スイッチなど– 状態がシンプルで取扱が簡単
• アナログ入力（ain：0～1の256段階）– 出力電圧が変化するセンサなど– 連続変化を扱うことができる
基本的な入出力：ain 0にボリュームを接続
基本的な入出力：ain 0にボリュームを接続
基本的な入出力：ain 0にボリュームを接続
• 03 SimpleScopeを開いて実行• ボリュームを回して変化を確認• どうしてボリュームを回すと電圧が変わるの？
基本的な入出力：抵抗分圧
基本的な入出力：抵抗分圧
基本的な入出力：サンプルをボリュームで制御
• 04 Treeを開く*3
• Funnelライブラリを使うための準備（import）• mouseXをain 0の値で置き換える
*3 Topics/Fractals and L-Systems/Treeと同じものです
基本的な入出力：アナログ入力の値を分割する
コード例 8 SetPointフィルタで入力を0と1に分割する（ 05 SetPoint）
import processing.funnel.*;
Gainer gainer;
int brightness = 0;
void setup()
size(200, 200);
gainer = new Gainer(this, Gainer.MODE1);
// アナログ入力0に対してSetPointフィルタをセットgainer.analogInput(0).addFilter(new SetPoint(0.5, 0.1));
void draw()
background(brightness);
コード例 9 SetPointフィルタで入力を0と1に分割する（ 05 SetPoint）
// 立ち上がり：0から0以外への変化void risingEdge(PinEvent event)
// イベントが発生した番号をアナログ入力の番号と比較if (event.target.number == gainer.analogInput[0])
// 背景を白にbrightness = 255;
// 立ち下がり：0以外から0への変化void fallingEdge(PinEvent event)
// イベントが発生した番号をアナログ入力の番号と比較if (event.target.number == gainer.analogInput[0])
// 背景を黒にbrightness = 0;
Jamming Gearを作ってみよう
フォトインタラプタとは？
• 赤外線LEDとフォト ICで構成• LEDとフォト ICの間を遮る物体があるかどうかを検出
• さまざまな位置検出に利用される
フォトインタラプタとは？（内部結線図）
1
23
4
5
Voltage regulator
Amp
(15kΩ)
出典：GP1A53HRJ00Fデータシート
フォトインタラプタを使う回路の例
Jamming Gearを作ってみよう：センシング
• 1つのセンサで回転を読み取る• 2つのセンサで方向も読み取る• 2つのセンサでさらに細かく回転を読み取る
配線図：1つのギヤに1つのセンサ
Jamming Gearを作ってみよう：センシング
コード例 10 1つのセンサで回転を読み取る（ 06 RotaryEncoder1）
import processing.funnel.*;
Gainer pepper;
int count = 0;
void setup()
...
pepper = new Gainer(this, Gainer.MODE1);
pepper.analogInput(0).addFilter(new SetPoint(0.5, 0.1));
void fallingEdge(PinEvent event)
if (event.target.number == pepper.analogInput[0])
count++;
配線図：ギヤを1つから2つに増やす
配線図：1つのギヤに2つのセンサ
Jamming Gearを作ってみよう：センシング
コード例 11 2つのセンサで方向も読み取る（ 07 RotaryEncoder2）
void setup()
...
pepper = new Gainer(this, Gainer.MODE1);
pepper.analogInput(0).addFilter(new SetPoint(0.5, 0.1));
pepper.analogInput(1).addFilter(new SetPoint(0.5, 0.1));
void fallingEdge(PinEvent event)
if (event.target.number == pepper.analogInput[0])
if (pepper.analogInput(1).value == 1)
count--;
else
count++;
Jamming Gearを作ってみよう：センシング
コード例 12 2つのセンサでさらに細かく回転を読み取る（ 08 RotaryEncoder3）
// ain 0の立ち下がりに加えて立ち上がりでもain 1の状態を確認する// これにより前のサンプルと比較して倍の精度で回転を読み取ることができるvoid ridingEdge(PinEvent event)
if (event.target.number == pepper.analogInput[0])
if (pepper.analogInput(1).value == 0)
count--;
else
count++;
後片付けについて
• 以下のものは返却をお願いします– ボリューム– トレー– USBケーブル
• その他の部品（Pepper含む）はお持ち帰りください
• 部品代（2000円）をお支払いください• 質問等があればmtm03@funnel.ccまでどうぞ
Make: Tokyo Meeting 03
ワークショップ：Jamming Gearを作ってみよう
小林茂（国際情報科学芸術アカデミー [IAMAS]）＋菅野創（情報科学芸術大学院大学 [IAMAS]）
2009年 5月 23・24日：デジタルハリウッド 八王子制作スタジオ