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

Introduction

• Roland Corp. (1993∼2004)

– Sound design

– Software engineering

• IAMAS (2004∼)

– Physical computing

– Interaction design

Introduction: Gainer

＋GAINERPhysical Computing with Gainer

GainerBook Labo + Kurukuru Lab (2007 and 2008)

＋GAINER: Tutorial

＋GAINER: Cookbook

＋GAINER: Works

Introduction: Make Magazine (in Japanese)

Make: Technology on Your Time Volume 04-07

O’Reilly Japan (2008-2009)

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.

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

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

Gainer I/O modules

Efforts in the classroom at IAMAS

Sketching PrototypingToolkit Gainer Gainer or Arduino

Connection Wired Wired or stand-aloneProgramming PC only PC and/or microcontroller

Material Cardboard WoodStyrofoam 3D printing (ABS)

Wiring Breadboard Soldering

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

Funnel?

Bill Buxton: Sketching User Experiences (2007)

What is Funnel?

• A toolkit for interconnecting toolkits

• Covering sketching to prototyping

• Intended to be a common language between

designers/artists and engineers

What is Funnel?

The Funnel development team

• Shigeru Kobayashi (IAMAS)

• Takanori Endo (IAMAS)

• Ichitaro Masuda (Metaphor Inc.)

Interconnections via Funnel

USB XBeeBridge

GainerI/O Module

Arduino(with Firmata)

USB XBeeBridge

Funnel Server

ActionScript 3 ProcessingMax/MSPetc.

Ruby

AS3 Library Processing Library OSC LibrariesRuby Library

FIO XBeeFIO XBee

Interconnections via Funnel

Supported hardware

• Gainer I/O

• Arduino (via Firmata v2.1)

• XBee (IEEE 802.15.4/ZigBee)

• FIO

Interconnections via Funnel

Supported languages

• Processing

• ActionScript 3

• Ruby

What’s new since the last year?

• Contributors

• FIO

• Firmata v2.1 compatible

• I2C device classes

• Physical UI classes

• Collaboration with ‘wonderfl’

Contributors

• Jeff Hoefs

– AS3 (I2C device classes)

– A lot of helpful suggestions

• Kazuyoshi Kato

– Ruby (Gainer)

• Kazushi Mukaiyama

– AS3 (I2C device classes)

FIO v1.3

FIO v1.3

+-

FIO v1.3

FIO v1.3 vs Funnel IO Remixed

Funnel IO Remixed

Firmata v2.1 compatible

Proposed suggestions to Firmata v2.1

• I2C REQUEST

• I2C REPLY

• I2C CONFIG

• SAMPLING INTERVAL

I2C device classes

• BlinkM/MaxM

• Accelerometer (LIS302DL and LIS3LV02DQ)

• Colour sensor (ADJD-S371-QR999)

• Digital compass (HMC6343 and HMC6352)

• Wii Nunchuck

I2C 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]);

}

Physical UI classes

• Button

• LED

• RGBLED

• Accelerometer

• Potentiometer

• Servo

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();

});

}

Physical UI class example

Button events to simplify events in time domain

• PRESS

• RELEASE

• LONG PRESS

• SUSTAINED PRESS

Collaboration with ‘wonderfl’

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

Example 1: create from scratch

Example 1: create from scratch

Example 1: create from scratch

Example 1: create from scratch

Example 2: fork from an exisiting code

Example 2: fork from an exisiting code

Example 2: fork from an exisiting code

Example 2: fork from an exisiting code

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)

Demo: physical × wonderfl

• Write code online

• Test without hardware

• Test with hardware

What users can do

• Write

• Get feedback

• Share

• Raise questions

What potential users can do

• Try without hardware

• Feel the possibilities of physical computing

• Learn by using working examples

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

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

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