狠狠撸

IAMAS Gangu Project - Work in Progress
“Sketching in Hardware”ワークショップ
小林茂（IAMAS：岐阜県立国際情報科学芸術アカデミー）
2008 年 12 月 27 日：AXIS Gallery

自己紹介
? 1970年名古屋市生まれ
? 電子楽器メーカー（1993～2004）
– サウンドデザイナー
– 技術研究所
– ソフトウェアエンジニア
? IAMAS（2004～）
– フィジカルコンピューティング
– インタラクションデザイン

自己紹介：ツールキット開発の動機
? ハードは気軽にスケッチできない
→ソフトが動いた段階で気がついても遅い
? 実際に動くまでは想像で進めるしかない
→建設的なディスカッションが行われにくい
? デザイナーとエンジニアの共通言語がない
→コミュニケーション上の齟齬が多発する
→インタラクションデザインのプロセスで使える
?ツールキットが必要なのでは？

自己紹介：書籍（執筆）
Make日本語版Volume 04
特集「Sketchーハードウェアでスケッチする」
オライリー?ジャパン編（オライリー?ジャパン?2008年）

自己紹介：書籍（執筆）
Make日本語版Volume 05
「Sketch / Prototype―素材として使える電子回路」
オライリー?ジャパン編（オライリー?ジャパン?2008年）

自己紹介：書籍（共著）
＋GAINER
GainerBook Labo＋くるくる研究室（九天社?2007 年／オーム社?2008 年）

自己紹介：書籍（監修）
Making Things Talk
Arduinoで作る「会話」するモノたち
Tom Igoe 著?小林茂監訳?水原文翻訳（オライリー?2008年）

本日の予定
? イントロダクション
– フィジカルコンピューティングとは
– ツールキットの紹介（Gainer）
– 事例紹介
– ツールキットの紹介（Funnel）
? 実習
– 実習1：電子回路の基礎知識
– 実習2：Funnel入門
– 実習3：Funnel応用

フィジカルコンピューティングとは？
? ニューヨーク大学のITP*1
でTom Igoeらが
中心となって教えているコースの名前
? インタラクションデザインを教えるための
方法の1つ
? コンピュータが理解したり反応できる人間の
フィジカルな表現の幅をいかに増やすか
? デザインやアート教育の1つの分野として定着
*1 Interactive Telecommunications Program

ITPの紹介
ITP Winter Show 2008
? ITPで学ぶ学生の展覧会で毎年春冬2回開催
? 12月17日から18日まで開催
? http://itp.nyu.edu/shows/winter2008/

一般的な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;

Gainerとは？
オープンソース?ハード＆ソフトのツールキット
? I/Oモジュール
? ソフトウェア?ライブラリ
– ActionScript 2/3
– Processing
– Max/MSP

Gainer I/Oモジュール
写真撮影：高尾俊介

I/Oモジュール＋ブレッドボード

さまざまな電子部品

I/Oモジュール＋ブレッドボード＋部品

入力：曲げ

出力：LEDアレイ

出力：振動モータ

ワークショップ
HELLO!!フィジカルコンピューティング
? 日時：2007.12.22-23
? 場所：山口情報芸術センター
? 参加者：19名
? 言語：日本語
? 環境：Processing×Funnel×Gainer I/O

作例：Mountain Guitar
? 金箱淳一
? 音楽表現のためのギター型インタフェース
– 親しみやすさ
– 演奏の奥深さ
? 各種センサ＋I/Oモジュール＋PC
? IAMAS東京展「いまからだ」などで展示
? 学生CGコンテストなど複数で受賞

作例：Mountain Guitar（スケッチ）

作例：Mountain Guitar（1号）

作例：Mountain Guitar（2号の製作中）

作例：Mountain Guitar（4号の製作中）

作例：Mountain Guitar（4号の配線）

作例：Mountain Guitar（5号の内部）

Funnelとは？：コンセプト
? 単純で透明
? スケッチ～プロトタイプまで使える
? デザイナーとエンジニアの「共通言语」

FunnelとGainerの違い
? Gainer
– シンプルなドライバ的なもの
– Gainer I/Oと1:1対応
– 入門書がある
? Funnel
– フレームワーク的なもの
– ArduinoやXBeeも利用可能
– 入門書がない

Funnelとは？：関連
Sketching User Experiences
Getting 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 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

Arduino Duemilanove

LilyPad Arduino

Arduino Pro Mini

Arduino ProtoShield

Arduino XBee Shield

FIO: Funnel I/O Module v1.3
+-

Funnel：今後の開発予定
ビルド009のリリースを近日中に予定
? I2Cデバイスのサポートを追加
? XBeeおよびFIOのサンプルとツールを追加
? バグ修正や细かな改良など

配布物一覧
品名品番など数
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個

電圧～電流～抵抗
電気の流れは水の流れのようなもの
? 電圧
– 2点間の高度（電位）の違い
– 基準点が必要（GND）
– 単位はボルト（V）

電圧のイメージ図
低高

? 電流
– 電圧の高いところから低いところに流れる
– 単位はアンペア（础）

電流のイメージ図
少多

? 抵抗
– 電流の流れにくさ
– 単位はオーム（?）

抵抗のイメージ図
低高

よく出てくる補助単位の例
? 1,000倍を表すキロ（例：1k?）
? 1,000,000倍を表すメガ（例：1M?）
? 1
1,000 を表すミリ（例：1mA）
? 1
1,000,000 を表すマイクロ（例：50?A）

回路図ってなに？
回路図は電子回路の設計図
? シンボルで表した電子部品の接続を示したもの
? シンボルに若干のバリエーションはあるが、
基本的には全世界共通

電源の回路図シンボル
+5V GND

スイッチの回路図シンボルと部品例

抵抗器の回路図シンボルと部品例

可変抵抗器の回路図シンボルと部品例

尝贰顿の回路図シンボルと部品例

ブレッドボードってなに？
? 部品の足を穴にさすことで電子回路を形成
? はんだ付け不要
– 部品を再利用できる
– 回路を組み間違えてもやり直しできる
– 耐久性にはやや注意が必要

ブレッドボードの構造
? 横方向のブロックは背面で接続
? 縦方向のブロックは未接続
? 电源用のエリアは専用に用意されている

実习：尝贰顿を点灯させてみよう

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
= ？
※実際には計算結果に近い値の抵抗器を用いる

例：尝贰顿を点灯させてみる

参考：ジャンプワイヤの色分け
? 赤：電源の＋側（+5V）
? 黒：電源のー側（GND）
? 白?青?黄：センサとの接続など

例：尝贰顿を点灯させてみる（NG）
の方向が違う
ワイヤをさす位置が違う
にささっていない

実习：尝贰顿をスイッチでオン／オフさせてみる

実习：尝贰顿をスイッチでオン／オフさせてみる
7

Processing入門
? 基本的な操作方法
? 用語
? 简単なプログラム

参考書籍
Built with Processing [改訂版]
デザイン/アートのためのプログラミング入門
前川峻志＋田中孝太郎（ビー?エヌ?エヌ新社?2008年）

Processing入門：基本的な操作方法
? 起動
? サンプルを開く
? 実行
? 終了

Processing入門：用語
? Processing Development Environment
? Sketch
? Display Window

Processing入門：简単なプログラム1
コード例 1 Hello World!
println("Hello World!");

コード例 2 ウィンドウを表示してみる
// 最初に1回だけ実行される
void setup() {
// Display Windowのサイズ（横、縦）
size(200, 200);
}
// 毎フレームごとに実行される
void draw() {
// 背景の色（赤、緑、青）
background(255, 255, 255);
}

コード例 3 直線を描画してみる
void setup() {
size(200, 200);
}
void draw() {
background(0);
stroke(255);
line(0, 0, 199, 199);
}

コード例 4 マウスの状態を読み取る
void setup() {
size(200, 200);
}
void draw() {
if (mousePressed) {
background(255);
} else {
background(0);
}
}

コード例 5 マウスイベントを扱う
int brightness = 0;
void setup() {
...
void draw() {
background(brightness);
}
void mousePressed() {
brightness = 255;
}
void mouseReleased() {
brightness = 0;
}

Funnel入門
? 出力をコントロールしてみる
– マウスでI/Oモジュール上のLEDを制御
– I/Oモジュール上のボタンでLEDを制御
? 入力を扱ってみる
– ボリューム
– CdSセル

Funnel入門：Gainer I/Oの出力について
出力には2種類ある
? デジタル出力（dout：0か1かの2段階）
– LED、モータなど
– 状態がシンプルで取扱が簡単
? アナログ出力（aout：0～1の256段階）*2
– LED、モータなど
– 連続的な変化を扱うことができる
*2 実際にはPWMによる疑似アナログ出力

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);
}

Funnel入門：マウスによる制御
コード例 7 マウスでI/Oモジュール上のLEDを制御（ 01 ControlLEDByMouse続き）
void mousePressed()
{
gainer.led().value = 1.0;
}
void mouseReleased()
{
}

Funnel入門：ボタンによる制御
コード例 8 ボタンでI/Oモジュール上のLEDを制御（ 02 ControlLEDByButton）
Gainer gainer;
void setup()
{
size(200, 200);
frameRate(30);
gainer.autoUpdate = true;
}
void draw()
{
background(100);
}

Funnel入門：ボタンによる制御
コード例 9 ボタンでI/Oモジュール上のLEDを制御（ 02 ControlLEDByButton続き）
void gainerButtonEvent(boolean pressed)
{
if (pressed) {
} else {
}
}

Funnel入門：aout 0にLEDを接続

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;
}
}

Funnel入門：Gainer I/Oの入力について
入力には2種類ある
? デジタル入力（din：0か1かの2段階）
– スイッチなど
– 状態がシンプルで取扱が簡単
? アナログ入力（ain：0～1の256段階）
– 出力電圧が変化するセンサなど
– 連続変化を扱うことができる

Funnel入門：ain 0にボリュームを接続

Funnel入門：ain 0にボリュームを接続
? 03 SimpleScopeを開いて実行
? ボリュームを回して変化を確認
? チャンネル数を2に増やす
? ain 1が不安定なのはなぜ？
? どうしてボリュームを回すと電圧が変わるの？

贵耻苍苍别濒入门：抵抗分圧

Funnel入門：サンプルをボリュームで制御
? 04 Treeを開く*3
? 変更を加えるために別名で保存
? Funnelを使うための準備
? mouseXをain 0の値で置き換える
*3 Topics/Fractals and L-Systems/Treeと同じものです

Funnel入門：ain 0に光センサを接続

Funnel入門：ain 0に光センサを接続
? 改変した 04 Treeを再度実行
→ボリュームの場合と何かが違う？
? 03 SimpleScopeで入力の範囲を調べる
? Scalerをフィルタとして追加する
? 意図した通りになったかどうか確認

Funnel入門：Scalerの追加
コード例 11 Scalerを追加した 05 Tree
Gainer gainer;
void setup()
{
size(400, 400, P3D);
...
Filter f[] = {
new Scaler(0.3, 0.9, 0, 1, Scaler.LINEAR, true)
};
gainer.analogInput(0).filters = f;
}

贵耻苍苍别濒応用：补颈苍に加速度センサを接続

贵耻苍苍别濒応用：补颈苍に加速度センサを接続
? 03 SimpleScopeを開く
? 表示するチャンネル数を3に増やす
? x, y, zそれぞれの軸の動きを確認
– 傾けてみる
– 振ってみる

Funnel応用：加速度センサの用途
? 動きの検出
? 傾きの検出
→なぜ加速度センサで傾きが検出できるの？

贵耻苍苍别濒応用：倾きを検出する原理

Funnel応用：センサの出力から角度を求める
? フィルタで細かい動きを取り除く
? 03 SimpleScopeで変化幅を確認する
? -1から+1までにスケーリングする
? 逆sin関数を用いて角度に変換する

Funnel応用：加速度センサを使ってみる
? 05 RGBCube Mouseを開く*4
? マウスを動かして動作を確認する
? マウス操作を加速度センサに置き換える
*4 3D and OpenGL/Form/RGBCubeを一部改変

狠狠撸

狠狠撸s AXIS WS2

More Related Content

狠狠撸s AXIS WS2