Shigeru Kobayashi designed the Gainer and Funnel toolkits to make prototyping physical computing ideas easier. Gainer started in 2005 as a simple I/O module toolkit. Funnel was created in 2007 and aims to interconnect different toolkits, covering the whole process from sketching to prototyping physical ideas. It translates sensor inputs into a GUI programming language and supports toolkits like Arduino and Processing. The goal is to provide a common language for designers, engineers, and students to smoothly prototype physical computing concepts.

1. Designing toolkits for prototyping funnel
Shigeru Kobayashi (IAMAS)
Ubiquitous Content Symposium 2009 (February 27th, 2009) Photo credit: ICC

2. Designing toolkits
• Gainer (2005~)
• Funnel (2007~)

3. Motivation (as an engineer)
• “SketchingDifficult to implement neweasy as
in hardware” was not so
software: ideas
in the late stages of development
• Difficult to evaluate “new” ideas using past
(old) experiences
• Lack of common language between
designers and engineers

4. Motivation (at IAMAS)
• Concept driven developmentnotnot so easy
is
for average students who do have
concrete ideas
• “Build to think”skills are requiredgood,
method sounds
but substantial
• Difficult to teach programming for
micro-controllers in C or assembly
(easy to get frustrated)

5. Encounters with Physical Computing
• Encountered in 2004 Computing”
“Physical
via the book
• The teaching methods described seemed
very good for teaching
• Then designed toolkits,booksworkshops,
held
and wrote articles and

7. Background of Gainer
• Started in 2005 (before Arduino era)
• Let’s develop a toolkit that we want,
by ourselves
• Keep as simple as possible, so minimized
the functions to an I/O module

8. What is Gainer?
• A toolkit consisting of open source
hardware and software
• Hardware: I/O module with USB I/F
• Software libraries
• ActionScript 2/3
• Processing
• Max/MSP

9. Gainer I/O module
Photo: Shunsuke Takawo

10. Workshop example
• Yamaguchi Center for Arts and Media
• 2 days (2007.12.21-22)
• 19 participants
• Gainer I/O + Funnel + Processing

11. Lecture
Photo credit: YCAM

12. Practical training
Photo credit: YCAM

13. Idea sketches
Photo credit: YCAM

14. Hardware sketching
Photo credit: YCAM

15. Hardware sketching
Photo credit: YCAM

16. Presentation
Photo credit: YCAM

17. Presentation
Photo credit: YCAM

18. GAINER

19. GAINER: Tutorial

20. GAINER: Cookbook

21. GAINER: Works

22. Gainer as an O.S. Hardware
• Gainer I/O module v1.0
• Original version
• PSoC based

23. Gainer as an O.S. Hardware
• Gainer PSoC development board
• Designed by SparkFun Electronics
• PSoC based
• v1.3, v1.4 and v1.7

24. Gainer as an O.S. Hardware
• Ginger/Pepper/Sugar
• Designed by Morecat Lab
• AVR based

25. Gainer as an O.S. Hardware
• Gainer mini
• Designed by RT
• PIC based

26. Gainer as an O.S. Software
• .NET
• Perl
• Puredata
• Python
• Ruby
• Squeak
• vvvv

27. Recent activities at IAMAS
• Adopted of media arts to expression
tried and tested
methods interaction
design
• Will be yetinanother application for
industries addition to interactive
advertisements
• Developing a new design method for
physical interaction design: Gangu project

28. Processes of designing toys
• Research existing electric toys (many)
• Drawing idea sketches (many)
• Evaluate ideas andstudent
pick one for each
• Dirty prototype
• Hardware sketching
• Making prototypes
• Exhibiting
• Reflection

29. Toy example: Mountain Guitar
• Design: Junichi Kanebako
• A toy like musical interface - professional
guitar sound
• Gainer I/O (special model) + Max/MSP

30. Toy example: Jamming Gear
• Design: So Kanno and Kenichiro Saigo
• A Tangible interface for visualizing
digital music
• Sketch: Gainer I/O + Max/MSP
• Prototype: FIO + Bluetooth + Max/MSP

32. Motivation to Funnel
• An I/O module doesn’ttoolkitsall user needs
cover
and changing between is expensive
• For beginners, it is numerous sensorsreal-
difficult to handle
world inputs from
• Wired connection narrows ideas during
“sketching in hardware” stage

33. Background of Funnel
• Initially planned as “Gainer v2.0”
• Started in 2007: Arduino was commonly
available and widely used
• We usually used both Gainer and Arduino
• Don’t develop a newabout end users!
toolkit just for
differentiation: think
• How about “interconnecting” existing
toolkits?

34. Bill Buxton’s “design funnel”
• Sketching User Experiences (2007)
We extended to physical prototypes: “prototyping funnel”

35. Efforts in the classroom
Sketching Prototyping
Toolkit Gainer Gainer or Arduino
Connection wired wired, wireless or stand-alone
Programming PC only PC and/or microcontroller
Material cardboard, clay or styrofoam wood and/or 3D printing
Wiring breadboard soldering

36. What is Funnel?
• A toolkit to interconnect toolkits
• Covers from sketches to prototypes:
the prototyping funnel
• Intended designers/artists and engineers
to be a common language
between

37. Funnel features
• Translates “aprogramming language”
sensor language”
into “a GUI
• Various filters to handle inputs
• Scaler
• Divider (SetPoint)
• LPF, HPF etc.
• Oscillator
• A new I/O module based on Arduino

38. Interconnections via Funnel

39. Supported hardware
• Gainer I/O
• Arduino and compatibles (via Firmata v2)
• XBee (IEEE 802.15.4 or ZigBee)
• FIO (Funnel I/O)

40. Supported languages
• Processing
• ActionScript 3
• Ruby

41. Event detection (without Funnel)
var threshold:Number = 0.5;
var hysteresis:Number = 0.1;
var lastState:int = 0;
function loop():void {
var state:int = -1;
if (io.analogInput(0).value < (threshold - hysteresis)) {
state = 0;
} else ((io.analogInput(0).value > (threshold + hysteresis))) {
state = 1;
} else {
state = lastState;
}
if (lastState == 0 && state == 1) {
// on rising edge, do something
}
lastState = state;
}

42. Event detection (with Funnel)
Just add a filter
var threshold:Number = 0.5;
var hysteresis:Number = 0.1;
io.analogInput(0).filters = [new SetPoint([threshold, hysteresis])];
io.analogInput(0).addEventListener(PinEvent:RISING_EDGE, onRisingEdge);
function onRisingEdge(e:PinEvent):void {
// do something
}

43. Using a digital compass (with Funnel)
var fio:Fio;
var compass:HMC6352;
var clockHand:Shape;
function setup():void {
fio = new Fio([1], Fio.FIRMATA);
compass = new HMC6352(fio.ioModule(1));
...
}
Just add a sensor
function loop():void {
clockHand.rotation = compass.heading;
}

44. FIO as an O. S. Hardware
• FIO v1.0 (July, 2008)
• Original demo design
• 2 AAA rechargeable batteries

45. FIO as an O. S. Hardware
• FIO v1.3 (December, 2008)
• Designed with SparkFun Electronics
• A LiPo rechargeable battery

46. FIO as an O. S. Hardware
• Funnel IO remixed (January, 2009)
• Designed by Seeed Studio
• Just one month after FIO v1.3!

47. FIO as an O. S. Hardware
• Funnel IO remixed (January, 2009)
• Designed by Seeed Studio
• Just one month after FIO v1.3!

48. Future plans
• Add featureswhile keeping things simple
to handle real-world
applications,
• Optimize performance
• Support real embedded platforms
• Beagle Board
• Android
• Collaborate with additional toolkits!
• Write articles and books...

49. Designing toolkits for prototyping funnel
Shigeru Kobayashi (IAMAS)
Ubiquitous Content Symposium 2009 (February 27th, 2009) Photo credit: ICC