Pushing the boundaries

…couldn’t be any simpler!

Matrix Transformation

Posted by vijayram on February 6, 2007

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

3d prespective

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: , , ,

Advertisements

4 Responses to “Matrix Transformation”

  1. You can not achieve that just with Matrix classes, you need to distort image to do that… We have been trying to do that here..

    -abdul

  2. vijayram said

    Abdul, you are absolutely right when you say you cannot do it using the given Matrix properties in Flash. I have explained the same.

    I hope my explanation does help people in understanding the same.

    cheers

  3. BJ said

    vijayram can you email me? bmace [at] bmace [dot] com

  4. jjl_2099 said

    I think abdul is suggesting that you have not provided you DistortImage class

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: