Make: Tokyo Meeting

Make: Tokyo Meetingゲイナーワークショップ

講師：小林茂＋蛭田直＋佐竹裕行＋柏木恵美子／協力：IAMAS

2008.04.20

本日の予定

• 第1部（12:00-12:20）：イントロダクション

• 第2部（12:20-13:30）：フィジカル・コンピューティング入門

• 第3部（13:30-14:30）：ゲイナーカイダン・ミニを作ってみよう

配布物一覧

品名品番など数Gainer I/Oモジュール 1ブレッドボード SAD-01 1ジャンプワイヤ SPP-100 5USBケーブル 1抵抗器（橙橙茶金） 330Ω 1抵抗器（茶黒橙金） 10kΩ 1ボリューム 10kΩ 1CdSセル 5mm 1LED 1

表1 本日の配布物一覧

自己紹介

• 1970年愛知県名古屋市生まれ• 電子楽器メーカー（1993年4月～2004年6月）

– サウンドデザイナー– ソフトウェアエンジニア

• IAMAS（2004年7月～）– フィジカル・コンピューティング– ユーザーインタフェース

第1部：イントロダクション

• フィジカル・コンピューティングとは？• Gainerとは？• Funnelとは？

フィジカル・コンピューティングとは？

• ニューヨーク大学の ITP*1でTom Igoeらが中心となって教えているコースの名前

• PCをブラックボックスとして扱わない• 原理原則を教え「人間がいかにコンピュータとコミュニケーションし得るか？」を考え直す

• デザイナーやアーティストが主な対象

*1 Interactive Telecommunications Program


一般的なPCから見た人間は？

• キー情報（ASCIIキーボードから）• マウス情報（1つのマウスから）

Alto (1973)

出典：http://toastytech.com/guis/


• PC＋標準入出力デバイスの世界で実現できるインタラクションには限界がある– 人間が直接触れて感じることができない– PCのパラダイムに縛られてしまう

• 統一されたプラットホームならではの良さも勿論ある（例：Flashなどによるウェブ上での表現）


• 物理的な入出力を活用することによって表現力は拡大する（例：Nintendo Wii）

• 電子楽器などではずいぶん昔からのテーマ

フィジカル・コンピューティングの構成要素

• センサー（例：光、圧力、音、温度、加速度など）• アクチュエータ（例：LED、モータ、ソレノイドなど）• プロセッサ（例：マイコン、I/Oモジュール＋PCなど）

ものすごく簡単にまとめるとプログラミング＋電子工作

作品紹介：ゲイナーカイダン

概要

• メディアインスタレーション• 製作期間は約1ヵ月• NTT InterCommunication Center [ICC]で展示（2007.4.19-2008.3.9）

作品紹介：ゲイナーカイダン（オリジナル版）

写真撮影：萩原健一








CdSセル

レーザーモジュールI/Oモジュール

アクチュエータユニット

ACソレノイド

SSR

AC電源へ


作品紹介：ゲイナーカイダン（拡張版）

写真提供：ICC

作品紹介1：ゲイナーカイダン（拡張版）

写真提供：ICC

作品紹介：ゲイナーカイダン（拡張版）

写真提供：ICC

プログラミング＋電子工作？

フィジカル・コンピューティングは難しい？

• プログラミングはそれなりのスキルが必要（例：ActionScript、C、C++、Javaなど）• 電子工作にもそれなりのスキルが必要（例：回路設計、実装、検証）• 両方のスキルが必要ということは…


フィジカル・コンピューティングは難しい？

• 確かに習得するまでにはそれなりの努力が必要• できあがった結果は直接的に人間の感覚に訴えるものになる（はず）


最近では扱いやすいプラットホームが登場

• プログラミング– Processing– Flash

• 電子回路のプロトタイピング– Gainer– Arduino– Phidgets

電子工作は大変？

• 誰でもはんだ付けくらいはやったことがある• まずは必要最小限のこと（だけ）を覚えればスタートできる– 電圧～電流～抵抗– 回路図の読み方– オームの法則など– よく使う部品のシンボルと特徴

• 失敗しながら覚えていけばいい• でもUNDOはきかない（＝人生と一緒）

フィジカル・コンピューティングの実現方法

マイコンのみ（例：PIC、AVR）a

b

c

d

A

B

C

D

マイコンmicrocontroller

program

a0]=ain.o;aout.1 = 255;


マイコン＋PC（例：Arduino）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モジュール＋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アレイ

出力：振動モータ

Gainerの特徴

• ブレッドボードとの組み合わによりさまざまな構成を自由に試行錯誤できる

• 入出力の設定をある程度自由に選択できる• 特定の目的のための構成も用意されている

– マトリクスLEDの制御

Gainerの現状

• v1.1.0 RC4をリリース• 書籍「＋GAINER」が発売

Funnelとは？

• Gainerはいわばシンプルなドライバ→複雑な現実世界を扱うにはもう少し高次の　レベルが必要なのでは？

• 全ての用途をカバーできるツールキットはない

Funnelの特徴

• 疑似コード風のコーディング• 入出力をより簡単に扱うためのフィルタ

– ローパス、ハイパス– アナログ入力を設定した閾値で分割– スケーリング– オシレータ

• 複数の I/Oモジュールに対応

Funnelの構成

USB XBeeDongle

GainerI/O Module

Arduino(with Firmata)

USB XBeeDongle

Funnel Server

ActionScript 3 Processing Max/MSPetc.Ruby

AS3 Library Processing Library OSC LibrariesRuby Library

Funnel I/OMaxStreamXBee

Funnel I/OMaxStreamXBee

Funnelの特徴

• 複数の I/Oモジュールに対応– Gainer– Arduino– XBee– Funnel I/O（開発中）

• ソフトウェア・ライブラリ– ActionScript 3（FlashまたはFlex）– Processing– Ruby

第2部：実習1（12:20～12:45）

• 電子回路の基礎知識• ブレッドボードの使い方• LEDを点灯させてみる

電圧～電流～抵抗

電気の流れは水の流れのようなもの

• 電圧– 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を点灯させてみる

参考：ジャンプワイヤの色分け

• 赤：電源の＋側（+5V）• 黒：電源のー側（GND）• 白・青・黄：センサとの接続など

例：LEDを点灯させてみる（NG）

の方向が違うワイヤをさす位置が違う

にささっていない

第2部：実習2（12:45～13:30）

Funnel入門

• 出力をコントロールしてみる– マウスで I/Oモジュール上のLEDを制御– I/Oモジュール上のボタンでLEDを制御

• 入力を扱ってみる– ボリューム– CdSセル

Funnel入門：Gainer I/Oの出力について

出力には2種類ある

• デジタル出力（dout：0か1の2段階）– LED、モータなど– 状態がシンプルで取扱が簡単

• アナログ出力（aout：0～255の256段階）*2– LED、モータなど– 連続的な変化を扱うことができる

*2 実際にはPWMによる疑似アナログ出力

Funnel入門：マウスによる制御

コード例 1 マウスで I/Oモジュール上のLEDを制御（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入門：マウスによる制御

コード例 2 マウスで I/Oモジュール上のLEDを制御（続き）

void mousePressed()

gainer.led().value = 1.0;

void mouseReleased()


Funnel入門：ボタンによる制御

コード例 3 ボタンで I/Oモジュール上のLEDを制御（ControlLEDByButton）

import processing.funnel.*;

Gainer gainer;

void setup()

size(200, 200);

frameRate(30);

gainer = new Gainer(this, Gainer.MODE1);


void draw()

background(100);

Funnel入門：ボタンによる制御

コード例 4 ボタンで I/Oモジュール上のLEDを制御（続き）

void gainerButtonEvent(boolean pressed)

if (pressed)


else


Funnel入門：aout 0にLEDを接続

Funnel入門：aout 0にLEDを接続

Funnel入門：アナログ出力の制御

コード例 5 ボタンでaout 0に接続したLEDを制御

// ControlLEDByButtonの以下の部分だけを変更するvoid gainerButtonEvent(boolean pressed)

if (pressed)

gainer.analogOutput(0).value = 1.0;

else

gainer.analogOutput(0).value = 0.0;

Funnel入門：アナログ出力の制御（LFO）

コード例 6 ボタンでaout 0に接続したLEDを制御（ControlLEDWithLFOByButton）

Gainer gainer;

Osc osc;

void setup()

size(200, 200);

frameRate(30);

gainer= new Gainer(this, Gainer.MODE1);


// オシレータを生成してイベントリスナをセットosc = new Osc(this, Osc.SQUARE, 1.0, 0);

osc.serviceInterval = 30;

osc.addEventListener(Osc.UPDATE, "oscUpdated");

Funnel入門：アナログ出力の制御（LFO）

コード例 7 ボタンでaout 0に接続したLEDを制御（続き）

// オシレータが更新される度に出力を更新void oscUpdated(Osc osc)

gainer.led().value = osc.value;

// ボタンの状態にあわせてオシレータを制御void gainerButtonEvent(boolean pressed)

if (pressed)

osc.reset();

osc.start();

else

osc.stop();

Funnel入門：Gainer I/Oの入力について

入力には2種類ある

• デジタル入力（din：0か1の2段階）– スイッチなど– 状態がシンプルで取扱が簡単

• アナログ入力（ain：0～255の256段階）– 出力電圧が変化するセンサなど– 連続変化を扱うことができる

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



• SimpleScopeを開いて実行• ボリュームを回して変化を確認• ain 1が不安定なのはなぜ？• どうしてボリュームを回すと電圧が変わるの？

Funnel入門：抵抗分圧

Funnel入門：抵抗分圧

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

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

光センサの値で画面を連続的にコントロール

コード例 8 ControlBrightnessByAin

void setup()

size(200, 200);

frameRate(30);

gio= new Gainer(this, Gainer.MODE1);

gio.autoUpdate = true;

void draw()

background(255 * gio.analogInput(0).value);

光センサの値を閾値で2分割

コード例 9 ControlBrightnessByAin（変更部分）

void setup()

...


gio.autoUpdate = true;

Filter filters[] =

new SetPoint(0.5, 0.1)

;

gio.analogInput(0).filters = filters;

SetPointフィルタの働き

• 閾（しきい）値とヒステリシスの組でアナログ入力を複数の範囲に分割する

• 値が変化した時にイベントハンドラを呼ぶ– 0から0以外への変化risingEdge(PortEvent e)

– 0以外から0への変化fallingEdge(PortEvent e)

2分割した値が変化した時に一瞬LEDを点灯

コード例 10 FlashLEDOnChange

Gainer gio;

boolean changed = false;

void setup()

size(200, 200);

frameRate(30);


Filter filters[] =

new SetPoint(0.65, 0.05)

;

gio.analogInput(0).filters = filters;

2分割した値が変化した時に一瞬LEDを点灯

コード例 11 FlashLEDOnChange（続き・抜粋）

void draw()

if (changed)

gio.analogOutput(0).value = 1;

changed = false;

else

gio.analogOutput(0).value = 0;

gio.update();

void risingEdge(PortEvent e)

if (e.target.number == gio.analogInput[0])

changed = true;

LEDの代わりにACソレノイドを動かす

CdSセル

レーザーモジュールI/Oモジュール

アクチュエータユニット

ACソレノイド

SSR

AC電源へ

※この図では dout 0に接続していますが今回は aout 0に接続して下さい

ポイント

• SSR（ソリッド・ステート・リレー）によりAC100V機器もLEDと同様にオン／オフ制御できる

• ACソレノイドの直線運動を別のエネルギーに変換することでフィジカルな世界に働きかけることができる

第3部：ゲイナーカイダン・ミニを作ってみよう

• 二人一組で作業1. アクチュエータ・ユニットを階段に固定2. 光センサ・モジュールを階段に固定3. レーザー・モジュールを階段に固定4. センサとアクチュエータのケーブルを

I/Oモジュールに接続• レーザーが最も強く当たるように位置を微調整• 実際にスケッチを動かして動作確認

ゲイナーカイダン・ミニの解説

コード例 12 GainerKaidanMini（抜粋）

void setup()

...

// アナログ入力8個、アナログ出力8個を利用できるモード4を使用するgio = new Gainer(this, Gainer.MODE4);

...

// 一定時間待ってその間の各入力ポートの値をベースラインとして用いるdelay(1000);

for (int i = 0; i < 8; i++)

// 各ポートの平均値を読み取る// それを元にしきい値を設定してフィルタとして各ポートにセットするFilter[] f = new SetPoint(gio.analogInput(i).average - 0.1, 0.05);

gio.analogInput(i).filters = f;

...


コード例 13 GainerKaidanMini（続き・抜粋）

void draw()

for (int i = 0; i < 8; i++)

// ディレイから値を取り出すgio.analogOutput(i).value = delayLine[i].getOutput();

if (interrupted[i])

delayLine[i].setInput(1); // 踏まれていたらディレイに1を入力gio.analogOutput(i).value = 1.0; // 出力する値を1で上書きするinterrupted[i] = false; // 踏まれたことを示すフラグをクリア

else

delayLine[i].setInput(0); // 踏まれていなければディレイに0を入力

gio.update(); // すべてのポートの状態をまとめて出力する


コード例 14 GainerKaidanMini（続き・抜粋）

// 1→0に変化したときに呼ばれるイベントハンドラvoid fallingEdge(PortEvent e)

switch (e.target.number)

case 0:

case 1:

case 2:

...

case 7:

// 対応するフラグをセットするinterrupted[e.target.number] = true;

break;

default:

break;

今回扱わなかったFunnelライブラリの機能

• スムージングなどのフィルタ処理• スケーリング• Gainer I/Oモジュール以外への対応

参考書籍

Making Things TalkPractical Methods for Connecting Physical Objects

Tom Igoe（O’Reilly Media・2007年）

参考書籍

Built with Processing [改訂版]前川峻志＋田中孝太郎（ビー・エヌ・エヌ新社・2008年）

参考書籍

ProcessingA Programming Handbook for Visual Designers and Artists

Casey Reas + Ben Fry（MIT Press・2007年）

参考書籍

ものづくり革命パーソナル・ファブリケーションの夜明け

ニール・ガーシェンフェルド（ソフトバンククリエイティブ・2006年）

参考書籍

デザイン思考の道具箱イノベーションを生む会社のつくり方

奥出直人（早川書房・2007年）

参考書籍

＋GAINERPhysical Computing with Gainer

GainerBook Labo＋くるくる研究室（九天社・2007年）

今後のワークショップなど

東京芸術大学公開講座

• 日時：2008.8.29-31（10時～18時）• 場所：芸術情報センター内演習室1• 定員：25人• 申込：2008.4.21～5.23

http://www.geidai.ac.jp/guide/extension/past 20.html

Make: Tokyo Meetingゲイナーワークショップ

講師：小林茂＋蛭田直＋佐竹裕行＋柏木恵美子／協力：IAMAS

2008.04.20

Technology

Make: Tokyo Meeting