The JUI Digest Taipei (JSAR) - OSDC.TW 2009

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

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

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

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

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

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

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

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

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

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

.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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Compatibility Issue JUI @ OSDC.TW 2009 37

JSplash – by Gyuque JUI @ OSDC.TW 2009 38

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

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

Compatibility JUI @ OSDC.TW 2009 41

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

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

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

data: scheme JUI @ OSDC.TW 2009 45

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

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

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

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

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

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

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

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

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

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

http://kawanet.blogspot.com	251
http://kawa.at.webry.info	61
http://infuture.pixnet.net	27
http://kawanet.blogspot.com.ar	14
http://translate.googleusercontent.com	4
http://kawanet.blogspot.co.uk	4
http://kawanet.blogspot.in	3
http://coderwall.com	3
http://www.slideshare.net	2
http://kawanet.blogspot.fr	1
http://kawanet.blogspot.ca	1
http://webcache.googleusercontent.com	1
http://kawanet.blogspot.it	1

The JUI Digest Taipei (JSAR) - OSDC.TW 2009

by Yusuke Kawasaki on Apr 21, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

13 Embeds 373

Statistics

The JUI Digest Taipei (JSAR) - OSDC.TW 2009 — Presentation Transcript