Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
IAMAS Gangu Project - Work in Progress
“Sketching in Hardware”ワークショップ
小林茂(IAMAS:岐阜県立国際情報科学芸術アカデミー)
2008 年 12 月 27 日:AXIS G...
自己紹介
• 1970年名古屋市生まれ
• 電子楽器メーカー(1993∼2004)
– サウンドデザイナー
– 技術研究所
– ソフトウェアエンジニア
• IAMAS(2004∼)
– フィジカルコンピューティング
– インタラクションデザイン
自己紹介:ツールキット開発の動機
• ハードは気軽にスケッチできない
→ソフトが動いた段階で気がついても遅い
• 実際に動くまでは想像で進めるしかない
→建設的なディスカッションが行われにくい
• デザイナーとエンジニアの共通言語がない
→コミ...
自己紹介:書籍(執筆)
Make日本語版Volume 04
特集「Sketchーハードウェアでスケッチする」
オライリー・ジャパン編(オライリー・ジャパン・2008年)
自己紹介:書籍(執筆)
Make日本語版Volume 05
「Sketch / Prototype―素材として使える電子回路」
オライリー・ジャパン編(オライリー・ジャパン・2008年)
自己紹介:書籍(共著)
+GAINER
GainerBook Labo+くるくる研究室(九天社・2007 年/オーム社・2008 年)
自己紹介:書籍(監修)
Making Things Talk
Arduinoで作る「会話」するモノたち
Tom Igoe 著・小林 茂 監訳・水原 文 翻訳(オライリー・2008年)
本日の予定
• イントロダクション
– フィジカルコンピューティングとは
– ツールキットの紹介(Gainer)
– 事例紹介
– ツールキットの紹介(Funnel)
• 実習
– 実習1:電子回路の基礎知識
– 実習2:Funnel入門
– ...
フィジカルコンピューティングとは?
• ニューヨーク大学のITP*1
でTom Igoeらが
中心となって教えているコースの名前
• インタラクションデザインを教えるための
方法の1つ
• コンピュータが理解したり反応できる人間の
フィジカルな...
ITPの紹介
ITP Winter Show 2008
• ITPで学ぶ学生の展覧会で毎年春冬2回開催
• 12月17日から18日まで開催
• http://itp.nyu.edu/shows/winter2008/
フィジカルコンピューティングとは?
一般的なPCから見た人間は?
• キー情報(ASCIIキーボードから)
• マウス情報(1つのマウスから)
Alto (1973)
出典:http://toastytech.com/guis/
フィジカルコンピューティングとは?
• PC+標準入出力デバイスの世界で実現できる
インタラクションには限界がある
– 人間が直接触れて感じることができない
– PCのパラダイムに縛られてしまう
• 統一されたプラットホームならではの良さも
勿...
フィジカルコンピューティングとは?
• 物理的な入出力を活用することによって
表現力は拡大する(例:Nintendo Wii)
• 電子楽器などではずいぶん昔からのテーマ
• iPhoneが注目される理由とも大きく関連
• フィジカルなインタラ...
フィジカルコンピューティングの構成要素
• センサ
(例:光、圧力、音、温度、加速度など)
• アクチュエータ
(例:LED、モータ、ソレノイドなど)
• プロセッサ
(例:マイコン、I/Oモジュール+PCなど)
→ものすごく簡単にまとめると
...
プログラミング+電子工作?
フィジカルコンピューティングは難しい?
• プログラミングはそれなりのスキルが必要
(例:ActionScript、C、C++、Javaなど)
• 電子工作にもそれなりのスキルが必要
(例:回路設計、実装、検証)
•...
プログラミング+電子工作?
フィジカルコンピューティングは難しい?
• 確かに習得するまでにはそれなりの努力が必要
• できあがった結果は直接的に人間の感覚に
訴えるものになる(はず)
プログラミング+電子工作?
最近では扱いやすいプラットホームが登場
• プログラミング
– Flash
– Processing
– Max/MSP
• 電子回路のスケッチ
– Gainer
– Arduino
– Phidgets
電子工作は大変?
• 誰でもはんだ付けくらいはやったことがある
• まずは必要最小限のこと(だけ)を覚えれば
スタートできる
– 電圧∼電流∼抵抗
– 回路図の読み方
– オームの法則など
– よく使う部品のシンボルと特徴
• 失敗しながら覚え...
フィジカルな世界とつなぐ方法
マイコンのみ(例: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;
prog...
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アレイ
写真撮影:高尾俊介
出力:振動モータ
写真撮影:高尾俊介
ワークショップ
HELLO!!フィジカルコンピューティング
• 日時:2007.12.22-23
• 場所:山口情報芸術センター
• 参加者:19名
• 言語:日本語
• 環境:Processing×Funnel×Gainer I/O
作例:Mountain Guitar
• 金箱淳一
• 音楽表現のためのギター型インタフェース
– 親しみやすさ
– 演奏の奥深さ
• 各種センサ+I/Oモジュール+PC
• IAMAS東京展「いまからだ」などで展示
• 学生CGコンテストなど...
作例:Mountain Guitar(スケッチ)
作例:Mountain Guitar(1号)
作例:Mountain Guitar(2号)
作例:Mountain Guitar(2号の製作中)
作例:Mountain Guitar(3号)
作例:Mountain Guitar(4号)
作例:Mountain Guitar(4号の製作中)
作例:Mountain Guitar(4号の配線)
作例:Mountain Guitar(5号)
作例:Mountain Guitar(5号の内部)
Funnelとは?:コンセプト
• 単純で透明
• スケッチ∼プロトタイプまで使える
• デザイナーとエンジニアの「共通言語」
FunnelとGainerの違い
• Gainer
– シンプルなドライバ的なもの
– Gainer I/Oと1:1対応
– 入門書がある
• Funnel
– フレームワーク的なもの
– ArduinoやXBeeも利用可能
– 入門書がない
Funnelとは?:関連
Sketching User Experiences
Getting the Design Right and the Right Design
Bill Buxton(Morgan Kaufmann Pub・2007...
Funnelとは?:関連
出典:Bill Buxton, Sketching User Experiences (2008)
Funnelの特徴
• 疑似コード風のコーディング
• 入出力をより簡単に扱うためのフィルタ
– ローパス、ハイパス(Convolution)
– 入力を設定した閾値で分割(SetPoint)
– スケーリング(Scaler)
– オシレータ(...
Funnelの構成
USB XBee
Dongle
Gainer
I/O Module
Arduino
(with Firmata)
USB XBee
Dongle
Funnel Server
ActionScript 3 Processing...
Arduino Duemilanove
写真:SparkFun Electronics
LilyPad Arduino
写真:SparkFun Electronics
Arduino Pro Mini
写真:SparkFun Electronics
Arduino ProtoShield
写真:SparkFun Electronics
Arduino XBee Shield
写真:SparkFun Electronics
FIO: Funnel I/O Module v1.3
FIO: Funnel I/O Module v1.3
FIO: Funnel I/O Module v1.3
+-
XIO: XBee I/O Board v1.0
XIO: XBee I/O Board v1.0
Funnel:今後の開発予定
ビルド009のリリースを近日中に予定
• I2Cデバイスのサポートを追加
• XBeeおよびFIOのサンプルとツールを追加
• バグ修正や細かな改良など
配布物一覧
品名 品番など 数
Gainer I/Oモジュール 1個
USBケーブル 1本
ブレッドボード SAD-01 1個
ジャンプワイヤ SPP-100 適量
抵抗器(橙橙茶金) 330Ω 2個
抵抗器(茶黒橙金) 10kΩ 1個
ボリュ...
電圧∼電流∼抵抗
電気の流れは水の流れのようなもの
• 電圧
– 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 − ...
例:LEDを点灯させてみる
参考:ジャンプワイヤの色分け
• 赤:電源の+側(+5V)
• 黒:電源のー側(GND)
• 白・青・黄:センサとの接続など
例:LEDを点灯させてみる(NG)
の方向が違う
ワイヤをさす位置が違う
にささっていない
実習:LEDをスイッチでオン/オフさせてみる
実習:LEDをスイッチでオン/オフさせてみる
7
Processing入門
• 基本的な操作方法
• 用語
• 簡単なプログラム
参考書籍
Built with Processing [改訂版]
デザイン/アートのためのプログラミング入門
前川 峻志+田中 孝太郎(ビー・エヌ・エヌ新社・2008年)
Processing入門:基本的な操作方法
• 起動
• サンプルを開く
• 実行
• 終了
Processing入門:用語
• Processing Development Environment
• Sketch
• Display Window
Processing入門:簡単なプログラム1
コード例 1 Hello World!
println("Hello World!");
Processing入門:簡単なプログラム2
コード例 2 ウィンドウを表示してみる
// 最初に1回だけ実行される
void setup() {
// Display Windowのサイズ(横、縦)
size(200, 200);
}
// ...
Processing入門:簡単なプログラム3
コード例 3 直線を描画してみる
void setup() {
size(200, 200);
}
void draw() {
background(0);
stroke(255);
line(0,...
Processing入門:簡単なプログラム4
コード例 4 マウスの状態を読み取る
void setup() {
size(200, 200);
}
void draw() {
if (mousePressed) {
background(25...
Processing入門:簡単なプログラム5
コード例 5 マウスイベントを扱う
int brightness = 0;
void setup() {
...
void draw() {
background(brightness);
}
vo...
Funnel入門
• 出力をコントロールしてみる
– マウスでI/Oモジュール上のLEDを制御
– I/Oモジュール上のボタンでLEDを制御
• 入力を扱ってみる
– ボリューム
– CdSセル
Funnel入門:Gainer I/Oの出力について
出力には2種類ある
• デジタル出力(dout:0か1かの2段階)
– LED、モータなど
– 状態がシンプルで取扱が簡単
• アナログ出力(aout:0∼1の256段階)*2
– LED、...
Funnel入門:マウスによる制御
コード例 6 マウスでI/Oモジュール上のLEDを制御( 01 ControlLEDByMouse)
import processing.funnel.*;
Gainer gainer;
void setup...
Funnel入門:マウスによる制御
コード例 7 マウスでI/Oモジュール上のLEDを制御( 01 ControlLEDByMouse続き)
void mousePressed()
{
gainer.led().value = 1.0;
}
v...
Funnel入門:ボタンによる制御
コード例 8 ボタンでI/Oモジュール上のLEDを制御( 02 ControlLEDByButton)
import processing.funnel.*;
Gainer gainer;
void setu...
Funnel入門:ボタンによる制御
コード例 9 ボタンでI/Oモジュール上のLEDを制御( 02 ControlLEDByButton続き)
void gainerButtonEvent(boolean pressed)
{
if (pres...
Funnel入門:aout 0にLEDを接続
Funnel入門:aout 0にLEDを接続
Funnel入門:アナログ出力の制御
コード例 10 ボタンでaout 0に接続したLEDを制御
// _02_ControlLEDByButtonの以下の部分だけを変更する
void gainerButtonEvent(boolean pre...
Funnel入門:Gainer I/Oの入力について
入力には2種類ある
• デジタル入力(din:0か1かの2段階)
– スイッチなど
– 状態がシンプルで取扱が簡単
• アナログ入力(ain:0∼1の256段階)
– 出力電圧が変化するセン...
Funnel入門:ain 0にボリュームを接続
Funnel入門:ain 0にボリュームを接続
Funnel入門:ain 0にボリュームを接続
• 03 SimpleScopeを開いて実行
• ボリュームを回して変化を確認
• チャンネル数を2に増やす
• ain 1が不安定なのはなぜ?
• どうしてボリュームを回すと電圧が変わるの?
Funnel入門:抵抗分圧
Funnel入門:抵抗分圧
Funnel入門:サンプルをボリュームで制御
• 04 Treeを開く*3
• 変更を加えるために別名で保存
• Funnelを使うための準備
• mouseXをain 0の値で置き換える
*3 Topics/Fractals and L-Sy...
Funnel入門:ain 0に光センサを接続
Funnel入門:ain 0に光センサを接続
Funnel入門:ain 0に光センサを接続
• 改変した 04 Treeを再度実行
→ボリュームの場合と何かが違う?
• 03 SimpleScopeで入力の範囲を調べる
• Scalerをフィルタとして追加する
• 意図した通りになったかど...
Funnel入門:Scalerの追加
コード例 11 Scalerを追加した 05 Tree
import processing.funnel.*;
Gainer gainer;
void setup()
{
size(400, 400, P3...
Funnel応用:ainに加速度センサを接続
Funnel応用:ainに加速度センサを接続
Funnel応用:ainに加速度センサを接続
• 03 SimpleScopeを開く
• 表示するチャンネル数を3に増やす
• x, y, zそれぞれの軸の動きを確認
– 傾けてみる
– 振ってみる
Funnel応用:加速度センサの用途
• 動きの検出
• 傾きの検出
→なぜ加速度センサで傾きが検出できるの?
Funnel応用:傾きを検出する原理
Funnel応用:センサの出力から角度を求める
• フィルタで細かい動きを取り除く
• 03 SimpleScopeで変化幅を確認する
• -1から+1までにスケーリングする
• 逆sin関数を用いて角度に変換する
Funnel応用:加速度センサを使ってみる
• 05 RGBCube Mouseを開く*4
• マウスを動かして動作を確認する
• マウス操作を加速度センサに置き換える
*4 3D and OpenGL/Form/RGBCubeを一部改変
IAMAS Gangu Project - Work in Progress
“Sketching in Hardware”ワークショップ
小林茂(IAMAS:岐阜県立国際情報科学芸術アカデミー)
2008 年 12 月 27 日:AXIS G...
Prochain SlideShare
Chargement dans…5
×

Slides AXIS WS2

1 540 vues

Publié le

Slides for the workshop at AXIS Gallery on December 27th

Publié dans : Formation
  • Soyez le premier à commenter

Slides AXIS WS2

  1. 1. IAMAS Gangu Project - Work in Progress “Sketching in Hardware”ワークショップ 小林茂(IAMAS:岐阜県立国際情報科学芸術アカデミー) 2008 年 12 月 27 日:AXIS Gallery
  2. 2. 自己紹介 • 1970年名古屋市生まれ • 電子楽器メーカー(1993∼2004) – サウンドデザイナー – 技術研究所 – ソフトウェアエンジニア • IAMAS(2004∼) – フィジカルコンピューティング – インタラクションデザイン
  3. 3. 自己紹介:ツールキット開発の動機 • ハードは気軽にスケッチできない →ソフトが動いた段階で気がついても遅い • 実際に動くまでは想像で進めるしかない →建設的なディスカッションが行われにくい • デザイナーとエンジニアの共通言語がない →コミュニケーション上の齟齬が多発する →インタラクションデザインのプロセスで使える  ツールキットが必要なのでは?
  4. 4. 自己紹介:書籍(執筆) Make日本語版Volume 04 特集「Sketchーハードウェアでスケッチする」 オライリー・ジャパン編(オライリー・ジャパン・2008年)
  5. 5. 自己紹介:書籍(執筆) Make日本語版Volume 05 「Sketch / Prototype―素材として使える電子回路」 オライリー・ジャパン編(オライリー・ジャパン・2008年)
  6. 6. 自己紹介:書籍(共著) +GAINER GainerBook Labo+くるくる研究室(九天社・2007 年/オーム社・2008 年)
  7. 7. 自己紹介:書籍(監修) Making Things Talk Arduinoで作る「会話」するモノたち Tom Igoe 著・小林 茂 監訳・水原 文 翻訳(オライリー・2008年)
  8. 8. 本日の予定 • イントロダクション – フィジカルコンピューティングとは – ツールキットの紹介(Gainer) – 事例紹介 – ツールキットの紹介(Funnel) • 実習 – 実習1:電子回路の基礎知識 – 実習2:Funnel入門 – 実習3:Funnel応用
  9. 9. フィジカルコンピューティングとは? • ニューヨーク大学のITP*1 でTom Igoeらが 中心となって教えているコースの名前 • インタラクションデザインを教えるための 方法の1つ • コンピュータが理解したり反応できる人間の フィジカルな表現の幅をいかに増やすか • デザインやアート教育の1つの分野として定着 *1 Interactive Telecommunications Program
  10. 10. ITPの紹介 ITP Winter Show 2008 • ITPで学ぶ学生の展覧会で毎年春冬2回開催 • 12月17日から18日まで開催 • http://itp.nyu.edu/shows/winter2008/
  11. 11. フィジカルコンピューティングとは? 一般的なPCから見た人間は? • キー情報(ASCIIキーボードから) • マウス情報(1つのマウスから)
  12. 12. Alto (1973) 出典:http://toastytech.com/guis/
  13. 13. フィジカルコンピューティングとは? • PC+標準入出力デバイスの世界で実現できる インタラクションには限界がある – 人間が直接触れて感じることができない – PCのパラダイムに縛られてしまう • 統一されたプラットホームならではの良さも 勿論ある (例:Flashなどによるウェブ上での表現)
  14. 14. フィジカルコンピューティングとは? • 物理的な入出力を活用することによって 表現力は拡大する(例:Nintendo Wii) • 電子楽器などではずいぶん昔からのテーマ • iPhoneが注目される理由とも大きく関連 • フィジカルなインタラクションデザインの メソッド確立はまだまだこれから?
  15. 15. フィジカルコンピューティングの構成要素 • センサ (例:光、圧力、音、温度、加速度など) • アクチュエータ (例:LED、モータ、ソレノイドなど) • プロセッサ (例:マイコン、I/Oモジュール+PCなど) →ものすごく簡単にまとめると  プログラミング+電子工作
  16. 16. プログラミング+電子工作? フィジカルコンピューティングは難しい? • プログラミングはそれなりのスキルが必要 (例:ActionScript、C、C++、Javaなど) • 電子工作にもそれなりのスキルが必要 (例:回路設計、実装、検証) • 両方のスキルが必要ということは…
  17. 17. プログラミング+電子工作? フィジカルコンピューティングは難しい? • 確かに習得するまでにはそれなりの努力が必要 • できあがった結果は直接的に人間の感覚に 訴えるものになる(はず)
  18. 18. プログラミング+電子工作? 最近では扱いやすいプラットホームが登場 • プログラミング – Flash – Processing – Max/MSP • 電子回路のスケッチ – Gainer – Arduino – Phidgets
  19. 19. 電子工作は大変? • 誰でもはんだ付けくらいはやったことがある • まずは必要最小限のこと(だけ)を覚えれば スタートできる – 電圧∼電流∼抵抗 – 回路図の読み方 – オームの法則など – よく使う部品のシンボルと特徴 • 失敗しながら覚えていけばいい • でもUNDOはきかない(=人生と一緒)
  20. 20. フィジカルな世界とつなぐ方法 マイコンのみ(例:PIC、AVR) a b c d A B C D マイコン microcontroller program a0]=ain.o; aout.1 = 255;
  21. 21. フィジカルな世界とつなぐ方法 マイコン+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;
  22. 22. Arduino I/Oボード 写真:SparkFun Electronics
  23. 23. フィジカルな世界とつなぐ方法 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;
  24. 24. Phidgets
  25. 25. Gainerとは? オープンソース・ハード&ソフトのツールキット • I/Oモジュール • ソフトウェア・ライブラリ – ActionScript 2/3 – Processing – Max/MSP
  26. 26. Gainer I/Oモジュール 写真撮影:高尾俊介
  27. 27. I/Oモジュール+ブレッドボード 写真撮影:高尾俊介
  28. 28. さまざまな電子部品 写真撮影:高尾俊介
  29. 29. I/Oモジュール+ブレッドボード+部品 写真撮影:高尾俊介
  30. 30. 入力:曲げ 写真撮影:高尾俊介
  31. 31. 出力:LEDアレイ 写真撮影:高尾俊介
  32. 32. 出力:振動モータ 写真撮影:高尾俊介
  33. 33. ワークショップ HELLO!!フィジカルコンピューティング • 日時:2007.12.22-23 • 場所:山口情報芸術センター • 参加者:19名 • 言語:日本語 • 環境:Processing×Funnel×Gainer I/O
  34. 34. 作例:Mountain Guitar • 金箱淳一 • 音楽表現のためのギター型インタフェース – 親しみやすさ – 演奏の奥深さ • 各種センサ+I/Oモジュール+PC • IAMAS東京展「いまからだ」などで展示 • 学生CGコンテストなど複数で受賞
  35. 35. 作例:Mountain Guitar(スケッチ)
  36. 36. 作例:Mountain Guitar(1号)
  37. 37. 作例:Mountain Guitar(2号)
  38. 38. 作例:Mountain Guitar(2号の製作中)
  39. 39. 作例:Mountain Guitar(3号)
  40. 40. 作例:Mountain Guitar(4号)
  41. 41. 作例:Mountain Guitar(4号の製作中)
  42. 42. 作例:Mountain Guitar(4号の配線)
  43. 43. 作例:Mountain Guitar(5号)
  44. 44. 作例:Mountain Guitar(5号の内部)
  45. 45. Funnelとは?:コンセプト • 単純で透明 • スケッチ∼プロトタイプまで使える • デザイナーとエンジニアの「共通言語」
  46. 46. FunnelとGainerの違い • Gainer – シンプルなドライバ的なもの – Gainer I/Oと1:1対応 – 入門書がある • Funnel – フレームワーク的なもの – ArduinoやXBeeも利用可能 – 入門書がない
  47. 47. Funnelとは?:関連 Sketching User Experiences Getting the Design Right and the Right Design Bill Buxton(Morgan Kaufmann Pub・2007年)
  48. 48. Funnelとは?:関連 出典:Bill Buxton, Sketching User Experiences (2008)
  49. 49. Funnelの特徴 • 疑似コード風のコーディング • 入出力をより簡単に扱うためのフィルタ – ローパス、ハイパス(Convolution) – 入力を設定した閾値で分割(SetPoint) – スケーリング(Scaler) – オシレータ(Osc) • 複数のI/Oモジュールに対応
  50. 50. Funnelの構成 USB XBee Dongle Gainer I/O Module Arduino (with Firmata) USB XBee Dongle Funnel Server ActionScript 3 Processing Max/MSP etc. Ruby AS3 Library Processing Library OSC LibrariesRuby Library Funnel I/O Digi International XBee Funnel I/O Digi International XBee
  51. 51. Arduino Duemilanove 写真:SparkFun Electronics
  52. 52. LilyPad Arduino 写真:SparkFun Electronics
  53. 53. Arduino Pro Mini 写真:SparkFun Electronics
  54. 54. Arduino ProtoShield 写真:SparkFun Electronics
  55. 55. Arduino XBee Shield 写真:SparkFun Electronics
  56. 56. FIO: Funnel I/O Module v1.3
  57. 57. FIO: Funnel I/O Module v1.3
  58. 58. FIO: Funnel I/O Module v1.3 +-
  59. 59. XIO: XBee I/O Board v1.0
  60. 60. XIO: XBee I/O Board v1.0
  61. 61. Funnel:今後の開発予定 ビルド009のリリースを近日中に予定 • I2Cデバイスのサポートを追加 • XBeeおよびFIOのサンプルとツールを追加 • バグ修正や細かな改良など
  62. 62. 配布物一覧 品名 品番など 数 Gainer I/Oモジュール 1個 USBケーブル 1本 ブレッドボード SAD-01 1個 ジャンプワイヤ SPP-100 適量 抵抗器(橙橙茶金) 330Ω 2個 抵抗器(茶黒橙金) 10kΩ 1個 ボリューム 10kΩ(Bカーブ) 1個 CdSセル 5mm 1個 LED 白色 1個 加速度センサ KMX52-1050 1個 タクトスイッチ 6mm角 1個
  63. 63. 電圧∼電流∼抵抗 電気の流れは水の流れのようなもの • 電圧 – 2点間の高度(電位)の違い – 基準点が必要(GND) – 単位はボルト(V)
  64. 64. 電圧のイメージ図 低高
  65. 65. 電圧∼電流∼抵抗 電気の流れは水の流れのようなもの • 電流 – 電圧の高いところから低いところに流れる – 単位はアンペア(A)
  66. 66. 電流のイメージ図 少多
  67. 67. 電圧∼電流∼抵抗 電気の流れは水の流れのようなもの • 抵抗 – 電流の流れにくさ – 単位はオーム(Ω)
  68. 68. 抵抗のイメージ図 低 高
  69. 69. 電圧∼電流∼抵抗 よく出てくる補助単位の例 • 1,000倍を表すキロ(例:1kΩ) • 1,000,000倍を表すメガ(例:1MΩ) • 1 1,000 を表すミリ(例:1mA) • 1 1,000,000 を表すマイクロ(例:50µA)
  70. 70. 回路図ってなに?
  71. 71. 回路図ってなに? 回路図は電子回路の設計図 • シンボルで表した電子部品の接続を示したもの • シンボルに若干のバリエーションはあるが、 基本的には全世界共通
  72. 72. 電源の回路図シンボル +5V GND
  73. 73. スイッチの回路図シンボルと部品例
  74. 74. 抵抗器の回路図シンボルと部品例
  75. 75. 可変抵抗器の回路図シンボルと部品例
  76. 76. LEDの回路図シンボルと部品例
  77. 77. ブレッドボードってなに? • 部品の足を穴にさすことで電子回路を形成 • はんだ付け不要 – 部品を再利用できる – 回路を組み間違えてもやり直しできる – 耐久性にはやや注意が必要
  78. 78. ブレッドボードの構造 • 横方向のブロックは背面で接続 • 縦方向のブロックは未接続 • 電源用のエリアは専用に用意されている
  79. 79. 実習:LEDを点灯させてみよう
  80. 80. LEDを点灯させてみよう どうして抵抗器が必要なの? • LEDには適切な電流の範囲がある (例:20mA) • その範囲を超えると簡単に焼き切れてしまう • 適切な値の抵抗器を用いて電流を制限する • 適切な抵抗値はどうやって求める? →オームの法則を用いて計算する ※抵抗器で電流を制限する方法が全てではありません
  81. 81. オームの法則 電圧∼電流∼抵抗の関係 V = I × R • Vは電圧で単位はV(ボルト) • Iは電流で単位はA(アンペア) • Rは抵抗で単位はΩ(オーム)
  82. 82. オームの法則 電源電圧 − LEDの電圧 = LEDに流したい電流 × R Rを求めるためにこの式を変形 R = 電源電圧 − LEDの電圧 LEDに流したい電流 例:電源電圧が5.0V、LEDの電圧が1.8V、電流が10mA R = 5 − 1.8 0.01 = 3.2 0.01 = ? ※実際には計算結果に近い値の抵抗器を用いる
  83. 83. 例:LEDを点灯させてみる
  84. 84. 参考:ジャンプワイヤの色分け • 赤:電源の+側(+5V) • 黒:電源のー側(GND) • 白・青・黄:センサとの接続など
  85. 85. 例:LEDを点灯させてみる(NG) の方向が違う ワイヤをさす位置が違う にささっていない
  86. 86. 実習:LEDをスイッチでオン/オフさせてみる
  87. 87. 実習:LEDをスイッチでオン/オフさせてみる 7
  88. 88. Processing入門 • 基本的な操作方法 • 用語 • 簡単なプログラム
  89. 89. 参考書籍 Built with Processing [改訂版] デザイン/アートのためのプログラミング入門 前川 峻志+田中 孝太郎(ビー・エヌ・エヌ新社・2008年)
  90. 90. Processing入門:基本的な操作方法 • 起動 • サンプルを開く • 実行 • 終了
  91. 91. Processing入門:用語 • Processing Development Environment • Sketch • Display Window
  92. 92. Processing入門:簡単なプログラム1 コード例 1 Hello World! println("Hello World!");
  93. 93. Processing入門:簡単なプログラム2 コード例 2 ウィンドウを表示してみる // 最初に1回だけ実行される void setup() { // Display Windowのサイズ(横、縦) size(200, 200); } // 毎フレームごとに実行される void draw() { // 背景の色(赤、緑、青) background(255, 255, 255); }
  94. 94. Processing入門:簡単なプログラム3 コード例 3 直線を描画してみる void setup() { size(200, 200); } void draw() { background(0); stroke(255); line(0, 0, 199, 199); }
  95. 95. Processing入門:簡単なプログラム4 コード例 4 マウスの状態を読み取る void setup() { size(200, 200); } void draw() { if (mousePressed) { background(255); } else { background(0); } }
  96. 96. Processing入門:簡単なプログラム5 コード例 5 マウスイベントを扱う int brightness = 0; void setup() { ... void draw() { background(brightness); } void mousePressed() { brightness = 255; } void mouseReleased() { brightness = 0; }
  97. 97. Funnel入門 • 出力をコントロールしてみる – マウスでI/Oモジュール上のLEDを制御 – I/Oモジュール上のボタンでLEDを制御 • 入力を扱ってみる – ボリューム – CdSセル
  98. 98. Funnel入門:Gainer I/Oの出力について 出力には2種類ある • デジタル出力(dout:0か1かの2段階) – LED、モータなど – 状態がシンプルで取扱が簡単 • アナログ出力(aout:0∼1の256段階)*2 – LED、モータなど – 連続的な変化を扱うことができる *2 実際にはPWMによる疑似アナログ出力
  99. 99. Funnel入門:マウスによる制御 コード例 6 マウスでI/Oモジュール上のLEDを制御( 01 ControlLEDByMouse) 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); }
  100. 100. Funnel入門:マウスによる制御 コード例 7 マウスでI/Oモジュール上のLEDを制御( 01 ControlLEDByMouse続き) void mousePressed() { gainer.led().value = 1.0; } void mouseReleased() { gainer.led().value = 0.0; }
  101. 101. Funnel入門:ボタンによる制御 コード例 8 ボタンでI/Oモジュール上のLEDを制御( 02 ControlLEDByButton) 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); }
  102. 102. Funnel入門:ボタンによる制御 コード例 9 ボタンでI/Oモジュール上のLEDを制御( 02 ControlLEDByButton続き) void gainerButtonEvent(boolean pressed) { if (pressed) { gainer.led().value = 1.0; } else { gainer.led().value = 0.0; } }
  103. 103. Funnel入門:aout 0にLEDを接続
  104. 104. Funnel入門:aout 0にLEDを接続
  105. 105. Funnel入門:アナログ出力の制御 コード例 10 ボタンでaout 0に接続したLEDを制御 // _02_ControlLEDByButtonの以下の部分だけを変更する void gainerButtonEvent(boolean pressed) { if (pressed) { gainer.analogOutput(0).value = 1.0; } else { gainer.analogOutput(0).value = 0.0; } }
  106. 106. Funnel入門:Gainer I/Oの入力について 入力には2種類ある • デジタル入力(din:0か1かの2段階) – スイッチなど – 状態がシンプルで取扱が簡単 • アナログ入力(ain:0∼1の256段階) – 出力電圧が変化するセンサなど – 連続変化を扱うことができる
  107. 107. Funnel入門:ain 0にボリュームを接続
  108. 108. Funnel入門:ain 0にボリュームを接続
  109. 109. Funnel入門:ain 0にボリュームを接続 • 03 SimpleScopeを開いて実行 • ボリュームを回して変化を確認 • チャンネル数を2に増やす • ain 1が不安定なのはなぜ? • どうしてボリュームを回すと電圧が変わるの?
  110. 110. Funnel入門:抵抗分圧
  111. 111. Funnel入門:抵抗分圧
  112. 112. Funnel入門:サンプルをボリュームで制御 • 04 Treeを開く*3 • 変更を加えるために別名で保存 • Funnelを使うための準備 • mouseXをain 0の値で置き換える *3 Topics/Fractals and L-Systems/Treeと同じものです
  113. 113. Funnel入門:ain 0に光センサを接続
  114. 114. Funnel入門:ain 0に光センサを接続
  115. 115. Funnel入門:ain 0に光センサを接続 • 改変した 04 Treeを再度実行 →ボリュームの場合と何かが違う? • 03 SimpleScopeで入力の範囲を調べる • Scalerをフィルタとして追加する • 意図した通りになったかどうか確認
  116. 116. Funnel入門:Scalerの追加 コード例 11 Scalerを追加した 05 Tree import processing.funnel.*; Gainer gainer; void setup() { size(400, 400, P3D); ... gainer = new Gainer(this, Gainer.MODE1); Filter f[] = { new Scaler(0.3, 0.9, 0, 1, Scaler.LINEAR, true) }; gainer.analogInput(0).filters = f; }
  117. 117. Funnel応用:ainに加速度センサを接続
  118. 118. Funnel応用:ainに加速度センサを接続
  119. 119. Funnel応用:ainに加速度センサを接続 • 03 SimpleScopeを開く • 表示するチャンネル数を3に増やす • x, y, zそれぞれの軸の動きを確認 – 傾けてみる – 振ってみる
  120. 120. Funnel応用:加速度センサの用途 • 動きの検出 • 傾きの検出 →なぜ加速度センサで傾きが検出できるの?
  121. 121. Funnel応用:傾きを検出する原理
  122. 122. Funnel応用:センサの出力から角度を求める • フィルタで細かい動きを取り除く • 03 SimpleScopeで変化幅を確認する • -1から+1までにスケーリングする • 逆sin関数を用いて角度に変換する
  123. 123. Funnel応用:加速度センサを使ってみる • 05 RGBCube Mouseを開く*4 • マウスを動かして動作を確認する • マウス操作を加速度センサに置き換える *4 3D and OpenGL/Form/RGBCubeを一部改変
  124. 124. IAMAS Gangu Project - Work in Progress “Sketching in Hardware”ワークショップ 小林茂(IAMAS:岐阜県立国際情報科学芸術アカデミー) 2008 年 12 月 27 日:AXIS Gallery

×