67ws funnel

ロクナナワークショップ特別企画

開発者小林茂に学ぶFunnel入門講座～ActionScript 3.0と最新ツールキットFunnelの可能性～

本日の予定

• 第1部：18:00～19:30– フィジカルコンピューティング入門– 関連トピックの紹介– Gainerとは– 電子回路の基礎知識

• 第2部：19:50～21:00– Funnelとは– Funnel×Gainer I/O– Funnel×Funnel I/O

自己紹介：ツールキット開発の動機

• ハードは気軽にスケッチできない→ソフトが動いた段階で気がついても遅い

• 実際に動くまでは想像で進めるしかない→建設的なディスカッションが行われにくい

• デザイナーとエンジニアの共通言語がない→コミュニケーション上の齟齬が多発する

→インタラクションデザインのプロセスで使える　ツールキットが必要なのでは？

このセッションの内容

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

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

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

• インタラクションデザインを教えるための方法の1つ

• コンピュータが理解したり反応できる人間のフィジカルな表現の幅をいかに増やすか

• デザインやアート教育の1つの分野として定着

*1 Interactive Telecommunications Program

関連：ITP Spring Show 2008

概要：

• ITPで学ぶ学生の展覧会で毎年2回開催• 5月12日から13日まで開催• http://itp.nyu.edu/shows/spring2008/


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

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

Alto (1973)

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


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

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


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

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

→Gainerを使った作例を紹介

作品紹介1：Haohao table

概要：

• 遠藤孝則＋原田克彦＋増田一太郎• メディアインスタレーション• 製作期間は約3週間• NTT InterCommunication Center [ICC]で展示（2006.6.6-2008.3.11）


写真提供：ICC


画像提供：増田一太郎


写真提供：原田克彦


超音波センサ1

超音波センサ2

超音波センサ5

超音波センサ6

I/O PC

プロジェクタ

USB

VGA

プランター内部バックヤード

センサのオン／オフ

アナログ出力

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

概要：

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

•「インタラクティヴ年表2008」としてリメイク

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

写真撮影：萩原健一


CdSセル

レーザーモジュール

I/Oモジュール

アクチュエータユニット

ACソレノイド

SSR

AC電源へ

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

写真提供：ICC

作品紹介3：Mountain Guitar

• 金箱淳一（大学院6期生）• 音楽表現のためのギター型インタフェース

– 親しみやすさ– 演奏の奥深さ

• 各種センサ＋ I/Oモジュール＋PC• IAMAS東京展「いまからだ」などで展示• 学生CGコンテストなど複数で受賞

作品紹介4：みくまりねその3

• 柏木恵美子（アカデミー11期生）• メディアインスタレーション• 水に関するオノマトペが題材• 水道の蛇口がインタフェース• IAMAS東京展「いまからだ」で展示（2007.8.24-26）

作品紹介5：Jamming Gear

• 菅野創＋西郷憲一郎• ギアの回転でシーケンスを演奏

作品紹介6：LED BALL

• 北村穣（Rudesign）• Gainer I/O×4台＋マトリクスLED• http://www.rudesign.jp/ruelog/2008/10/led-

ball.html

ワークショップの紹介

HELLO!!フィジカルコンピューティング

• 日時：2007.12.22-23• 場所：山口情報芸術センター• 参加者：19名• 言語：日本語• 環境：Processing×Funnel×Gainer I/O

関連：Sketching in Hardware 3

概要：

• フィジカルコンピューティングに関する会議• 2008.7.25～27の3日間開催• 参加者は約40名• 全員が発表• 濃密な情報交換とコミュニティ作り• 最後に「Sketching in Hardware」を実践

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

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

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

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

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

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


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

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


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

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

• 電子回路のスケッチ– 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

LilyPad Arduino

写真：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アレイ


出力：振動モータ


電圧～電流～抵抗

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

• 電圧– 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）

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

にささっていない

実習：LEDをスイッチでオン／オフさせてみる

実習：LEDをスイッチでオン／オフさせてみる

7

Funnelとは？：背景

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

• 全ての用途をカバーできるツールキットはない→ツールキットの使い分けは容易ではない

• 有線接続だと体験に制限がでてしまう→簡単に利用できる無線接続が必要

Funnelとは？：コンセプト

• 単純で透明• スケッチ～プロトタイプまで使える• デザイナーとエンジニアの「共通言語」

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の特徴

• 入出力をより簡単に扱うためのフィルタ– ローパス、ハイパス– アナログ入力を設定した閾値で分割– スケーリング– オシレータ

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

GainerとArduinoの比較

Gainer Arduino Duemilanove入出力ピン 16 20

A/D 8 (8bit) 6 (10bit)PWM 8 (8bit) 6 (8bit)

ユーザボタン 1 0ユーザLED 1 0

オープンソース Yes Yesスタンドアロン No Yes

重点簡単拡張性

Funnelの構成

!"#$%#&&'()*+&

,-.)&/012$3(45+&

6/45.)(78.9:$;./<-9-=

!"#$%#&&'()*+&

;5))&+$"&/>&/

6?9.()"?/.@9$A B/(?&CC.)* 3-D13"B&9?EF5GH

6"A$I.G/-/H B/(?&CC.)*$I.G/-/H 2"J$I.G/-/.&CF5GH$I.G/-/H

;5))&+$012 '.*.$0)9&/)-9.()-+%#&&;5))&+$012 '.*.$0)9&/)-9.()-+

%#&&

FIO: Funnel I/O Module v1.2

• LilyPad v1.6がベース• 3.3V動作• Arduino互換機（動作速度は8MHz）• XBee無線モデム（802.15.4またはZigBee）• 充電器内蔵• シールドでさまざまな機能を拡張

FIO: Funnel I/O Module v1.0

FIO：使用例

XIO: XBee I/O Board v1.0

Gainer I/Oの入力について

入力には2種類ある

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

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

Gainer I/Oの出力について

出力には2種類ある

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

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

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

デモ：AS3×Funnel×Gainer I/O

Flashからリアルを動かしてみる

• TeraClock*3を利用• LEDを動かしてみる• ACソレノイドを動かしてみる

*3 http://www.libspark.org/wiki/trick7/TeraClock

回路図：アナログ出力

実体配線図：LEDをコントロール

ACソレノイドを動かす？

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

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

実体配線図：ACソレノイドをコントロール

回路図：ain 0にボリュームを接続

実体配線図：ain 0にボリュームを接続

回路図：ain 0に光センサを接続

実体配線図：ain 0に光センサを接続

回路図：ain 0に距離センサを接続

実体配線図：ain 0に距離センサを接続

回路図：ain 0に感圧センサを接続

実体配線図：ain 0に感圧センサを接続

デモ：AS3×Box2D×Funnel×Gainer I/O

センサ→Flash→アクチュエータをつなげてみる

• センサ：感圧抵抗センサ（FSR）• アクチュエータ：ソレノイド

回路図：ainに加速度センサを接続

実体配線図：ainに加速度センサを接続

アナログ入力：加速度センサの用途

• 動きの検出• 傾きの検出→なぜ加速度センサで傾きが検出できるの？

アナログ入力：傾きを検出する原理

アナログ入力：センサの出力から角度を求める

• フィルタで細かい動きを取り除く• -1から+1までにスケーリングする• 逆sin関数を用いて角度に変換する• 必要に応じてラジアンから度に変換する

デモ：AS3×Funnel×Funnel I/O

Flashから無線でリアルを動かしてみる

• フルカラーLEDを動かしてみる• エリア内の全てのFIOにブロードキャスト

おわりに

• GainerやFunnelを使うと（比較的簡単に）Flashがリアルとつながる

• CVとのハイブリッドが効果的な場合もある• 安定動作にはそれなりのノウハウが必要

今後の予定：Make: Tokyo Meeting 02

• 開催日：2008年11月8日（土）• 会　場：多摩美術大学八王子キャンパス

今後の予定：展覧会

IAMAS Gangu Project―Work In Progress展

• 日時：12月25日～27日（11時～19時）• 会場：アクシスギャラリー• 詳細：http://www.iamas.ac.jp/project/ui/

ロクナナワークショップ特別企画

開発者小林茂に学ぶFunnel入門講座～ActionScript 3.0と最新ツールキットFunnelの可能性～

67ws funnel

Education