Pixel Bender Explorer: Bending Ext AIR Apps
February 19, 2009 by Aaron Conran
Pixel Bender is an exciting new technology by Adobe which brings video and image processing capabilities to the flash runtime. It allows you to create and apply filters to ‘bend’ pixels and create compelling animations which have never been possible in an HTML environment. Because Adobe AIR uses flash to load any HTML content, we can leverage these powerful filters on a standard Ext Application in the AIR environment. Ext is releasing a Pixel Bender Explorer demo which allows you to explore many of the new filters which have been created by the Adobe Community and demonstrates how to integrate them into an Ext Application.
Pixel Bender Explorer
Download and install the Pixel Bender Explorer application. Apply different filters or effects by clicking on the Filter Grid. By selecting a filter on the left hand side and adjusting the sliders you can apply live effects to the current target video, browser or image. For some of the filters we have already built some animations such as bend/flatten, waveIn/waveOut, dissolve/combine and tileIn. You can test these animations by choosing the appropriate filter and clicking the animation button above the sliders. These animations can be called within code with a single method call on any Ext.air.NativeWindow or Ext.air.VideoPanel.
Here is an example of bending an Ext.air.NativeWindow:
var win = new Ext.air.NativeWindow({ file: '../html/browser.html', transparent: true, chrome: 'none', width: 640, height: 480 }); win.bend();
Construction of Pixel Bender Kernels
Constructing your own Pixel Bender Effects and Animations is a multi-step process. First, you need to construct a kernel or filter for Pixel Bender. These kernels describe how each pixel should change for a single frame based on a mathematical algorithm which you implement. Kernels are written in the Pixel Bender Kernel Language and compiled with the Pixel Bender Toolkit. The language is very similar to GLSL (OpenGL Shading Language). The benefits of writing effects in this language is that are generalized to all common video hardware platforms and can be used in other Adobe Applications such as After Effects and Photoshop. There is a great article, Pixel Bender basics for Flex and AIR, created by Charles Ward of Adobe that explains the Pixel Bender language in more detail.
Using Pixel Bender Kernels
After compiling the source code of a Pixel Bender Kernel the extension will change from .pbk (source form) to .pbj (binary/compiled form). The compiled version of the kernel is the only file that we need in order to use the new kernel. After compiling a new kernel, you can place the .pbj file in the kernels/ directory of your installed Pixel Bender Explorer application and you will be able to test it after restarting the application.
Pixel Bender Exchange
There is a lively community around the creation of Pixel Bender Kernels on the Pixel Bender Exchange, most of which are under an open source license. Download a few kernels and take them for a test run in the Pixel Bender Explorer. The Explorer provides you all of the tools necessary to create your own custom animations for a NativeWindow or VideoPanel. For example, if you wanted to use the smudge filter created by Frank Reitberger as an animation you would determine the paramName that you want to change and where it should start and end along with a few other configurations.
Using the same NativeWindow as shown in the example above:
win.animFn({ paramName: 'amount', reset: true, startValue: 5, endValue: 0, duration: 1, mode: 'easeOutStrong', url: 'app:/kernels/smudger.pbj' });
Code Explanation
This will tween the value of the parameter amount from 5 to 0 over a duration of 1 second. This will have an effect which I would name smudgeIn because it starts smudged and will eventually look normal. We are using one of Robert Penner’s Easing equations easeOutStrong. Support has been added for 15 different easing modes, which explain how fast/slow we adjust the value over time. The filter also needs to be reset at the end of animation because there is no parameter which will not affect the image. (When we set amount to 0 it will still have a slight change on the target.) Anyone who is developing Pixel Bender Kernels, I encourage you to have a parameter which reflects the unapplied state vs the fully applied state. A good example of this are the Adobe filters which use the parameter of transition (0 does nothing, 1 is fully applied).
Wrapping up
Pixel Bender can spruce up an Ext.air application by adding custom animations to wow your users. However, you should be cautious about the over-use of these filters throughout your application. For a good example of how effective these filters and animations can be to provide proper user feedback you should check Adobe’s signature sample BlackBookSafe. Each time an animation occurs it is clear why it happened, not a surprise to the user and adds character to the application. When using these animations you should strive for the same goal, not to surprise your user, but to impress them.
Posted on February 19th, 2009 at 11:36 am
This is going to give Air a leg up on browsers when it comes to RIAs! Sweeeeeeeeeeet.
Posted on February 19th, 2009 at 11:46 am
High marks for cool factor! Let’s get cracking on some ways to “exploit” the bender!
Posted on February 19th, 2009 at 11:47 am
Definitely a very cool thing, but I’m afraid I’m going to be seeing this everywhere where it’s not needed.
Something like this, while a cool use of available technologies, I find very hard to have an actual good practical use.
Take heed of “wrapping up.” Don’t overdo it!
Posted on February 19th, 2009 at 11:49 am
Looks interesting. The possibilities for filter use could be endless
Posted on February 19th, 2009 at 11:52 am
Great post Aaron, and nice job on the Explorer program. To add to your closing statements: I absolutely agree on using these animations and effects wisely in a way not to surprise or confuse the user. They should not only “make sense” and impress the user, but they do well as visual indicators of, e.g., something’s changed, something’s happened, or something’s wrong.
Explorer and Ext.air integration will do a great job to rapidly test these effects.
Posted on February 19th, 2009 at 11:54 am
I’m really amazed. But this application is a real CPU killer. When I was testing ıt never come down from 80%.
Posted on February 19th, 2009 at 11:55 am
This is an awesome read! Perfect way to start my day. I am sure Ext.air applications would become more popular now
Posted on February 19th, 2009 at 12:03 pm
Try to imagine, what such technology can bring to the online gaming world.
Posted on February 19th, 2009 at 12:25 pm
It would be great to see the page effect linked with an Ext.Grid paging toolbar.
Posted on February 19th, 2009 at 2:05 pm
[...] see link Ext JS – Blog Published Feb 19 2009, 06:05 by Stuart [...]
Posted on February 19th, 2009 at 3:18 pm
[...] сегодня заглянув в официальный блог компании, я нашел интереснейшую заметку. Как уже известно, в последние версии ExtJS начали [...]
Posted on February 19th, 2009 at 4:55 pm
This is pretty slick stuff! Nice work. I threw together a short video demo of your application at http://tinyurl.com/AirExtJSPixelBender.
Posted on February 19th, 2009 at 6:02 pm
Nice, but too much expensive in terms of CPU processing…
Posted on February 20th, 2009 at 2:21 am
very cool!
Posted on February 20th, 2009 at 4:00 am
[...] сегодня заглянув в официальный блог компании, я нашел интереснейшую заметку. Как уже известно, в последние версии ExtJS начали [...]
Posted on February 20th, 2009 at 12:14 pm
To anyone who’s complaining about CPU cycles;
Yes. Pixel bender is very CPU intensive. As all real-time effects. Being someone who’s worked with video and created custom video sequences from scratch (see intro: http://tdg-i.com/67/ext-js-screencast-007-create-delegate-and-scope) this is a given.
Deploying effects, be it JS based or flash based, will be CPU intensive.
Posted on February 21st, 2009 at 12:44 am
Quite an impressive air script!
Posted on February 21st, 2009 at 11:07 am
[...] new Pixel Bender Explorer AIR app that demonstrates how to apply PB animations & effects to your JavaScript-based AIR [...]
Posted on February 22nd, 2009 at 10:19 pm
Just tried it out, as I’m planning on getting into PB as soon as I get some more time (geddit?!). Very nice guys.
Posted on February 23rd, 2009 at 7:44 am
Nice stuff guys… but I found HTML 5 more promising…. I recently attended a mozilla conference and Arun demonstrated what you can do with HTML 5 video tag and some CSS (yeah CSS)…. and it was bloody awesome
https://library.mozilla.org/index.php?title=Web_Graphics%2F%2FMultimedia_(2008)
But you will have to view it on FF 3.1 minefield as 3.0.6 does not support video tag
Posted on February 23rd, 2009 at 12:32 pm
What is Bender Can any 1 Tell me?
Posted on February 24th, 2009 at 6:29 am
Some people told me that the link I posted is not working. Actually the (2008) is also a part of the URL. Here is an escaped version of the URL
https://library.mozilla.org/index.php?title=Web_Graphics%2F%2FMultimedia_%282008%29
Posted on February 24th, 2009 at 11:39 am
[...] team at Ext created an Adobe AIR application called Pixel Bender Explorer that demonstrates how to apply compelling animations and other effects to your JavaScript-based AIR [...]
Posted on February 24th, 2009 at 12:18 pm
It seems useless for me… sorry, but cannot find either one thing that will make this usefull. Uhh…
Posted on February 24th, 2009 at 12:28 pm
Is somewhere source code available for this example?
Posted on February 25th, 2009 at 12:11 am
@elffikk – If you download the .air file you can simply rename it to a .zip and then extract all of the source code and see how the project is setup!
@All Users – complaining of high CPU Usage; check your video card and see if it is a compatible nVidia or Radeon card. Pixel Bender is implemented to try to use the capabilities of your GPU first and then if it can’t use the GPU, it will use the CPU. As you probably know GPU’s are much better at calculations for graphics processing.
Posted on February 25th, 2009 at 6:00 am
[...] not the only ones who have been playing with AIR. Aaron Conran from the Ext JS crew blogged about Pixel Bender Explorer, an AIR app they wrote to demonstrate how to integrate Ext JS with AIR’s Pixel Bender [...]
Posted on February 25th, 2009 at 7:38 am
[...] > Ext JS – Blog [...]
Posted on February 26th, 2009 at 12:43 am
prety cool
Posted on February 26th, 2009 at 4:24 am
This gives me so many ideas. Fantastic work guys. Ext is always one step ahead of the competition. Great work!
Posted on February 26th, 2009 at 6:33 am
Pixel Bender Explorer…
A Pixel Bender az Adobe legújabb technológiája, amelynek segítségével egy a GLSL-hez hasonlatos nyelven lehet programozni. Mindezt persze flash technológiával. Ezzel a HTML-ben és Javascriptben jelenleg még csak elég korlátozottan elérhet……
Posted on February 26th, 2009 at 8:26 pm
[...] not the only ones who have been playing with AIR. Aaron Conran from the Ext JS crew blogged about Pixel Bender Explorer, an AIR app they wrote to demonstrate how to integrate Ext JS with AIR’s Pixel Bender [...]
Posted on February 27th, 2009 at 6:47 am
I AM A NEW LEANER OF EXT JS….IT SEEMS TO BE VERY VERY FANTASTIC!!!!!!!!
Posted on February 27th, 2009 at 8:30 am
[...] Ext JS – Blog (tags: flash flex javascript air adobe pixelbender) [...]
Posted on March 3rd, 2009 at 10:45 am
q wapoooooo
Posted on March 3rd, 2009 at 9:19 pm
Every time i come here I am not dissapointed, nice post
Posted on March 4th, 2009 at 3:04 pm
One other thing to consider is the time that it takes to produce a simple demo of an application with transitions, audio, etc.
With this you wouldn’t have to setup all that just to transition through different aspects of your demo.
Posted on March 10th, 2009 at 3:39 am
테스트
Posted on March 12th, 2009 at 9:19 pm
It works, nice, but really burns up the CPU
Posted on March 20th, 2009 at 12:05 pm
This is very new technology…
Posted on April 4th, 2009 at 2:16 am
nice apps.. im gonna try it!
Posted on April 10th, 2009 at 4:14 am
[...] you may know the Pixel Bender Explorer AIR application develop by the Ext Core cross-browser JavaScript library [...]
Posted on April 12th, 2009 at 1:57 pm
Great Apps! I will try it when i have the time!
Posted on April 12th, 2009 at 1:59 pm
Well,just tried it.The CPU heated up pretty quick.
Posted on April 19th, 2009 at 5:56 am
[...] RIA框架供应商ExtJS最近开发了一款Pixel Bender Explorer， 通过它你可以更加感性地认识各种Pixel [...]
Posted on April 23rd, 2009 at 11:53 am
[...] not the only ones who have been playing with AIR. Aaron Conran from the Ext JS crew blogged about Pixel Bender Explorer, an AIR app they wrote to demonstrate how to integrate Ext JS with AIR’s Pixel Bender [...]
Posted on April 23rd, 2009 at 7:01 pm
С кем вы разговариваете, это всё боты?
Posted on May 3rd, 2009 at 8:03 am
Продолжение будет?
Были бы признательны
Posted on May 14th, 2009 at 3:01 am
Wow very nice appearances
Posted on May 26th, 2009 at 10:05 am
Интересная идея, но надо бы подумать о рекламе на сайте. По-моему ее слишком много
Хотя, конечно – это не мое дело 
Posted on May 29th, 2009 at 7:16 pm
Согласен в принципе
Для меня это точно очень актуально 
Posted on June 21st, 2009 at 5:34 am
[...] с Adobe AIR. Вот и теперь оторвались по полной – создали air-приложение Pixel Bender Explorer. В категории (ях) AIR, Новости [...]
Posted on June 27th, 2009 at 5:48 am
thank you. very nice..
Posted on July 13th, 2009 at 10:40 am
wow good work!
Posted on July 13th, 2009 at 10:42 am
i like it!
Posted on July 13th, 2009 at 10:44 am
nice work!
Posted on July 18th, 2009 at 9:26 am
I am grateful to you for this great content.
Posted on July 25th, 2009 at 5:32 am
nice staff!
Posted on July 25th, 2009 at 5:34 am
These animations can be called within code with a single method call on any Ext.air.NativeWindow or Ext.air.VideoPanel.
Posted on July 25th, 2009 at 5:35 am
just to remind the code.
var win = new Ext.air.NativeWindow({
file: ‘../html/browser.html’,
transparent: true,
chrome: ‘none’,
width: 640,
height: 480
});
win.bend();
Posted on July 25th, 2009 at 5:36 am
how can I tried this and related software?
Posted on July 25th, 2009 at 5:36 am
yes it works.
Posted on July 25th, 2009 at 5:37 am
I did it.
Posted on July 25th, 2009 at 5:38 am
This will tween the value of the parameter amount from 5 to 0 over a duration of 1 second.
Posted on July 25th, 2009 at 5:38 am
win.animFn({
paramName: ‘amount’,
reset: true,
startValue: 5,
endValue: 0,
duration: 1,
mode: ‘easeOutStrong’,
url: ‘app:/kernels/smudger.pbj’
});
Posted on July 25th, 2009 at 5:39 am
Pixel Bender can spruce up an Ext.air application by adding custom animations to wow your users. However, you should be cautious about the over-use of these filters throughout your application.
Posted on July 25th, 2009 at 5:39 am
Ext is releasing a Pixel Bender Explorer demo which allows you to explore many of the new filters which have been created by the Adobe Community and demonstrates how to integrate them into an Ext Application.
Posted on August 2nd, 2009 at 6:04 pm
It would be great to see the page effect linked with an Ext.Grid paging toolbar.
Posted on September 20th, 2009 at 2:32 am
JavaScript library for building rich
Posted on October 3rd, 2009 at 11:18 am
Thank you my dear brother
On this post
It’s a very useful and wonderful
Best wishes you success
Posted on October 9th, 2009 at 12:34 pm
Nice work, thanks!
Posted on October 17th, 2009 at 8:54 am
Great Work, thank u
Posted on October 17th, 2009 at 8:55 am
This is very new technology…
Posted on November 12th, 2009 at 11:53 am
This application is a real CPU killer and taking. When I was testing ıt never come down from 80%.