Showing posts with label flash. Show all posts
Showing posts with label flash. Show all posts

LiveChromaKey + LivePointers = AR Presentation!

I am a newbie for the wonderful ActionScript world and have worked hard for these two weeks to write a couple of pure ActionScript 3.0 libraries, LiveChromaKey and LivePointers. Then I gave a talk at Spark project's SparkStudy/09 on May 28th.

SparkStudy is a monthly meeting for the cutting-edge ActionScript developers in Tokyo. It's hosted by Yoshihiro Shindo a.k.a. yossy. This was the first time for me, an ECMAScripter, to attend it but I enjoyed it.

As recently posted, LiveChromaKey is a bluescreen-less image synthesizing engine for AR.

And the new library of LivePointers is a color detection engine to handle something as the new style of human interface devices with webcam. This means, for example, fingercap would be the 3D pointing device.

Anyway, you can try my presentation:
http://www.kawa.net/text/spark/09/spark.html


Yes, I was in the live projector screen during my presentation like weather newscaster did in weather news program! It would be nice for the audiences who seated at the end of the row in the room to see me on the screen. :)


In addition, I used fingercaps to manipulate slides, ex. right hand means next page. The fingercap I used costs only JPY 105, approximately USD 1.00- for six fingers. I'm sure that the cheap cap would be definitely important user interface device of the future!

Note that you can flip to the next page by right key of your keyboard as an insurance for the live presentation. :)

If you prefer a classical style of the slides, try slideshare:


LivePointers library is still under development. You can try the current snapshot on the Spark project's repository:
http://www.libspark.org/svn/as3/LivePointers/trunk/
 
* Orignal post of this was written in Japanese.

LiveChromaKey - Bluescreen-less augmented IN reality (AR)

I wrote a new ActionScript library LiveChromaKey which is an image synthesizing engine for AR. The key point is it does not make something augmented ON reality but also augmented IN reality. It really portable as it never need blue background screen. The key color of chroma key is automatically detected on the fly.

Demo #1

Try: Travelling In Egypt
Source: Pyramid.as


An webcam is needed to try this. Blue background screen is not needed. At first, hide out from the camera for LiveChromaKey to recognize the background view. After few seconds, the pyramid of Khafre will be shown. It's time to play it! Now you can feel free you are travelling in Egypt. :)

In case you move camera, click the screen to re-recognize background on demand. Then hide out and wait for few seconds again. You may need to turn off your camera's intelligent features like automatic white balance, automatic exposure compensation, etc. LiveChromaKey does not like such tunings.

Demo #2

Try: Minority Report-like Demo
Source: Minority.as


This demo floats some photos in your back. Finger pointing reorganization like the Minority Report movie is not implemented at this time.

Demo #3

Try: Four Sprites Of LiveChromaKey
Source: Panels.as


This demo shows the four sprites which LiveChromaKey provides.

LiveChromaKey Sample Code

var chromakey:LCK_Core = new LCK_Core();
chromakey.init();

var spLive:Sprite = chromakey.getLive();
var spBack:Sprite = chromakey.getBackground();
var spMask:Sprite = chromakey.getMask();
var spFore:Sprite = chromakey.getForeground();

this.addChild( spLive );
this.addChild( spBack );
this.addChild( spMask );
this.addChild( spFore );

The getLive() method returns a sprite which shows the live video. You can use it as a background for your app.

The getBackground() method returns a sprite which shows the stationary background image. You can use it as a background for your app as well.

The getMask() method returns a transparent sprite which shows the blue mask image. You may not use it normally.

The getForeground() method returns a transparent sprite which shows the dynamic foreground image. It would contain a person or objects in front of camera. You can use it as a foreground for your app.

LiveChromaKey Properties

Set properties below before call init() method.
chromakey.captureX = 320;
chromakey.captureY = 240;
chromakey.captureFPS = 30;
Web camera input source's resolution and frame rate
chromakey.displayX = 640;
chromakey.displayY = 480;
chromakey.smoothing = false;
Output sprites' resolution and smoothing.
chromakey.workX = 80;
chromakey.workY = 60;
Working resolution by pixel.

The following method and property is for after it started.
chromakey.runDetector()
Method to re-recognize stationary background.
chromakey.ready
Boolean value for stationary background is detected.

How To Compile It

Download LiveChromaKey source code from the Spark project.
svn co http://www.libspark.org/svn/as3/LiveChromaKey/trunk/ livechromakey


* Original posts for demo #1, demo #2 and demo #3 are written in Japanese.

JSARToolKit - AR (Augmented Reality) by JavaScript

After my talk at OSDC.TW 2009 in Taipei, I've released JSAR's source code on the Spark project's repository:
http://www.libspark.org/svn/js/JSARToolKit/trunk

JSARToolKit is a JavaScript library to run AR (augmented reality).
This is the first JavaScript project on the Spark. :)


Demo #1 - Show Logo

Try: JSAR Logo Demo
Download and print marker pdf: Maker PDF (JSAR Logo Only)

Demo #1 shows a label "JSAR" in DIV element overlayed on Flash. Red square border on marker was drawn by canvas. It means both of label and lines are controlled by JavaScript not by ActionScript.

Demo #2 - Mic Volume

Try: Mic Volume Demo
Download and print markers pdf: Makrers PDF (4 patterns)

Demo #2 shows a label for each markers and changes its font size effected by microphone volume inputed.

Sample Code

<script type="text/javascript" src="../js/swfobject.js"></script>
<script type="text/javascript" src="../js/jsar.js"></script>
<script type="text/javascript"><!--

  var jsar;
  function init () {
    jsar = new JSAR( 'jsar_here' );
    jsar.drawMarkerRect = true;
    jsar.onDetected = function ( result ) { ... };
    jsar.onLost = function ( result ) { ... };
    jsar.captureX = 320;
    jsar.captureY = 240;
    jsar.displayX = 640;
    jsar.displayY = 480;
    jsar.init();
    jsar.setMarker( [ '../code/jsarlogo.pat' ] );
  }
  window.onload = init;
--></script>
<div id="jsar_here"></div>

How To Compile It

JSARToolKit uses FLARToolKit in it. This means JSAR is not pure JavaScript, but flash powered. Download JSARToolKit from the Spark project by svn command, and compile it by Flash CS4 or by FlashDevelop + Flex SDK.

svn co http://www.libspark.org/svn/js/JSARToolKit/trunk jsar
mkdir -p jsar/src/org/libspark
svn co http://www.libspark.org/svn/as3/FLARToolKit/trunk/src/org/libspark/flartoolkit jsar/src/org/libspark/flartoolkit

In fact, you can use jsar.swf pre-compiled. So you don't need to compile it by your self.

I need say thank you to Saqoosha who has developed FLARToolKit.

* Original post of this was written in Japanese at 2009/05/05 01:46.
 

The 2nd JUI Conference in Adobe MAX Japan 2009

Almost one year has been past since we held the 1st JUI conference in Tokyo. The JUI is a conference forcused into user interface techs using JavaScript. At he end of this January, we held the JUI again in Adobe MAX Japan 2009 conference as a sub conference. I think it's definitely true that Adobe is really big-hearted company. Five of JavaScript guys could talked only about JavaScript at the session which has the sub-title of "we don't need FLash any more!" in Japanese.

At first, I gave an introduction talk.


JavaScript Hot Topics 2008 (Adobe MAX Edition)
#10 - 10th Anniversary of MM_SwapImage()
#9 - Shibuya.js comes to Kyoto
#8 - ECMAScript 4 failed. Now 3.1 instead.
#7 - Adobe launches Flash 10
#6 - iPhone 3G integrated with JavaScript
#5 - Many companies switching to JavaScript
#4 - Microsoft follows web standards by IE8
#3 - Varieties of JavaScript libraries
#2 - Playing .swf by JavaScript on the scene
#1 - Too Rapid JavaScript. No JIT, No Life.

The 2nd speaker was Yu Kobayashi a.k.a. yukoba who was the author of HotRuby virtual machine. His talk was about "How to implement a Flash Player."


The next was Satoshi Ueyama a.k.a. gyuque. He also implemented another Flash Player named "JSplash" which had a trick to translate ActionScript code to JavaScript code. This pre-compiling feature gave it enough performance compared to Adobe's native Flash Player. That means we don't need flash player any more.


The 4th was Moriyoshi Koizumi who was one of Japanese PHP committers. He gave a talk about "JavaScript's Sound Generation" using data scheme.


The last was Hotoshi Amano a.k.a. amachang. He always starts to develop new presentation tool before he writes slides for each conferences. Now he made it in 3D. Note that only nightly build of WebKits - at that time, now Safari 4 is available - could show his slides. His talk itself was about "DOM Performance Tuning."


Anyway, in the Adobe's conference, we're happy to let them know these crazy JavaScript guys're existing and working hard for the high level of techniques and user experience.


The 2nd JUI Speakers

The original post of this was written in Japanese.