With perspective matrix
Following is a function that will unproject an xy plane with variable z in camera space coordinates. This only works if useProjectionMatrix is set to true. With the projection matrix used to project coordinates in your world, we can use unproject techniques used in other 3D engines and/or languages:

public function unprojectMatrix(screen:Number3D):Number3D {
	if(useProjectionMatrix){
		var s4:Quaternion = new Quaternion(screen.x, -screen.y, screen.z+focus);
        	var up4:Quaternion = Quaternion.createFromMatrix(this._projection);
        	up4 = Quaternion.multiply(s4, up4);
        	var up3:Number3D = new Number3D(up4.x/up4.w, up4.y/up4.w, up4.z/up4.w);
        	Matrix3D.multiplyVector3x3(transform, up3);
        	return up3;
	} else {
		return unproject(screen.x, screen.y);
	}
}
 
public function getTrueScaleDistance():Number {
	return focus*zoom-focus;
}

You can add these functions to an extended camera with projectionMatrix turned on, and it will unproject your coordinates to the xy plane at a given z depth described with the screen:Number3D parameter. You will need to make private var _projection protected. The point of this is to expose the projection matrix to the function and can also be exposed if the function is added to the Camera3D class directly.

A sample use of the extended camera:

var zDepth:Number = camera.getTrueScaleDistance();
var screen:Number3D = new Number3D(viewPort.containerSprite.mouseX, viewPort.containerSprite.mouseY, zDepth);
var ray:Number3D = camera.unprojectMatrix(screen);
ray= Number3D.add(new Number3D(camera.x, camera.y, camera.z), ray);
plane.x = ray.x, plane.y = ray.y, plane.z = ray.z;

Where camera is a subclass of Camera3D with the adjustments outlined above.

What is happening?
This is something I realized I would need before I found out how to do. When I was reading about Quaternions, it explained why and how William Rowan Hamilton realized that he needed them to begin with. I found that a Quaternion thought of as a division ring made more sense in the context of 3D math. We divide the x,y,z components of our 4D object (Quaternion) by the 4th dimension, w, after rotating our space in 4D. I think of w as a piece of information that carries the proportion of the lower dimensions so that by dividing them by w restores this proportion to renderable 3D coordinates. I have generalized this process to n-dimensions, maybe incorrectly. I will find out soon enough. If you have been with me since the start of my 3D math journey, you can think of w as perspective, and 1/w as equal to how we negated perspective.

That’s about where I’m at right now. Here is some sample code that does this. The source is intended to be compiled with the Flex compiler, but can be compiled by making Main the document object of a .fla document.

Here is a cosine generator that Dr. Bishop says is faster than the traditional CORDIC algorithm. This algorithm was written for hardware implementation. This is purely for educational purposes and is rather useless – it is an order of magnitude slower than the AVM internal cosine function.

Actionscript benchmark implementation

function computeSeries(precision:int = 12):Array {
    var r:Array = [];
    for(var n:Number = -1;++n < precision ;){
        r[n] = Math.pow(-1, n)/factorial(2*n);
    }
    return r;
}
 
function factorial(i:Number):Number {
    if(i>1) return i*arguments.callee(i-1);
    return 1;
}
 
function cosFunc(a:Number):Number {
    var r:Number = 0;
    for(var n:Number = -1;++n < series.length ;){
        r += series[n]*Math.pow(a, 2*n);
    }
    return r;
}
 
var series:Array = computeSeries(12);
 
var startTime:Number = flash.utils.getTimer();
for(var i:int = -1;++i<1000000;){
    //Math.cos(Math.PI);
    cosFunc(Math.PI); //whoops wicked slow.
}
trace(getTimer()-startTime);

The Math
http://www.dgp.toronto.edu/~derek/cosine_report.pdf

Concrete knowledge
In this study, it is clear to me why and how sine/cosine are functions of radians. They are directly related to PI since a radian is the unit measure of angles to the limit of PI, and the result of sine/cosine can be thought of as a normalized axis coordinate. On the other hand, normalizing a scalar can get us the radian measure of an angle using the inverse trigonometric functions – arc sine/cosine etc. This isn’t anything I did not already know, but I am beginning to understand how systems like Trigonometry work with normal quantities.

Conclusion
The implementation of trigonometric functions has been a question mark in my head for quite some time. When I was studying trigonometry, I looked for how the functions were implemented. All I could find was how to use them or what they do and all of the annoying identities and proofs that it works. The implementation of trigonometric functions is never really talked about in mathematics. I have learned that other concepts in mathematics are able to describe Trigonometry in general terms. Viewing it in general terms has both helped me understand and properly place the system and the mechanics it is composed of.

Other thoughts
PI as they say keeps everything together in the universe – but in order to protect myself from narrow mindedness, I am trying to think of PI as a result of a certain geometric way of interpreting and measuring space. I haven’t done enough studying to be sure of this, but I plan to, and in the mean time, this will be my approach to higher maths. I am hoping it will help me avoid getting trapped in formulating useless analogies. If anyone has any guidance on this, please leave a comment

Sample
Here is an API snippet to give you an idea of what it does. The following code will reposition a plane to the coordinates defined by the screenCoordinates object. It will also render the plane in the scale of the movieclip material source.

//gets the distance the plane should be so the movieclip renders at its actual scale.
var distance:Number = CoordinateUtil.getTrueScaleDistance(camera);
var screenCoordinates:Number2D = new Number2D(100, 100); //based on a centered registration point
CoordinateUtil.setObjectByScreenCoordinates(camera, plane, screenCoordinates, distance);

History
Some time ago I wrote an article titled Plane Scaling and Positioning with Papervision. I shared the solutions I had used to over come some of the challenges us RIA developers face when developing 3D interfaces. Some time later I was asked about how to solve these problems under different conditions.

Well, I know this is a tough thing for most flash developers to accomplish. I know your boss is expecting you to do it and to do it right. I know we need to be able to do this stuff just by the way the typical web shop work flow goes. The designer design something and gives you a psd. Great. Now how are we suppose to precisely implement all of these 3D transformations without iterations of trial and error? I think this is something our community needs.

Sorry it took so long for those who have asked about this. Working on this, and related projects, I have fallen into knowledge tangents about 3D math (and just plain math and physics in general) in the past couple of months. It has made me even more knowledge hungry. It’s this particular issue of making papervision practical for interfaces, my interest in particle physics, FP10, and the video game I’m working on using another open source rendering engine in C++ that has really been taking up every second of my life. What can I say, I really love this stuff. And, sadly, lately I’ve just had nothing better to do.

Some of the more advanced readers might be wondering “Umm… Why didn’t you use unproject?” Well, to be honest, because it just did not do as much as I needed it to do. It was also slightly inaccurate. I didn’t spend much time with it. It’s entirely possible that I may have just been using it improperly.

That’s it for now. Hope this helps some of you out there! Please post any bugs that you might come across. It is absolutely possible that I will update this article as papervision evolves or if I, or you, come up with better (more optimal) techniques for this class.

If I had to choose, FileReference would be the strange fruit of the actionscript 3.0 classes. Only if I had to choose, though… I mean, I’m in a life or death situation, and my only way out is to choose which class is the strangest. In that case I would choose FileReference. Some might choose the Sound class, but me, yea, definitely FileReference…

Ok, so it goes like this: if you define FileReference inside the same function body that you call download()/upload() without declaring a nested function – it will fail. If you’re lucky, you’ll get an IO Error…

private function fail():void {
	var urlRequest:URLRequest = new URLRequest("http://www.lataco.com/taco_man.jpg");
 
	var fileRef:FileReference = new FileReference();
	fileRef.addEventListener(Event.COMPLETE, onComplete);
	fileRef.download(urlRequest);
}
 
private function onComplete(e:Event):void {
	trace("It's complete");
}

But, this works:

private function fail():void {
	var urlRequest:URLRequest = new URLRequest("http://www.lataco.com/taco_man.jpg");
 
	var fileRef:FileReference = new FileReference();
	fileRef.addEventListener(Event.COMPLETE, onComplete);
	fileRef.download(urlRequest);
 
	var succeed:Function = function(){};
}
 
private function onComplete(e:Event):void {
	trace("It's complete");
}

Why? Beats me. I can only tell you how it works: If you’ve declared the FileReference in the same scope as the function calling upload()/download(), there needs to be a defined function declaration on the same scope for it to work.

I figure it has to do with referencing a location on your file system and garbage collection. Something about a nested function…

When it fails, sometimes it dispatches an IOErrorEvent, sometimes it does not. Not quite sure why.

Anyways, I checked it out, and my first immediate guess was that detection was failing due to the browser he was using, but I realized what it was more likely to be when I drifted off into a thought tangent at work. 10 is less than 9 when they are compared as strings. I figured, if this just occurred, then all this time their detection script was succeeding because comparing integers 0-9 as strings yields the same result as comparing them as integers.

I’m pretty certain of this, I actually went ahead and looked at the source:

http://i.cdn.turner.com/cnn/.element/js/2.0/main.js

and had a look at the class CNN_FlashDetect, and specifically the following function:

CNN_FlashDetect.prototype.detectVersion = function ( num ) {
	var isVersionSupported = false;
 
	if ( ! isNaN( num ) ) {
		isVersionSupported = ( this.getVersion() >= parseInt( num ) );
	}
	//this alert was added by me
	alert([this.getVersion(), num, typeof(this.getVersion()), typeof(num), isVersionSupported]); //10.0.0,9,string,number,false
 
	return ( isVersionSupported );
}

This script is designed to just test major versions as parseInt(num) hints at. Unfortunately, “10.0.0″ is not being converted to a number, which seems like something that should have been done at getVersion() by virtue of detectVersion()’s task. It isn’t actually a valid number, so it is not converted for >=. Instead, 9 is converted to a string for comparison, which is the crux of the issue. I tested this script in IE. Running FP10 on IE6, the script reports 8 as my flash player version and is a number…

Consistency makes me all fuzzy inside.

Now, I know this site works on IE6, and that is because it’s actually testing for version 8 instead of 9 as the minimum version.

As far as I can tell, the site is actually loading the adobe detection script – which also doesn’t seem to be working. The detection script returns -1 when it tries to detect flash for IE6 when running fp10. I haven’t tested it for other versions, but I would figure it would do the same. Apparently the version you have installed precedes the existence of flash player. I tested some vars, and it looks like the script is failing to initialize bools that allow the detection scripts to determine which browser they’re in. None of the detection conditions are met, so it returns -1. This doesn’t seem to have anything to do with flash player 10.

The CNN script tries 3 detection techniques, all of which are dynamic with limits – js/vb for active x, and a word search for plugin flash player. For active x, the script tries to create different versions of the flash player in a try catch, and when it succeeds, the iterator is used as the player version, so we get a number in IE, which is typically 8 which is the upper bound of the function. For plugins, it does a word search on the description property of the plugin and uses isNaN to test if parseInt() succeeded in converting a word to a number. When this succeeds though the assigned variable to the result is not parsed, so we get a string…

The truth is, “10.0.0″ IS < “9″. It turns out that the issue is implementation specific. It has nothing to do with browsers or the flash player… !

Onward…

Some time ago on a tech interview website discussion, we were challenged with the following problem:

Given a number N generate all the permutations e.g. N=3
1 2 3
1 3 2
2 1 3
2 3 1
3 2 1
3 1 2

How to generate the N! permutations efficiently ?

The following is a permutation generator using the factoradic number system. This technique correlates permutations to a lexicographical index. For those of you interested in this kind of thing, I’ve written a brief description of the steps of the algorithm which traces all permutations of n, and included an unoptimized version to further articulate the technique.

You will need a function which computes factorials.

function factorial(i:uint):Number {
	if(i>1) return i*factorial(i-1);
	return 1;
}

Pick n.
Get factorial of order n and assign it to kLen.
Reduce kLen and assign it to k for kth permutation of order n.
Once we have the factoradic of k, we can derive kth permutation of n by increasing each element of r by 1 if elements computed leading up to p are less than p.
In this algo though, we increase r[i] for each element greater than r[p] while computing the factoradic of k. This is an optimization to avoid additional loop to compute factoradic.

var n:uint = 3, kLen:uint = factorial(n);
var r:Array, j:uint, i:uint, p:uint, k:uint;
while(kLen--){
	r = [], j = 1, k = kLen;
	r[n-1] = 0;
	while(j++<n){
		p = i = n-j;
		r[p] = uint(k/=(j-1))%j;
		while(i++<n)
			if(r[i] >= r[p])
				++r[i];
	}
	trace(r);
}

here is the unoptimized version which gets kth permutation of n

var n:uint = 3, k:uint = 6;
//determine factoradic of k
var factoradic:Array = [0];
for(var j:uint = 1;j++<n;){//start to create factoradic
	//get rid of last remainder to move on to next radix
	k = k/(j-1);
	//mod j so element is radix j
	factoradic.unshift(k%j);
}
 
//derive permutation from factoradic
var r:Array = factoradic.slice(), m:uint = 1;
while(m++<n){
	var i:uint = n-m;
	while(i++<n)
		if(r[i] >= r[n-m])
			++r[i];
}
 
trace(r);

I have left the following code unmodified to illustrate my process.

The initial function I wrote:

Note that the order of parameters of this function are not standard.

function group94EaseOut(t:Number, d:Number, c:Number, b:Number):Number {
	if((t/=d) < 0.1){
		//ease here later, but for now linear
		//trace(t);
		return t/0.1*c*0.9+b;
	} else {
		//trace(t);
		return (t-0.1)/0.9*c*0.1+c*0.9+b;
	}
}

The idea is to distribute a greater part of the change over a lesser portion of the duration as the first part of the tween, and to distribute the remaining change over the remaining duration. The condition which determines which equation to use is the portion of the duration we distribute the first part of change over.

I realized that the coefficient that determined the distribution could be parameterized, so I added r. The initial function will execute faster, but the following function is more robust.

function group94EaseOut(t:Number, d:Number, c:Number, b:Number, r:Number=0.1):Number {
	if((t/=d) < r){
		return t/r*c*(1-r)+b;
	} else {
		return (t-r)/(1-r)*c*r+c*(1-r)+b;
	}
}

I then used sine easing to ease in for the first part of the tween, and sine easing to ease out for the second part of the tween.

Here is the final function:

function easeG94(t:Number, b:Number, c:Number, d:Number, r:Number=0.1):Number {
	return (t/=d) < r?
		(1-Math.cos(t/r*Math.PI/2))*c*(1-r)+b:
		Math.sin((t-r)/(1-r)*Math.PI/2)*c*r+c*(1-r)+b;
}

Here is a working example of the final function:

Click anywhere on the stage to move the ball. The red line is the curve of the current distribution, which is displayed in the top right corner. Press up and down arrows to change the distribution.

I realize that any of Robert Penners easing functions could be used to ease in and out of the two parts of this function, but that much computation may hinder the smoothness of the transition. I do however have something in the works that should improve the performance of all ease functions. That I will write about soon.

Another thing to note, with r=0.5, using any of the standard easeIn and easeOut functions should have the curve of their corresponding easeInOut function.

[Update 10/09/2008: I have adjusted the equations in the article so that they work with the latest of papervision to keep the validity of this article intact. I have modified some semantics, notably screenZ is now just referred to as distance. A link to the updated sample source. This is not different than the one below.]

[Update 08/22/2008: The equations in this article and in the source will only work for builds prior to 639. I am in the process of writing an article about a set of functions that should achieve these effects for versions of papervision after 639. I am leaving this article intact for educational purposes.]

[Update 08/15/2008: sample source - it is not the carousel, but it demonstrates the use of the equations pretty well.]