Jiglib + Augmented Reality : Playing with Balls

So I was playing around with the JiglibFlash Physics engine in augmented reality the other day and thought to myself, “Self, wouldn’t it be just the bees knees if you could actually control the movements of your little 3D world items by just moving around the Augmented Reality marker paper thing you’re holding in your hands?”

Well, long story short, you can. The proof of concept video below shows what I’m on about.  In the quick example, a ball drops “from the sky” and lands “on” the marker paper. It can then be rolled back and forth by actually tilting the paper from side to side. When the ball falls off the paper another one drops down and on it goes.

[kml_flashembed fversion=”9.0.115″ movie=”http://blog.onebyonedesign.com/wp-content/uploads/2009/05/balls3_controller.swf” targetclass=”flashmovie” publishmethod=”static” width=”400″ height=”318″]

[/kml_flashembed]

Right now it’s a little temperamental and about as fun as rolling a marble on a piece of cardboard, so I’m not gonna bother posting an actual .swf or code until I get something a little more interesting hammered out.

For those wanting to try something out for themselves or just interested in the technical details, here’s a few tips for youse.

First I set the gravity of the physics system to the z axis so object fall onto the paper with:

PhysicsSystem.getInstance().setGravity(new JNumber3D(0, 0, -12));

The ground is just a squashed cube with a transparent MovieMaterial applied, set at (0, 0, 0).

The tricky part was getting the ground to rotate with the AR world. I knew that the transform properties of the AR environment had to be contained in FLARTransMatResult object, but I didn’t really know how to dig ’em out properly until I ran across this blog post. It turns out that the properties of the FLARtransMatResult map quite perfectly into a Papervision3D Matrix3D object. You can then get a Number3D object containing the rotation amounts with the matrix2euler() method. In my case, I was really only interested in the rotationZ  property to get the ground to tilt back and forth. In short then, I got this little dealie going on in each frame:

var mat:Matrix3D = new Matrix3D();
mat.n11 =  trans.m01; mat.n12 =  trans.m00; mat.n13 =  trans.m02; mat.n14 =  trans.m03;
mat.n21 = -trans.m11; mat.n22 = -trans.m10; mat.n23 = -trans.m12; mat.n24 = -trans.m13;
mat.n31 =  trans.m21; mat.n32 =  trans.m20; mat.n33 =  trans.m22; mat.n34 =  trans.m23;
					
var objRot:Number3D = Matrix3D.matrix2euler(mat);
					
_ground.rotationZ = objRot.z;

And that’s really all there is to it to get started. I’m thinking maybe rolling a ball through a maze or something next time. Interested to see what other folks might come up with though…