SlideShare a Scribd company logo
1 of 55
Download to read offline
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

More Related Content

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

Korepatentistaitsitkleri
KorepatentistaitsitkleriKorepatentistaitsitkleri
KorepatentistaitsitkleriAli CAVUSOGLU
 
【国環研】平成18年環境報告書
【国環研】平成18年環境報告書【国環研】平成18年環境報告書
【国環研】平成18年環境報告書env07
 
Gnodal Presentation at Spirent Booth, Interop 2012
Gnodal Presentation at Spirent Booth, Interop 2012Gnodal Presentation at Spirent Booth, Interop 2012
Gnodal Presentation at Spirent Booth, Interop 2012Sailaja Tennati
 
40 09
40 0940 09
40 09env40
 
【国立大学法人金沢大学】平成20年環境報告書
【国立大学法人金沢大学】平成20年環境報告書【国立大学法人金沢大学】平成20年環境報告書
【国立大学法人金沢大学】平成20年環境報告書env39
 

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

Korepatentistaitsitkleri
KorepatentistaitsitkleriKorepatentistaitsitkleri
Korepatentistaitsitkleri
 
【国環研】平成18年環境報告書
【国環研】平成18年環境報告書【国環研】平成18年環境報告書
【国環研】平成18年環境報告書
 
Gnodal Presentation at Spirent Booth, Interop 2012
Gnodal Presentation at Spirent Booth, Interop 2012Gnodal Presentation at Spirent Booth, Interop 2012
Gnodal Presentation at Spirent Booth, Interop 2012
 
40 09
40 0940 09
40 09
 
【国立大学法人金沢大学】平成20年環境報告書
【国立大学法人金沢大学】平成20年環境報告書【国立大学法人金沢大学】平成20年環境報告書
【国立大学法人金沢大学】平成20年環境報告書
 
July 2011
July 2011July 2011
July 2011
 

More from Yusuke Kawasaki

IR Light vs HEV Light - OSDC.TW 2013 #osdctw
IR Light vs HEV Light - OSDC.TW 2013 #osdctwIR Light vs HEV Light - OSDC.TW 2013 #osdctw
IR Light vs HEV Light - OSDC.TW 2013 #osdctwYusuke Kawasaki
 
Blue Light Filter 〜 おばかアプリ選手権
Blue Light Filter 〜 おばかアプリ選手権Blue Light Filter 〜 おばかアプリ選手権
Blue Light Filter 〜 おばかアプリ選手権Yusuke Kawasaki
 
シリコンバレーと世界のPerlエンジニア #yapcasia @kawanet
シリコンバレーと世界のPerlエンジニア #yapcasia @kawanet シリコンバレーと世界のPerlエンジニア #yapcasia @kawanet
シリコンバレーと世界のPerlエンジニア #yapcasia @kawanet Yusuke Kawasaki
 
HTML5 Conference [LT] Blue Light Filter 50% Off
HTML5 Conference [LT] Blue Light Filter 50% OffHTML5 Conference [LT] Blue Light Filter 50% Off
HTML5 Conference [LT] Blue Light Filter 50% OffYusuke Kawasaki
 
Mashup Awards 6 - YAPC::Asia 2010 Tokyo
Mashup Awards 6 - YAPC::Asia 2010 TokyoMashup Awards 6 - YAPC::Asia 2010 Tokyo
Mashup Awards 6 - YAPC::Asia 2010 TokyoYusuke Kawasaki
 
MR Weathercaster - The Obaka Appli Championship 3
MR Weathercaster - The Obaka Appli Championship 3MR Weathercaster - The Obaka Appli Championship 3
MR Weathercaster - The Obaka Appli Championship 3Yusuke Kawasaki
 
Corporate Perl in Recruit, OpenSocial and Emoji‎ - YAPC::Asia 2009 Tokyo
Corporate Perl in Recruit, OpenSocial and Emoji‎ - YAPC::Asia 2009 TokyoCorporate Perl in Recruit, OpenSocial and Emoji‎ - YAPC::Asia 2009 Tokyo
Corporate Perl in Recruit, OpenSocial and Emoji‎ - YAPC::Asia 2009 TokyoYusuke Kawasaki
 
YAPC::Europe 2009 Lisbon Report @ Yapc::Asia Pre-conf Meeting
YAPC::Europe 2009 Lisbon Report @ Yapc::Asia Pre-conf MeetingYAPC::Europe 2009 Lisbon Report @ Yapc::Asia Pre-conf Meeting
YAPC::Europe 2009 Lisbon Report @ Yapc::Asia Pre-conf MeetingYusuke Kawasaki
 
Recent Web Tech Updates from Japan - YAPC::Europe 2009 Lisbon
Recent Web Tech Updates from Japan - YAPC::Europe 2009 LisbonRecent Web Tech Updates from Japan - YAPC::Europe 2009 Lisbon
Recent Web Tech Updates from Japan - YAPC::Europe 2009 LisbonYusuke Kawasaki
 
JSARToolKit / LiveChromaKey / LivePointers - Next gen of AR
JSARToolKit / LiveChromaKey / LivePointers - Next gen of ARJSARToolKit / LiveChromaKey / LivePointers - Next gen of AR
JSARToolKit / LiveChromaKey / LivePointers - Next gen of ARYusuke Kawasaki
 
Mashup and new paradigm - マッシュアップ技術とインターネットの新しい潮流
Mashup and new paradigm - マッシュアップ技術とインターネットの新しい潮流Mashup and new paradigm - マッシュアップ技術とインターネットの新しい潮流
Mashup and new paradigm - マッシュアップ技術とインターネットの新しい潮流Yusuke Kawasaki
 
Cloud era -『クラウド時代』マッシュアップ技術による地方からの世界発信
Cloud era -『クラウド時代』マッシュアップ技術による地方からの世界発信Cloud era -『クラウド時代』マッシュアップ技術による地方からの世界発信
Cloud era -『クラウド時代』マッシュアップ技術による地方からの世界発信Yusuke Kawasaki
 
Cloud Computing - クラウドコンピューティング(会津産学懇話会)
Cloud Computing - クラウドコンピューティング(会津産学懇話会)Cloud Computing - クラウドコンピューティング(会津産学懇話会)
Cloud Computing - クラウドコンピューティング(会津産学懇話会)Yusuke Kawasaki
 
Recruit's OpenID RP Services (渋谷テクニカルナイト)
Recruit's OpenID RP Services (渋谷テクニカルナイト)Recruit's OpenID RP Services (渋谷テクニカルナイト)
Recruit's OpenID RP Services (渋谷テクニカルナイト)Yusuke Kawasaki
 
OpenSocial Panel Discussion (デブサミ2009)
OpenSocial Panel Discussion (デブサミ2009)OpenSocial Panel Discussion (デブサミ2009)
OpenSocial Panel Discussion (デブサミ2009)Yusuke Kawasaki
 
JUI Conference "Flashはもういらない!?" Adobe MAX Japan 2009
JUI Conference "Flashはもういらない!?" Adobe MAX Japan 2009JUI Conference "Flashはもういらない!?" Adobe MAX Japan 2009
JUI Conference "Flashはもういらない!?" Adobe MAX Japan 2009Yusuke Kawasaki
 
ATND - Recruit Media Technology Labs (Internet Week 2008)
ATND - Recruit Media Technology Labs (Internet Week 2008)ATND - Recruit Media Technology Labs (Internet Week 2008)
ATND - Recruit Media Technology Labs (Internet Week 2008)Yusuke Kawasaki
 
マッシュアップ×エンタープライズ開発 (XDev 2008)
マッシュアップ×エンタープライズ開発 (XDev 2008)マッシュアップ×エンタープライズ開発 (XDev 2008)
マッシュアップ×エンタープライズ開発 (XDev 2008)Yusuke Kawasaki
 
英語ブログのスヽメ - 1000スピーカープロジェクト#5
英語ブログのスヽメ - 1000スピーカープロジェクト#5英語ブログのスヽメ - 1000スピーカープロジェクト#5
英語ブログのスヽメ - 1000スピーカープロジェクト#5Yusuke Kawasaki
 
Facebook.JS (JavaScript)
Facebook.JS (JavaScript)Facebook.JS (JavaScript)
Facebook.JS (JavaScript)Yusuke Kawasaki
 

More from Yusuke Kawasaki (20)

IR Light vs HEV Light - OSDC.TW 2013 #osdctw
IR Light vs HEV Light - OSDC.TW 2013 #osdctwIR Light vs HEV Light - OSDC.TW 2013 #osdctw
IR Light vs HEV Light - OSDC.TW 2013 #osdctw
 
Blue Light Filter 〜 おばかアプリ選手権
Blue Light Filter 〜 おばかアプリ選手権Blue Light Filter 〜 おばかアプリ選手権
Blue Light Filter 〜 おばかアプリ選手権
 
シリコンバレーと世界のPerlエンジニア #yapcasia @kawanet
シリコンバレーと世界のPerlエンジニア #yapcasia @kawanet シリコンバレーと世界のPerlエンジニア #yapcasia @kawanet
シリコンバレーと世界のPerlエンジニア #yapcasia @kawanet
 
HTML5 Conference [LT] Blue Light Filter 50% Off
HTML5 Conference [LT] Blue Light Filter 50% OffHTML5 Conference [LT] Blue Light Filter 50% Off
HTML5 Conference [LT] Blue Light Filter 50% Off
 
Mashup Awards 6 - YAPC::Asia 2010 Tokyo
Mashup Awards 6 - YAPC::Asia 2010 TokyoMashup Awards 6 - YAPC::Asia 2010 Tokyo
Mashup Awards 6 - YAPC::Asia 2010 Tokyo
 
MR Weathercaster - The Obaka Appli Championship 3
MR Weathercaster - The Obaka Appli Championship 3MR Weathercaster - The Obaka Appli Championship 3
MR Weathercaster - The Obaka Appli Championship 3
 
Corporate Perl in Recruit, OpenSocial and Emoji‎ - YAPC::Asia 2009 Tokyo
Corporate Perl in Recruit, OpenSocial and Emoji‎ - YAPC::Asia 2009 TokyoCorporate Perl in Recruit, OpenSocial and Emoji‎ - YAPC::Asia 2009 Tokyo
Corporate Perl in Recruit, OpenSocial and Emoji‎ - YAPC::Asia 2009 Tokyo
 
YAPC::Europe 2009 Lisbon Report @ Yapc::Asia Pre-conf Meeting
YAPC::Europe 2009 Lisbon Report @ Yapc::Asia Pre-conf MeetingYAPC::Europe 2009 Lisbon Report @ Yapc::Asia Pre-conf Meeting
YAPC::Europe 2009 Lisbon Report @ Yapc::Asia Pre-conf Meeting
 
Recent Web Tech Updates from Japan - YAPC::Europe 2009 Lisbon
Recent Web Tech Updates from Japan - YAPC::Europe 2009 LisbonRecent Web Tech Updates from Japan - YAPC::Europe 2009 Lisbon
Recent Web Tech Updates from Japan - YAPC::Europe 2009 Lisbon
 
JSARToolKit / LiveChromaKey / LivePointers - Next gen of AR
JSARToolKit / LiveChromaKey / LivePointers - Next gen of ARJSARToolKit / LiveChromaKey / LivePointers - Next gen of AR
JSARToolKit / LiveChromaKey / LivePointers - Next gen of AR
 
Mashup and new paradigm - マッシュアップ技術とインターネットの新しい潮流
Mashup and new paradigm - マッシュアップ技術とインターネットの新しい潮流Mashup and new paradigm - マッシュアップ技術とインターネットの新しい潮流
Mashup and new paradigm - マッシュアップ技術とインターネットの新しい潮流
 
Cloud era -『クラウド時代』マッシュアップ技術による地方からの世界発信
Cloud era -『クラウド時代』マッシュアップ技術による地方からの世界発信Cloud era -『クラウド時代』マッシュアップ技術による地方からの世界発信
Cloud era -『クラウド時代』マッシュアップ技術による地方からの世界発信
 
Cloud Computing - クラウドコンピューティング(会津産学懇話会)
Cloud Computing - クラウドコンピューティング(会津産学懇話会)Cloud Computing - クラウドコンピューティング(会津産学懇話会)
Cloud Computing - クラウドコンピューティング(会津産学懇話会)
 
Recruit's OpenID RP Services (渋谷テクニカルナイト)
Recruit's OpenID RP Services (渋谷テクニカルナイト)Recruit's OpenID RP Services (渋谷テクニカルナイト)
Recruit's OpenID RP Services (渋谷テクニカルナイト)
 
OpenSocial Panel Discussion (デブサミ2009)
OpenSocial Panel Discussion (デブサミ2009)OpenSocial Panel Discussion (デブサミ2009)
OpenSocial Panel Discussion (デブサミ2009)
 
JUI Conference "Flashはもういらない!?" Adobe MAX Japan 2009
JUI Conference "Flashはもういらない!?" Adobe MAX Japan 2009JUI Conference "Flashはもういらない!?" Adobe MAX Japan 2009
JUI Conference "Flashはもういらない!?" Adobe MAX Japan 2009
 
ATND - Recruit Media Technology Labs (Internet Week 2008)
ATND - Recruit Media Technology Labs (Internet Week 2008)ATND - Recruit Media Technology Labs (Internet Week 2008)
ATND - Recruit Media Technology Labs (Internet Week 2008)
 
マッシュアップ×エンタープライズ開発 (XDev 2008)
マッシュアップ×エンタープライズ開発 (XDev 2008)マッシュアップ×エンタープライズ開発 (XDev 2008)
マッシュアップ×エンタープライズ開発 (XDev 2008)
 
英語ブログのスヽメ - 1000スピーカープロジェクト#5
英語ブログのスヽメ - 1000スピーカープロジェクト#5英語ブログのスヽメ - 1000スピーカープロジェクト#5
英語ブログのスヽメ - 1000スピーカープロジェクト#5
 
Facebook.JS (JavaScript)
Facebook.JS (JavaScript)Facebook.JS (JavaScript)
Facebook.JS (JavaScript)
 

Recently uploaded

WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceSamy Fodil
 
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptxHarnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptxFIDO Alliance
 
Breaking Down the Flutterwave Scandal What You Need to Know.pdf
Breaking Down the Flutterwave Scandal What You Need to Know.pdfBreaking Down the Flutterwave Scandal What You Need to Know.pdf
Breaking Down the Flutterwave Scandal What You Need to Know.pdfUK Journal
 
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdfThe Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdfFIDO Alliance
 
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPTiSEO AI
 
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...FIDO Alliance
 
Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Patrick Viafore
 
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider  Progress from Awareness to Implementation.pptxTales from a Passkey Provider  Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider Progress from Awareness to Implementation.pptxFIDO Alliance
 
ERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage IntacctERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage IntacctBrainSell Technologies
 
Oauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoftOauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoftshyamraj55
 
2024 May Patch Tuesday
2024 May Patch Tuesday2024 May Patch Tuesday
2024 May Patch TuesdayIvanti
 
WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024Lorenzo Miniero
 
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...marcuskenyatta275
 
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfIntroduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfFIDO Alliance
 
Intro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераIntro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераMark Opanasiuk
 
State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!Memoori
 
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...Skynet Technologies
 
The Metaverse: Are We There Yet?
The  Metaverse:    Are   We  There  Yet?The  Metaverse:    Are   We  There  Yet?
The Metaverse: Are We There Yet?Mark Billinghurst
 
ADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptxADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptxFIDO Alliance
 
Design Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxDesign Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxFIDO Alliance
 

Recently uploaded (20)

WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM Performance
 
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptxHarnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
 
Breaking Down the Flutterwave Scandal What You Need to Know.pdf
Breaking Down the Flutterwave Scandal What You Need to Know.pdfBreaking Down the Flutterwave Scandal What You Need to Know.pdf
Breaking Down the Flutterwave Scandal What You Need to Know.pdf
 
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdfThe Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
 
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
 
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
 
Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024
 
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider  Progress from Awareness to Implementation.pptxTales from a Passkey Provider  Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
 
ERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage IntacctERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage Intacct
 
Oauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoftOauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoft
 
2024 May Patch Tuesday
2024 May Patch Tuesday2024 May Patch Tuesday
2024 May Patch Tuesday
 
WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024
 
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
 
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfIntroduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
 
Intro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераIntro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджера
 
State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!
 
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
 
The Metaverse: Are We There Yet?
The  Metaverse:    Are   We  There  Yet?The  Metaverse:    Are   We  There  Yet?
The Metaverse: Are We There Yet?
 
ADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptxADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptx
 
Design Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxDesign Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptx
 

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

  • 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
  • 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