the jui digest taipei (jsar) - osdc.tw 2009
DESCRIPTION
TRANSCRIPT
JUI @ OSDC.TW 2009JUI @ OSDC.TW 2009 11
The JUI Digest Taipei
2009.04.19Yusuke Kawasaki
川﨑 有亮 (kawanet)http://www.kawa.net/
OSDC.TW 2009
JUI @ OSDC.TW 2009JUI @ OSDC.TW 2009 22
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
JUI @ OSDC.TW 2009JUI @ OSDC.TW 2009 33
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
JUI @ OSDC.TW 2009JUI @ OSDC.TW 2009 44
DOM Manipulation
Last year, I manipulated the DOM by Wiimote at OSDC.TW 2008.
JUI @ OSDC.TW 2009JUI @ OSDC.TW 2009 55
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
JUI @ OSDC.TW 2009JUI @ OSDC.TW 2009 66
JSAR
AR (Augmented Reality)Future of user interface
DEMO #1
SR
JA
JUI @ OSDC.TW 2009JUI @ OSDC.TW 2009 77
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
JUI @ OSDC.TW 2009JUI @ OSDC.TW 2009 88
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
JUI @ OSDC.TW 2009JUI @ OSDC.TW 2009 99
AR marker
• AR marker patterns must be square.• Only center quarter in it is used. (by default)
1 2 1
JUI @ OSDC.TW 2009JUI @ OSDC.TW 2009 1010
16x16 pixel marker segment
• Center pattern is degitalized to 16x16 pix.• Segment resolution is extensible to 32x32,
64x64, and more.
16 pixel
16pixel
JUI @ OSDC.TW 2009JUI @ OSDC.TW 2009 1111
.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
JUI @ OSDC.TW 2009JUI @ OSDC.TW 2009 1212
ARToolKit Marker Generator Online
• Flash application to generate .pat file on the fly.http://flash.tarotaro.org/ar/MarkerGeneratorOnline.html
JUI @ OSDC.TW 2009JUI @ OSDC.TW 2009 1313
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 >
JUI @ OSDC.TW 2009JUI @ OSDC.TW 2009 1414
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 }
]} ,
] ,}
JUI @ OSDC.TW 2009JUI @ OSDC.TW 2009 1515
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 }
JUI @ OSDC.TW 2009JUI @ OSDC.TW 2009 1616
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
JUI @ OSDC.TW 2009JUI @ OSDC.TW 2009 1717
Running JavaScript means...
Needless to say, you can manipulate DOM on it.
JUI @ OSDC.TW 2009JUI @ OSDC.TW 2009 1818
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
JUI @ OSDC.TW 2009JUI @ OSDC.TW 2009 1919
Price is an advantage for UI
Wii Remotecosts US$35.96(sold at Amazon)
JSARcosts US$0.00(needs webcam and printer)
SR
JA
JUI @ OSDC.TW 2009JUI @ OSDC.TW 2009 2020
Re: “Improve web performance using CDN” (gslin)
- A CDN Use Case -
JUI @ OSDC.TW 2009JUI @ OSDC.TW 2009 2121
Air Yakiniku – エア焼⾁
http://airyakiniku.cosaji.jp/
JUI @ OSDC.TW 2009JUI @ OSDC.TW 2009 2222
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. :)
JUI @ OSDC.TW 2009JUI @ OSDC.TW 2009 2323
Yahoo! Bomb
Few days leter, we got more than 70Mbps traffic through Yahoo! search word ranking.It exhausted our network and made MRTG failed.
JUI @ OSDC.TW 2009JUI @ OSDC.TW 2009 2424
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.
JUI @ OSDC.TW 2009JUI @ OSDC.TW 2009 2525
AiR Xiaolongbaoエア⼩籠包
DEMO #2
JUI @ OSDC.TW 2009JUI @ OSDC.TW 2009 2626
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...
JUI @ OSDC.TW 2009JUI @ OSDC.TW 2009 2727
Brief history of JavaScript's3D tech development
- How to use 3D by JavaScript -
JUI @ OSDC.TW 2009JUI @ OSDC.TW 2009 2828
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
JUI @ OSDC.TW 2009JUI @ OSDC.TW 2009 2929
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
JUI @ OSDC.TW 2009JUI @ OSDC.TW 2009 3030
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
JUI @ OSDC.TW 2009JUI @ OSDC.TW 2009 3131
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/
JUI @ OSDC.TW 2009JUI @ OSDC.TW 2009 3232
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
JUI @ OSDC.TW 2009JUI @ OSDC.TW 2009 3333
The JUI Digest
Recent topics on the JavaScript User Interface conference.
JUI @ OSDC.TW 2009JUI @ OSDC.TW 2009 3434
JUI #1 - 2008.05
Paul Bakaus amachang inucara iandeth
gugod chris monjudoh noriaki ingy
JUI @ OSDC.TW 2009JUI @ OSDC.TW 2009 3535
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/
JUI @ OSDC.TW 2009JUI @ OSDC.TW 2009 3636
DIY Flash Player DIY Flash Player –– by Yukobaby Yukoba
JUI @ OSDC.TW 2009JUI @ OSDC.TW 2009 3737
Compatibility IssueCompatibility Issue
JUI @ OSDC.TW 2009JUI @ OSDC.TW 2009 3838
JSplash JSplash –– by Gyuqueby Gyuque
JUI @ OSDC.TW 2009JUI @ OSDC.TW 2009 3939
JSplash overview
converter
player
1. generate SVG
2. execute tags
3. run AS as JS
SWF
JSON
Flare
JS Engine on browser
JUI @ OSDC.TW 2009JUI @ OSDC.TW 2009 4040
JSON example for a tag convertedJSON example for a tag converted
JUI @ OSDC.TW 2009JUI @ OSDC.TW 2009 4141
CompatibilityCompatibility
JUI @ OSDC.TW 2009JUI @ OSDC.TW 2009 4242
ASAS--JS code translaterJS code translater
JUI @ OSDC.TW 2009JUI @ OSDC.TW 2009 4343
Gyuqyuʼs Demo
h t t p : / / g y u . q u e . j p / m a x /small G small Q
JUI @ OSDC.TW 2009JUI @ OSDC.TW 2009 4444
JS Synthsizer JS Synthsizer –– by Moriyoshiby Moriyoshi
JUI @ OSDC.TW 2009JUI @ OSDC.TW 2009 4545
data: schemedata: scheme
JUI @ OSDC.TW 2009JUI @ OSDC.TW 2009 4646
Typical usage for data: schemeTypical usage for data: scheme
JUI @ OSDC.TW 2009JUI @ OSDC.TW 2009 4747
How JS Synthsizer worksHow JS Synthsizer works
1. wave 2. mix 3. encode 4. iframe1. wave 2. mix 3. encode 4. iframe
JUI @ OSDC.TW 2009JUI @ OSDC.TW 2009 4848
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 ) ;
JUI @ OSDC.TW 2009JUI @ OSDC.TW 2009 4949
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
JUI @ OSDC.TW 2009JUI @ OSDC.TW 2009 5050
DOM performance tuning DOM performance tuning -- by Amachangby Amachang
JUI @ OSDC.TW 2009JUI @ OSDC.TW 2009 5151
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 /
JUI @ OSDC.TW 2009JUI @ OSDC.TW 2009 5252
Todayʼs Dessert Menu
JUI @ OSDC.TW 2009JUI @ OSDC.TW 2009 5353
OSDC.TW is a conference for pudding?
JUI @ OSDC.TW 2009JUI @ OSDC.TW 2009 5454
AiR Puddingエアプリン
Last DEMO
JUI @ OSDC.TW 2009JUI @ OSDC.TW 2009 5555
Thank you!
Yusuke Kawasaki川﨑 有亮 (kawanet)
http://www.kawa.net/