Hardware Sketching Workshop 2013

2013年4月30日∼5月2日／情報科学芸術大学院大学［IAMAS］新校舎1階ギャラリー
小林茂（情報科学芸術大学院大学［IAMAS］准教授）
Extended Motifwork 2013
Make: Hardware Sketching #1

Photography: Beth and Christian
http://www.ﬂickr.com/photos/six27/245969277/

Extended Motifwork 2013 ¦ Make: Hardware Sketching
イントロダクション
IDの時代におけるプロトタイピング
http://www.archiviosacchi.it/press_room/より引用
Giovanni Sacchi（1913∼2005年）

IDの時代におけるプロトタイピング
http://www.archiviosacchi.it/press_room/より引用

IxDの時代におけるプロトタイピング
• 現代における「model making」
• Giovanni Sacchiがかつて果たした役割
• 複数の職能の間での共通言語として
• インタラクションデザインにおいては「形」だけでは不十分
• もはや「形態は機能に従う」（form follows function）
は成り立たない
• プログラミングや電子回路が不可欠
☞フィジカルコンピューティングがヒントに

• ニューヨーク大学のITP*1から広まった、インタラクション
デザインを教えるためのメソッドの一つ
• コンピュータの原理原則を学び、既存のPCにとらわれずに
人間とコンピュータの関係を考え直す
• プロトタイピングを繰返しながら身体感覚として共通言語を
身につける
フィジカルコンピューティング
*1 Tisch School of Arts, Interactive Telecommunications Program

Bill Buxtonの「Design Funnel」
• Sketching User Experiences (2007)
Sketching User Experiencesより抜粋したものを日本語化（138ページ）
投資
判定基準重み
デザインユーザビリティ
時間スケッチ
プロトタイプ

スケッチとプロトタイプの違い
スケッチプロトタイプ
提案（suggest）記述（describe）
探求（explore）精錬（reﬁne）
質問（question）回答（answer）
提案（propose）検証（test）
曖昧（noncommittal）表現（depiction）
Sketching User Experiencesより抜粋（140ページ）

スケッチとは？
• 素早く
• タイムリーに
• 安く
• 捨てられる材料で
• たくさん
• 必要最小限のディテールで
• 確認ではなく提案と探索をする
Sketching User Experiencesより抜粋（136ページ）

ハードウェアスケッチの例
Hardware sketching examples

ハードウェアスケッチ
• littleBits coﬀeemaker
https://vimeo.com/1389390
• littleBits
http://littlebits.cc

• 大学院修士1年生
1st year students of the master course
• プログラミングの経験は少し
She had little programming skills
• 電子工作の経験はゼロ
She had no electronics skills
• 3D CADの経験はゼロ
She had no 3D CAD skills
• 製作期間はスキル習得も含めて六カ月
6 months project including acquiring skills
アクション！ゆびにんぎょう

IAMASにおける研究プロジェクト // Research Projects at IAMAS
リサーチ // Research

アイデアスケッチ // Idea Sketching
アクション！ゆびにんぎょう（制作：笠原友美） / Action! Finger Puppet (Tomomi Kasahara)

まず、サインペンを使用してアイディアの全体を描い
ていきます。うまく描く必要はありません、重要なの
はアイデアを伝えることです。
全体を描いた後は、黒のマーカで全体を縁取ります。
これにより遠くからでも、しっかりと形を見ることが
出来ます。
次に特徴となる部分や、機能がある部分に赤色のマー
カーで色をつけます。どこが重要なのかがすぐわかる
ようになります。
最後にグレーのマーカーで陰や質感などを描きます。
立体感や素材の特徴によりアイディアのイメージがふ
くらみます。
1 2
3 4
スケッチのルール // Rules of Sketching

並べ替えと投票 // Sorting and Voting

ダーティモデリング // Dirty Modeling

ビデオスケッチ // Video Sketching

ハードウェアスケッチ // Hardware Sketching

プロトタイプ制作 // Making Prototypes

アイデアスケッチ / The idea sketch

最初のプロトタイプ / The ﬁrst prototype

最初のプロトタイプの外装 / The shell of the 1st prototype (built with 3d printing)

最初のプロトタイプの基板 / The PCB of the 1st prototype
Miga NanoMuscle purchased from SparkFun

Comparison between prototypes from the 1st (right) to 4th (left) and an official domino piece

LilyPad Arduino
a derivative a derivative
Arduino Fio Esper Domino (4th)

http://www.diginfo.tv/v/12-0047-r-en.php

ものづくり＝なぜ？なにを？どうやって？
What? How?Why?Making Things

ワークショップ：基本編
ワークショップの流れ
• セットアップ
• Arduinoを使ってみる
• 電子回路の基礎知識
• 基本的な入出力

今回使用する主な部品

Arduinoとは？
• フィジカルコンピューティングのためのツールキット
• 電子回路をプロトタイピングするためのオープンソースの
プラットフォームで、柔軟で簡単に使えるハードウェアと
ソフトウェアで構成
• アーティスト、デザイナ、ホビイスト、そして
インタラクティブなオブジェクトや環境をつくることに
興味がある全ての人が対象

Arduinoを構成する3つの要素
• Arduinoボード
• ATMega328P（16MHz）を搭載
• USB
• オープンソース（さまざまなバリエーションと互換機）
• Arduino IDE
• Windows、Mac OS X、Linux上で動作
• オープンソース
• デバッガはない
• Arduino言語
• C/C++をベースにしたプログラミング言語

Arduinoの流儀
デザインについて語ることよりも作ることのほうがArduino の哲学に適っ
ています。良いプロトタイプを作るために、より速く、よりパワフルな手法
を探索し続けることが重要です。自分の手を使って考えながら、いろいろな
テクニックを試し、発展させましょう。
Massimo Banzi（「Arduinoをはじめよう」著者）
Massimo Banzi著「Arduinoをはじめよう」003ページより引用

Arduinoの流儀
• プロトタイピング
• いじくりまわす
• パッチング
• サーキットベンディング
• キーボードハック
• ジャンク大好き！
• オモチャをハック
• コラボレーション
Massimo Banzi著「Arduinoをはじめよう」004∼014ページより引用

Tinkering（いじくりまわす）
Massimo Banzi著「Arduinoをはじめよう」005ページより引用

Arduinoボード
グラウンド
パワーインジケータ
+3.3V
電源の＋
+5V
グラウンド×2
アナログ入力×6
デジタル入出力×14
外部電源

Arduino IDE
Verify
スケッチがコンパイルできるか確認する
New
新しいスケッチを生成する
Open
サンプルや既存のスケッチを開く
Save
現在開いているスケッチを保存する
Serial Monitor
シリアルモニタを開く
Upload
スケッチを Arduino ボードにアップロードする
ツールバー
タブ
テキストエディタ
メッセージエリア
テキストエリア

Arduinoの動作確認
• File→Examples→Digital→Blinkを開く
• Uploadボタンを押してアップロード
• LEDが点滅することを確認

電子回路の基礎知識
• 基本用語
• 電圧：2点間の電位差、単位はV（ボルト）
• 電流：流れる電気の量、単位はA（アンペア）
• 抵抗：電気の流れにくさ、単位はΩ（オーム）
• 最初は水の流れに例えて理解することができる
• 電圧→水圧
• 電流→水流

電圧の概念図
電位差
電位A
電位B
グラウンド（GND）

オームの法則
多少
←同じ圧力→
←同じ量→
←圧力低 ←圧力高

ブレッドボード

LEDをつないでみる

抵抗器ありでLEDをつなぐ
330Ω

抵抗器ありでLEDをつなぐ

オームの法則ふたたび
LEDの順電圧
抵抗器にかかる電圧
330Ω

オームの法則ふたたび
多少
←同じ圧力→
←同じ量→
←圧力低 ←圧力高

オームの法則を用いて抵抗値を計算
E（電圧） = I（電流） R（抵抗）☜オームの法則を式で表したもの
電源電圧 - LEDにかかる電圧 = LEDに流れる電流抵抗
↓抵抗を求めるために変形
抵抗 = （電源電圧 - LEDにかかる電圧） LEDに流れる電流
↓単位を揃えて実際の値を代入
抵抗 = （5 - 1.8） 0.01 = 3.2 0.01 =320
↓最も近い値の抵抗器を選択する
330Ω
※LEDに流れる電流を制限する方法は抵抗器だけではない
LEDの順電圧
抵抗器にかかる電圧
330Ω

ArduinoでHello World!
void setup() {
// initialize the digital pin as an output.
// Pin 13 has an LED connected on most Arduino boards:
pinMode(13, OUTPUT);
}
void loop() {
digitalWrite(13, HIGH); // set the LED on
delay(1000); // wait for a second
digitalWrite(13, LOW); // set the LED off
}

点滅の間隔を変えてみよう
void setup() {
}
void loop() {
}

void setup() {
}
void loop() {
}

アナログ出力（PWM）
330Ω

アナログ出力（PWM）

アナログ出力（PWM）：1.Basics/Fade
int brightness = 0;
int fadeAmount = 5;
void setup() {
pinMode(9, OUTPUT);
}
void loop() {
// set the brightness of pin 9:
analogWrite(9, brightness);
brightness = brightness + fadeAmount;
if (brightness == 0 || brightness == 255) {
fadeAmount = -fadeAmount ;
}
delay(30);
}

PWM（Pulse Width Modulation）
0
5
電圧
時間
0
5
電圧
時間

PWMを利用できるデジタルピン
グラウンド
パワーインジケータ
+3.3V
電源の＋
+5V
グラウンド×2
アナログ入力×6
デジタル入出力×14
外部電源

デジタル入力（プルダウン）
330Ω
10kΩ

デジタル入力（プルダウン）

デジタル入力：2.Digital/Button
const int buttonPin = 2;
const int ledPin = 13;
int buttonState = 0;
void setup() {
pinMode(ledPin, OUTPUT);
pinMode(buttonPin, INPUT);
}
void loop(){
// read the state of the pushbutton value:
buttonState = digitalRead(buttonPin);
if (buttonState == HIGH) {
digitalWrite(ledPin, HIGH);
}
else {
digitalWrite(ledPin, LOW);
}
}

デジタル入力（プルアップ）
330Ω
10kΩ

デジタル入力（プルアップ）

デジタル出力（シンク）
330Ω
10kΩ

デジタル出力（シンク）

レシピ1・24：明るさに応じてLEDを制御
330Ω
10kΩ

アナログ入力：自分でコードを書いてみる
const int sensorPin = A0;
void setup() {
Serial.begin(9600);
}
void loop() {
// read the value from the sensor:
int sensorValue = analogRead(sensorPin);
// send the value to the PC via serial
Serial.println(sensorValue);
// wait for a little bit
delay(100);
}

抵抗分圧

// 閾値
const int threshold = 511;
// ヒステリシス
const int hysteresis = 102;
const int sensorPin = 0;
// 前回の状態
boolean wasBright = true;
void setup() {
// LEDを消灯
}

void loop() {
int brightness = analogRead(sensorPin);
// 現在の状態（初期値には前回の値を代入）
boolean isBright = wasBright;
if (brightness > (threshold + hysteresis)) {
// 現在の明るさが閾値＋ヒステリシスよりも大きければ明るいと判断
isBright = true;
}
else if (brightness < (threshold - hysteresis)) {
// 現在の明るさが閾値ーヒステリシスよりも小さければ暗いと判断
isBright = false;
}
if (!wasBright && isBright) {
// 暗い状態から明るい状態に変化したらLEDを消灯
}
else if (wasBright && !isBright) {
// 明るい状態から暗い状態に変化したらLEDを点灯
}
// 全回の値として今回の値をセット
wasBright = isBright;
}

PC連携：4.Communication/Dimmer
1. ウェブブラウザで次のURLにアクセス
http://processing.org/download/
2. 使用しているプラットフォームに対応したパッケージを
ダウンロード
3. デスクトップなどに展開して起動

void setup() {
// initialize the serial communication:
Serial.begin(9600);
}
void loop() {
byte brightness;
// check if data has been sent from the computer:
if (Serial.available()) {
// read the most recent byte (0-255)
brightness = Serial.read();
// set the brightness of the LED:
analogWrite(ledPin, brightness);
}
}

import processing.serial.*;
Serial port;
void setup() {
size(256, 150);
// Print available serial ports
println(Serial.list());
port = new Serial(this, "COM1", 9600);
}
void draw() {
// draw a gradient from black to white
...
// send the current X-position of the mouse
port.write(mouseX);
}

ワークショップ：応用編
デジタル入力の変化をイベントにする（1/2）
int buttonState = 0;
// 前回のボタンの状態を保持するための変数
int lastButtonState = LOW;
// 現在のLEDの状態を保持するための変数
boolean ledIsOn = false;
void setup() {
}

デジタル入力の変化をイベントにする（2/2）
void loop() {
// ボタンの状態を読み取る
buttonState = digitalRead(buttonPin);
// 前回ボタンが押されていなくて現在ボタンが押されていたら
if (lastButtonState == LOW && buttonState == HIGH) {
if (!ledIsOn) {
// 現在LEDがオンでなければオンにセット
ledIsOn = true;
} else {
// 現在LEDがオンであればオフにセット
ledIsOn = false;
}
}
// 前回のボタンの状態を保持する変数の値に現在のボタンの状態をセット
lastButtonState = buttonState;
}

デジタル入力の変化をイベントにする
• 変化した時にシリアルで送信するようにしてみる
• 1回しかオン／オフしていないのに複数回発生する？
• この現象をチャタリングと呼ぶ
• ループ中にディレイを入れることである程度解決する

スイッチを押したら写真を撮影・保存する
1. Examples/Libraries/video/Capture/
GettingStartedCaptureを開く
2. Examples/Topics/File IO/SaveFramesを開く
3. 組み合せてマウスクリックで画像を保存できるようにする
4. Examples/Libraries/serial/SimpleReadを開く
5. Arduino用のスケッチを書いてアップロードする
6. 組み合せてスイッチを押したら画像を保存できるようにする

Arduino側の例（1/2）
// 前回のボタンの状態を保持するための変数
int lastButtonState = LOW;
void setup() {
// シリアル通信を9600bpsで開始
Serial.begin(9600);
}

void loop() {
int buttonState = digitalRead(buttonPin);
Serial.print('*');
}
// チャタリングを防止するために10ms待つ
delay(10);
}

Processing側の例（1/2）
import processing.video.*;
Capture cam;
Serial serialPort;
void setup() {
size(640, 480, P2D);
cam = new Capture(this, 640, 480);
cam.start();
// シリアルポートのリストをプリント
// Mac OS X LionではArduinoは0番目のシリアルポートになる
// Mac OS X Mountain Lionでは異なるため、リストの出力に合わせて変更
String portName = Serial.list()[6];
serialPort = new Serial(this, portName, 9600);
}

void draw() {
if (cam.available() == true) {
cam.read();
}
image(cam, 0, 0);
if (serialPort.available() > 0) {
int inByte = serialPort.read();
// 読み取ったデータが想定しているものであれば現在の画面を保存
if (inByte == '*') {
saveFrame("output/frames####.png");
println("captured");
}
}
}

スイッチを押したらサウンドを再生する
1. Examples/Libraries/minim/PlayAFileを開く
2. 先ほどのサンプルを参考にして、スイッチを押したらサウンド
を再生するようにする
3. Minimのリファレンスは以下を参照
http://code.compartmental.net/minim/javadoc/

void loop() {
int buttonState = digitalRead(buttonPin);
Serial.print('p');
}
// 前回ボタンが押されていて現在ボタンが押されていなかったら
else if (lastButtonState == HIGH && buttonState == LOW) {
Serial.print('r');
}
// チャタリングを防止するために10ms待つ
delay(10);
}

import ddf.minim.*;
Minim minim;
AudioPlayer player;
Serial serialPort;
void setup()
{
size(512, 200, P3D);
String portName = Serial.list()[6];
serialPort = new Serial(this, portName, 9600);
minim = new Minim(this);
player = minim.loadFile("marcus_kellis_theme.mp3");
}

void draw()
{
if (serialPort.available() > 0) {
int inByte = serialPort.read();
if (inByte == 'p') {
player.rewind();
player.play();
}
else if (inByte == 'r') {
player.pause();
}
}
}

ライブラリはどんな時に有効か？
• 複数の入出力を扱いたいとき
• 特別なセンサやアクチェータを扱いたいとき
• ライブラリの詳細に関しては次のページを参照
http://arduino.cc/en/Reference/Libraries

ライブラリの使い方
https://github.com/soundanalogous/ActionButton/
2. ZIPボタンをクリックしてダウンロードし、ダウンロードが
終わったら解凍する
3. 書類/Arduinoの中に（もしまだなければ）「libraries」と
いうファルダを作成
4. 解凍が終わったファイルを次のように配置
Arduino/libraries/ActionButton
5. SketchメニューのImport Library...のContributedの中に
ActionButtonが表示されることを確認

今回のサンプル
https://dl.dropboxusercontent.com/u/36239/
workshop_examples_2013-04-30.zip
2. ZIPボタンをクリックしてダウンロードし、ダウンロードが
終わったら解凍し、書類/Arduinoフォルダに移動する

LEDライブラリの基本例（1）
#include <LED.h>
// LEDオブジェクト
LED led = LED(9);
void setup() {
// LEDを1000ms間隔で点滅させる
led.blink(1000);
}
void loop() {
// LEDの状態を更新
led.update();
}

LEDライブラリの基本例（2）
#include <LED.h>
// LEDオブジェクト
LED led = LED(9);
void setup() {
// LEDを2000msでフェードイン
led.fadeIn(2000);
}
void loop() {
led.update();
}

ActionButtonライブラリの基本（1/2）
#include <Button.h>
#include <LED.h>
Button button = Button(2);
LED led = LED(9);
void setup() {
// ここでは何もしない
}

ActionButtonライブラリの基本（2/2）
void loop() {
// ボタンの状態を更新（これを実行しない限り状態は更新されない）
button.update();
// ボタンが押されていれば
if (button.isPressed()) {
// LEDをオン
led.on();
}
else {
// LEDをオフ
led.off();
}
}

簡易リファレンス：ActionButton（1/2）
// コンストラクタ
Button(uint8_t buttonPin, uint8_t buttonMode);
// ボタンの状態を更新する
void update();
// ボタンが押されているか否か
bool isPressed();
// updateを呼ぶ前にボタンが押されていたか否か
bool wasPressed();
// updateの前後で状態が変化したか否か
bool stateChanged();
// ボタンが押されていない→押されたへの変化が起きたか否か
bool uniquePress();
// ボタンが押された→押されていないへの変化が起きたか否か
bool uniqueRelease();
// 長押しのしきい値をセット
void setHoldThreshold(unsigned int holdTime);

簡易リファレンス：ActionButton（2/2）
// あらかじめ設定した時間だけ長押しされたか否か
bool held(unsigned int time);
// 引数で与えた時間だけ押されたか否か
bool heldFor(unsigned int time);
// ボタンが押されたイベントに対するイベントハンドラをセット
void pressHandler(buttonEventHandler handler);
// ボタンが離されたイベントに対するイベントハンドラをセット
void releaseHandler(buttonEventHandler handler);
// ボタンがクリックされたイベントに対するイベントハンドラをセット
void clickHandler(buttonEventHandler handler);
// 長押しイベントに対するイベントハンドラをセット
void holdHandler(buttonEventHandler handler, unsigned int holdTime);
// ボタンが押されている時間
unsigned int holdTime() const;
// ボタンが押された回数
unsigned int presses() const;

簡易リファレンス：LED（1/2）
//コンストラクタ
LED(byte ledPin, byte driveMode = SOURCE);
void update();
// 現在の状態を取得
byte getState();
// 点灯
void on();
// 消灯
void off();
// 点灯と消灯をトグル
void toggle();
// 点滅（引数は間隔、回数、波形、指定回数だけ終了するまで待つか否か）
void blink(unsigned int time, byte times = 0, byte wave = 0, bool synchronous);
// 輝度をセット
void setValue(byte val);

簡易リファレンス：LED（2/2）
// 現在の輝度を取得
byte getValue();
// 指定した値までフェード（引数は値、時間、終了まで待つか否か）
void fadeTo(byte val, unsigned int time, bool synchronous);
// フェードイン（引数は時間、終了するまで待つか否か）
void fadeIn(unsigned int time, bool synchronous);
// フェードアウト（引数は時間、終了するまで待つか否か）
void fadeOut(unsigned int time, bool synchronous);

RGB LED
150Ω150Ω
330Ω

測距センサ（PSD）

補足
部品などの購入先一覧
• スイッチサイエンス
http://www.switch-science.com/
• メカロボショップ
http://www.mecharoboshop.com/
• 共立エレショップ
http://eleshop.jp/
• 秋月電子
http://akizukidenshi.com/
• マルツ電波
http://marutsu.co.jp/
• aitendo
http://www.aitendo.co.jp/

補足
さらに詳しく知りたい時は？
• Arduino公式ウェブサイト（http://arduino.cc/）
• Prototyping Labウェブサイト（http://prototypinglab.com/）
• Googleで検索
• 書籍で調べる

konashi
konashiとは
• ユカイ工学が開発、販売するツールキット
http://konashi.ux-xu.com
• 8つのデジタル入出力ピン、3つのアナログ入力ピン、I2C（デ
ジタル入出力ピン6および7と兼用）、1つのシリアルポート
• 外部電源、コイン形電池（CR2032）、バッテリ端子から電
源を供給できる
• iOS用のライブラリが提供されるI/Oモジュールであるため、
プログラミングをiOSデバイス上で完結できる
• 必要に応じてArduinoなどと組合わせることができる
• 技術的にはBluetooth Low Energyを採用

konashi
Bluetooth Low Energyとは
• 超低消費電力無線通信
• Bluetooth 4で統合（＝Bluetooth 3＋BLE）
• 少量データ、低頻度を想定
• iPhone 4S（2011年10月）以降のApple社製品、iOS 5以降で
対応
• MFi（Made For iPhone）のためのNDA締結が不要
• XcodeとCoreBluetoothフレームワークで開発できる
• デバイス間の接続はスター型で、接続数は上限なし、セントラル
とペリフェラルは非対称（ペリフェラルがより低消費電力）
参考資料：iOSアプリ開発者のためのBluetooth Low Energy体験講座（上原昭宏氏）

konashi
konashiのピン配列
konashiマニュアルより転載
USB-microB
(USB-Bus power)
DC 5.0V
コイン型バッテリ
(CR2032type)
DC 3.0V
バッテリ電圧
(S2B-PH-K-S / JST)
DC 3.2 ∼12.0V
USART通信端子
デジタルI / O (PIO 0 5)
(PWM端子と兼用)
デジタルI / O (PIO 6,7)
(PWM端子. I2C通信端子と兼用)
各種電圧端子
(バッテリ電圧, DC5.0V,
DC3.0V)
アナログ入力 (AIO 0~2)
(リファレンス電圧 1.3V)
オンボード入力端子
(PIO 0)
オンボード出力端子
(PIO 1~4)
オンボード入出力
切換え端子

konashi
デジタル入出力ピンの5番にLEDを接続

konashi
アナログ入力ピンの0番にCdSセルを接続

konashi
さらに詳しく知りたい時は？
• konashiの製品ウェブサイトのドキュメント
http://konashi.ux-xu.com/documents/
• FacebookのWT-BTLEグループ
https://www.facebook.com/groups/
563064710384459/
• iOSアプリ開発者のためのBluetooth Low Energy体験講座資料
http://www.slideshare.net/reinforcelab/20130322-btle

ワークショップ：実践編
課題
• スイッチをつくる
• ここ一番で使うスイッチ
• 間違って押せてはいけない
• 押した時には確実に動作しなくてはならない
• 動作したことが分かるようにインタラクションを実装する
• スイッチの形状も検討する
• 発表は14:30から

Hardware Sketching Workshop 2013

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (8)

Similar to Hardware Sketching Workshop 2013

Similar to Hardware Sketching Workshop 2013 (20)

More from Shigeru Kobayashi

More from Shigeru Kobayashi (20)

Hardware Sketching Workshop 2013