Photosynth – WTF!

Be blown away – HERE

Download the plugin (5 Meg +) . http://labs.live.com/photosynth/ 

What blew my mind was the fact that I watched the movie “Deja Vu” the day before where the digital sureveillance used had data-streams of realtime feed which allowed them to present any setting at any angle. You are talking of billions of bytes of data for imaging at realtime. I thought it was rubbish.

But Photosynth took this a little closer. It can:

* Walk or fly through a scene to see photos from any angle.
* Seamlessly zoom in or out of a photo whether it’s megapixels or gigapixels in size.
* See where pictures were taken in relation to one another.
* Find similar photos to the one you’re currently viewing.
* Send a collection – or a particular view of one – to a friend.

Safari on Windows

Apple has announced a version of its Safari web browser for Windows.

Came to work, opened the http://www.apple.com and voila, Safari 3 Public Beta for Windows to download .

It was only a matter of time in my opinion for this move as WebKit which is at the core of Safari is open source and there were attempts to make this run on Windows.

Incidentally Apollo(AIR) also uses WebKit which again is cross platform as its HTML layout engine.

Cairngorm 2 and PopUpManager woes!

Read through this blog post by darron schall in which he explains the reason why….gosh! I wish I read this few hours back.

http://www.darronschall.com/weblog/archives/000224.cfm

Just wanted to highlight this issue once again.

“WPF/E” == Microsoft Silverlight

http://www.microsoft.com/silverlight/default.aspx

We have heard of WPF/E and now it is officially released as “SilverLight” – a new, cross-platform, cross-browser plug-in for building the next generation of Media Experiences and Rich Interactive Applications.

It would be interesting to see how the designers and developers would work with this, as the SWF format has a larger die-hard fan following.

Apollo – Window Transparent

Just downloaded the alpha version of Apollo from the labs section on the Adobe website.
http://labs.adobe.com/technologies/apollo/

While reading through the documentation on “Create your first Flex-based Apollo application in Flex Builder” , I came across a typo error which stated as follows:
——–

Next, set the application’s window transparency:

1. Open the HelloWorld-app.xml file from the Project Navigator. The file is opened in the Flex Builder text editor.
2. In the rootContent node of the application, set the systemChrome and transparent attributes to the following:
   systemChrome="standard" transparent="false"
3. Save your changes and then close the HelloWorld-app.xml file.

——–While point 2 should read as “systemChrome="none" transparent="true"” to achieve the end result.

Distort class(DisplayShelf Component)

Ok, my approach is no comparison to this slick component by Ely Greenfield.
His approach is also to try and mimic a trapezoid and have the bitmap drawn into it.

http://www.quietlyscheming.com/blog/components/tutorial-displayshelf-component/

One can learn a lot from his component and now he has even made an interactive tutorial to explain, saving us from pulling out our hairs. Great stuff.

Happy Valentines day

Rick at Stanford

Rick Reitmaier ( Adobe, Tamarin JIT developer)  had given a presentation at Stanford University about the Flash Player ActionScript Virutal Machine.

This is the video link for his presentation here. I found it whilst googling.

The is one of the better presentation I have seen on AVMplus engine. He does a great job explaining the roadmap of the present VirutalMachine and what it took to get to this stage. I can say, I am pretty much clear now on what makes this present release of the VirutalMachine so important and how it makes this step, a revolutionay one for FlashPlayer as we know it.

The presentation runs for little more than an hour but is packed with valuable information and the QA brought out some interesting quirks. Personally I think its a must view for any ActionScript programmer. He talks about the JIT, Verifiers and GC during the later half of the presentation, which raised few valid questions.

One of the quirk which I thought interested me was the fact on an empty for-loop performance increase. He quickly spotted this to be a bug as it should have compiled to no code at all. I thought the same as well as I noticed this to be the case when I was testing the speed for int vs Number in my previous post.  I would have assumed empty loops would have been bypassed by the compiler. So I am not the only one who think this to be a bug!!

UI reflection

package
{
import sandy.util.*;
import flash.display.*;
import flash.display.Sprite;
import flash.display.Shape;
import flash.display.Graphics;
import flash.display.DisplayObject;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.display.Bitmap;
import flash.display.Loader;
import flash.events.Event;
import flash.net.URLRequest;
import flash.geom.Point;
import flash.geom.Matrix;
import flash.geom.Rectangle;
import flash.display.BitmapData;

[SWF(width=”1024″, height=”768″, backgroundColor=”#000000″)]

public class App extends Sprite
{
private var _shape:Shape;
private var _refshape:Shape;
private var _loader:Loader = new Loader();
private var _reflectionBitmap:Bitmap;
public function App()
{
init();
}

private function init():void
{
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align=StageAlign.TOP_LEFT;

_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
_loader.load(new URLRequest(“24012007010.jpg”));

}

private function onComplete(event:Event):void {
var loadedImage:Bitmap = Bitmap(_loader.content);

_shape = new Shape();
_shape.graphics.lineStyle(0,0X0000FF,1);
_shape.graphics.drawRect(0, 0, loadedImage.width, loadedImage.height);
addChild(_shape);
_shape.x=200;
_shape.y=100;

_refshape = new Shape();
_refshape.graphics.lineStyle(0,0X0000FF,1);
_refshape.graphics.drawRect(0, 0, loadedImage.width, loadedImage.height);
addChild(_refshape);
_refshape.x=200;
_refshape.y=100;

var distort:DistortImage = new DistortImage();
distort.container = _shape;
distort.target = loadedImage;
distort.smooth = true;
distort.initialize( 5, 5, null );
distort.setTransform(-76,-80,500,0,500,334,-76,398);
distort.render();

createReflectionBitmap(loadedImage);

}

private function createReflectionBitmap(target:DisplayObject):void {

var Falloff:Number = 0.6;
var rect: Rectangle = new Rectangle(0, 0, target.width, target.height);
var alphaGradientBitmap:BitmapData = new BitmapData(target.width, target.height, true, 0x00000000);

var gradientMatrix: Matrix = new Matrix();
var gradientShape: Shape = new Shape();
gradientMatrix.createGradientBox(target.width, target.height * Falloff, Math.PI/2,
0, target.height * (1.0 – Falloff));
gradientShape.graphics.beginGradientFill(GradientType.LINEAR, [0xFFFFFF, 0xFFFFFF],
[0, 1], [0, 255], gradientMatrix);
gradientShape.graphics.drawRect(0, target.height * (1.0 – Falloff),
target.width, target.height * Falloff);
gradientShape.graphics.endFill();
alphaGradientBitmap.draw(gradientShape, new Matrix());

var targetBitmap:BitmapData = new BitmapData(target.width, target.height, true, 0x00000000);
targetBitmap.fillRect(rect, 0x00000000);
targetBitmap.draw(target, new Matrix());

var reflectionData:BitmapData = new BitmapData(target.width, target.height, true, 0x00000000);
reflectionData.fillRect(rect, 0x00000000);
reflectionData.copyPixels(targetBitmap, rect, new Point(), alphaGradientBitmap);
_reflectionBitmap = new Bitmap(reflectionData);
_reflectionBitmap.alpha = .3;

var m:Matrix = _refshape.transform.matrix;
var position:Point = new Point(m.tx, m.ty);
m.tx = position.x;
m.ty = position.y;
m.d = -1;
m.ty = _refshape.height*3;
_refshape.transform.matrix = m;

var distortn:DistortImage = new DistortImage();
distortn.container = _refshape;
distortn.target = _reflectionBitmap;
distortn.smooth = true;
distortn.initialize( 5, 5, null );
distortn.setTransform(-76,300,500,350,500,695,-76,630);
distortn.render();
}

}
}

[Edit: The above is just a proof of concept and the code is begging for refactorisation;)]

Matrix Transformation

One more addition to the ActionScript code tricks category. It all started with me trying to draw a trapezium (trapezoid) to display an image. Cannot be tough, can it?! Flash gives me all the the tools to draw and this should be easy and using the matrix class, I can move, rotate or skew the shape with ActionScript.
Ah! “skew”, thats what I want to use to give the perception of 3D.
Using matrix transformation, this should be possible….hmmm…nope!!! Lets take a step back and see what is possible using the matrix class.

WWW has a wealth of information about what a matrix is (not the movie). Just think of it as a table of rows and columns represented as m x n matrix. By setting the values in the Matrix object you can perform transformations on the display object which includes translation, rotation, scaling and skewing.
Flash provides a 3 x 3 matrix:

Note: u,v,w are sort of dummy here though their values remain as 0,0,1. You can manipulate the rest(a,c,c,d,tx and ty) for transformation. Great lets move on.

If I change,
Translation ->tx or ty: It would move either tx pixels to the right or ty pixels down.
Scale ->a or d: It would xScale or yScale.
Skew -> b or c: Skew either parallel to the x or y axis.
Rotation -> a,b,c and d: For an angle q: a is cos(q), b is sin(q), c is -sin(q) and d is cos(q)

Important: Any transformations done,is called affine transformation.
So what is affine transformation?! Wikipediahas this : In geometry, an affine transformation or affine map (from the Latin, affinis, “connected with”) between two vector spaces (strictly speaking, two affine spaces) consists of a linear transformation followed by a translation.
To me and you, it means, it preserves the straightness of lines and so parallel lines stay parallel. WTF?!! I cannot transform my rectangle into a trapezium?? This is crazy.

Me being me, started looking and reading about it and looking for possiblities. I ended up on this website. Ok, am I looking for Projective transformation? This is crazy. Ok, lets just remember Flash is a 2D package and what we want is a 3D look. Any transformation still will work in the 2D space. So left with no choice, we need look into faking 3D.

Ok, what are the alternatives out there for ActionScript 3.0. Papervision3D. Still in beta stage but very much stable. Has anyone work on this before to fake 3D perspective? Well, yes. Couple of them. Look at this by Alex Uhlmann here.

Super cool!!!!! That’s what I am after. He has even made it open-source. He uses Sandy Flash 3D API to do it. He has ported it to ActionScript 3.0 for use in his Flex example.
Now I need to leverage from his work to get the result I want. Thanks to him and the team behind Sandy. What is happening behind the scene is triangular tessellations. To give you an idea, look at Pavils Jurjans example here with a tutorial to give you a start.


package
{

import flash.display.Shape;
import flash.display.Graphics;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.display.Bitmap;
import flash.display.Loader;
import flash.events.Event;
import flash.net.URLRequest;
import sandy.util.*;

[SWF(backgroundColor="#000000")]

public class App extends Sprite
{
private var _shape:Shape;
private var _loader:Loader = new Loader();
public function App()
{
init();
}

private function init():void
{
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align=StageAlign.TOP_LEFT;
_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
_loader.load(new URLRequest("24012007010.jpg"));
}

public function onComplete(event:Event):void {
var loadedImage:Bitmap = Bitmap(_loader.content);

_shape = new Shape();
_shape.graphics.lineStyle(0,0X0000FF,1);
_shape.graphics.drawRect(0, 0, loadedImage.width, loadedImage.height);
addChild(_shape);
_shape.x=200;
_shape.y=200;

var distort:DistortImage = new DistortImage();
distort.container = _shape;
distort.target = loadedImage;
distort.smooth = true;
distort.initialize( 5, 5, null );
distort.setTransform(-76,-103,500,0,500,334,-77,398);
distort.render();
}
}
}

Technorati Tags: Programming, MatrixTransformation, ActionScript, Flash