Download - YCAM Workshop Part 2
![Page 1: YCAM Workshop Part 2](https://reader033.vdocument.in/reader033/viewer/2022050808/558be0f7d8b42a31608b4618/html5/thumbnails/1.jpg)
2007.12.22-23
YCAM身体とメディアワークショップシリーズ#2
HELLO!!フィジカル・コンピューティング
![Page 2: YCAM Workshop Part 2](https://reader033.vdocument.in/reader033/viewer/2022050808/558be0f7d8b42a31608b4618/html5/thumbnails/2.jpg)
第2部:実習1(14:40~15:00)
• 電子回路の基礎知識• ブレッドボードの使い方• LED
![Page 3: YCAM Workshop Part 2](https://reader033.vdocument.in/reader033/viewer/2022050808/558be0f7d8b42a31608b4618/html5/thumbnails/3.jpg)
電圧~電流~抵抗
電気の流れは水の流れのようなもの
• 電圧– 2点間の高度(電位)の違い– 基準点が必要(GND)– 単位はボルト(V)
![Page 4: YCAM Workshop Part 2](https://reader033.vdocument.in/reader033/viewer/2022050808/558be0f7d8b42a31608b4618/html5/thumbnails/4.jpg)
電圧のイメージ図
低高
![Page 5: YCAM Workshop Part 2](https://reader033.vdocument.in/reader033/viewer/2022050808/558be0f7d8b42a31608b4618/html5/thumbnails/5.jpg)
電圧~電流~抵抗
電気の流れは水の流れのようなもの
• 電流– 電圧の高いところから低いところに流れる– 単位はアンペア(A)
![Page 6: YCAM Workshop Part 2](https://reader033.vdocument.in/reader033/viewer/2022050808/558be0f7d8b42a31608b4618/html5/thumbnails/6.jpg)
電流のイメージ図
少多
![Page 7: YCAM Workshop Part 2](https://reader033.vdocument.in/reader033/viewer/2022050808/558be0f7d8b42a31608b4618/html5/thumbnails/7.jpg)
電圧~電流~抵抗
電気の流れは水の流れのようなもの
• 抵抗– 電流の流れにくさ– 単位はオーム(Ω)
![Page 8: YCAM Workshop Part 2](https://reader033.vdocument.in/reader033/viewer/2022050808/558be0f7d8b42a31608b4618/html5/thumbnails/8.jpg)
抵抗のイメージ図
低 高
![Page 9: YCAM Workshop Part 2](https://reader033.vdocument.in/reader033/viewer/2022050808/558be0f7d8b42a31608b4618/html5/thumbnails/9.jpg)
電圧~電流~抵抗
よく出てくる補助単位の例
• 1,000倍を表すキロ(例:1kΩ)• 1,000,000倍を表すメガ(例:1MΩ)• 1
1,000を表すミリ(例:1mA)• 1
1,000,000を表すマイクロ(例:50µA)
![Page 10: YCAM Workshop Part 2](https://reader033.vdocument.in/reader033/viewer/2022050808/558be0f7d8b42a31608b4618/html5/thumbnails/10.jpg)
回路図ってなに?
![Page 11: YCAM Workshop Part 2](https://reader033.vdocument.in/reader033/viewer/2022050808/558be0f7d8b42a31608b4618/html5/thumbnails/11.jpg)
回路図ってなに?
回路図は電子回路の設計図
• シンボルで表した電子部品の接続を示したもの• シンボルに若干のバリエーションはあるが、基本的には全世界共通
![Page 12: YCAM Workshop Part 2](https://reader033.vdocument.in/reader033/viewer/2022050808/558be0f7d8b42a31608b4618/html5/thumbnails/12.jpg)
電源の回路図シンボル
+5V GND
![Page 13: YCAM Workshop Part 2](https://reader033.vdocument.in/reader033/viewer/2022050808/558be0f7d8b42a31608b4618/html5/thumbnails/13.jpg)
スイッチの回路図シンボルと部品例
![Page 14: YCAM Workshop Part 2](https://reader033.vdocument.in/reader033/viewer/2022050808/558be0f7d8b42a31608b4618/html5/thumbnails/14.jpg)
抵抗器の回路図シンボルと部品例
![Page 15: YCAM Workshop Part 2](https://reader033.vdocument.in/reader033/viewer/2022050808/558be0f7d8b42a31608b4618/html5/thumbnails/15.jpg)
可変抵抗器の回路図シンボルと部品例
![Page 16: YCAM Workshop Part 2](https://reader033.vdocument.in/reader033/viewer/2022050808/558be0f7d8b42a31608b4618/html5/thumbnails/16.jpg)
LEDの回路図シンボルと部品例
![Page 17: YCAM Workshop Part 2](https://reader033.vdocument.in/reader033/viewer/2022050808/558be0f7d8b42a31608b4618/html5/thumbnails/17.jpg)
ブレッドボードってなに?
• 部品の足を穴にさすことで電子回路を形成• はんだ付け不要
– 部品を再利用できる– 回路を組み間違えてもやり直しできる– 耐久性にはやや注意が必要
![Page 18: YCAM Workshop Part 2](https://reader033.vdocument.in/reader033/viewer/2022050808/558be0f7d8b42a31608b4618/html5/thumbnails/18.jpg)
ブレッドボードの構造
• 横方向のブロックは背面で接続• 縦方向のブロックは未接続• 電源用のエリアは専用に用意されている
![Page 19: YCAM Workshop Part 2](https://reader033.vdocument.in/reader033/viewer/2022050808/558be0f7d8b42a31608b4618/html5/thumbnails/19.jpg)
ブレッドボードの構造(内部)
• ピンを穴に差し込むと接触して導通• 適切な太さのピンだけを利用する
![Page 20: YCAM Workshop Part 2](https://reader033.vdocument.in/reader033/viewer/2022050808/558be0f7d8b42a31608b4618/html5/thumbnails/20.jpg)
実習:LEDを点灯させてみよう
![Page 21: YCAM Workshop Part 2](https://reader033.vdocument.in/reader033/viewer/2022050808/558be0f7d8b42a31608b4618/html5/thumbnails/21.jpg)
LEDを点灯させてみよう
どうして抵抗器が必要なの?
• LEDには適切な電流の範囲がある(例:20mA)• その範囲を超えると簡単に焼き切れてしまう• 適切な値の抵抗器を用いて電流を制限する• 適切な抵抗値はどうやって求める?→オームの法則を用いて計算する
※抵抗器で電流を制限する方法が全てではありません
![Page 22: YCAM Workshop Part 2](https://reader033.vdocument.in/reader033/viewer/2022050808/558be0f7d8b42a31608b4618/html5/thumbnails/22.jpg)
オームの法則
電圧~電流~抵抗の関係
V = I × R
• Vは電圧で単位はV(ボルト)• Iは電流で単位はA(アンペア)• Rは抵抗で単位はΩ(オーム)
![Page 23: YCAM Workshop Part 2](https://reader033.vdocument.in/reader033/viewer/2022050808/558be0f7d8b42a31608b4618/html5/thumbnails/23.jpg)
オームの法則
電源電圧− LEDの電圧 = LEDに流したい電流× R
Rを求めるためにこの式を変形
R =電源電圧− LEDの電圧LEDに流したい電流
例:電源電圧が5.0V、LEDの電圧が1.8V、電流が10mA
R =5 − 1.8
0.01=
3.2
0.01= ?
※実際には計算結果に近い値の抵抗器を用いる
![Page 24: YCAM Workshop Part 2](https://reader033.vdocument.in/reader033/viewer/2022050808/558be0f7d8b42a31608b4618/html5/thumbnails/24.jpg)
例:LEDを点灯させてみる
![Page 25: YCAM Workshop Part 2](https://reader033.vdocument.in/reader033/viewer/2022050808/558be0f7d8b42a31608b4618/html5/thumbnails/25.jpg)
参考:ジャンプワイヤの色分け
• 赤:電源の+側(+5V)• 黒:電源のー側(GND)• 白・青・黄:センサとの接続など
![Page 26: YCAM Workshop Part 2](https://reader033.vdocument.in/reader033/viewer/2022050808/558be0f7d8b42a31608b4618/html5/thumbnails/26.jpg)
例:LEDを点灯させてみる(NG)
の方向が違うワイヤをさす位置が違う
にささっていない
![Page 27: YCAM Workshop Part 2](https://reader033.vdocument.in/reader033/viewer/2022050808/558be0f7d8b42a31608b4618/html5/thumbnails/27.jpg)
第2部:実習2(15:00~15:20)
Processing入門
• 基本的な操作方法• 用語• 簡単なプログラム
![Page 28: YCAM Workshop Part 2](https://reader033.vdocument.in/reader033/viewer/2022050808/558be0f7d8b42a31608b4618/html5/thumbnails/28.jpg)
Processing入門:基本的な操作方法
• 起動• サンプルを開く• 実行• 終了
![Page 29: YCAM Workshop Part 2](https://reader033.vdocument.in/reader033/viewer/2022050808/558be0f7d8b42a31608b4618/html5/thumbnails/29.jpg)
Processing入門:用語
• Processing Development Environment• Sketch• Display Window
![Page 30: YCAM Workshop Part 2](https://reader033.vdocument.in/reader033/viewer/2022050808/558be0f7d8b42a31608b4618/html5/thumbnails/30.jpg)
Processing入門:簡単なプログラム1
ソースコード 1 ウィンドウを表示してみる
// 最初に1回だけ実行されるvoid setup()
// Display Windowのサイズ(横、縦)size(200, 200);
// 毎フレームごとに実行されるvoid draw()
// 背景の色(赤、緑、青)background(255, 255, 255);
![Page 31: YCAM Workshop Part 2](https://reader033.vdocument.in/reader033/viewer/2022050808/558be0f7d8b42a31608b4618/html5/thumbnails/31.jpg)
Processing入門:簡単なプログラム2(準備)
![Page 32: YCAM Workshop Part 2](https://reader033.vdocument.in/reader033/viewer/2022050808/558be0f7d8b42a31608b4618/html5/thumbnails/32.jpg)
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); // 文字列を指定した位置に描画
![Page 33: YCAM Workshop Part 2](https://reader033.vdocument.in/reader033/viewer/2022050808/558be0f7d8b42a31608b4618/html5/thumbnails/33.jpg)
Processing入門:上達するためのコツ
• サンプルをたくさん試してみる• スケッチをたくさん描いてみる• わからなければリファレンスで調べる
![Page 34: YCAM Workshop Part 2](https://reader033.vdocument.in/reader033/viewer/2022050808/558be0f7d8b42a31608b4618/html5/thumbnails/34.jpg)
第2部:実習3(15:20~16:30)
Funnel入門
• Gainer I/Oを使う• マウス→ボタンによる制御• LEDの制御• さまざまなセンサ
![Page 35: YCAM Workshop Part 2](https://reader033.vdocument.in/reader033/viewer/2022050808/558be0f7d8b42a31608b4618/html5/thumbnails/35.jpg)
Funnel入門:Gainer I/Oを使う
1. Funnel Serverの起動2. マウスで I/Oモジュール上のLEDを制御3. I/Oモジュール上のボタンでLEDを制御
![Page 36: YCAM Workshop Part 2](https://reader033.vdocument.in/reader033/viewer/2022050808/558be0f7d8b42a31608b4618/html5/thumbnails/36.jpg)
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);
![Page 37: YCAM Workshop Part 2](https://reader033.vdocument.in/reader033/viewer/2022050808/558be0f7d8b42a31608b4618/html5/thumbnails/37.jpg)
Funnel入門:マウスによる制御
ソースコード 4 マウスで I/Oモジュール上のLEDを制御(続き)
void mousePressed()
gainer.led().value = 1.0;
void mouseReleased()
gainer.led().value = 0.0;
![Page 38: YCAM Workshop Part 2](https://reader033.vdocument.in/reader033/viewer/2022050808/558be0f7d8b42a31608b4618/html5/thumbnails/38.jpg)
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);
![Page 39: YCAM Workshop Part 2](https://reader033.vdocument.in/reader033/viewer/2022050808/558be0f7d8b42a31608b4618/html5/thumbnails/39.jpg)
Funnel入門:ボタンによる制御
ソースコード 6 ボタンで I/Oモジュール上のLEDを制御(続き)
void gainerButtonEvent(boolean pressed)
if (pressed)
gainer.led().value = 1.0;
else
gainer.led().value = 0.0;
![Page 40: YCAM Workshop Part 2](https://reader033.vdocument.in/reader033/viewer/2022050808/558be0f7d8b42a31608b4618/html5/thumbnails/40.jpg)
Funnel入門:Gainer I/Oの出力について
出力には2種類ある
• デジタル出力(dout:0か1の2段階)– LED、モータなど– 状態がシンプルで取扱が簡単
• アナログ出力(aout:0~255の256段階)– LED、モータなど– 連続変化を扱うことができる
![Page 41: YCAM Workshop Part 2](https://reader033.vdocument.in/reader033/viewer/2022050808/558be0f7d8b42a31608b4618/html5/thumbnails/41.jpg)
Funnel入門:aout 0にLEDを接続
![Page 42: YCAM Workshop Part 2](https://reader033.vdocument.in/reader033/viewer/2022050808/558be0f7d8b42a31608b4618/html5/thumbnails/42.jpg)
Funnel入門:aout 0にLEDを接続
![Page 43: YCAM Workshop Part 2](https://reader033.vdocument.in/reader033/viewer/2022050808/558be0f7d8b42a31608b4618/html5/thumbnails/43.jpg)
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;
![Page 44: YCAM Workshop Part 2](https://reader033.vdocument.in/reader033/viewer/2022050808/558be0f7d8b42a31608b4618/html5/thumbnails/44.jpg)
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();
![Page 45: YCAM Workshop Part 2](https://reader033.vdocument.in/reader033/viewer/2022050808/558be0f7d8b42a31608b4618/html5/thumbnails/45.jpg)
Funnel入門:Gainer I/Oの入力について
入力には2種類ある
• デジタル入力(din:0か1の2段階)– スイッチなど– 状態がシンプルで取扱が簡単
• アナログ入力(ain:0~255の256段階)– 出力電圧が変化するセンサなど– 連続変化を扱うことができる
![Page 46: YCAM Workshop Part 2](https://reader033.vdocument.in/reader033/viewer/2022050808/558be0f7d8b42a31608b4618/html5/thumbnails/46.jpg)
Funnel入門:ain 0にボリュームを接続
![Page 47: YCAM Workshop Part 2](https://reader033.vdocument.in/reader033/viewer/2022050808/558be0f7d8b42a31608b4618/html5/thumbnails/47.jpg)
Funnel入門:ain 0にボリュームを接続
![Page 48: YCAM Workshop Part 2](https://reader033.vdocument.in/reader033/viewer/2022050808/558be0f7d8b42a31608b4618/html5/thumbnails/48.jpg)
Funnel入門:ain 0にボリュームを接続
1. SimpleScopeを開いて実行2. ボリュームを回して変化を確認3. ain 1が不安定なのはなぜ?4. どうしてボリュームを回すと電圧が変わるの?
![Page 49: YCAM Workshop Part 2](https://reader033.vdocument.in/reader033/viewer/2022050808/558be0f7d8b42a31608b4618/html5/thumbnails/49.jpg)
Funnel入門:抵抗分圧
![Page 50: YCAM Workshop Part 2](https://reader033.vdocument.in/reader033/viewer/2022050808/558be0f7d8b42a31608b4618/html5/thumbnails/50.jpg)
Funnel入門:抵抗分圧
![Page 51: YCAM Workshop Part 2](https://reader033.vdocument.in/reader033/viewer/2022050808/558be0f7d8b42a31608b4618/html5/thumbnails/51.jpg)
Funnel入門:サンプルをボリュームで制御
1. Topics/Fractals and L-Systems/Treeを開く2. 変更を加えるために別名で保存3. Funnelを使うための準備4. mouseXをain 0の値で置き換える
![Page 52: YCAM Workshop Part 2](https://reader033.vdocument.in/reader033/viewer/2022050808/558be0f7d8b42a31608b4618/html5/thumbnails/52.jpg)
Funnel入門:ain 0に光センサを接続
![Page 53: YCAM Workshop Part 2](https://reader033.vdocument.in/reader033/viewer/2022050808/558be0f7d8b42a31608b4618/html5/thumbnails/53.jpg)
Funnel入門:ain 0に光センサを接続
![Page 54: YCAM Workshop Part 2](https://reader033.vdocument.in/reader033/viewer/2022050808/558be0f7d8b42a31608b4618/html5/thumbnails/54.jpg)
Funnel入門:ain 0に光センサを接続
1. 改造したTreeを再度実行→ボリュームの場合と何かが違う?
2. SimpleScopeで入力の範囲を調べる3. Scalerをフィルタとして追加する4. 意図した通りになったかどうか確認
![Page 55: YCAM Workshop Part 2](https://reader033.vdocument.in/reader033/viewer/2022050808/558be0f7d8b42a31608b4618/html5/thumbnails/55.jpg)
Funnel入門:ain 0に距離センサを接続
![Page 56: YCAM Workshop Part 2](https://reader033.vdocument.in/reader033/viewer/2022050808/558be0f7d8b42a31608b4618/html5/thumbnails/56.jpg)
Funnel入門:ain 0に距離センサを接続
![Page 57: YCAM Workshop Part 2](https://reader033.vdocument.in/reader033/viewer/2022050808/558be0f7d8b42a31608b4618/html5/thumbnails/57.jpg)
Funnel入門:ain 0に圧力センサを接続(デモ)
![Page 58: YCAM Workshop Part 2](https://reader033.vdocument.in/reader033/viewer/2022050808/558be0f7d8b42a31608b4618/html5/thumbnails/58.jpg)
Funnel入門:ain 0に圧力センサを接続(デモ)
![Page 59: YCAM Workshop Part 2](https://reader033.vdocument.in/reader033/viewer/2022050808/558be0f7d8b42a31608b4618/html5/thumbnails/59.jpg)
Funnel入門:ain 0に曲げセンサを接続(デモ)
![Page 60: YCAM Workshop Part 2](https://reader033.vdocument.in/reader033/viewer/2022050808/558be0f7d8b42a31608b4618/html5/thumbnails/60.jpg)
Funnel入門:ain 0に曲げセンサを接続(デモ)
![Page 61: YCAM Workshop Part 2](https://reader033.vdocument.in/reader033/viewer/2022050808/558be0f7d8b42a31608b4618/html5/thumbnails/61.jpg)
Funnel入門:ainに加速度センサを接続
![Page 62: YCAM Workshop Part 2](https://reader033.vdocument.in/reader033/viewer/2022050808/558be0f7d8b42a31608b4618/html5/thumbnails/62.jpg)
Funnel入門:ainに加速度センサを接続
![Page 63: YCAM Workshop Part 2](https://reader033.vdocument.in/reader033/viewer/2022050808/558be0f7d8b42a31608b4618/html5/thumbnails/63.jpg)
Funnel入門:ainに加速度センサを接続
1. SimpleScopeを開く2. 表示するチャンネル数を3に増やす3. x, y, zそれぞれの軸の動きを確認
• 傾けてみる• 振ってみる
![Page 64: YCAM Workshop Part 2](https://reader033.vdocument.in/reader033/viewer/2022050808/558be0f7d8b42a31608b4618/html5/thumbnails/64.jpg)
Funnel入門:加速度センサの用途
• 動きの検出• 傾きの検出→なぜ加速度センサで傾きが検出できるの?
![Page 65: YCAM Workshop Part 2](https://reader033.vdocument.in/reader033/viewer/2022050808/558be0f7d8b42a31608b4618/html5/thumbnails/65.jpg)
Funnel入門:傾きを検出する原理
![Page 66: YCAM Workshop Part 2](https://reader033.vdocument.in/reader033/viewer/2022050808/558be0f7d8b42a31608b4618/html5/thumbnails/66.jpg)
Funnel入門:センサの出力から角度を求める
1. フィルタで細かい動きを取り除く2. SimpleScopeで変化幅を確認する3. -1から+1までにスケーリングする4. 逆sin関数を用いて角度に変換する
![Page 67: YCAM Workshop Part 2](https://reader033.vdocument.in/reader033/viewer/2022050808/558be0f7d8b42a31608b4618/html5/thumbnails/67.jpg)
Funnel入門:加速度センサを使ってみる
1. RGBCube Mouseを開く2. マウスを動かして動作を確認する3. マウス操作を加速度センサに置き換える
![Page 68: YCAM Workshop Part 2](https://reader033.vdocument.in/reader033/viewer/2022050808/558be0f7d8b42a31608b4618/html5/thumbnails/68.jpg)
Funnel入門:ain 0に焦電センサを接続(デモ)
![Page 69: YCAM Workshop Part 2](https://reader033.vdocument.in/reader033/viewer/2022050808/558be0f7d8b42a31608b4618/html5/thumbnails/69.jpg)
Funnel入門:焦電センサを使う際の注意点
• 対象物が動いた時だけ出力される• 照明などの赤外線の影響を受ける• 目的に応じて適切なタイプを選択する
![Page 70: YCAM Workshop Part 2](https://reader033.vdocument.in/reader033/viewer/2022050808/558be0f7d8b42a31608b4618/html5/thumbnails/70.jpg)
第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])
...
![Page 71: YCAM Workshop Part 2](https://reader033.vdocument.in/reader033/viewer/2022050808/558be0f7d8b42a31608b4618/html5/thumbnails/71.jpg)
第3部:作品のプランニング(17:00~18:00)
1. 作品プランを考案(30分間)2. 作品プランを発表(持ち時間1分)