Directionally Blurring Visual Artifacts

Blur is perhaps the most underappreciated feature in our animation & visualization digital world. It smooths movement in our motion graphics, suggests directional movement in still images, graduates effects when applied to masks, and even compensates for quantization errors when we composite.

However, there is a problem with common Blur Filter algorithms: they can directly be applied only upon the X- and/or Y-Axis, meaning that blurs are confined to left-right or up-down. If you are animating an object at 45 degrees, such an axial or biaxial (composite) blur will be inconsistent with the motion.

In the following interactive visualization you may apply an X-Axis and/or a Y-Axis blur. When you do, the effect is obvious, and when you use the control to rotate the array of artifacts the blur remains loyal to it's native application axis. This is due to the way that ActionScript applies Convolution Filters-it actually converts them into bitmaps (rasters, vice vectors)-which makes sense considering their transparency (Alpha Channel) requirements and potential blending/compositing requirements. The individual artifacts are redrawn per their rotation, and the Convolution Filter/s are reapplied on the redrawn artifact's axis.

If you apply a blur to the array, another artifact will appear in the lower right corner of the Flash Window below. It will honor any rotational commands you give using the control, but the blur will rotate with the artifact to any intermediate value.

There are some considerable logical and coding complications in producing this animation. Obviously-from the behavior of the array when blurred and rotated-the blur is stubborn. Additionally, an object produced programmatically will generate its registration point at Local(0, 0, 0)-the upper left corner-which is hostile to rotating or transforming an object around it's center.

ActionScript offers a solution for the rotation challenge in the ActionScript 3 fl.motion.MatrixTransformer.rotateAroundInternalPoint() Method, but I recommend Greensock's solution in their TransformAroundCenterPlugin.as.

If you apply a discreet X-axis blur, the array looks like:

 

 

 

 

 

Notice that the blur is confined along the x-axis (left to right); horizontal surfaces are relatively unaffected.

If you then rotate the array 90° clockwise the blur is still aligned along the x-axis and has not remained loyal to the original axis implementation.

However, the demonstration artifact has maintained its blur along its original axis.

 The importance of this capability in a broad spectrum of animations is difficult to overstate.

Please add a blur to the images and adjust the quality back and forth to see the difference it makes. In ActionScript the "quality" of blur, whether applied programmatically or within the Flash application (IDE) simply refers to the number of times the Blur Filter is applied to the target. Obviously, more iterations produce a smoother object with less artifacting, but there can be a very steep computational penalty. In an animated environment it is necessary to weight the virtue of high grade blurs relative to CPU loading, particularly on mobile devices and in complex interactive situations.

The single blur object in the lower right is actually a dynamically drawn copy of that on the extreme left of the top array, and has been increased in size 30% to exacerbate artifacting along its perimeter so that it will demonstrate the advantages of higher grade blur more recognizably.

Blur can actually facilitate low frame rates by easily and convincingly replacing intermediate frame renders in rapid animations.

L