The slides for the presentation at Sketching in Hardware 4. http://sketching09.com/

1. Online code sharing for
ActionScript and physical computing
Incentives for web designers and developers
Shigeru Kobayashi
Sketching in Hardware 4: INCENTIVES, July 17-19, 2009, London

2. Introduction
• Roland Corp. (1993∼2004)
– Sound design
– Software engineering
• IAMAS (2004∼)
– Physical computing
– Interaction design

3. Introduction: Gainer
GAINER
Physical Computing with Gainer
GainerBook Labo + Kurukuru Lab (2007 and 2008)

4. GAINER: Tutorial

5. GAINER: Cookbook

6. GAINER: Works

7. Introduction: Make Magazine (in Japanese)
Make: Technology on Your Time Volume 04-07
O’Reilly Japan (2008-2009)

8. Motivation (as an engineer)
• ‘Sketching in hardware’ was not so easy as
software: Difficult to implement new ideas
in the late stages of development.
• Difficult to evaluate ‘new’ ideas using past
(old) experiences.
• Lack of common language between
designers and engineers.

9. Motivation (at IAMAS)
• Concept driven development is not easy for
average students who do not have
concrete ideas.
• ‘Build to think’ method sounds good, but
substantial skills are required.
• Difficult to teach programming for
micro-controllers in C or assembly
(easy to get frustrated).

10. Background: Gainer
A toolkit consisting of
open-source hardware and software.
• Gainer I/O module
– PSoC + FT232RL
• Software libraries
– ActionScript 2/3
– Processing
– Max/MSP

11. Gainer I/O modules

12. Efforts in the classroom at IAMAS
Sketching Prototyping
Toolkit Gainer Gainer or Arduino
Connection Wired Wired or stand-alone
Programming PC only PC and/or microcontroller
Material Cardboard Wood
Styrofoam 3D printing (ABS)
Wiring Breadboard Soldering

13. Motivations to Funnel
Found problems
• An I/O module doesn’t cover all user needs,
changing between toolkits is expensive
• For beginners, it is still difficult to handle
real-world inputs
• Wired connection narrows ideas
during the ‘sketching in hardware’ stage

14. Funnel?
Bill Buxton: Sketching User Experiences (2007)

15. What is Funnel?
• A toolkit for interconnecting toolkits
• Covering sketching to prototyping
• Intended to be a common language between
designers/artists and engineers

16. What is Funnel?
The Funnel development team
• Shigeru Kobayashi (IAMAS)
• Takanori Endo (IAMAS)
• Ichitaro Masuda (Metaphor Inc.)

17. Interconnections via Funnel

18. Interconnections via Funnel
Supported hardware
• Gainer I/O
• Arduino (via Firmata v2.1)
• XBee (IEEE 802.15.4/ZigBee)
• FIO

19. Interconnections via Funnel
Supported languages
• Processing
• ActionScript 3
• Ruby

20. What’s new since the last year?
• Contributors
• FIO
• Firmata v2.1 compatible
• I2 C device classes
• Physical UI classes
• Collaboration with ‘wonderfl’

21. Contributors
• Jeff Hoefs
– AS3 (I 2 C device classes)
– A lot of helpful suggestions
• Kazuyoshi Kato
– Ruby (Gainer)
• Kazushi Mukaiyama
– AS3 (I2 C device classes)

22. FIO v1.3

23. FIO v1.3
- +

24. FIO v1.3

25. FIO v1.3 vs Funnel IO Remixed

26. Funnel IO Remixed

27. Firmata v2.1 compatible
Proposed suggestions to Firmata v2.1
• I2C REQUEST
• I2C REPLY
• I2C CONFIG
• SAMPLING INTERVAL

28. I2 C device classes
• BlinkM/MaxM
• Accelerometer (LIS302DL and LIS3LV02DQ)
• Colour sensor (ADJD-S371-QR999)
• Digital compass (HMC6343 and HMC6352)
• Wii Nunchuck

29. I2 C device class example
List 1 A simple example to use a BlinkM
package {
import funnel.i2c.BlinkM;
public class ArduinoI2CBlinkM extends Sprite {
private var aio:Arduino;
private var blinkM:BlinkM;
public function ArduinoI2CBlinkM() {
var config:Configuration = Arduino.FIRMATA;
config.enablePowerPins();
aio = new Arduino(config);
blinkM = new BlinkM(aio);
blinkM.goToRGBColorNow([0, 0, 0]);
}

30. Physical UI classes
• Button
• LED
• RGBLED
• Accelerometer
• Potentiometer
• Servo

31. Physical UI class example
List 2 A simple example to use a button and a LED
package {
import funnel.ui.*;
public class GainerTest extends Sprite {
public function GainerTest() {
var gio:Gainer = new Gainer();
gio.button.addEventListener(ButtonEvent.PRESS, function(e:Event):void {
gio.led.on();
});
gio.button.addEventListener(ButtonEvent.RELEASE, function(e:Event):void
gio.led.off();
});
}

32. Physical UI class example
Button events to simplify events in time domain
• PRESS
• RELEASE
• LONG PRESS
• SUSTAINED PRESS

33. Collaboration with ‘wonderfl’

34. What is wonderfl?
http://wonderfl.net
• A web service developed by KAYAC Inc.
• Build flash online with a web browser
– Creating from scratch
– Fork from an existing code
• Since December 2008, > 9,000 registered
users and > 28,000 working examples for AS3

35. Example 1: create from scratch

36. Example 1: create from scratch

37. Example 1: create from scratch

38. Example 1: create from scratch

39. Example 2: fork from an exisiting code

40. Example 2: fork from an exisiting code

41. Example 2: fork from an exisiting code

42. Example 2: fork from an exisiting code

43. What is physical × wonderfl?
http://physical.wonderfl.net
• A collaboration between IAMAS and KAYAC
• Adding physical computing extensions to
wonderfl
– Substantial chages to the Funnel library
– Image up-loader for diagrams
– Embed movies to illustrate possibilities
– GUI for non-hardware mode
• Unveiled on July 18th, 2009 (i.e. today)

44. Demo: physical × wonderfl
• Write code online
• Test without hardware
• Test with hardware

45. What users can do
• Write
• Get feedback
• Share
• Raise questions

46. What potential users can do
• Try without hardware
• Feel the possibilities of physical computing
• Learn by using working examples

47. Questions
• How can we bridge gaps between guided
studies and real prototypes?
• What incentive to engineers can we provide?
• How to design social environments for UGD*1 ?
*1 User Generated Devices

48. Project Members
• wonderfl dev team
– Kazuhiro Hashimoto
– Masakazu Ohtsuka
• IAMAS wxp project
– Shigeru Kobayashi, Masami Hirabayashi,
Masahiko Furukata, Nobuya Suzuki
– Hoonida Kim (kim-hoonida), Takahiro Miyake,
Kazuomi Eshima, Yuma Ohfusa, Leo Kikuchi,
Jungun Kim, Kanna Komaki, Kaori Takemoto,
Egon Bak, Daichi Misawa

49. Online code sharing for
ActionScript and physical computing
Incentives for web designers and developers
Shigeru Kobayashi
Sketching in Hardware 4: INCENTIVES, July 17-19, 2009, London