Document4 互動裝置基礎 by Cre@Taiwan

教育部補助智慧生活整合創新跨校聯盟計畫領域：文化導向生活科技

102 學年下學期（2014.02-06）

智慧生活與創新設計單元 4：互動裝置基礎國立交通大學建築研究所侯君昊助理教授

目

錄

1. Arduino 基礎

1.1. 何謂 Arduino？

1.2. 開始使用 Arduino

2. 數位輸出

2.1. 範例 1：Blink

2.2. 範例 2：Loop

2.3. 補充範例：Light Talk

2.4. 範例 3：Blink without Delay

3. 數位輸入

3.1. 範例 1：Button

3.2. 範例 2：State Change Detection

3.3. 範例 3：Debounce

3.4. 綜合練習

4. 類比輸出

4.1. 範例 1：Fade

4.2. 範例 2：Fade and Blink

5. 類比輸入 5.1. 範例 1：Analog Control 6. 通訊 (Communication)

23 24 27

6.1. 範例 1 & 2：PC to Arduino

6.2. 範例 3 & 4：Arduino to/from Processing

1. Arduino 基礎本教案以目前在教育界、藝術界、設計界廣為採用的開放硬體平台 Arduino 為主。對象不需具備電機、資訊等理工背景，只要對互動技術感興趣即可參與學習。

physical computing system

實體運算系統(Physical computing system)將數位輸出入訓與實體物件或動作結合，使得人機互動得以脫離滑鼠、鍵盤的限制，進入實體生活空間。在此類系統中，Arduino 算是最平易近人、廉價、而易學易用的系統。

1.1. 何謂 Arduino？ Arduino 可拓展、延伸電腦既有能力，用來感測、控制實體世界中的資訊與物件，它是一套以微處理器建構的開源實體運算平台，也包括一個電腦上的開發環境，用來撰寫感測或控制軟體。 Arduino Hardware

Arduino Software

Open Source Physical Computing Platform & Group

Arduino 可以被運用在多樣化情境，簡單的開關、感測，到複雜的互動或物聯網應用等，而且可以和不同的互動運算平台串連，包括 Flash、Processing、MaxMSP、 vvvv、Grasshopper 等，增加更多的可能性。

• •

14 -

• •

Digital Pins 0-13

•

Digital Pins 0-1/Serial In/Out - TX/RX Serial port 6

Reset

- S1

• Pin 0,1.

Analog Input Pins 0-5

Analog Output * (Digital Pins 3,5,6,9,10,11)

• • •

Jumper

USB

(Duemilanove

)

USB Vin, 5V, 3.3V (Diecimila

)

Arduino 主要透過 USB 與電腦連線，進行程式碼上載以及執行狀況監控，USB 同時提供板子所需電源。板子上的輸出入腳位包括數位輸出、數位輸入、類比輸入、以及 6 個用數位模擬類比輸出(PWM)腳位。各式各樣的Arduino........族繁不及備載

Arduino 種類繁多，除了持續推出速度更快的新版本之外，還有依據不同應用推出的板子，例如為穿戴式運算設計的 Arduino Lilypad、提供更多腳位的 Arduino Mega。 2

Digital Out

Digital In

Analog In

Analog Out

Communication

利用 Arduino 進行的工作不外乎上述腳位所提供的功能：數位輸出、數位輸入、類比輸出、類比輸入，以及通訊。

Digital Out 數位輸出(Digital Out)腳位有 12 個，從 pin 2~pin 13（扣除掉 pin 0, pin 1，因為被限定於序列通訊）。其中 pin 13 內建電阻，可直接插上 LED 使用。其餘腳位輸出均需額外加上適當的電阻。用於固定 5V 電壓的數位輸出，常用於 LED、直流馬達或一般電路供電用途。

類比輸出(Analog Out)腳位有 6 個，所輸出的不是真正的類比訊號，而是透過數 Analog Out 位訊號以脈衝方式模擬(PWM)的。常用於伺服機(servo)等類比控制。

Digital In pin 2~pin 13（扣除掉 pin 0, pin 1，因為數位輸入(Digital In)腳位有 12 個，從被限定於序列通訊）。常用於開關訊號輸入。

類比輸入(Analog In)腳位共有 6 個，常用於一般旋鈕開關的可變電阻、光敏電阻等訊號輸入。

Analog In

通訊(Communication)：Arduino 透過 USB 與電腦通訊，若需網路或其他方式通

Communication

訊，則需加裝擴充板，如 Ethernet Shield。

Digital In

Emotion

Experience

Digital Out

Analog In

Communication

Analog Out

透過上述所提供的數位、類比訊號輸出入以及通訊功能，Arduino 可以將實體世界中的各種訊號、現象、行為、甚至人的情緒，都轉變為電腦可以理解的數位資訊，進行互動處理。

1.2. 開始使用 Arduino 安裝必備驅動程式以及 Arduino 開發環境後，首先進行基本測試。 | Prepare to test Arduino board

Arduino LED Blink File > Examples > Basic > Blink

執行 Arduino 主程式。

開啟 LED Blink 範例檔（File > Examples > 01.Basics > Blink）。

| Set up your board

•

: Tools > Board

[ Mac OS X ]

•

Arduino

serial port:

[ Windows ]

Tools > Serila Port

[ Mac OS X ] Mac

/dev/tty.usbserial-

[ Windows ] *

選擇使用的 Arduino 型號。

選擇 Arduino 所接的序列埠(serial port)。 6

| Upload the program

下方的狀態列，會顯示程式編譯、上傳狀況，以及錯誤訊息。

接著將程式上傳，若成功，則板子上的內建 LED 會每隔一秒閃爍一次。

# | Troubleshooting

•

Serial port

• • Serial Port •

Serila port Jump

• •

Duemilanove/UNO Reset

Arudino

Reset

Update

USB

•

接下來的練習，將從 Digital Out 開始，也需要用到麵包板(breadboard)。麵包板內部有金屬連通，所以插上電子零件後可以形成通路，基本電路實驗都靠它了。

2. 數位輸出 2.1. 範例 1：Blink

我們用剛才的 Blink 範例，但不用內建 LED，而把電路拉到麵包板上，插上一個 LED 和電阻。請注意 5V 供電和接地要正確。

• Only 1 or 0

HIGH

LOW

High or LOW /

ON or OFF

數位訊號中的 1 與 0 亦即高電位(HIGH)、低電位(LOW)。接收到高電位，LED 燈亮，反之燈滅。

開啟練習檔：File > Examples > 01.Basics > Blink 以下幾個問題要留意： 1. LED 要連接到哪個 pin 腳？ 2. 程式中，我要定義哪個 pin？pinMode 為何？ 3. 程式中的 digitalWrite()要傳給哪個 pin？試著修改程式中的時間差或更改接線、腳位，讓自己更熟悉電路和程式之間的關係。

2.2. 範例 2：Loop

按照上述電路圖，將 6 組 LED 和 330 歐姆電阻接到數位輸出腳位 pin 2~7。 #2

int timer = 100;

File > Examples > Control > ForLoopIteration

// The higher the number, the slower the timing.

void setup() { int i; // use a for loop to initialize each pin as an output: for (int thisPin = 2; thisPin <= 7; thisPin++ ) { pinMode(thisPin, OUTPUT); } } void loop() { // loop from the lowest pin to the highest: for (int thisPin = 2; thisPin <=7 ; thisPin++) { // turn the pin on: digitalWrite(thisPin, HIGH); delay(timer); // turn the pin off: digitalWrite(thisPin, LOW); } // loop from the highest pin to the lowest: for (int thisPin = 7; thisPin >= 2; thisPin--) { // turn the pin on: digitalWrite(thisPin, HIGH); delay(timer); // turn the pin off: digitalWrite(thisPin, LOW); } }

開啟程式 File > Examples > 05.Control > ForLoopIteration 上傳程式後，LED 燈會依序點亮、熄滅，這是利用迴圈方式控制。

2.3. 補充範例：Light Talk

運用上述相同的電路，我們來玩點不一樣的東西。利用 LED 快速閃爍以及視覺暫留原理在空中顯示訊息！ #Bonus

http://mutienliao.tw/arduino/Light_Talk.pde

int pins[] = { 2, 3, 4, 5, 6, 7 }; !! int lights = 6; ! ! int pattens = 10; ! ! byte graphy[10][6] = { {0,1,1,1,0,0}, {1,1,1,1,0,0}, {1,1,1,1,1,0}, {0,1,1,1,1,0}, {0,0,1,1,1,1}, {0,0,1,1,1,1}, {0,1,1,1,1,0}, {1,1,1,1,1,0}, {1,1,1,1,0,0}, {0,1,1,1,0,0} }; void setup() { for (int i = 0; i < lights; i++) ! pinMode(pins[i], OUTPUT); !! } void loop() { for(int k = 0; k < lights; k++) { ! digitalWrite(pins[k], LOW); } delay(40); ! ! !

// LED // LED //

[a]

!//

// //

light-1

// [b]

for (int i = 0; i < pattens; i++) { ! for(int j = 0; j < lights; j++) {! if(patten[i][j]==1) { digitalWrite(pins[j], HIGH); ! }else { digitalWrite(pins[j], LOW); ! } } delay(1); ! ! }

// //

for(int k = 0; k < lights; k++) { ! digitalWrite(pins[k], LOW); } delay(40);! ! !

40 ... LED...

LED

Fig.1

LED

}

範例程式下載點： http://mutienliao.tw/arduino/Light_Talk.pde

byte graphy[10][6] = { {0,1,1,1,0,0}, {1,1,1,1,0,0}, {1,1,1,1,1,0}, {0,1,1,1,1,0}, {0,0,1,1,1,1}, {0,0,1,1,1,1}, {0,1,1,1,1,0}, {1,1,1,1,1,0}, {1,1,1,1,0,0}, {0,1,1,1,0,0} };

程式中，陣列 graphy 裡每一列的 6 數字分別對應到 6 組 LED 燈的明滅，依序顯示就會出現我們設計的符號（歡迎自己設計！）。例子中的符號是一顆愛心。上傳程式後，拿起麵包板左右晃動，看到愛心沒？

2.4. 範例 3：Blink without Delay

請將一組 LED 和 330 歐姆電阻連接到 pin 13。前述閃爍的間隔是用 delay 達成，然而在 delay 時我們什麼事也不能做，本範例示範如何利用系統時間來控制間隔。 #3

const int ledPin =

13;

int ledState = LOW; long previousMillis = 0;

// //

long interval = 1000;

pin 13

File > Examples > Digital > BlinkWithoutDelay

LED LED

1000ms = 1sec

void setup() { pinMode(ledPin, OUTPUT); } void loop() { unsigned long currentMillis = millis(); if(currentMillis - previousMillis > interval) { previousMillis = currentMillis;

// // //

// LED if (ledState == LOW) ledState = HIGH; else ledState = LOW; // LED digitalWrite(ledPin, ledState); } }

範例檔：File > Examples > 02.Digital > BlinkWithoutDelay 14

3. 數位輸入輸入才是互動的精華！有輸入才有互動！我們先從數位輸入開始。

3.1. 範例 1：Button

參考這張接線圖，試試看在麵包板上該怎麼插零件。開關的作用是電路的通路、斷路控制。同時有一條線接到數位輸入 pin 2 讀取開關位置的電位是否改變。

File > Examples > Digital > Button

const int buttonPin = 2; const int ledPin = 13;

// the number of the pushbutton pin // the number of the LED pin

int buttonState = 0;

// variable for reading the pushbutton status

void setup() { // initialize the LED pin as an output: pinMode(ledPin, OUTPUT); // initialize the pushbutton pin as an input: pinMode(buttonPin, INPUT); } void loop(){ // read the state of the pushbutton value: buttonState = digitalRead(buttonPin); // check if the pushbutton is pressed. // if it is, the buttonState is HIGH: if (buttonState == HIGH) { // turn LED on: digitalWrite(ledPin, HIGH); } else { // turn LED off: digitalWrite(ledPin, LOW); } }

範例檔：File > Examples > 02.Digital > Button

電阻接續位置會影響到流入 Arduino 的電位，但一定要接電阻，否則會造成短路！

3.2. 範例 2：State Change Detection

範例檔：File > Examples > 02.Digital > StateChangeDetection

3.3. 範例 3：Debounce

範例檔：File > Examples > 02.Digital > Debounce

3.4. 綜合練習

4. 類比輸出 Analog Output

Arduino

PWM pin

3,5,6,9,10,11

PWM (Pulse Width Modulation) (

0~5V)

Output Voltage = High_time(%) * Max_Voltage

Arduino

PWM pin

0~5V analogWrite( pin, val )

3,5,6,9,10,11

0~255

4.1. 範例 1：Fade

實作呼吸燈效果。

int brightness = 0; int fadeAmount = 5;

File > Examples > Basic > Fade

// how bright the LED is // how many points to fade the LED by

void setup() { // declare pin 9 to be an output: pinMode(9, OUTPUT); } void loop() { // set the brightness of pin 9: analogWrite(9, brightness); // change the brightness for next time through the loop: brightness = brightness + fadeAmount; // reverse the if (brightness fadeAmount = } // wait for 30 delay(30);

direction of the fading at the ends of the fade: == 0 || brightness == 255) { -fadeAmount ; milliseconds to see the dimming effect

}

4.2. 範例 2：Fade and Blink

實作呼吸燈與 LED 閃爍共存，活用 millis() 進行多工運行。 #5

http://mutienliao.tw/arduino/Fade_and_Blink.pde

const int ledPin = 13; const int fadePin = 9;

// the number of the LED pin for blink // the number of the LED pin for fade

int ledState = LOW; long previousMillis = 0;

// ledState used to set the LED // will store last time LED was updated

long interval = 1000;

// interval at which to blink (milliseconds)

int brightness = 0; int fadeAmount = 5;

// how bright the LED is // how many points to fade the LED by

void setup() { pinMode(ledPin, OUTPUT); pinMode(fadePin, OUTPUT); } void loop() { unsigned long currentMillis = millis(); if(currentMillis - previousMillis > interval) { previousMillis = currentMillis; if (ledState == LOW) ledState = HIGH; else ledState = LOW; digitalWrite(ledPin, ledState); } analogWrite(fadePin, brightness); brightness = brightness + fadeAmount; if (brightness == 0 || brightness == 255) { fadeAmount = -fadeAmount ; } delay(30); }

5. 類比輸入 Arduino 類比輸入使用 A0~A5，類比輸入 0~5V 對應數值為 0~1023。

5.1. 範例 1：Analog Control

#10

http://mutienliao.tw/arduino/analog_control.pde

int ledPin = 13; int analogPin = 0; int val = 0; void setup() { pinMode(ledPin, OUTPUT); }

// LED connected to digital pin 13 // photocell connected to analog pin 0

// sets the digital pin as output

void loop() { val = analogRead(analogPin); // read the value from the sensor if(val<80) { digitalWrite(ledPin, HIGH); // sets the LED on } else { digitalWrite(ledPin, LOW); // sets the LED off } delay(50); }

#10

int ledPin = 13; int analogPin = 0; int val = 0; void setup() { pinMode(ledPin, OUTPUT); Serial.begin(9600); }

analogRead

// LED connected to digital pin 13 // photocell connected to analog pin 0

// sets the digital pin as output

void loop() { val = analogRead(analogPin); // read the value from the sensor Serial.println(val); if(val<80) { digitalWrite(ledPin, HIGH); // sets the LED on } else { digitalWrite(ledPin, LOW); // sets the LED off } delay(50); }

Arduino Software

Serial Monitor

Arduino

546756456575456745674567447

baud rate

範例 2：

#11

File > Examples > Analog > AnalogInOutSerial

const int analogInPin = A0; // Analog input pin that the potentiometer is attached to const int analogOutPin = 9; // Analog output pin that the LED is attached to int sensorValue = 0; int outputValue = 0;

// value read from the pot // value output to the PWM (analog out)

void setup() { // initialize serial communications at 9600 bps: Serial.begin(9600); } void loop() { // read the analog in value: sensorValue = analogRead(analogInPin); // map it to the range of the analog out: outputValue = map(sensorValue, 0, 1023, 0, 255); // change the analog out value: analogWrite(analogOutPin, outputValue); // print the results to the serial monitor: Serial.print("sensor = " ); Serial.print(sensorValue); Serial.print("\t output = "); Serial.println(outputValue); // wait 10 milliseconds before the next loop // for the analog-to-digital converter to settle // after the last reading: delay(10); }

6. 通訊(Communication)

Arduino

USB

RS-232 Serial

HIGH / LOW

Serial port C/C++,VB, MAX/MSP,VVVV, Processing

Arduino FLASH(

)

6.1. 範例 1 & 2：PC to Arduino

6.2. 範例 3 & 4：Arduino to/from Processing

Processing...