Mastering the Tao of Personal Computing

For everyone who wonders what APE is, this is the open source ActionScript Physics Engine for 2D. Basically, with APE you can do the following:

● create particles (rectangles, circles, springs, etc.)
● configure particles (mass, friction, elasticity, collision, etc.)
● connect particles through spring constraints
● set particles velocity
● add forces to the particles
● group particles into groups and compositions

The code is easy to read and modify and now I’ll show you, how I’ve added directional motion blur to some APE components.

Check this sample pendulum which elements are using directional motion blur:

Download the Pendulum source code!
Download APE with directional motion blur!

Adding the directional motion blur to APE is relatively simple, but before doing that we need to understand how to implement directional motion blur with ActionScript.

What is Directional Motion Blur?

The Blur filter in Flash can apply blurring only to the right and left or up and down directions of a display object, but not in other directions, like blurring only in 35 degrees direction. This article showed me how can I get by this restriction.

1. First, you need to determine the direction angle of the movement. In ActionScript you can get the direction angle in radians with the following calculation:

var directionAngle:Number = Math.atan2(endPt.y - startPt.y, endPt.x - startPt.x);

2. Second, you need to rotate the display object to the negative value of the direction angle. To achieve this you need to rotate the transformation matrix you’ll use when you draw the bitmap.

// reset the rotation matrix:
rotationMatrix.identity();
// rotate the matrix:
rotationMatrix.rotate(-directionAngle);
// set matrix translation:
rotationMatrix.translate(offset, offset);

3. Third, you draw the bitmap with the already configured transformation matrix and then apply only horizontal blurring with a particular blurring distance.

// reset the bitmap data:
blurBitmapData.fillRect(blurRect, 0);
// draw with rotation:
blurBitmapData.draw(originalSprite, rotationMatrix);

// calculate horizontal blur:
var distance:Number = Point.distance(startPt, endPt);
blurFilter.blurX = Math.min(maxBlur, distance * 3);
// apply the blur filter:
blurBitmapData.applyFilter(blurBitmapData, blurRect, blurPoint, blurFilter);

4. Now, you’re ready for the final step - restoring the rotation.

// the rotation property expects degrees, not radians:
sprite.rotation = directionAngle * 180/Math.PI;

Here is a sample application demonstrating directional motion blur in action.

Download directional motion blur sample!

Putting All Together in APE

Obecto is bidding for an interesting Flash project, so I had to compile a simple prototype that uses APE for a multi-joint pendulum which elements have a directional motion blur. I’m not proud the way I did it - I’ve just done it as quick as possible - directly modifying the RectangleParticle, CircleParticle and the SpringConstraint components of APE. I still haven’t thought about how to separate the directional motion blur logic into a discrete aspect, neither my implementation is general enough to handle all possible ways of using APE particles (e.q. this implementation does not handle the case when we use a predefined display object instead of a styled rectangle or circle). And may be the worst thing about my implementation is that I’ve changed the constructors interfaces of the modified components, but this can be fixed quickly.

Have fun with APE for at least a weekend!

This post is tagged ActionScript 3, ActionScript Physics Engine, APE, Directional Motion Blur