Make: Tokyo Meeting 03

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―素材として使える電子回路」



Make日本語版Volume 06「Prototyping Lab: オープンソースハードウェア開発の実際」



Make日本語版Volume 07「Prototyping Lab: メイキング・オブ・Jamming Gear」


• 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（プロトタイプ3号機・モック）

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


LilyPad Arduino


Arduino Pro Mini


Arduino ProtoShield


Arduino XBee Shield


FIO v1.3

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!");


コード例 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 マウスイベントを扱う

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を接続

基本的な入出力：マウスによる制御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);


コード例 6 マウスでLEDのオン／オフを制御（ 01 ControlLEDByMouse続き）

void mousePressed()

gainer.analogOutput(0).value = 1.0;

void mouseReleased()

gainer.analogOutput(0).value = 0.0;


コード例 7 マウスでLEDの明るさを制御（ 02 ControlLEDByMouseX）


Gainer gainer;

void setup()

size(200, 200);


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にボリュームを接続

• 03 SimpleScopeを開いて実行• ボリュームを回して変化を確認• どうしてボリュームを回すと電圧が変わるの？

基本的な入出力：抵抗分圧

基本的な入出力：サンプルをボリュームで制御

• 04 Treeを開く*3

• Funnelライブラリを使うための準備（import）• mouseXをain 0の値で置き換える

*3 Topics/Fractals and L-Systems/Treeと同じものです

基本的な入出力：アナログ入力の値を分割する

コード例 8 SetPointフィルタで入力を0と1に分割する（ 05 SetPoint）


Gainer gainer;

int brightness = 0;

void setup()

size(200, 200);


// アナログ入力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つのセンサ


コード例 10 1つのセンサで回転を読み取る（ 06 RotaryEncoder1）


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つのセンサ


コード例 11 2つのセンサで方向も読み取る（ 07 RotaryEncoder2）

void setup()

...

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



void fallingEdge(PinEvent event)


if (pepper.analogInput(1).value == 1)

count--;

else

count++;


コード例 12 2つのセンサでさらに細かく回転を読み取る（ 08 RotaryEncoder3）

// ain 0の立ち下がりに加えて立ち上がりでもain 1の状態を確認する// これにより前のサンプルと比較して倍の精度で回転を読み取ることができるvoid ridingEdge(PinEvent event)


if (pepper.analogInput(1).value == 0)

count--;

else

count++;

後片付けについて

• 以下のものは返却をお願いします– ボリューム– トレー– USBケーブル

• その他の部品（Pepper含む）はお持ち帰りください

• 部品代（2000円）をお支払いください• 質問等があれば[email protected]までどうぞ

Make: Tokyo Meeting 03

ワークショップ：Jamming Gearを作ってみよう

小林茂（国際情報科学芸術アカデミー [IAMAS]）＋菅野創（情報科学芸術大学院大学 [IAMAS]）

2009年 5月 23・24日：デジタルハリウッド八王子制作スタジオ

Make: Tokyo Meeting 03

Design

Transcript of Make: Tokyo Meeting 03