Home > Flash Player 10, flex > Playing with Pixel Bender

Playing with Pixel Bender

November 10th, 2008

As you probably know by now, Flash Player 10 has a new feature for image processing that allows you to perform some really cool effects and blends. Well actually this new feature is a little language for parallel computing. In this post I present some samples that show you how to integrate Pixel Bender with your Flex project from start to finish.

First of all you need the Pixel Bender Toolkit. You can get it from here. Second you will need to compile your Flex Project against Flash Player 10. There’s some documentation here. The whole idea behind my samples is that it took a while for me to put all things together and apply the effects on my Flex elements, and I want to make it easier for you.

In the first project I just made a simple Pixel Bender filter, which replaces the red channel with the blue one, and added it to an image.

Click here to see the demo

On the second project I used a filter with some parameters. It doesn’t do much, just clips a circle from the original image.

Click here to see the demo

The next one is a slightly more complex filter that has two input images. I use it to apply an image over a video.

Click here to see the demo

Finally, because Pixel Bender is basically a number cruncher, I use it to mix two ByteArrays. By chance :) these two ByteArrays are extracted from two sounds so this is also an example on how you can use Pixel Bender to mix two sounds.

Click here to see the demo (it might take a while before it starts playing because I have to load the sounds first)

UPDATE: The sound sample demo has two mixing methods. One is using PixelBender (onSampleData) and the other is using a pure AS3 code to mix. You can switch between the two (by changing the event handler at line 32) and and monitor the CPU to see if any performance improvements are detectable (on my computer is around 30%). I updated the demo to use the PixelBender method by default (thanks Chuck!)

You may want to take a look at the source code or download it.

Categories: Flash Player 10, flex Tags:
  1. chuck
    December 28th, 2008 at 01:10 | #1

    Thank you for finally shedding the light on how to properly use PixelBender to mangle audio. There are no complete tutorials on the subject. everyone just has little bits and and tips on how to do it.

  2. chuck
    December 31st, 2008 at 21:22 | #2

    Actually, I have a question. In the source code for the sampleSound program, you don’t ever call or reference the OnSampleData() function which uses the pixelBender file. you only call onSampleData2(). Can you explain or update how you make use of the pixelBender file to mix audio?

  3. chuck
    January 11th, 2009 at 20:11 | #3

    I built a synth using some of your methods here for passing byteArrays into pixelBender:

    http://matkat.tringali.org/misc/VisualFUN/Sawtooth/Sawtooth.html

    per voice:
    dials control panning.
    sliders control volume.

  4. skinloa
    December 30th, 2009 at 15:03 | #4

    while trying to compile the video Flex example (FP10 ) i got these two warnings…
    \"Data Binding will not be able to detect assignments to myBmp\"
    \"Data Binding will not be able to detect assignments to width\"

    I am sure that there is something i am doing wrong, but i cant find it
    thanks in advance

  5. skinloa
    December 30th, 2009 at 21:10 | #5

    i managed to minimize the warnings to one” Data Binding will not be able to detect assignments to width”, after declaring the myBmp variable as Bindable.

    i have also made some other changes to the original source to correct some other warnings, in case they are relevant
    added public for the played var
    added void as the return type of the set function myProp

  6. Marius Bratu
    February 11th, 2011 at 23:10 | #6

    Hello:)

    I figured it out youre a romanian, but still i decided to post in english just for reference for other people.

    Currently working at a project where i need to make mp3 encoding on the client. Just wanted to ask you if you own or maybe point me to some sources, where i can do this using Pixel Bender. I want to use Pixel Bender, thinking that the encoding will be much faster than regular as3, or using some alchemy library.

    Thanks,
    Marius Bratu.

    P.S. Great post!

  7. mpricope
    February 12th, 2011 at 13:55 | #7

    A PB algorithm for mp3 encoding would take advantage of the fact that PB kernels can run on multi-core CPUs that are quite frequent nowadays. However I doubt that a thing as complex as mp3 conversion can be translated on the PB kernels that in current version don’t support loops.

    If you know a good open source C library for mp3 encoding you can try to compile it using Alchemy and give it a try. It might work a little faster than an algorithm implemented in AS3 but still it will run on a single core. If you don’t have an MP3 algorithm currently then I strongly recommend this way as you have a decent chance of having something working in maybe less than a week (maybe even days if you are good with make files and C compilation).

Comments are closed.