1. OSDC.TW 2009
The JUI Digest Taipei
2009.04.19
Yusuke Kawasaki
川﨑 有亮 (kawanet)
http://www.kawa.net/
JUI @ OSDC.TW 2009 1

2. 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 2009 2

3. 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 2009 3

4. DOM Manipulation
Last year, I manipulated
the DOM by Wiimote at
OSDC.TW 2008.
JUI @ OSDC.TW 2009 4

5. Journey started from Taipei
I went around the world to manipulate it.
8⽉
Copenhagen
6⽉ 5⽉
Chicago 東京
4⽉
台北
2008.04 OSDC.TW
2008.05 YAPC::Asia
2008.06 YAPC::NA
2008.08 YAPC::Europe
JUI @ OSDC.TW 2009 5

6. JS
AR
JSAR
AR (Augmented Reality)
Future of user interface
DEMO #1
JUI @ OSDC.TW 2009 6

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

8. 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 2009 8

9. AR marker
• AR marker patterns must be square.
• Only center quarter in it is used. (by default)
1 2 1
JUI @ OSDC.TW 2009 9

10. 16x16 pixel marker segment
• Center pattern is degitalized to 16x16 pix.
• Segment resolution is extensible to 32x32,
64x64, and more.
16
pixel
16 pixel
JUI @ OSDC.TW 2009 10

11. .pat – marker pattern file
34 36 75 193 194 195 29 35 36 88 195 193 192 186 161 108
35 37 78 192 192 195 49 37 38 45 156 195 193 192 191 190
32 35 75 192 191 193 41 37 39 43 50 92 152 186 193 192
114 35 77 190 189 187 33 42 43 79 86 97 62 52 82 177
157 55 138 188 189 170 43 44 48 152 190 190 116 47 51 119
189 187 188 188 188 119 47 46 48 115 193 192 188 145 146 191
187 187 187 188 133 44 44 44 47 51 148 196 192 193 193 193
90 99 103 73 44 45 43 46 46 47 49 73 119 128 115 101
42 45 46 47 47 45 45 47 48 48 49 51 54 54 54 57
118 137 128 144 58 47 48 47 49 108 132 124 125 141 135 121
188 193 194 194 109 48 50 49 51 149 198 199 200 199 198 198
190 191 193 194 159 41 49 49 51 156 200 200 167 119 140 195
190 192 162 196 196 67 48 49 49 160 199 200 137 61 62 126
195 140 119 197 195 126 48 49 52 163 197 197 149 99 122 176
193 102 69 197 194 184 42 47 50 149 195 196 194 194 194 194
189 66 49 167 192 191 79 46 48 156 193 193 169 174 191 190
34 36 80 202 202 202 32 39 40 83 200 200 200 201 178 121
34 36 81 200 200 202 51 40 41 40 142 199 198 199 199 199
34 38 79 199 199 201 42 41 42 44 45 81 145 186 200 199
121 39 82 197 197 193 33 42 44 83 91 103 63 43 67 174
166 62 139 196 196 174 41 45 45 148 196 197 131 50 51 120
195 196 194 194 195 118 45 45 45 103 197 198 197 160 151 197
192 192 193 194 139 44 43 44 45 45 131 198 197 198 199 198
81 96 98 73 42 42 42 43 43 45 45 62 110 124 110 100
42 42 44 46 45 44 43 43 44 44 48 49 50 51 52 54
121 143 136 150 60 45 44 44 46 109 139 132 134 147 140 126
193 194 196 196 114 45 44 44 45 149 202 202 203 202 202 202
193 193 194 197 163 40 44 44 47 156 203 203 169 116 128 193
194 195 161 200 201 71 45 45 45 160 202 203 137 57 58 119
198 139 110 199 200 133 46 45 49 165 201 201 155 103 127 182
196 99 62 198 198 190 44 45 47 150 199 201 199 199 199 199
194 69 54 172 196 195 85 44 47 157 197 198 174 172 197 197
:
jsarlogo.pat
JUI @ OSDC.TW 2009 11

12. ARToolKit Marker Generator Online
• Flash application to generate .pat file on the fly.
http://flash.tarotaro.org/ar/MarkerGeneratorOnline.html
JUI @ OSDC.TW 2009 12

13. 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.
<scrip t typ e=quot;t ext/ jav asc rip tquot; src =quot;swfobject.jsquot;></script>
<scrip t typ e=quot;t ext/ jav asc rip tquot; src =quot;jsar.jsquot;></script>
<scrip t typ e=quot;t ext/ jav asc rip tquot;><!- -
va r pat s= [ 'j sar log o.p at' ];
va r jsa r= new JSA R(' jsa r_here ');
js ar .dr awMa rker Rec t = tr ue;
js ar .on Dete cted = functi on (re sult) {...};
js ar .in it() ;
js ar .se tMar ker(pats);
js ar .st artL oop();
--></s cr ipt >
<div i d= quot;js ar_herequot;></div>
JUI @ OSDC.TW 2009 13

14. JSAR returns a JavaScript Object
{
quot;detec tedquot;: true,
quot;marke rsquot;: [
{
quot;c ode idquot; : 0,
quot;d ire cti onquot;: 2,
quot;c onf ide ncequot; : 0.512637,
quot;v ert exquot; :[
{ quot; xquot;: 346 , quot;yquot; : 201 },
{ quot; xquot;: 277 , quot;yquot; : 191 },
{ quot; xquot;: 353 , quot;yquot; : 130 },
{ quot; xquot;: 395 , quot;yquot; : 154 }
]
},
],
}
JUI @ OSDC.TW 2009 14

15. Now ready to augment the reality!
• You can overlay something
on screen where markers
detected. Itʼs an AR.
• Use <canvas> element
or any HTML elements something here
to show something on it.
{ quot;xquot;: 346, quot;yquot;: 201 },
{ quot;xquot;: 277, quot;yquot;: 191 },
{ quot;xquot;: 353, quot;yquot;: 130 },
{ quot;xquot;: 395, quot;yquot;: 154 }
JUI @ OSDC.TW 2009 15

16. 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 web form
AR buttons
AR EC
JUI @ OSDC.TW 2009 16

17. Running JavaScript means...
Needless to say,
you can manipulate
DOM on it.
JUI @ OSDC.TW 2009 17

18. N x M Markers
• Multiple .pat files.
• Multiple markers on screen.
JS
AR
quot;codeidquot;: 0 quot;codeidquot;: 1 quot;codeidquot;: 2
JUI @ OSDC.TW 2009 18

19. Price is an advantage for UI
Wii Remote JSAR
costs US$35.96 costs US$0.00
(sold at Amazon) (needs webcam and
printer)
JS
AR
JUI @ OSDC.TW 2009 19

20. Re: “Improve web performance
using CDN” (gslin)
- A CDN Use Case -
JUI @ OSDC.TW 2009 20

21. Air Yakiniku – エア焼⾁
http://airyakiniku.cosaji.jp/
JUI @ OSDC.TW 2009 21

22. 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 2009 22

23. 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 2009 23

24. 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 2009 24

25. AiR Xiaolongbao
エア⼩籠包
DEMO #2
JUI @ OSDC.TW 2009 25

26. 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 2009 26

27. Brief history of JavaScript's
3D tech development
- How to use 3D by JavaScript -
JUI @ OSDC.TW 2009 27

28. 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 2009 28

29. 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 2009 29

30. 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 2009 30

31. 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 2009 31

32. 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 2009 32

33. The JUI Digest
Recent topics on the JavaScript
User Interface conference.
JUI @ OSDC.TW 2009 33

34. JUI #1 - 2008.05
Paul Bakaus amachang inucara iandeth
gugod chris monjudoh noriaki ingy
JUI @ OSDC.TW 2009 34

35. 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 2009 35

36. DIY Flash Player – by Yukoba
JUI @ OSDC.TW 2009 36

37. Compatibility Issue
JUI @ OSDC.TW 2009 37

38. JSplash – by Gyuque
JUI @ OSDC.TW 2009 38

39. JSplash overview
Flare
SWF
converter
1. generate SVG
JSON
player 2. execute tags
3. run AS as JS
JS Engine on browser
JUI @ OSDC.TW 2009 39

40. JSON example for a tag converted
JUI @ OSDC.TW 2009 40

41. Compatibility
JUI @ OSDC.TW 2009 41

42. AS-JS code translater
JUI @ OSDC.TW 2009 42

43. Gyuqyuʼs Demo
http://gyu.que.jp/max/
small G small Q
JUI @ OSDC.TW 2009 43

44. JS Synthsizer – by Moriyoshi
JUI @ OSDC.TW 2009 44

45. data: scheme
JUI @ OSDC.TW 2009 45

46. Typical usage for data: scheme
JUI @ OSDC.TW 2009 46

47. How JS Synthsizer works
1. wave 2. mix 3. encode 4. iframe
JUI @ OSDC.TW 2009 47

48. JS Synthsizer sample code
var s = [];
var mml = 'CD EFGA B';
var sg = n ew Soun dGen erator(16000);
var mb = n ew Musi cBui lder(sg);
mb. s g.f ilt er = ne w La dderFilter(16000, 0.75, 3320, 0.6);
mb. p ars eMM L( mml );
s.p u sh( mb. sg. data );
var sp = n ew Soun dPla yer(16000);
sp. p lay .ap ply (sp, s);
<if ram e sty le= “vi sib ili ty: hid den ;” src =“d ata :au dio /wa v,R IFF
%24 %7D %0 0%0 0WA VEf mt% 20% 10% 0 0%0 0%0 0%0 1%0 0%0 1%0 0%8 0%3 E%0 0%0 0%8
0%3 E%0 0% 00% 01% 00% 08% 00d ata % 00% 7D% 00% 00% 80% D6% AA% D1% B9% C7% B7%
BC% B0% B3 %A9 %A9 %A2 %A1 %9C %97 % 95% 8D% 8E% 84% 87% 7B% 7Fr %83 %9F %96 %9D
%98 %96 %9 2%8 E%8 B%8 6%8 1%7 Dyu r lif %60 i%8 C%7 D%8 7%8 0%8 1%A 7%A 4%A 5%A
:
00%00%00%00%00%00%00%00%00%00quot;></iframe>
JUI @ OSDC.TW 2009 48

49. Moriyoshiʼs Demo
http://svn.coderepos.org/
share/lang/javascript/
SoundGenerator/test.html
JUI @ OSDC.TW 2009 49

50. DOM performance tuning - by Amachang
JUI @ OSDC.TW 2009 50

51. Amachangʼs online presentation
http://amachang.sakura.ne.jp/misc/max/
It runs on Safari current
or Chrome dev branch.
No IE.
No Firefox.
JUI @ OSDC.TW 2009 51

52. Todayʼs Dessert Menu
JUI @ OSDC.TW 2009 52

53. OSDC.TW is a conference for pudding?
JUI @ OSDC.TW 2009 53

54. AiR Pudding
エアプリン
Last DEMO
JUI @ OSDC.TW 2009 54

55. Thank you!
Yusuke Kawasaki
川﨑 有亮 (kawanet)
http://www.kawa.net/
JUI @ OSDC.TW 2009 55