Papervision 3D + APE Physics Engine, Mouse Forces tweaks.

After some diaper changes, a few baby bottles and a couple of trips to the day care, I was able to implement some needed logic to the spheres model. Here's what I added/changed this time around:

- Calculated the mouse speed and added it into the calculations of the "onOver" force. In this version, the force generated at the collision between mouse and sphere, is proportional to the instantaneous mouse speed at that moment (an the mass of the sphere as well, but this is taken care of by physics engine (APE).

- Played around with various parameters so that the overall movement ends up like I wanted it to.

APEngine.init(1/3);
APEngine.damping=0.98;
CircleParticle.mass = 3
CircleParticle.elasticity=0.4 (this one might be too high)
CircleParticle.friction=0.1
CircleParticle.multisample = 4 (might have to reduce this for performance)

The multisample value is the amount of times the engine checks for collision in each step of the engine.

- Added calculations to reduce the magnitude of the resulting mouse collision velocity vector if the sphere is already moving in the same direction as the mouse. If not, every mouse collision would generate a force as if the sphere was static which results in a bigger force.

Here is the result, view it full screen here for a better experience:

Thanks Axel Bunge, Sebastián Pisa, Esteban Rodriguez, Cesar Cintron & Facundo Gamallo for the feedback.

Papervision3D + APE Physics Engine - Fourth Iteration

Completed the next step.

- I added two more balls to see how they would work with each other in terms of the physics and everything worked like a charm. Their initial positions are random in the 2d space.

- I changed the material of the sphere at this point because the wire material was degrading performance of the mouseover event handler. The event fired over every line of the geometry and was really annoying.

- Added a white light so the volume of the sphere would be seen better.

- Changed the mouse interactivity to happen on mousemove over the sphere as well as on mouseover. The mousemove handler created much smaller forcers that the mouseover one. I like it this way because you can 'kick' the ball initially (on over) and then by following it and on over it can be handled much easier, including slowing it down.

Here it is.

- After some usability feedback it is clear that I have to consider the mouse velocity so that the forces are greater or smaller depending on it. This is the next step.

Papervision 3D + Physics Rotation Easing

This turned out to be easier that I expected. The AbstractParticle class which CircleParticle inherits from, implements a velocity property in the form of a vector. SO the only thing left was using the X & Y components of the vector as inputs on the Matrix3D.rotationX & Matrix3D.rotationY transformation Matrixes.

A by-product of tying translation to rotation, which, thinking about it it's just the way it is in the real world, is that bounces automatically change rotation direction as the sphere changes translation directions. It also ensures the perfect synch between rotation speed and rotation speed, so once the correct matching ratio between the two velocities is found, it works perfectly.

Here it it the result:

Papervision 3D 2 plus APE physics engine integration.

So I've completed the initial Papervision3D + APE integration. I added forces on mouseOver to the sphere so that at the same time that the handler rotates it, it moves it as well. Also, I've set the boundaries of the stage so that the sphere or marble doesn't get off-stage. There is a slight mis-alignment between the Camera 3D perspective and the APE 2D engine because, being 2D the projections of the viewpoint are different, but I can live with that.

To sum it all up this is a Papervision3D Sphere primitive, a static camera, a 2D CircleParticle for the physics engine dummy and the four RecatangleParticles for the 'walls'.

I'm still playing with damping ratios, animation speed and the synchronization of the Papervision 3D spherical rotation and the 2D physics translation & bounces. Also the interactivity is still a little slow but once there are multiple marbles interacting with each other, it going to feel faster. I don't think I'll have more than 6 spheres if it isn't too hard on the CPU.

Next I'll be working on the easing of the rotation so that it synchs with the damping of the translations. I have an idea of how to do this but as it often turns out, it never is as easy as I had originally thought.

I'm also going to try to recreate the way bounces off constraints invert the rotation vector on the sphere.

Papervision 3D Sphere Globlal Axis Rotation

Problem:
In my previous post (link here) I realized the the quick and dirty way of turning a sphere was not cutting it for me because the sphere was always turning along the Sphere's own coordinate axis (x & y in this case). So, no matter how the sphere was oriented, meaning what the angle of the X axis was for example, if the user moused over the (absolute) lower half of the sphere it turned it (relatively) along it's own X axis.

Solved!
In this second iteration I converted the rotation on mouseOver so that the sphere rotates around the axis defined by the perpendicular of the vector created by the point on the surface of the sphere over which the user rolled the mouse over and the origin of the sphere coordinates (0,0,0).

How is this done?
Regular trigonometry doesn't cut it for this. Why? because both rotating axis are dependent on each other. As the sphere rotates along one axis by a given the angle, it affects the other... or something like that. A new axis of rotation needs to be resolved for every step of the 3d animation. For an in-depth explanation go to this website that deals with 3D axis rotations, spherical trigonometry and other nasty looking mathematical models. Specifically scroll down to the "Axis Angle rotation" and the link for "axis-angle to matrix conversion".

Luckily the Papervision Gods gave us full fledge transformation matrixes to resolve this in a relatively simple way. Particularly the rotationX & Y static methods of the Matrix3D class saves us a LOT of work. The calculations of the new revolving 3d axis looks something like this:

//get original sphere transform matrix
var tempMatrix:Matrix3D = sphere.transform;
//create the rotation Matrixes for each local rotation axis given the corresponding X & Y
//distances where the user rolled over on the surface of the sphere
//Note: The value passed to Matrix3D.rotationX() should really be radians but I'm just using the x & y values divided by rotSpeedRatio which is a constant to bring the values down to "radiany" magnitudes and thus decrease the speed of the rotation. this will have to be the variable to work with when I implement the slowing down of the rotation.
var rotX:Matrix3D = Matrix3D.rotationX(-[mouse Y here]/[rotSpeedRatio]);
var rotY:Matrix3D = Matrix3D.rotationY(-[mouse X here]/[rotSpeedRatio]);
//Mix both Matrixes together
var rotResult:Matrix3D = Matrix3D.multiply(rotX,rotY);
//Apply (Multiply) the final transform matrix to the original one and assign it to the sphere transform
sphere.transform = Matrix3D.multiply(rotResult,tempMatrix);

That's it.

What I've done also in the example is get the mouse X & Y on MouseMove over the sphere so that the rotation gets refreshed then and because we are using this values for the rotation matixes, it slows down as you move the mouse towards the center of of the sphere (Ie: x and/or y approximates to zero)

This was fun but I really should take a math class soon.

Sphere Rotation

The first thing I did after getting all the Papervision and general project setup is creating a Sphere and make it rotate based on users input (Mouse RollOver) over the same Sphere surface.

Using InteractiveScene3DEvent.renderHitData object we can tell the X and Y values of where the mouse hit on the surface of the sphere. These values are then used to affect the rotationX and rotationY properties of the Sphere.

In the MouseOver and/or MouseMove handler:

var locX:Number = e.renderHitData.x-x;
var locY:Number = e.renderHitData.y-y;

sphere.rotationX -= locY/10;
sphere.rotationY += locX/10;

Divided by 10 just because the values are too big otherwise.

You'll recognize a problem with this way of doing this though. Rotations are done around the sphere's local axis X & Y. and what I really need is a rotation over a global axis based on a vertex defined by the user interaction with the surface of the sphere. This is what I'll work on next.

Idea and Workflow

The initial idea is to have a website that could help me get more business, so it has to have in itself some of the ingredients of what I like working on the most and that hopefully are in demand.

Workflow
I am going to build it in Actionscript 3 using Adobe Flex Builder 3 in a pure Actionscript Project. It's so much better that the Flash IDE for coding that I dread going back to it. Graphical assets will remain in Flash IDE though, with exported SWCs as needed and imported into the FLEX Library path. This workflow has given me some headaches in the past but I think I have it under control now.

I am going to use some open source Actionscript libraries to help me materialize the crazy ideas I am having. I might be getting myself into a quagmire but what I plan to do is have the entire menu/navigation system done in Papervision3D 2 with a little dose of physics thanks to either Fisix or APE.

Some Adobe After Effects will throw in there for good measure to create 2D animations that I am thinking of using as some eyecandy.

Next will be may fist 'real' posting as I jump into the project itself.

Website Project

After more that 10 years of interactive development I've decided to finally create my own website... this is pathetic I know but I don't care. The reason for this really is that I never needed it. So now, with some time in my hands I am committed to building it. It's not going to be a pretentious website but it will have a few things that I think will be very much fun creating. In doing so, I've decided to also document everything in this blog. Just for me to have and for friends to track my progress hopefully.

So, stay tuned. Next, my first post.