Download - Make: Tokyo Meeting 03
![Page 1: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/1.jpg)
Make: Tokyo Meeting 03
ワークショップ:Jamming Gearを作ってみよう
小林茂(国際情報科学芸術アカデミー [IAMAS])+菅野創(情報科学芸術大学院大学 [IAMAS])
2009年 5月 23・24日:デジタルハリウッド 八王子制作スタジオ
![Page 2: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/2.jpg)
配布物一覧
品名 品番など 数Pepper 1個ブレッドボード EIC-801 1個ジャンプワイヤ(柔150mm) 3本ジャンプワイヤ(固) 適量抵抗器(橙橙茶金) 330Ω 2個ボリューム 10kΩ(Bカーブ) 1個LED 白色など 1個フォトインタラプタ GP1A53HRJ00F 2個ギアなど おりこうブロック 適量回転読み取り用紙 1枚のりパネ 20mm×20mm 8枚
![Page 3: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/3.jpg)
自己紹介:書籍(執筆)
Make日本語版Volume 04特集「Sketchーハードウェアでスケッチする」
オライリー・ジャパン編(オライリー・ジャパン・2008年)
![Page 4: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/4.jpg)
自己紹介:書籍(執筆)
Make日本語版Volume 05「Sketch / Prototype―素材として使える電子回路」
オライリー・ジャパン編(オライリー・ジャパン・2008年)
![Page 5: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/5.jpg)
自己紹介:書籍(執筆)
Make日本語版Volume 06「Prototyping Lab: オープンソースハードウェア開発の実際」
オライリー・ジャパン編(オライリー・ジャパン・2009年)
![Page 6: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/6.jpg)
自己紹介:書籍(執筆)
Make日本語版Volume 07「Prototyping Lab: メイキング・オブ・Jamming Gear」
オライリー・ジャパン編(オライリー・ジャパン・2009年)
• Jamming Gearの概要• プロトタイピングの過程の紹介• 簡易版Jamming Gearを作ってみよう
![Page 7: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/7.jpg)
自己紹介:書籍(監修)Making Things TalkArduinoで作る「会話」するモノたち
Tom Igoe 著・小林 茂 監訳・水原 文 翻訳(オライリー・2008年)
![Page 8: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/8.jpg)
自己紹介:書籍(共著)
+GAINER
GainerBook Labo+くるくる研究室(九天社・2007年/オーム社・2008年)
![Page 9: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/9.jpg)
自己紹介:ツールキット開発の動機
• ハードは気軽にスケッチできない→ソフトが動いた段階で気がついても遅い
• 実際に動くまでは想像で進めるしかない→建設的なディスカッションが行われにくい
• デザイナーとエンジニアの共通言語がない→コミュニケーション上の齟齬が多発する
→プロトタイピングのプロセスで使える ツールキットが必要なのでは?
![Page 10: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/10.jpg)
本日の予定
• フィジカルコンピューティングとは• 実習1:Processing入門• 実習2:電子回路の基礎知識• 実習3:基本的な入出力• 実習4:Jamming Gearを作ってみよう
![Page 11: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/11.jpg)
フィジカルコンピューティングとは?
• ニューヨーク大学の ITP*1でTom Igoeらが中心となって教えているコースの名前
• インタラクションデザインを教えるための方法の1つ
• コンピュータが理解したり反応できる人間のフィジカルな表現の幅をいかに増やすか
• デザインやアート教育の1つの分野として定着
*1 Interactive Telecommunications Program
![Page 12: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/12.jpg)
フィジカルコンピューティングとは?
一般的なPCから見た人間は?
• キー情報(ASCIIキーボードから)• マウス情報(1つのマウスから)
![Page 13: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/13.jpg)
Alto (1973)
出典:http://toastytech.com/guis/
![Page 14: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/14.jpg)
フィジカルコンピューティングとは?
• PC+標準入出力デバイスの世界で実現できるインタラクションには限界がある– 人間が直接触れて感じることができない– PCのパラダイムに縛られてしまう
• 統一されたプラットホームならではの良さも勿論ある(例:Flashなどによるウェブ上での表現)
![Page 15: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/15.jpg)
フィジカルコンピューティングとは?
• 物理的な入出力を活用することによって表現力は拡大する(例:Nintendo Wii)
• 電子楽器などではずいぶん昔からのテーマ• iPhoneが注目される理由とも大きく関連• フィジカルなインタラクションデザインのメソッド確立はまだまだこれから?
![Page 16: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/16.jpg)
フィジカルコンピューティングの構成要素
• センサやカメラ(例:光、圧力、音、温度、加速度など)• アクチュエータ(例:LED、モータ、ソレノイドなど)• プロセッサ(例:マイコン、I/Oモジュール+PCなど)
→ものすごく簡単にまとめると プログラミング+電子工作
![Page 17: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/17.jpg)
プログラミング+電子工作?
フィジカルコンピューティングは難しい?
• プログラミングはそれなりのスキルが必要(例:ActionScript、C、C++、Javaなど)• 電子工作にもそれなりのスキルが必要(例:回路設計、実装、検証)• 両方のスキルが必要ということは…
![Page 18: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/18.jpg)
プログラミング+電子工作?
フィジカルコンピューティングは難しい?
• 確かに習得するまでにはそれなりの努力が必要• できあがった結果は直接的に人間の感覚に訴えるものになる(はず)
![Page 19: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/19.jpg)
プログラミング+電子工作?
最近では扱いやすいプラットホームが登場
• プログラミング– Flash
– Processing
– Max/MSP
• 電子回路のスケッチ– Gainer
– Arduino
– Phidgets
![Page 20: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/20.jpg)
電子工作は大変?
• 誰でもはんだ付けくらいはやったことがある• まずは必要最小限のこと(だけ)を覚えればスタートできる– 電圧~電流~抵抗– 回路図の読み方– オームの法則など– よく使う部品のシンボルと特徴
• 失敗しながら覚えていけばいい• でもUNDOはきかない(=人生と一緒)
![Page 21: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/21.jpg)
フィジカルな世界とつなぐ方法
マイコンのみ(例:PIC、AVR)a
b
c
d
A
B
C
D
マイコンmicrocontroller
program
a0]=ain.o;aout.1 = 255;
![Page 22: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/22.jpg)
フィジカルな世界とつなぐ方法
マイコン+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;
![Page 23: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/23.jpg)
Arduino I/Oボード
写真:SparkFun Electronics
![Page 24: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/24.jpg)
フィジカルな世界とつなぐ方法
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;
![Page 25: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/25.jpg)
Phidgets
![Page 26: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/26.jpg)
Gainerとは?
オープンソース・ハード&ソフトのツールキット
• I/Oモジュール• ソフトウェア・ライブラリ
– ActionScript 2/3
– Processing
– Max/MSP
![Page 27: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/27.jpg)
Gainer I/Oモジュール
写真撮影:高尾俊介
![Page 28: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/28.jpg)
I/Oモジュール+ブレッドボード
写真撮影:高尾俊介
![Page 29: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/29.jpg)
さまざまな電子部品
写真撮影:高尾俊介
![Page 30: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/30.jpg)
I/Oモジュール+ブレッドボード+部品
写真撮影:高尾俊介
![Page 31: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/31.jpg)
入力:曲げ
写真撮影:高尾俊介
![Page 32: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/32.jpg)
出力:LEDアレイ
写真撮影:高尾俊介
![Page 33: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/33.jpg)
出力:振動モータ
写真撮影:高尾俊介
![Page 34: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/34.jpg)
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
重点 簡単 拡張性
![Page 35: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/35.jpg)
オープンソースハードとしてのGainer I/O
• SparkFun Electronics(PSoCベース)– Gainer PSoC Development Board
• Morecat Lab.(AVRベース)– Pepper
– Ginger
– Sugar
• RT(PICベース)– Gainer mini
![Page 36: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/36.jpg)
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
![Page 37: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/37.jpg)
ワークショップ
HELLO!!フィジカルコンピューティング
• 日時:2007.12.22-23
• 場所:山口情報芸術センター• 参加者:19名• 言語:日本語• 環境:Processing×Funnel×Gainer I/O
![Page 38: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/38.jpg)
作品紹介:Jamming Gear
• 菅野創×西郷憲一郎• ギヤの組合せにより音楽を演奏
– 歯数が異なるギアの組合せによる変化– ミニマルミュージックを視覚的に表現
• 各種センサ×FIO×Max/MSP×PC
• Make: Tokyo Meeting 01-02やIAMAS Gangu Project展などで展示
![Page 39: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/39.jpg)
Jamming Gear(プロトタイプ1号機)
![Page 40: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/40.jpg)
Jamming Gear(プロトタイプ2号機)
![Page 41: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/41.jpg)
Jamming Gear(プロトタイプ3号機・モック)
![Page 42: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/42.jpg)
Jamming Gear(プロトタイプ4号機)
![Page 43: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/43.jpg)
Jamming Gear(プロトタイプ5号機)
![Page 44: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/44.jpg)
Jamming Gear(プロトタイプ6号機・モック)
![Page 45: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/45.jpg)
Jamming Gear(プロトタイプ6号機)
![Page 46: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/46.jpg)
Funnelとは?:コンセプト
• 単純で透明• スケッチ~プロトタイプまで使える• デザイナーとエンジニアの「共通言語」
![Page 47: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/47.jpg)
FunnelとGainerの違い• Gainer
– シンプルなドライバ的なもの– Gainer I/Oと1:1対応– 入門書がある
• Funnel
– フレームワーク的なもの– ArduinoやXBeeも利用可能– 入門書がない
![Page 48: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/48.jpg)
Funnelとは?:関連Sketching User ExperiencesGetting the Design Right and the Right Design
Bill Buxton(Morgan Kaufmann Pub・2007年)
![Page 49: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/49.jpg)
Funnelとは?:関連
出典:Bill Buxton, Sketching User Experiences (2008)
![Page 50: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/50.jpg)
Funnelの特徴
• 疑似コード風のコーディング• 入出力をより簡単に扱うためのフィルタ
– ローパス、ハイパス(Convolution)– 入力を設定した閾値で分割(SetPoint)– スケーリング(Scaler)– オシレータ(Osc)
• 複数の I/Oモジュールに対応
![Page 51: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/51.jpg)
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
![Page 52: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/52.jpg)
Arduino Duemilanove
写真:SparkFun Electronics
![Page 53: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/53.jpg)
LilyPad Arduino
写真:SparkFun Electronics
![Page 54: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/54.jpg)
Arduino Pro Mini
写真:SparkFun Electronics
![Page 55: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/55.jpg)
Arduino ProtoShield
写真:SparkFun Electronics
![Page 56: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/56.jpg)
Arduino XBee Shield
写真:SparkFun Electronics
![Page 57: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/57.jpg)
FIO v1.3
![Page 58: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/58.jpg)
XIO: XBee I/O Board v1.0
![Page 59: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/59.jpg)
XIO: XBee I/O Board v1.0
![Page 60: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/60.jpg)
Processing入門
• 基本的な操作方法• 用語• 簡単なプログラム
![Page 61: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/61.jpg)
参考書籍
Built with Processing [改訂版]デザイン/アートのためのプログラミング入門
前川 峻志+田中 孝太郎(ビー・エヌ・エヌ新社・2008年)
![Page 62: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/62.jpg)
Processing入門:基本的な操作方法
• 起動• サンプルを開く• 実行• 終了
![Page 63: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/63.jpg)
Processing入門:用語
• Processing Development Environment
• Sketch
• Display Window
![Page 64: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/64.jpg)
Processing入門:簡単なプログラム1
コード例 1 Hello World!
println("Hello World!");
![Page 65: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/65.jpg)
Processing入門:簡単なプログラム2
コード例 2 ウィンドウを表示してみる
// 最初に1回だけ実行されるvoid setup()
// Display Windowのサイズ(横、縦)size(200, 200);
// 毎フレームごとに実行されるvoid draw()
// 背景の色(赤、緑、青)background(255, 255, 255);
![Page 66: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/66.jpg)
Processing入門:簡単なプログラム3
コード例 3 直線を描画してみる
void setup()
size(200, 200);
void draw()
background(0);
stroke(255);
line(0, 0, 199, 199);
![Page 67: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/67.jpg)
Processing入門:簡単なプログラム4
コード例 4 マウスイベントを扱う
int brightness = 0; // 背景の明るさを指定するための変数
void setup()
...
void draw()
background(brightness); // 現在のbrightnessの値で塗りつぶす
void mousePressed()
brightness = 255; // マウスのボタンが押されたら背景を255に
void mouseReleased()
brightness = 0; // マウスのボタンが離されたら背景を0に
![Page 68: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/68.jpg)
電子回路の基礎知識
• 電圧~電流~抵抗• オームの法則• ブレッドボードの使い方
![Page 69: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/69.jpg)
電圧~電流~抵抗
電気の流れは水の流れのようなもの
• 電圧– 2点間の高度(電位)の違い– 基準点が必要(GND)– 単位はボルト(V)
![Page 70: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/70.jpg)
電圧のイメージ図
低高
![Page 71: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/71.jpg)
電圧~電流~抵抗
電気の流れは水の流れのようなもの
• 電流– 電圧の高いところから低いところに流れる– 単位はアンペア(A)
![Page 72: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/72.jpg)
電流のイメージ図
少多
![Page 73: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/73.jpg)
電圧~電流~抵抗
電気の流れは水の流れのようなもの
• 抵抗– 電流の流れにくさ– 単位はオーム(Ω)
![Page 74: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/74.jpg)
抵抗のイメージ図
低 高
![Page 75: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/75.jpg)
電圧~電流~抵抗
よく出てくる補助単位の例
• 1,000倍を表すキロ(例:1kΩ)• 1,000,000倍を表すメガ(例:1MΩ)• 1
1,000を表すミリ(例:1mA)• 1
1,000,000を表すマイクロ(例:50µA)
![Page 76: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/76.jpg)
回路図ってなに?
![Page 77: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/77.jpg)
回路図ってなに?
回路図は電子回路の設計図
• シンボルで表した電子部品の接続を示したもの• シンボルに若干のバリエーションはあるが、基本的には全世界共通
![Page 78: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/78.jpg)
電源の回路図シンボル
+5V GND
![Page 79: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/79.jpg)
スイッチの回路図シンボルと部品例
![Page 80: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/80.jpg)
抵抗器の回路図シンボルと部品例
![Page 81: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/81.jpg)
可変抵抗器の回路図シンボルと部品例
![Page 82: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/82.jpg)
LEDの回路図シンボルと部品例
![Page 83: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/83.jpg)
ブレッドボードってなに?
• 部品の足を穴にさすことで電子回路を形成• はんだ付け不要
– 部品を再利用できる– 回路を組み間違えてもやり直しできる– 耐久性にはやや注意が必要
![Page 84: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/84.jpg)
ブレッドボードの構造
• 横方向のブロックは背面で接続• 縦方向のブロックは未接続• 電源用のエリアは専用に用意されている
![Page 85: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/85.jpg)
実習:LEDを点灯させてみよう
![Page 86: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/86.jpg)
LEDを点灯させてみよう
どうして抵抗器が必要なの?
• LEDには適切な電流の範囲がある(例:20mA)• その範囲を超えると簡単に焼き切れてしまう• 適切な値の抵抗器を用いて電流を制限する• 適切な抵抗値はどうやって求める?→オームの法則を用いて計算する
※抵抗器で電流を制限する方法が全てではありません
![Page 87: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/87.jpg)
オームの法則
電圧~電流~抵抗の関係
V = I × R
• Vは電圧で単位はV(ボルト)• Iは電流で単位はA(アンペア)• Rは抵抗で単位はΩ(オーム)
![Page 88: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/88.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 89: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/89.jpg)
例:LEDを点灯させてみる
![Page 90: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/90.jpg)
基本的な入出力
• 出力をコントロールしてみる– マウスでLEDをオン/オフ– マウスの位置でLEDの明るさを制御
• 入力を扱ってみる– ボリューム
![Page 91: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/91.jpg)
基本的な入出力:Gainer I/Oの出力について
出力には2種類ある
• デジタル出力(dout:0か1かの2段階)– LED、モータなど– 状態がシンプルで取扱が簡単
• アナログ出力(aout:0~1の256段階)*2
– LED、モータなど– 連続的な変化を扱うことができる
*2 実際にはPWMによる疑似アナログ出力
![Page 92: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/92.jpg)
基本的な入出力:aout 0にLEDを接続
![Page 93: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/93.jpg)
基本的な入出力:aout 0にLEDを接続
![Page 94: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/94.jpg)
基本的な入出力:マウスによる制御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);
![Page 95: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/95.jpg)
基本的な入出力:マウスによる制御1
コード例 6 マウスでLEDのオン/オフを制御( 01 ControlLEDByMouse続き)
void mousePressed()
gainer.analogOutput(0).value = 1.0;
void mouseReleased()
gainer.analogOutput(0).value = 0.0;
![Page 96: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/96.jpg)
基本的な入出力:マウスによる制御2
コード例 7 マウスでLEDの明るさを制御( 02 ControlLEDByMouseX)
import processing.funnel.*;
Gainer gainer;
void setup()
size(200, 200);
gainer = new Gainer(this, Gainer.MODE1);
void draw()
float val = (float)mouseX / (width - 1);
background(255 * val);
gainer.analogOutput(0).value = val;
![Page 97: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/97.jpg)
基本的な入出力:Gainer I/Oの入力について
入力には2種類ある
• デジタル入力(din:0か1かの2段階)– スイッチなど– 状態がシンプルで取扱が簡単
• アナログ入力(ain:0~1の256段階)– 出力電圧が変化するセンサなど– 連続変化を扱うことができる
![Page 98: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/98.jpg)
基本的な入出力:ain 0にボリュームを接続
![Page 99: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/99.jpg)
基本的な入出力:ain 0にボリュームを接続
![Page 100: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/100.jpg)
基本的な入出力:ain 0にボリュームを接続
• 03 SimpleScopeを開いて実行• ボリュームを回して変化を確認• どうしてボリュームを回すと電圧が変わるの?
![Page 101: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/101.jpg)
基本的な入出力:抵抗分圧
![Page 102: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/102.jpg)
基本的な入出力:抵抗分圧
![Page 103: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/103.jpg)
基本的な入出力:サンプルをボリュームで制御
• 04 Treeを開く*3
• Funnelライブラリを使うための準備(import)• mouseXをain 0の値で置き換える
*3 Topics/Fractals and L-Systems/Treeと同じものです
![Page 104: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/104.jpg)
基本的な入出力:アナログ入力の値を分割する
コード例 8 SetPointフィルタで入力を0と1に分割する( 05 SetPoint)
import processing.funnel.*;
Gainer gainer;
int brightness = 0;
void setup()
size(200, 200);
gainer = new Gainer(this, Gainer.MODE1);
// アナログ入力0に対してSetPointフィルタをセットgainer.analogInput(0).addFilter(new SetPoint(0.5, 0.1));
void draw()
background(brightness);
![Page 105: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/105.jpg)
コード例 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;
![Page 106: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/106.jpg)
Jamming Gearを作ってみよう
![Page 107: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/107.jpg)
フォトインタラプタとは?
• 赤外線LEDとフォト ICで構成• LEDとフォト ICの間を遮る物体があるかどうかを検出
• さまざまな位置検出に利用される
![Page 108: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/108.jpg)
フォトインタラプタとは?(内部結線図)
1
23
4
5
Voltage regulator
Amp
(15kΩ)
出典:GP1A53HRJ00Fデータシート
![Page 109: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/109.jpg)
フォトインタラプタを使う回路の例
![Page 110: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/110.jpg)
Jamming Gearを作ってみよう:センシング
• 1つのセンサで回転を読み取る• 2つのセンサで方向も読み取る• 2つのセンサでさらに細かく回転を読み取る
![Page 111: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/111.jpg)
配線図:1つのギヤに1つのセンサ
![Page 112: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/112.jpg)
Jamming Gearを作ってみよう:センシング
コード例 10 1つのセンサで回転を読み取る( 06 RotaryEncoder1)
import processing.funnel.*;
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++;
![Page 113: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/113.jpg)
配線図:ギヤを1つから2つに増やす
![Page 114: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/114.jpg)
配線図:1つのギヤに2つのセンサ
![Page 115: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/115.jpg)
Jamming Gearを作ってみよう:センシング
コード例 11 2つのセンサで方向も読み取る( 07 RotaryEncoder2)
void setup()
...
pepper = new Gainer(this, Gainer.MODE1);
pepper.analogInput(0).addFilter(new SetPoint(0.5, 0.1));
pepper.analogInput(1).addFilter(new SetPoint(0.5, 0.1));
void fallingEdge(PinEvent event)
if (event.target.number == pepper.analogInput[0])
if (pepper.analogInput(1).value == 1)
count--;
else
count++;
![Page 116: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/116.jpg)
Jamming Gearを作ってみよう:センシング
コード例 12 2つのセンサでさらに細かく回転を読み取る( 08 RotaryEncoder3)
// ain 0の立ち下がりに加えて立ち上がりでもain 1の状態を確認する// これにより前のサンプルと比較して倍の精度で回転を読み取ることができるvoid ridingEdge(PinEvent event)
if (event.target.number == pepper.analogInput[0])
if (pepper.analogInput(1).value == 0)
count--;
else
count++;
![Page 117: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/117.jpg)
後片付けについて
• 以下のものは返却をお願いします– ボリューム– トレー– USBケーブル
• その他の部品(Pepper含む)はお持ち帰りください
• 部品代(2000円)をお支払いください• 質問等があれば[email protected]までどうぞ
![Page 118: Make: Tokyo Meeting 03](https://reader034.vdocuments.net/reader034/viewer/2022051314/5564e30bd8b42ad3488b4d98/html5/thumbnails/118.jpg)
Make: Tokyo Meeting 03
ワークショップ:Jamming Gearを作ってみよう
小林茂(国際情報科学芸術アカデミー [IAMAS])+菅野創(情報科学芸術大学院大学 [IAMAS])
2009年 5月 23・24日:デジタルハリウッド 八王子制作スタジオ