http://67.org/ws/
Funnel ActionScript

• 1 13:00 14:30
–
– Funnel
– Funnel Gainer
– Funnel
• 2 14:45 16:15
– FIO Funnel I/O
∗ Arduino
∗ XBee
– Funnel 009
–

• 1970
• 1993 2004
–
–
–
• IAMAS 2004
–
–
–

•
•
•

Make Volume 04
Sketch
2008

Make Volume 05
Sketch / Prototype
2008

Make Volume 06
Prototyping Lab:
2009

GAINER
GainerBook Labo 2007 2008

Making Things Talk
Arduino
Tom Igoe 2008

• ITP*1 Tom Igoe
• 1
•
• 1
*1 Interactive Telecommunications Program

PC
• ASCII
• 1
bps

Alto (1973)
http://toastytech.com/guis/

•
•
•
•
•
•

•
•
•
littleBits coffemaker*2
*2 http://www.vimeo.com/1389390

•
–
–
•
–
–

1
•
•
• ×XBee×Funnel×PC
• Make: Tokyo Meeting 01-02
IAMAS Gangu Project

2 Jamming Gear
• ×
•
–
–
• ×FIO×Max/MSP×PC
• Make: Tokyo Meeting 01-02
IAMAS Gangu Project

HELLO!!
• 2007.12.22-23
•
• 19
•
• Processing×Funnel×Gainer I/O

PIC AVR
program
A
a0]=ain.o;
aout.1 = 255;
B
C
D

PC Arduino Wiring
program
A
a0]=ain.o;
aout.1 = 255;
B
C
D
PC
program
a0]=ain.o;
aout.1 = 255;

Arduino I/O
SparkFun Electronics

I/O PC Gainer Phidgets
A
B
C
D
PC
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

•
–2
– GND
– V

•
–
– A

•
–
– Ω

• 1,000 1kΩ
• 1,000,000 1MΩ
• 1,000
1
1mA
• 1
50µA
1,000,000

•
•

+5V GND

LED

•
•
–
–
–

•
•
•

LED

LED
• LED
20mA
•
•
•

V =I ×R
•V V
•I A
•R Ω

− LED ×R
= LED
R
− LED
R=
LED
5.0V LED 1.8V 10mA
5 − 1.8 3.2
R= = =
0.01 0.01

LED

• +5V
• GND
•

LED NG

LED

LED
7

Funnel
Gainer
• GUI
•

Funnel
•
•
•

Funnel
•
–
–
–
–
•

Funnel
•
•
•

Bill Moggridge, Designing Interactions (2006)

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
Bill Buxton, Sketching User Experiences (2008)

Funnel
• GUI
•
– Convolution
– SetPoint
– Scaler
– Osc
• I/O

Funnel

Gainer I/O
2
• din 0 1 2
–
–
• ain 0 1 256
–
–

din 0

din 0

•
•
– rising edge
– falling edge

1
var wasPressed:boolean = false; //
gio.onReady = function() {
gio.beginDigitalInput();
_root.onEnterFrame = function() {
var isPressed:boolean = gio.digitalInput[0]; //
if (!wasPressed && isPressed) {
// 0 1
} else if (wasPressed && !isPressed) {
// 1 0
}
wasPressed = isPressed; //
};
};

Funnel
2
var gio:Gainer = new Gainer();
gio.digitalInput(0).addEventListener(RISING_EDGE, function(e:Event):void {
// 0 1
});
gio.digitalInput(0).addEventListener(FALLING_EDGE, function(e:Event):void {
// 1 0
});

ain 0

ain 0

ain 0
• GainerSignalScope
•
• ain 1
•

ain 0 CdS

ain 0 CdS

ain 0 CdS
•
• GainerSignalScope
•
•

Gainer.remap()
3 Gainer.remap()
import gainer.*;
var gio:Gainer = new Gainer(\"localhost\", 2000, Gainer.MODE1, true);
gio.onReady = function() {
gio.beginAnalogInput();
_root.onEnterFrame = function() {
var val:Number;
var frames:Number = movieClip._totalframes;
//ain 0 0-255
val = Math.round(Gainer.remap(gio.analogInput[0], 0, 255, 1, frames));
_root.movieClip.gotoAndStop(val);
};
};

Scaler
4 Scaler
gio = new Gainer();
gio.analogInput(0).filters = [new Scaler(0.2, 0.6, 0, 1, Scaler.LINEAR, true)];

•
–
–
•

1 2
51 2 set point.fla
var threshold:Number = 127; //
var hysteresis:Number = 10; //
var lastState:Number = -1; //
gio.onReady = function() {
gio.beginAnalogInput();

1 2
61 2
_root.onEnterFrame = function() {
var state:Number = lastState;
var val:Number = gio.analogInput[0];
if (val < threshold) {
state = 0;
} else {
state = 1;
}
if (lastState != state) {
//
}
lastState = state;
};
};

1 2
71 2
_root.onEnterFrame = function() {
var state:Number = lastState;
var val:Number = gio.analogInput[0];
if (val < (threshold - hysteresis)) {
state = 0;
} else if (val > (threshold + hysteresis)) {
state = 1;
}
if (lastState != state) {
//
}
lastState = state;
};
};

SetPoint
8 SetPoint
gio = new Gainer();
gio.analogInput(0).filters = [new SetPoint([0.5, 0.1])];
gio.analogInput(0).addEventListener(RISING_EDGE, onRisingEdge);
gio.analogInput(0).addEventListener(FALLING_EDGE, onFallingEdge);

ain 0

ain 0

ain 0 SoftPot

ain 0 SoftPot

ain 0 SoftPot
•
•
•

ain

ain

•
•

•
• -1 +1
• sin
•

•
• LPF
• HPF

9 MovingAverageFilter.as
class MovingAverageFilter {
private var _taps:Number; //
private var _values:Array; //
function MovingAverageFilter(taps:Number) {
_taps = taps;
_values = new Array(_taps);
}
function processSample(sample:Number):Number {
var acc:Number = 0;
var i:Number = 0;
//
_values[0] = sample;

10
//
for (i = 0; i < _taps; i++) {
acc = acc + _values[i];
}
acc = acc / _taps;
// 1
// [A][B][C][D][E] ...
// [A][A][B][C][D] ...
for (i = _taps - 1; i > 0; i--) {
_values[i] = _values[i - 1];
}
return acc;
}
}

Gainer
11 MovingAverageFilter
var gio:Gainer = new Gainer(\"localhost\", 2000, Gainer.MODE1, true);
//
var smoothFilter:MovingAverageFilter = new MovingAverageFilter(8);
function loop():Void {
var val:Number = smoothFilter.processSample(this.analogInput[0]);
...

Convolution
12 Convolution
gio = new Gainer();
gio.analogInput(0).filters = [new Convolution(Convolution.MOVING_AVERAGE)];

13
public function GainerAccelerometer() {
gio = new Gainer();
board = new Shape();
...
this.addChild(board);
var smoother:Convolution = new Convolution(Convolution.MOVING_AVERAGE);
var scaler:Scaler = new Scaler(0.30, 0.70, -1, 1, Scaler.LINEAR, true);
gio.analogInput(1).filters = [smoother, scaler];
addEventListener(Event.ENTER_FRAME, loop);
}
private function loop(event:Event):void {
board.rotation = Math.asin(gio.analogInput(1).value) / Math.PI * 180;
}

Gainer I/O
2
• dout 0 1 2
– LED
–
• *3
aout 0 255 256
– LED
–
*3 PWM

14 I/O LED
public function GainerLED() {
...
var circle:Sprite = new Sprite();
...
this.addChild(circle);
circle.addEventListener(MouseEvent.MOUSE_DOWN, mousePressed);
circle.addEventListener(MouseEvent.MOUSE_UP, mouseReleased);
}
private function mousePressed(e:MouseEvent):void {
gio.led.value = 1;
}
private function mouseReleased(e:MouseEvent):void {
gio.led.value = 0;
}

15 I/O LED LED button.fla
public function GainerLED() {
gio = new Gainer();
gio.button.addEventListener(PinEvent.RISING_EDGE, buttonPressed);
gio.button.addEventListener(PinEvent.FALLING_EDGE, buttonReleased);
}
private function buttonPressed(e:PinEvent):void {
gio.led.value = 1;
}
private function buttonReleased(e:PinEvent):void {
gio.led.value = 0;
}

dout 0 LED

dout 0 LED

16 LED
public function GainerLED() {
...
var circle:Sprite = new Sprite();
...
this.addChild(circle);
circle.addEventListener(MouseEvent.MOUSE_DOWN, mousePressed);
circle.addEventListener(MouseEvent.MOUSE_UP, mouseReleased);
}
private function mousePressed(e:MouseEvent):void {
gio.digitalOutput(0).value = 1;
}
private function mouseReleased(e:MouseEvent):void {
gio.digitalOutput(0).value = 0;
}

aout 0 LED

aout 0 LED

17 x LED
public function GainerLED() {
gio = new Gainer();
stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoved);
gio.analogOutput(0).filters = [new Scaler(0, 199, 0, 1, Scaler.LINEAR, true)];
}
private function mouseMoved(e:MouseEvent):void {
gio.analogOutput(0).value = e.stageX;
}

Osc LED
18 Osc LED
public function GainerLED() {
...
circle.addEventListener(MouseEvent.MOUSE_DOWN, mousePressed);
circle.addEventListener(MouseEvent.MOUSE_UP, mouseReleased);
gio.analogOutput(0).filters = [new Osc(Osc.SQUARE, 0.5, 1, 0, 0)];
}
private function mousePressed(e:MouseEvent):void {
gio.analogOutput(0).filters[0].start();
}
private function mouseReleased(e:MouseEvent):void {
gio.analogOutput(0).filters[0].stop();
gio.analogOutput(0).value = 0;
}

FIO (Funnel I/O)
• LilyPad Arduino v1.6
•
• XBee

FIO (Funnel I/O) v1.3

FIO (Funnel I/O) v1.3

FIO (Funnel I/O) v1.3
- +

FIO (Funnel I/O) v1.3

FIO v1.3 vs Funnel IO Remixed

Arduino
• Hernando Barrag´n IDII*4
a
Wiring
•
• IDE Arduino I/O
*4 Interaction Design Institute Ivrea

Wiring
SparkFun Electronics

Arduino Duemilanove
SparkFun Electronics

Arduino IDE

•
–
–
•

LilyPad Arduino
SparkFun Electronics

Arduino Pro Mini
SparkFun Electronics

Arduino ProtoShield
SparkFun Electronics

Arduino XBee Shield
SparkFun Electronics

Arduino
GND
+5V GND

Gainer vs Arduino
Gainer Arduino Duemilanove
16 20 RX/TX
A/D 8 8bit 6 10bit
PWM 8 8bit 6 8bit
LED 1 0
LED 1 1 D13
Yes Yes
No Yes

Arduino
•
•
•
•

Arduino LED
19 Arduino LED
int ledPin = 13;
void setup() {
pinMode(ledPin, OUTPUT);
}
void loop() {
digitalWrite(ledPin, HIGH);
delay(1000);
digitalWrite(ledPin, LOW);
delay(1000);
}

C LED
20 C LED
#include <avr/io.h>
#include <avr/pgmspace.h>
#include <avr/delay.h>
#define CLK_CALIB_DATA (FLASHEND - 3)
void init() {
uint8_t osccal_data = pgm_read_byte(CLK_CALIB_DATA);
if (osccal_data != 0xff) OSCCAL = osccal_data;
DDRB = 0xff;
DDRD = 0xff;
return;
}

C LED
21 C LED
void delay_ms(uint16_t t) {
while (t--) _delay_ms(1);
}
int main(void) {
init();
for (; ;) {
PORTB = 0xff;
delay_ms(500);
PORTB = 0x00;
delay_ms(500);
}
return 0;
}

Arduino
• C/C++
•
•

Arduino PC
•
–
– USB
– Ethernet
•
– Bluetooth
– IEEE 802.15.4 / ZigBee

Firmata
http://firmata.org/
• Hans-Christoph Steiner
• MIDI
• Arduino 0012

Firmata PC
• Pd (aka Pure Data)
• Processing
• Funnel
• Linux C++
• C++/openFrameworks

10G
IEEE 802.11n
100M
IEEE 802.11a/g
10M IEEE 802.11b
Bluetooth
1M
ANT
100k
ZigBee/IEEE 802.15.4
10k
1k
0.1m 1m 10m 100m 1km
BAN PAN LAN MAN

Wi-Fi Bluetooth 802.15.4/ZigBee
IEEE 802.11a/b/g/n 802.15.1 802.15.4
2.4GHz/5GHz 2.4GHz 866MHz/915MHz/2.4GHz
100m 100m 100m 2.4GHz
300Mbps 3Mbps 250kbps 2.4GHz
32 7 65535
LAN
1

IEEE 802.15.4
• 1
•

IEEE 802.15.4
Star
Point to Point
Point to Multi
802.15.4 Coordinator
802.15.4 End Device

ZigBee
• 1
•
•

ZigBee
Mesh
Coordinator
Router
End Device

XBee
• IEEE 802.15.4 ZigBee 2 *5
– XBee 802.15.4
– XBee ZB ZigBee PRO
• 3500
•
•
*5

XBee
• 5V
• UDP
•
100kbps

XBee
XBee
• hardware/fio/tool/XBeeConfigTool
•
• PAN ID
•
• MY ID
• Configure

FIO
• XBee Explorer USB PC
• Arduino 15
• Tools Board Arduino Pro/ Pro Mini (8MHz)
• Tools Serial Port
• Open Examples Digital Blink
• Upload to I/O Board

FIO
• hardware/fio/firmware/FioStandardFirmata
• Upload to I/O Board

FIO
• FIO
• XBee Explorer USB PC
• Funnel Server
• FioTest

Funnel 009
• I2 C
–
–
– LED
• Funnel Server
• XBee FIO
•

2006

•
–
– 3D
–
–
•
•

2008

http://67.org/ws/
Funnel ActionScript