the jui digest taipei (jsar) - osdc.tw 2009

JUI @ OSDC.TW 2009JUI @ OSDC.TW 2009 11

The JUI Digest Taipei

2009.04.19Yusuke Kawasaki

川﨑有亮 (kawanet)http://www.kawa.net/

OSDC.TW 2009


Todayʼs Menu

• JSAR – future of user interface–JavaScript Augmented Reality

• Re: “Improve web performance using CDN”• Brief history of JavaScript 3D techs• A glance into the latest JUI conference

–DIY Flash Player by Yukoba–JSplash by Gyuque–JS Synthsizer by Moriyoshi–JS Keynote by Amachang


Yusuke Kawasaki（川﨑有亮）

• Perl monger– XML::TreePP, XML::FeedPP, etc.

• JavaScript addict– Shibuya.js, the JUI confʼs organizer

• Xiaolongbao♥– ⼩籠包! ⼩籠包! ⼩籠包!

• Media Technology Labs– Recruit Co., Ltd. in Japan

http://www.kawa.net/http://twitter.com/kawa0117


DOM Manipulation

Last year, I manipulated the DOM by Wiimote at OSDC.TW 2008.


Journey started from Taipei

I went around the world to manipulate it.

2008.04 OSDC.TW2008.05 YAPC::Asia2008.06 YAPC::NA2008.08 YAPC::Europe

4⽉台北

5⽉東京

6⽉Chicago

8⽉Copenhagen


JSAR

AR (Augmented Reality)Future of user interface

DEMO #1

SR

JA


AR (Augmented Reality)

【AR】– 拡張現実（⽇）– 增強現實（中）[zeng1 qiang2 xian4 shi2]– Augmented Reality (英）

http://en.wikipedia.org/wiki/Augmented_reality• Augmented reality (AR) is a field of computer

research which deals with the combination of real-world and computer-generated data (virtual reality), where computer graphics objects are blended into real footage in real time.

• AR ≒ VR materials on live video


JSARToolKit

• JSAR– JavaScript Augmented Reality

• JSARToolKit– A library to run AR by JavaScript– A proxy wrapper for a Flash app using FLARToolKit

• Genealogy– 2008.03 – NyARToolKit for Java - by A⻁@nyatla.jp– 2008.05 – FLARToolKit for ActionScript3 by Saqoosha– 2009.04 – JSARToolKit for JavaScript by Kawanet


AR marker

• AR marker patterns must be square.• Only center quarter in it is used. (by default)

1 2 1


16x16 pixel marker segment

• Center pattern is degitalized to 16x16 pix.• Segment resolution is extensible to 32x32,

64x64, and more.

16 pixel

16pixel


.pat – marker pattern file

3 4 3 6 7 5 1 9 3 1 9 4 1 9 5 2 9 3 5 3 6 8 8 1 9 5 1 9 3 1 9 2 1 8 6 1 6 1 1 0 83 5 3 7 7 8 1 9 2 1 9 2 1 9 5 4 9 3 7 3 8 4 5 1 5 6 1 9 5 1 9 3 1 9 2 1 9 1 1 9 03 2 3 5 7 5 1 9 2 1 9 1 1 9 3 4 1 3 7 3 9 4 3 5 0 9 2 1 5 2 1 8 6 1 9 3 1 9 21 1 4 3 5 7 7 1 9 0 1 8 9 1 8 7 3 3 4 2 4 3 7 9 8 6 9 7 6 2 5 2 8 2 1 7 71 5 7 5 5 1 3 8 1 8 8 1 8 9 1 7 0 4 3 4 4 4 8 1 5 2 1 9 0 1 9 0 1 1 6 4 7 5 1 1 1 91 8 9 1 8 7 1 8 8 1 8 8 1 8 8 1 1 9 4 7 4 6 4 8 1 1 5 1 9 3 1 9 2 1 8 8 1 4 5 1 4 6 1 9 11 8 7 1 8 7 1 8 7 1 8 8 1 3 3 4 4 4 4 4 4 4 7 5 1 1 4 8 1 9 6 1 9 2 1 9 3 1 9 3 1 9 39 0 9 9 1 0 3 7 3 4 4 4 5 4 3 4 6 4 6 4 7 4 9 7 3 1 1 9 1 2 8 1 1 5 1 0 14 2 4 5 4 6 4 7 4 7 4 5 4 5 4 7 4 8 4 8 4 9 5 1 5 4 5 4 5 4 5 71 1 8 1 3 7 1 2 8 1 4 4 5 8 4 7 4 8 4 7 4 9 1 0 8 1 3 2 1 2 4 1 2 5 1 4 1 1 3 5 1 2 11 8 8 1 9 3 1 9 4 1 9 4 1 0 9 4 8 5 0 4 9 5 1 1 4 9 1 9 8 1 9 9 2 0 0 1 9 9 1 9 8 1 9 81 9 0 1 9 1 1 9 3 1 9 4 1 5 9 4 1 4 9 4 9 5 1 1 5 6 2 0 0 2 0 0 1 6 7 1 1 9 1 4 0 1 9 51 9 0 1 9 2 1 6 2 1 9 6 1 9 6 6 7 4 8 4 9 4 9 1 6 0 1 9 9 2 0 0 1 3 7 6 1 6 2 1 2 61 9 5 1 4 0 1 1 9 1 9 7 1 9 5 1 2 6 4 8 4 9 5 2 1 6 3 1 9 7 1 9 7 1 4 9 9 9 1 2 2 1 7 61 9 3 1 0 2 6 9 1 9 7 1 9 4 1 8 4 4 2 4 7 5 0 1 4 9 1 9 5 1 9 6 1 9 4 1 9 4 1 9 4 1 9 41 8 9 6 6 4 9 1 6 7 1 9 2 1 9 1 7 9 4 6 4 8 1 5 6 1 9 3 1 9 3 1 6 9 1 7 4 1 9 1 1 9 03 4 3 6 8 0 2 0 2 2 0 2 2 0 2 3 2 3 9 4 0 8 3 2 0 0 2 0 0 2 0 0 2 0 1 1 7 8 1 2 13 4 3 6 8 1 2 0 0 2 0 0 2 0 2 5 1 4 0 4 1 4 0 1 4 2 1 9 9 1 9 8 1 9 9 1 9 9 1 9 93 4 3 8 7 9 1 9 9 1 9 9 2 0 1 4 2 4 1 4 2 4 4 4 5 8 1 1 4 5 1 8 6 2 0 0 1 9 91 2 1 3 9 8 2 1 9 7 1 9 7 1 9 3 3 3 4 2 4 4 8 3 9 1 1 0 3 6 3 4 3 6 7 1 7 41 6 6 6 2 1 3 9 1 9 6 1 9 6 1 7 4 4 1 4 5 4 5 1 4 8 1 9 6 1 9 7 1 3 1 5 0 5 1 1 2 01 9 5 1 9 6 1 9 4 1 9 4 1 9 5 1 1 8 4 5 4 5 4 5 1 0 3 1 9 7 1 9 8 1 9 7 1 6 0 1 5 1 1 9 71 9 2 1 9 2 1 9 3 1 9 4 1 3 9 4 4 4 3 4 4 4 5 4 5 1 3 1 1 9 8 1 9 7 1 9 8 1 9 9 1 9 88 1 9 6 9 8 7 3 4 2 4 2 4 2 4 3 4 3 4 5 4 5 6 2 1 1 0 1 2 4 1 1 0 1 0 04 2 4 2 4 4 4 6 4 5 4 4 4 3 4 3 4 4 4 4 4 8 4 9 5 0 5 1 5 2 5 41 2 1 1 4 3 1 3 6 1 5 0 6 0 4 5 4 4 4 4 4 6 1 0 9 1 3 9 1 3 2 1 3 4 1 4 7 1 4 0 1 2 61 9 3 1 9 4 1 9 6 1 9 6 1 1 4 4 5 4 4 4 4 4 5 1 4 9 2 0 2 2 0 2 2 0 3 2 0 2 2 0 2 2 0 21 9 3 1 9 3 1 9 4 1 9 7 1 6 3 4 0 4 4 4 4 4 7 1 5 6 2 0 3 2 0 3 1 6 9 1 1 6 1 2 8 1 9 31 9 4 1 9 5 1 6 1 2 0 0 2 0 1 7 1 4 5 4 5 4 5 1 6 0 2 0 2 2 0 3 1 3 7 5 7 5 8 1 1 91 9 8 1 3 9 1 1 0 1 9 9 2 0 0 1 3 3 4 6 4 5 4 9 1 6 5 2 0 1 2 0 1 1 5 5 1 0 3 1 2 7 1 8 21 9 6 9 9 6 2 1 9 8 1 9 8 1 9 0 4 4 4 5 4 7 1 5 0 1 9 9 2 0 1 1 9 9 1 9 9 1 9 9 1 9 91 9 4 6 9 5 4 1 7 2 1 9 6 1 9 5 8 5 4 4 4 7 1 5 7 1 9 7 1 9 8 1 7 4 1 7 2 1 9 7 1 9 7

:

jsarlogo.pat


ARToolKit Marker Generator Online

• Flash application to generate .pat file on the fly.http://flash.tarotaro.org/ar/MarkerGeneratorOnline.html


Run JSAR on your website

It needs just several lines of JavaScript code to use AR.When a marker found, it calls onDetect callback function.

< s c r i p t t y p e = " t e x t / j a v a s c r i p t " s r c = " s w f o b j e c t . j s " > < / s c r i p t >< s c r i p t t y p e = " t e x t / j a v a s c r i p t " s r c = " j s a r . j s " > < / s c r i p t >< s c r i p t t y p e = " t e x t / j a v a s c r i p t " > < ! - -

v a r p a t s = [ ' j s a r l o g o . p a t ' ] ;v a r j s a r = n e w J S A R ( ' j s a r _ h e r e ' ) ;j s a r . d r a w M a r k e r R e c t = t r u e ;j s a r . o n D e t e c t e d = f u n c t i o n ( r e s u l t ) { . . . } ;j s a r . i n i t ( ) ;j s a r . s e t M a r k e r ( p a t s ) ;j s a r . s t a r t L o o p ( ) ;

- - > < / s c r i p t >< d i v i d = " j s a r _ h e r e " > < / d i v >


JSAR returns a JavaScript Object

{" d e t e c t e d " : t r u e ," m a r k e r s " : [{

" c o d e i d " : 0 ," d i r e c t i o n " : 2 ," c o n f i d e n c e " : 0 . 5 1 2 6 3 7 ," v e r t e x " : [{ " x " : 3 4 6 , " y " : 2 0 1 } ,{ " x " : 2 7 7 , " y " : 1 9 1 } ,{ " x " : 3 5 3 , " y " : 1 3 0 } ,{ " x " : 3 9 5 , " y " : 1 5 4 }

]} ,

] ,}


Now ready to augment the reality!

• You can overlay something on screen where markersdetected. Itʼs an AR.

• Use <canvas> elementor any HTML elementsto show something on it.

something here

{ "x": 346, "y": 201 },{ "x": 277, "y": 191 },{ "x": 353, "y": 130 },{ "x": 395, "y": 154 }


JSAR is written in JavaScript

• JSAR is not written in ActionScript nor Java.• To augment the reality, overlay something,

every HTML elements are allowed by JSAR!• Ex:

AR EC

AR web formAR buttons


Running JavaScript means...

Needless to say, you can manipulate DOM on it.


N x M Markers

• Multiple .pat files.• Multiple markers on screen.

SR

JA" c o d e i d " : 0 " c o d e i d " : 1 " c o d e i d " : 2


Price is an advantage for UI

Wii Remotecosts US$35.96(sold at Amazon)

JSARcosts US$0.00(needs webcam and printer)

SR

JA


Re: “Improve web performance using CDN” (gslin)

- A CDN Use Case -


Air Yakiniku – エア焼⾁

http://airyakiniku.cosaji.jp/


Air Yakiniku is a SaaS?

SaaS (software as a service) means it requires no package software sold in town.

Using the Air Yakiniku, ...1. You donʼt need install any software to your PC because itʼs an web application.2. You donʼt need to go to supermarket to buy a beef package anymore.

Then, I could say itʼs a SaaS. :)


Yahoo! Bomb

Few days leter, we got more than 70Mbps traffic through Yahoo! search word ranking.It exhausted our network and made MRTG failed.


Solution: Amazon CloudFront

• We decided to use CloudFront in a hurry. (2h)

• Soon reached to 1Gbps limit of CloudFront.• Costs only US$2,400 for the first month.

Enough worth for us to keep the service on.


AiR Xiaolongbaoエア⼩籠包

DEMO #2


JSAR future

• AR has a big opportunity to augment the user interface technology.

• JSAR could be one of the affordable solutions to implement AR on the Net.

• The current version of JSAR doesnʼt have a 3D engine included though. But...


Brief history of JavaScript's3D tech development

- How to use 3D by JavaScript -


2006.04 - Animation.Cube

• Three years ago, Yusuke Kawasaki wrote a library named Animation.Cube which slices images into many vertical lines to show rotating cube.

• The code is on JSAN. JSAN is almost dead however.

http://www.kawa.net/works/js/animation/cube-e.html


2006.10 - Triangles by Div Border

Useless Pickles (Jeff Lau) shows polygons drawn by many triangles made by <div> elements using trick of borders. It means we could develop Virtua Fighter (1) by JavaScript since that time.

http://www.uselesspickles.com/triangles/demo.html


2008.03 - 3D on Canvas

Again, Yusuke Kawasaki wrote a new 3D engine using <canvas> element to draw wireframe image and polygons. The code was written to manipulate Wii Remote controllers at OSDC.TW 2008.

http://kawa.at.webry.info/200804/article_1.html


2008.03 - 3D Renderer with Textures

At just about the same time, Jacob Seidelin gave a great demo with texture mapped polygons using <canvas> element.

http://www.nihilogic.dk/labs/canvas3dtexture_0.2/


2009.02 - Sphere Environment Mapping

Satoshi Ueyama reported that Chrome had extremely fast canvas rendering engine named Skia. He demonstrated it and showed benchmarks. He also implemented physical computing and sphere environment mapping feature on it.

http://d.hatena.ne.jp/gyuque/20090211#1234364019


The JUI Digest

Recent topics on the JavaScript User Interface conference.


JUI #1 - 2008.05

Paul Bakaus amachang inucara iandeth

gugod chris monjudoh noriaki ingy


JUI #2 - 2009.01

• Itʼs held as a sub-conference in the Adobe MAX 2009 Japan conference.

Five JavaScript addicts gave talks.川崎有亮 (kawanet)http://www.kawa.net/上⼭智⼠ (gyuque)http://d.hatena.ne.jp/gyuque/⼩泉守義 (moriyoshi)http://d.hatena.ne.jp/moriyoshi/⼩林悠 (yukoba) http://d.hatena.ne.jp/yukoba/天野仁史 (amachang)http://d.hatena.ne.jp/amachang/


DIY Flash Player DIY Flash Player –– by Yukobaby Yukoba


Compatibility IssueCompatibility Issue


JSplash JSplash –– by Gyuqueby Gyuque


JSplash overview

converter

player

1. generate SVG

2. execute tags

3. run AS as JS

SWF

JSON

Flare

JS Engine on browser


JSON example for a tag convertedJSON example for a tag converted


CompatibilityCompatibility


ASAS--JS code translaterJS code translater


Gyuqyuʼs Demo

h t t p : / / g y u . q u e . j p / m a x /small G small Q


JS Synthsizer JS Synthsizer –– by Moriyoshiby Moriyoshi


data: schemedata: scheme


Typical usage for data: schemeTypical usage for data: scheme


How JS Synthsizer worksHow JS Synthsizer works

1. wave 2. mix 3. encode 4. iframe1. wave 2. mix 3. encode 4. iframe


JS Synthsizer sample code

< i f r a m e s t y l e = “ v i s i b i l i t y : h i d d e n ; ” s r c = “ d a t a : a u d i o / w a v , R I F F% 2 4 % 7 D % 0 0 % 0 0 W A V E f m t % 2 0 % 1 0 % 0 0 % 0 0 % 0 0 % 0 1 % 0 0 % 0 1 % 0 0 % 8 0 % 3 E % 0 0 % 0 0 % 80 % 3 E % 0 0 % 0 0 % 0 1 % 0 0 % 0 8 % 0 0 d a t a % 0 0 % 7 D % 0 0 % 0 0 % 8 0 % D 6 % A A % D 1 % B 9 % C 7 % B 7 %B C % B 0 % B 3 % A 9 % A 9 % A 2 % A 1 % 9 C % 9 7 % 9 5 % 8 D % 8 E % 8 4 % 8 7 % 7 B % 7 F r % 8 3 % 9 F % 9 6 % 9 D% 9 8 % 9 6 % 9 2 % 8 E % 8 B % 8 6 % 8 1 % 7 D y u r l i f % 6 0 i % 8 C % 7 D % 8 7 % 8 0 % 8 1 % A 7 % A 4 % A 5 % A

:0 0 % 0 0 % 0 0 % 0 0 % 0 0 % 0 0 % 0 0 % 0 0 % 0 0 % 0 0 " > < / i f r a m e >

v a r s = [ ] ;v a r m m l = ' C D E F G A B ' ;v a r s g = n e w S o u n d G e n e r a t o r ( 1 6 0 0 0 ) ;v a r m b = n e w M u s i c B u i l d e r ( s g ) ;m b . s g . f i l t e r = n e w L a d d e r F i l t e r ( 1 6 0 0 0 , 0 . 7 5 , 3 3 2 0 , 0 . 6 ) ;m b . p a r s e M M L ( m m l ) ;s . p u s h ( m b . s g . d a t a ) ;v a r s p = n e w S o u n d P l a y e r ( 1 6 0 0 0 ) ;s p . p l a y . a p p l y ( s p , s ) ;


Moriyoshiʼs Demo

h t t p : / / s v n . c o d e r e p o s . o r g /s h a r e / l a n g / j a v a s c r i p t /S o u n d G e n e r a t o r / t e s t . h t m l


DOM performance tuning DOM performance tuning -- by Amachangby Amachang


Amachangʼs online presentation

It runs on Safari currentor Chrome dev branch.No IE.No Firefox.

h t t p : / / a m a c h a n g . s a k u r a . n e . j p / m i s c / m a x /


Todayʼs Dessert Menu


OSDC.TW is a conference for pudding?


AiR Puddingエアプリン

Last DEMO


Thank you!

Yusuke Kawasaki川﨑有亮 (kawanet)

http://www.kawa.net/