The slides for the 67WS seminar event on 2009.04.17.

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

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

3. • 1970
• 1993 2004
–
–
–
• IAMAS 2004
–
–
–

4. •
•
•

5. Make Volume 04
Sketch
2008

6. Make Volume 05
Sketch / Prototype
2008

7. Make Volume 06
Prototyping Lab:
2009

8. GAINER
GainerBook Labo 2007 2008

9. Making Things Talk
Arduino
Tom Igoe 2008

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

11. PC
• ASCII
• 1
bps

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

13. •
•
•
•
•
•

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

15. •
–
–
•
–
–

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

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

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

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

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

21. Arduino I/O
SparkFun Electronics

22. I/O PC Gainer Phidgets
A
B
C
D
PC
program
a0]=ain.o;
aout.1 = 255;

23. Phidgets

24. Gainer
• I/O
•
– ActionScript 2/3
– Processing
– Max/MSP

25. Gainer I/O

26. I/O

28. I/O

30. LED

31. •
–2
– GND
– V

33. •
–
– A

35. •
–
– Ω

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

39. •
•

40. +5V GND

44. LED

45. •
•
–
–
–

46. •
•
•

47. LED

48. LED
• LED
20mA
•
•
•

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

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

51. LED

52. • +5V
• GND
•

53. LED NG

54. LED

55. LED
7

56. Funnel
Gainer
• GUI
•

57. Funnel
•
•
•

58. Funnel
•
–
–
–
–
•

59. Funnel
•
•
•

60. Bill Moggridge, Designing Interactions (2006)

61. Funnel Gainer
• Gainer
–
– Gainer I/O 1:1
• Funnel
–
– Arduino XBee

62. Funnel
Sketching User Experiences
Getting the Design Right and the Right Design
Bill Buxton Morgan Kaufmann Pub 2007

63. Funnel
Bill Buxton, Sketching User Experiences (2008)

64. Funnel
Bill Buxton, Sketching User Experiences (2008)

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

66. Funnel

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

68. din 0

69. din 0

70. •
•
– rising edge
– falling edge

71. 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; //
};
};

72. 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
});

73. ain 0

74. ain 0

75. ain 0
• GainerSignalScope
•
• ain 1
•

78. ain 0 CdS

79. ain 0 CdS

80. ain 0 CdS
•
• GainerSignalScope
•
•

81. Gainer.remap()
3 Gainer.remap()
import gainer.*;
var gio:Gainer = new Gainer(quot;localhostquot;, 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);
};
};

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

83. •
–
–
•

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

85. 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;
};
};

86. 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;
};
};

87. 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);

88. ain 0

89. ain 0

90. ain 0 SoftPot

91. ain 0 SoftPot

92. ain 0 SoftPot
•
•
•

93. ain

94. ain

95. •
•

97. •
• -1 +1
• sin
•

98. •
• LPF
• HPF

99. 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;

100. 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;
}
}

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

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

103. 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;
}

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

105. 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;
}

106. 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;
}

107. dout 0 LED

108. dout 0 LED

109. 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;
}

110. aout 0 LED

111. aout 0 LED

112. 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;
}

113. 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;
}

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

115. FIO (Funnel I/O) v1.3

116. FIO (Funnel I/O) v1.3

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

118. FIO (Funnel I/O) v1.3

119. FIO v1.3 vs Funnel IO Remixed

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

121. Wiring
SparkFun Electronics

122. Arduino Duemilanove
SparkFun Electronics

123. Arduino IDE

124. •
–
–
•

125. LilyPad Arduino
SparkFun Electronics

126. Arduino Pro Mini
SparkFun Electronics

127. Arduino ProtoShield
SparkFun Electronics

128. Arduino XBee Shield
SparkFun Electronics

129. Arduino
GND
+5V GND

130. 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

131. Arduino
•
•
•
•

132. 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);
}

133. 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;
}

134. 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;
}

135. Arduino
• C/C++
•
•

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

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

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

139. 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

140. 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

141. IEEE 802.15.4
• 1
•

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

143. ZigBee
• 1
•
•

144. ZigBee
Mesh
Coordinator
Router
End Device

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

146. XBee
• 5V
• UDP
•
100kbps

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

148. 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

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

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

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

152. 2006

153. •
–
– 3D
–
–
•
•

154. 2008

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