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

AR (Augmented Reality)Future of user interface

DEMO #1

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)

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

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)

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

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/

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

Technology

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

Jui fan yang protfolio final

Open Standards and Open Source in Datacenter Management - OSDC.tw 2014

Jui-Ling Chien Portfolio 2016

How to use command line tool in Python @OSDC.tw 2011

[Gokigenyou] 14 Jui v.1 C.07

...2/Aug/20 Test-I) 4 No. of Week Duration week 6/JuI/20 12/JuI/20 13/JuI/20 19/JuI/20 20/JuI/20 26/JuI/20 27/JuI/20 2/Aug/20 . 3/Aug/20 9/Aug/20 10/Aug/20 16/Aug/20 17/Aug/20 23/Aug/20

JUI 2 - oag.ca.gov

Yao Jui-Chung: Artists at Glenfiddich 2007

[Gokigenyou] 14 Jui v.1 C.10

Marketing Plan of Jui Hair Conditioner

jui/2220/sol/hw11sol.pdf · · 2008-12-05

IR Light vs HEV Light - OSDC.TW 2013 #osdctw

OSDC.tw - Building a platform from open source

[Gokigenyou] 14 Jui v.1 C.14

Perl 5.10 on OSDC.tw 2009

[OSDC.tw 2011] The Path to Pass into PaaS -- How We Build the Solution

Copyright by Cho-Jui Hsieh 2015

jui/2220/sol/hw07sol.pdf · · 2008-11-02

Charlie Jui ICAHTLT Sedona, AZ, Aug 10,1999

13 jui 2012