Beginning To Pixel Bender - 1

I cover topics such as; how pixel bender works, pbj file format, language in pixel bender, platform and couple more topics in “First Look To Pixel Bender” article. And now I will consider this article as a part of the old one. That’s why I recommend you to reading the first one before starting this one.

http://enginyoyen.com/blog/eng/index.php/first-look-to-pixel-bender/

In this article I will explain how you can code with Pixel Bender and create a filter file. The language in Pixel Bender is C based language, so that’s why it might be hard at the beginning. But I will try to make easy as possible, and explain each code with detail.

Pixel Bender Toolkit

First you do need a Pixel Bender off course. You can download to Pixel Bender Toolkit address at below;

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

If you all ready start to use Flash CS4 it’s coming with installation package. You can check your programs folders it might all ready be loaded. Of course if is not you can get IDE from labs.adobe for free.

I assume you all ready download or have it Pixel Bender for rest of article. Pixel Bender Toolkit has three basic areas;

Programı indirdiğinizi varsayıyorum, program üç bölümden oluşmakta.

First part allows you to see the result of code that you wrote on image. The image over here is only for testing and it could be any image on your hard drive. Target is only seeing the result of code in real time.

Second part is the simple code editor.

Third part is place where the parameter of filter being controlled. For example blur filter has a three parameter (blurX, blurY, Quality). BlurX is blur amount that will apply to x coordinate. This is the first parameter of blur filter. If we make the blur filter in Pixel Bender Toolkit this three parameter will take place on third part.

The filters which you create in IDE can be export it as a .pbj file. Pbj is extension of Pixel Bender Toolkit. For using the filter which been export it, first you need to load the file in Flash Player. You can do this by using URLLoader class. After you load the filter file you can use the filters property of display object and apply to filter to any display object you want.

Adding Image To IDE

Adding image in IDE is very simple. All you have to do is select Load Image 1 option from File Menu.

When you open first time you will see a sample image folder. If you want you can open one of them or if you want you can choose some other image from your hard drive. Image you add on IDE is only for real time testing to code that you wrote.

Adding New Filter

The filter file mush have some certain code blocks, which is define the language version name of filter and so on. You can add those codes in two ways. First is by clicking “Create a new Filter” button in third section of program. Second is clicking “New Kernel Filter” from File menu. Doesn’t matter which one you use for creating new filter, result will be like this;

The code block at is a very simple filter which has no effect on image. So actually code block at above is a filter. Now let’s check the jobs and functions of those codes;

The languageVersion statement code is defining the language version of Pixel Bender.

The code block afterwards is call Kernel. Each filter must have minimum one Kernel. In more complex image processing programs you can use more than one Kernel. If we have to describe kernel in our term we can say Kernel is an object. The job of this object is getting multiple pixels as input but returning a single pixel as output. Of course this is can be in different ways or combination is doesn’t have to get pixels around of special pixels.

I will give an example with an image above for describing better. Think of that as a part of 20×20 image. And the job of our kernel is getting all black points (pixels) and returning single red point (pixel) as a combination of the other pixels.

Next is the name of filter. Instead of NewFilter statement you can type BlurFilter, GlowFilter or MyFavoriteFilter. The other information in Kernel code block is definition of the person or company who made the filter.

The code at above is the stable. You write that code at beginning and stays like that. And now we will check the codes where the real action happens;

The input image4 src; is represent image that we will use in Pixel Bender. The image statement is represent 4 channel Bitmap Data (A:Alpha, R:Red, G:Green, B:Blue). Pixel Bender 1.0 do support this four channel (image1, image2, image3, image4)

In Flash we can use 24 or 32 Bit images. 24 Bit images are 3 channels (RGB). 32 Bit images are result of 4 channels (ARGB). Image4 variable we use over here is represent 32 Bit Bitmap Data.

The next line is output pixel4 dst; . The pixel4 variable is like an image4 variable. The difference is one of them representing output pixel the other one represent source pixel. The src and dst I mean source which is image and destination which is output pixel.

Next is evaluatePixel() function. This function required in each kernel. The job of this function is the work for any pixel on image. So the main action is working in this function. One thing you shouldn’t forget is; that you have to return back a pixel from this function. Because this function makes the changes on image so it has to return back a pixel.

The value we assign to dst is returned from sampleNearest() function. sampleNearest() function always return a pixel from coordinate we give.SampleNearest() function take two parameters. First parameter is source (src) image second is coordinate of pixel we want to get. For getting coordinate we are using outCoord() function.

So far so good. I mention above the code is exist is a filter. And for applying the filter to image you have to click “Run” button. Of course when you click there won’t be any change on image because we didn’t change any pixel value. What we did was getting source pixel and make them as output pixel so; result is same. In next article I will cover some of the functions of Pixel Bender with more details and give a small example so it will help you to get in Pixel Bender more.

Take Care
Engin!