Ryan Phelan » Filters

Spotlight Pixel Bender Filter

Ryan — Tue, 28 Oct 2008 15:18:53 +0000

This is an advanced filter which renders dynamic colored lighting on a display object in Flash. Consider it a work in progress — It's not as full featured as Photoshop's "Lighting Effects" filter, but it is capable of creating a wide array of effects. The kernel's main algorithm was ported from NVIDIA's Shader Library, but I had to make some pretty heavy modifications to make it more functional for the Flash world. It has 8 parameters: ambientColor, angle, azimuth, coneAngle, distance, intensity, position, and spotColor.

ambientColor - color to apply to all pixels of the image
angle - angle at which the spotlight is projected (in degrees)
azimuth - angle between the image plane and the spotlight (in degrees)
coneAngle - angle of the spotlight's "opening" (in degrees)
distance - distance from the spotlight to the center point
intensity - intensity of the spotlight
position - x, y, z position of the spotlight
spotColor - color of the spotlight

There are so many different ways that you could use this effect, I will probably devote a few more posts to showing additional examples. In this demo, I created a couple of draggable handles that you can use for positioning the spotlight, and some preset configurations (try the dawn, day, and dusk buttons). Next time, I'll incorporate some animation.

Application - Source

Magnify Pixel Bender Filter

Ryan — Mon, 20 Oct 2008 14:27:01 +0000

The "Magnify" effect is an age old Flash trick that we used to accomplish using two images and some clever masking. This pixel shader can achieve the same effect with less code, only 1 image, and has a few new tricks up its sleeve. It magnifies a circular section of an image and optionally creates a smooth transition between the magnified and unmagnified areas. The four parameters are center, outerRadius, innerRadius, and magnification.

center ([0-2048, 0-2048]) - the center coordinates of the magnified area
outerRadius (0-500) - the radius of the magnified part of the image
innerRadius (0-500) - the radius of the fully magnified part of the image
magnification (1-50) - the amount to magnify the image by (e.g. set to 2 for a 2x magnification)

Note that the ranges specified above are just the recommendations from the .pbk file, you can set these values to whatever you want in your application.

Take some time and play around with the settings, it is possible to acheive a several different effects. If innerRadius is 0, it creates a "bubble". If it is higher than outerRadius, then you get a hard edged circle. In this demo, I disabled values between 0 and 1 for magnification because they can create some strange side effects, but if you are careful you can use fractional magnifications to create a "pinch" type effect.

Application - Source

Zoom Blur Pixel Bender Filter

Ryan — Fri, 17 Oct 2008 15:58:16 +0000

Zoom Blur does a 15 level zoom and blur about a specified focus point, and could be very useful for transition effects. Its two properties are amount and center.

amount (0 - 0.5) - the amount of blur to apply
center ([0 - 2048, 0 - 2048]) - the focal point of the blur

Application - Source

*Note: This application requires Flash Player 10

Photo courtesy of my talented and beautiful girlfriend, Bre Gehrken.

Sharpen Pixel Bender Filter

Ryan — Fri, 17 Oct 2008 15:03:50 +0000

The Sharpen filter is similar to Photoshop's, it increases the apparant sharpness/definition of an image. It has two parameters: amount and radius.

amount (0 - 20) - the amount to sharpen the image by
radius (0 - 1) - pixel distance to sample from

Application - Source

*Note: This application requires Flash Player 10

Photo courtesy of stock.xchng

Wave Reflection Pixel Bender Filter

Ryan — Thu, 16 Oct 2008 20:30:22 +0000

Wave Reflection creates the effect of moving water over the surface of an image. It differs from other wave and ripple effects in that it can be animated in a loop to create continuous ambient motion, and the ripples are not uniformly distributed across the image - they become more exaggerated towards the bottom. The three parameters are amplitude, frequency, and progress.

amplitude (0-1) - the height of the waves
frequency (0-.54) - how close together the waves are. Higher value = more waves.
progress (0-1) - percentage of the wave sequence. Animate from 0 to 1 to get a smooth wave effect.

This was my first go at a Pixel Bender filter, let me know what you think. I've got a couple more in the works, so check back soon.

Application - Source

*Note: This application requires Flash Player 10

Photo courtesy of stock.xchng