Pixel Bender

If by now you don't know what Pixel Bender is, step away from that dial-up connection. Pixel Bender is a toolkit that allows you to write your own filters for Flash, AfterEffects or Photoshop. How cool is that? So why do we want to write our own filters in PixelBender? Because it is fast. Very very fast. The Flash Player use multi-threading to apply bitmap filters, the only process that is multi-threaded to my knowledge. More accurately Pixel Bender creates pixel shaders, each pixel is shaded to a specific mathematical formula. By applying these formulas we can create cool effects like a fish-eye lens.

The filter

The colour filter allows you to set the saturation, contrast, rgb tint and vignette value for any Actionscript DisplayObject. The Vignette needs a bit of work but you'll ge the idea. 

Example

Requires Flash Player 10

Move your mouse around to dynamically adjust the saturation (horizontal) and contrast (vertical). I also encoded the video with cuepoints as I thought it would be interesting to see what effect using different channel tints might have on the video at different stages. It is known that colours invoke emotion, and the reason why so many films use different tint filters is to invoke specific emotions. Blue can be cold, orange, yellow can be warm to give but a basic example. Combined with music this can be of great use to submerge the viewer further into the visuals. The cue points are set at 10sec (red), 28sec (blue), 73sec (green). To see what tint is currently set just move your mouse to the far left of the video, reducing saturation will show what tint is currently showing. Ok enough fairy talk. Lets see some code!

 
package com.wezside.filters 
{
	import flash.display.DisplayObject;
	import flash.display.Shader;
	import flash.display.Sprite;
	import flash.display.Stage;
	import flash.events.Event;
	import flash.filters.ShaderFilter;
	import flash.media.Video;
	import flash.net.NetConnection;
	import flash.net.NetStream;
	import flash.net.URLLoader;
	import flash.net.URLLoaderDataFormat;
	import flash.net.URLRequest;
	import flash.utils.getQualifiedClassName;		

	/**
	 * @author Wesley.Swanepoel
	 * 
	 * Compiler settings:
	 * -default-size 320 240 -default-frame-rate 31 -default-background-color 0x000000 -library-path {flexSDK}/frameworks/locale/en_US
	 */
	public class PixelBenderColourFilter extends Sprite 
	{

		
		private var video:Video;
		private var ns:NetStream;
		private var nc:NetConnection;
		private var colourFilter:ShaderFilter;
		private var shader:Shader;

		
		public function PixelBenderColourFilter() 
		{
			createVideoPlayer( ); 
			loadShader( );
			play( );
		}

		private function loadShader():void
		{
			var loader:URLLoader = new URLLoader( );
			loader.dataFormat = URLLoaderDataFormat.BINARY;
			loader.addEventListener( Event.COMPLETE, complete );
			loader.load( new URLRequest( "http://blog.wezside.co.za/examples/colourFilter/ColourFilter.pbj" ) );
		}

		private function complete( event:Event ):void 
		{
			shader = new Shader( event.target.data );
			addEventListener( Event.ENTER_FRAME, enterFrame );
		}

		private function enterFrame( event:Event ):void 
		{
			shader.data.center.value = [video.width / 2, video.height / 2];
			shader.data.vignetteInnerSize.value = [0.5];
			shader.data.vignetteOuterSize.value = [500];
			shader.data.saturation.value = [mouseX / stage.stageWidth * 2];
			shader.data.contrast.value = [mouseY / stage.stageHeight * 2];			
			colourFilter = new ShaderFilter( shader );
			video.filters = [ colourFilter ];
		}
		
		private function createVideoPlayer():void
		{
			nc = new NetConnection( );
			nc.client = new Object( );
			nc.connect( null );
			
			ns = new NetStream( nc );
			ns.client = {onCuePoint: cuePointHandler};
			ns.bufferTime = 6;
			
			video = new Video( 640, 292 );
			video.attachNetStream( ns );
			video.smoothing = true;
			addChild( video );
		}
		
		private function cuePointHandler( info:Object ):void
		{
			switch ( info.name )
			{
				case "Red"	 : shader.data.tintR.value = [0.3]; break;	
				case "Green" : shader.data.tintG.value = [0.5];break;	
				case "Blue"  : shader.data.tintB.value = [0.5];break;	
				case "exit"  : shader.data.tintR.value = [0.0];
							   shader.data.tintG.value = [0.0];
							   shader.data.tintB.value = [0.0];
							   break;	
				default		 : break;
			}
		}	
		
		public function play():void
		{
			ns.play( "flv/test.flv" );
		}

		override public function toString():String 
		{
			return getQualifiedClassName( this );
		}
	}
}

Download the PixelBender filter here »

Resource

• http://labs.adobe.com/wiki/index.php/Pixel_Bender_Toolkit