2007.12.22-23

YCAM身体とメディアワークショップシリーズ#2

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

第2部：実習1（14:40～15:00）

• 電子回路の基礎知識• ブレッドボードの使い方• 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（15:00～15:20）

Processing入門

• 基本的な操作方法• 用語• 簡単なプログラム

Processing入門：基本的な操作方法

• 起動• サンプルを開く• 実行• 終了

Processing入門：用語

• Processing Development Environment• Sketch• Display Window

Processing入門：簡単なプログラム1

ソースコード 1 ウィンドウを表示してみる

// 最初に1回だけ実行されるvoid setup()

// Display Windowのサイズ（横、縦）size(200, 200);

// 毎フレームごとに実行されるvoid draw()

// 背景の色（赤、緑、青）background(255, 255, 255);

Processing入門：簡単なプログラム2（準備）

Processing入門：簡単なプログラム2

ソースコード 2 文字列を表示してみる

PFont myFont; // フォントを表す変数

void setup()

size(200, 200);

myFont = loadFont("HelveticaNeue-32.vlw"); // フォントをロードtextFont(myFont, 32); // テキスト用フォントに設定

void draw()

background(120, 120, 120);

text("Hello!!", 15, 50); // 文字列を指定した位置に描画

Processing入門：上達するためのコツ

• サンプルをたくさん試してみる• スケッチをたくさん描いてみる• わからなければリファレンスで調べる

第2部：実習3（15:20～16:30）

Funnel入門

• Gainer I/Oを使う• マウス→ボタンによる制御• LEDの制御• さまざまなセンサ

Funnel入門：Gainer I/Oを使う

1. Funnel Serverの起動2. マウスで I/Oモジュール上のLEDを制御3. I/Oモジュール上のボタンでLEDを制御

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

ソースコード 3 マウスで I/Oモジュール上のLEDを制御

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入門：マウスによる制御

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

void mousePressed()

gainer.led().value = 1.0;

void mouseReleased()

gainer.led().value = 0.0;

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

ソースコード 5 ボタンで I/Oモジュール上のLEDを制御

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入門：ボタンによる制御

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

void gainerButtonEvent(boolean pressed)

if (pressed)

gainer.led().value = 1.0;

else

gainer.led().value = 0.0;

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

出力には2種類ある

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

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

Funnel入門：aout 0にLEDを接続

Funnel入門：aout 0にLEDを接続

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

ソースコード 7 ボタンでaout 0に接続したLEDを点滅（抜粋）

void setup()

...

osc = new Osc(this, Osc.SQUARE, 1.0, 0);

osc.serviceInterval = 30;

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

void oscUpdated(Osc osc)

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

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

ソースコード 8 ボタンでaout 0に接続したLEDを点滅（抜粋続き）

void risingEdge(PortEvent e)

if (e.target.number == gainer.button)

osc.reset();

osc.start();

void fallingEdge(PortEvent e)

if (e.target.number == gainer.button)

osc.stop();

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

入力には2種類ある

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

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

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

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

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

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

Funnel入門：抵抗分圧

Funnel入門：抵抗分圧

Funnel入門：サンプルをボリュームで制御

1. Topics/Fractals and L-Systems/Treeを開く2. 変更を加えるために別名で保存3. Funnelを使うための準備4. mouseXをain 0の値で置き換える

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

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

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

1. 改造したTreeを再度実行→ボリュームの場合と何かが違う？

2. SimpleScopeで入力の範囲を調べる3. Scalerをフィルタとして追加する4. 意図した通りになったかどうか確認

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

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

Funnel入門：ain 0に圧力センサを接続（デモ）

Funnel入門：ain 0に圧力センサを接続（デモ）

Funnel入門：ain 0に曲げセンサを接続（デモ）

Funnel入門：ain 0に曲げセンサを接続（デモ）

Funnel入門：ainに加速度センサを接続

Funnel入門：ainに加速度センサを接続

Funnel入門：ainに加速度センサを接続

1. SimpleScopeを開く2. 表示するチャンネル数を3に増やす3. x, y, zそれぞれの軸の動きを確認

• 傾けてみる• 振ってみる

Funnel入門：加速度センサの用途

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

Funnel入門：傾きを検出する原理

Funnel入門：センサの出力から角度を求める

1. フィルタで細かい動きを取り除く2. SimpleScopeで変化幅を確認する3. -1から+1までにスケーリングする4. 逆sin関数を用いて角度に変換する

Funnel入門：加速度センサを使ってみる

1. RGBCube Mouseを開く2. マウスを動かして動作を確認する3. マウス操作を加速度センサに置き換える

Funnel入門：ain 0に焦電センサを接続（デモ）

Funnel入門：焦電センサを使う際の注意点

• 対象物が動いた時だけ出力される• 照明などの赤外線の影響を受ける• 目的に応じて適切なタイプを選択する

第2部：課題（16:30～17:00）

• 一定以上暗くなったらLEDを点滅させる

ソースコード 9 ヒント：analogInput(0)にSetPointをセットする

void setup()

...

gainer.analogInput(0).filters = filters;

...

void risingEdge(PortEvent e)

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

...

第3部：作品のプランニング（17:00～18:00）

1. 作品プランを考案（30分間）2. 作品プランを発表（持ち時間1分）