Below is another simple Pixel Bender filter that I created last night. This one basically, converts an image to gray scale, using the ITU-R Recommendation BT.709 algorithm described here.

Here is the filter:

<languageVersion : 1.0;>

kernel GrayScale
<   namespace : "mesh";
    vendor : "Mike Chambers";
    version : 1;
    description : "Gray scale filter";
>
{
    input image4 src;
    output pixel4 dst;

    void
    evaluatePixel()
    {
        dst = sampleNearest(src,outCoord());

        //algorithm from ITU-R Recommendation BT.709
        //http://local.wasp.uwa.edu.au/~pbourke/texture_colour/imageprocess/
        float avg = 0.2125 * dst.r + 0.7154 * dst.g + 0.0721 * dst.b;
        dst = float4(avg, avg, avg, dst.a);

    }
}

Again, its pretty simple, but I am trying to learn both Pixel Bender and image processing in general. The biggest thing I learned for this example is how to work with different vector sizes (which can be a little confusing). Im still wrapping my head around it, but once I get it down, Ill make a post on vectors in Pixel Bender.

After seeing all of the cool stuff people have been doing with Pixel Bender, I finally decided to spend a little time and start learning how to build them myself.

The learning curve isn’t too difficult, although you do have to learn some new concepts, and deal with some limitations (at least when creating filters for Flash). The most difficult part for me thus far, is just understanding color and pixel math and manipulation (something I need to read up on more).

Anyways, below if one of my first filters. I wanted to post it as it is a pretty simple example, while still potentially being useful. Basically, it creates a TV scanline effect by making every other row of pixels black.

Here is a before an after example (you need to click to view the full size in order to see the effect well).

Here is the code for the filter:

<languageVersion : 1.0;>

kernel ScanLines
<   namespace : "mesh";
    vendor : "Mike Chambers";
    version : 1;
    description : "Generates a TV Scanline effect";
>
{
    input image4 src;
    output pixel4 dst;

    void
    evaluatePixel()
    {
        //get the current pixel
        dst = sampleNearest(src, outCoord());

        //find out the vertical pixel size. In Flash this will always be 1
        float pixelVSize = pixelSize(src).y;

        //pixelVSize / 2.0 - outCoord() gives center of pixel, so we have to adjust to find
        //center of our pixel
        if( int(mod(((pixelVSize * outCoord().y) - pixelVSize / 2.0), 2.0 )) == 0)
        {
            //if on an even row, set the pixel to blackt
            dst.r = 0.0;
            dst.b = 0.0;
            dst.g = 0.0;

            //can also do
            ////dst = float4(0.0,0.0,0.0, 1.0);
        }
    }
}

Thanks to Kevin Goldsmith from the Pixel Bender team for helping me out.

The comments in the code explain what is going on.

You can load this into Pixel Bender to play around with it, and compile it for use in Flash Player 10.

I wanted to add a parameter to allow the line size to be set. It doesn’t look like I can store variables in between calls to evaluatePixel(). Im trying to figure out an algorithm to figure it out in one pass, but im not sure that my math skills are up to the task at the moment.

You can find all of my other posts on Pixel Bender here.

Last week I wrote a number of blog posts showing how to work with Pixel Bender filters in Flash, Flex and ActionScript. In particular, I wrote about how to embed pixel bender filters within a SWF and how to encapsulate custom Pixel Bender filters in an ActionScript 3 class. For this post, I am going to take the next step, and show how to create re-distributable SWC libraries of custom Pixel Bender filters that can be used in Flash Player 10 based projects (including Flex Builder, MXMLC and Flash Professional).

Basically, we will create a SWC (redistributable library of ActionScript classes) that contains our Pixel Bender filter encapsulated inside of an ActionScript class. We will create the SWC in Flex Builder although you could also easily do it using the compc command line tool included in the Flex SDK.

First, we need to set up Flex builder so that it will recognize the Flash Player 10 classes that we need to use to create and compile our filter class.

Download one of the Flex 3.2 nightly builds (I am using 3.2.0.3238) and extract it to a location on your desktop (I will refer to this as FLEX3.2_PATH). The builds contain support for compiling to Flash Player 9 and Flash Player 10.

Next, open up Flex Builder. We need to add the Flex SDK we just downloaded to Flex Builder. You can find complete instructions in this technote. Basically, go to Window > Preferences > Flex > Installed Flex SDKs > Add and point to the SDK you just downloaded.

Next, created a new “Flex Library Project” by going to File > New > Flex Library Project (dont worry, this is actually just an ActionScript library and doesn’t require or use Flex).

Specify a project name and where the project will be stored. In the Flex SDK version section, click the Use a specific SDK radio button, and then from the drop down, select the Flex SDK you just added (which should be named Flex 3.2).

Click the Next button (not the Finish button). This will take you to a panel where you can set build paths. We need to tell Flex Builder to compile for Flash Player 10, and not Flash Player 9. Select the Library path tab button at the top. This should show the Flex 3.2 SDK which you are using. Click the little arrow next to the SDK listing to expand the entry. This will show the SWCs being used to compile the project. Select the playerglobal.swc entry, and click the Remove button. This will remove the Flash Player 9 SWC from the project.

Next, we need to add the Flash Player 10 SWC. Click the Add SWC button and then browse to FLEX3.2_PATH/frameworks/libs/player/10 and select the playerglobal.swc in that directory and click ok.

Finally, make sure the playerglobal.swc entry is expanded and select the Link Type entry, and click the Edit button. Set the Link Type to External and click ok, and then click the Finish button.

The project is now configured to create SWC libraries that work with Flash Player 10 classes.

Note, you may get a compile error in the Problem view saying that nothing has been specified to be included in the SWC. You can ignore that for now.

Next, we need to add our Pixel Bender filter, and create the class that embeds it and provides an APIs for it. We will use the same filter and classes that I used in my earlier blog post here. Copy the testfilter.pbj file into the filters directory.

In the src directory of the project, create a new folder called “filters”. We will use this as the namespace for all of our custom filters (of course, you may want to use a different namespace and directory structure). Copy the filters pbj file into that directory.

Now we are ready to add our ActionScript class for the filter. I am not going to go through all of the steps of creating the class, you can get most of that in this post.

Right click on the filters folder, and select New > ActionScript Class. Give the class a name (I am using TestFilter for this example), set the Superclass to ShaderFilter and click the Finish button. If you just copy the class from the previous past, make sure to update the package path in the class definition.

Here is what the project layout looks like now:

Here is the filter class I created for the filter:

package filters
{
	import flash.display.Shader;
	import flash.filters.ShaderFilter;
	import flash.utils.ByteArray;

	public class TestFilter extends ShaderFilter
	{
		//the file that contains the binary bytes of the PixelBender filter
		[Embed("testfilter.pbj", mimeType="application/octet-stream")]
		private var Filter:Class;		

		private var _shader:Shader;

		public function TestFilter(value:Number = 50)
		{
			//initialize the ShaderFilter with the PixelBender filter we
			//embedded
			_shader = new Shader(new Filter() as ByteArray);

			//set the default value
			this.value = value;
			super(_shader);
		}

		//This filter only has one value, named value
		public function get value():Number
		{
			return _shader.data.amount.value[0];
		}

		public function set value(value:Number):void
		{
			//not that pixel bender filters take an array of values, even
			//though we only have one in our example
			_shader.data.amount.value = [value];
		}		

	}
}

At this point, we are ready to add the class to the SWC, and then compile the project.

Open Project > Properties > Flex Library Build Path. On the Classes tab, make sure the TestFilter class is selected. You do not need to include the filter pbj file in the SWC as this is compiled into the TestFilter class when the class is compiled into the SWC.

Click the OK button. The class and SWC should be compiled. If you get any compile errors you will need to fix them first. Once the SWC is compiled, you can find it in the projects bin folder.

You now have a SWC that contains your custom ActionScript Pixel Bender class and filter. At this point, you can distribute and / or reuse the SWC for other projects. Just link the SWC like you would any other SWC and your filter class will be available. Today, this works in Flex Builder and MXMLC (provided you set them up to compile to Flash Player 10). Once Flash Professional CS4 is released (which includes support for Flash Player 10) you will be able to use the SWC and filter there also (and yes, the SWC import bug is fixed).

Using this technique, you can create reusable libraries of custom Pixel Bender filters, and use them in your project just like the Flash Player’s built in filters.

Ok. Last post on Pixel Bender for today (I promise). This one is simple, but ties together my previous posts.

Now, that we know how to load and use Pixel Bender filters in Flex, and know how encapsulte Pixel Bender filters in an ActionScript class, lets combine the two to leverage custom Pixel Bender filters in MXML.

First, again, we need our custom Pixel Bender class:

Filter Class : TestFilter.as

package
{
	import flash.display.Shader;
	import flash.filters.ShaderFilter;
	import flash.utils.ByteArray;

	public class TestFilter extends ShaderFilter
	{
		//the file that contains the binary bytes of the PixelBender filter
		[Embed("testfilter.pbj", mimeType="application/octet-stream")]
		private var Filter:Class;		

		private var _shader:Shader;

		public function TestFilter(value:Number = 50)
		{
			//initialize the ShaderFilter with the PixelBender filter we
			//embedded
			_shader = new Shader(new Filter() as ByteArray);

			//set the default value
			this.value = value;
			super(_shader);
		}

		//This filter only has one value, named value
		public function get value():Number
		{
			return _shader.data.amount.value[0];
		}

		public function set value(value:Number):void
		{
			//not that pixel bender filters take an array of values, even
			//though we only have one in our example
			_shader.data.amount.value = [value];
		}		

	}
}

Once we have defined that, we can then treat the class like any other filter, and use it directly within MXML, like so:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
	xmlns:local="*"
	>
	<mx:Image left="10" top="10" width="375" height="500" source="@Embed(source='image.jpg')">
    	<mx:filters>
     		<local:TestFilter value="25" />
    	</mx:filters>
	</mx:Image>
</mx:Application>

Note that the local namespace maps to the package that contains our custom filter (in this case, the root package).

Compiled using the Flex 3.1.0.2710 SDK, and requires Flash Player 10. The Flex team is working on making this workflow even easier for Flex 4, so keep an eye on the Flex 4 project page.

You can see an example of the filter here.

You can find more information on Pixel Bender here.

You can download the filter from here

If you read my blog regularly (or just today) you should have noticed that I have been playing around with some Pixel Bender filters and ActionScript / Flex (all inspired by Lee Brimelow’s video screencast on creating and using Pixel Bender filters in Flash Player 10.)

Previously, I posted some code showing how to embed a custom Pixel Bender filter within a SWF and then apply the filter to an image. That works well, but the code is not that reusable since the filter loading code is mixed in with the main code.

Below is a simple example that shows how to encapsulate a custom filter inside of an ActionScript 3 class, which you can then use and re-use like any other built in filter.

Document Class : PBFilter.as

package
{
	import flash.display.Bitmap;
	import flash.display.Sprite;

	// SWF Metadata
	[SWF(width="600", height="400", backgroundColor="#000000", framerate="30")]

	public class PBFilter extends Sprite
	{
		//The image to display the filter on
		[Embed(source="image.jpg")]
		private var image:Class;

		private var im:Bitmap;

		public function PBFilter():void
		{
			im = new image() as Bitmap;
			addChild(im);

			var filter:TestFilter = new TestFilter();
				filter.value = 30;

			//add the filter to the image
			im.filters = [filter];
		}

	}
}

Filter Class : TestFilter.as

package
{
	import flash.display.Shader;
	import flash.filters.ShaderFilter;
	import flash.utils.ByteArray;

	public class TestFilter extends ShaderFilter
	{
		//the file that contains the binary bytes of the PixelBender filter
		[Embed("testfilter.pbj", mimeType="application/octet-stream")]
		private var Filter:Class;		

		private var _shader:Shader;

		public function TestFilter(value:Number = 50)
		{
			//initialize the ShaderFilter with the PixelBender filter we
			//embedded
			_shader = new Shader(new Filter() as ByteArray);

			//set the default value
			this.value = value;
			super(_shader);
		}

		//This filter only has one value, named value
		public function get value():Number
		{
			return _shader.data.amount.value[0];
		}

		public function set value(value:Number):void
		{
			//not that pixel bender filters take an array of values, even
			//though we only have one in our example
			_shader.data.amount.value = [value];
		}		

	}
}

Compiled using the Flex 3.1.0.2710 SDK (although it does not use the Flex Framework), and requires Flash Player 10.

You would of course, have to add the appropriate getters and setters depending on the values your custom Pixel Bender filter accepts.

Using this technique, you could then create a SWC (distributable ActionScript library) to package your custom filter(s) and re-use them in MXMLC, Flex Builder and / or Flash Authoring.

You can see an example of the filter here.

You can find more information on Pixel Bender here.

You can download the filter from here.

Following up on my earlier post on how to embed Pixel Bender filters within a SWF, here is a super simple example that show how to use a Pixel Bender filter within a Flex application.

Compiled using the Flex 3.1.0.2710 SDK, and requires Flash Player 10.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
	applicationComplete="onApplicationComplete()">

	<mx:Script>
		<![CDATA[
			import flash.filters.*;
			import flash.utils.ByteArray;		

			//the file that contains the binary bytes of the PixelBender filter
			[Embed("testfilter.pbj", mimeType="application/octet-stream")]
			private var TestFilter:Class;		

			private function onApplicationComplete():void
			{
				//Pass the loaded filter to the Shader as a ByteArray
				var shader:Shader = new Shader(new TestFilter() as ByteArray);

				shader.data.amount.value = [100];
				var filter:ShaderFilter = new ShaderFilter(shader);

				//add the filter to the image
				im.filters = [filter];
			}
		]]>
	</mx:Script>

	<mx:Image right="288" left="40" top="26" bottom="108" id="im" source="@Embed(source='image.jpg')"/>
</mx:Application>

You can see an example of the filter here.

You can find more information on Pixel Bender here.

You can download the filter from here.

I was just watching Lee Brimelow’s excellent video introductions to creating and using Pixel Bender filters in Flash Player 10.

In his second video, he shows how to use a custom Pixel Bender filter within Flash Player 10. One issue that Lee had was that you have to load the filter at runtime in order to use it.

I have modified Lee’s example to allow the filter to be embedded within the SWF, and not require it to be dynamically loaded at runtime.

package
{
	import flash.display.*;
	import flash.events.*;
	import flash.filters.*;
	import flash.net.*;
	import flash.utils.ByteArray;

	// SWF Metadata
	[SWF(width="600", height="400", backgroundColor="#000000", framerate="30")]

	public class PB extends Sprite
	{
		//the file that contains the binary bytes of the PixelBender filter
		[Embed("testfilter.pbj", mimeType="application/octet-stream")]
		private var TestFilter:Class;		

		//The image to display the filter on
		[Embed(source="image.jpg")]
		private var image:Class;

		private var im:Bitmap;

		public function PB():void
		{
			im = new image() as Bitmap;
			addChild(im);

			//Pass the loaded filter to the Shader as a ByteArray
			var shader:Shader = new Shader(new TestFilter() as ByteArray);

			shader.data.amount.value = [100];
			var filter:ShaderFilter = new ShaderFilter(shader);

			//add the filter to the image
			im.filters = [filter];
		}

	}
}

Check out the Flex Cookbook for some good information on How to embed any type of data within a SWF.

Make sure to check out Lee’s video tutorial on using Pixel Bender filters in Flash Player 10.

You can see an example of the filter here.

You can find more information on Pixel Bender on Labs.