Sencha Inc. | HTML5 Apps

Blog

Pixel Bender Explorer: Bending Ext AIR Apps

February 19, 2009 | 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.

There are 72 responses. Add yours.

Jay

5 years ago

This is going to give Air a leg up on browsers when it comes to RIAs! Sweeeeeeeeeeet.

Phil Strong

5 years ago

High marks for cool factor!  Let’s get cracking on some ways to “exploit” the bender!

Troy

5 years ago

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!

Bryan

5 years ago

Looks interesting.  The possibilities for filter use could be endless

Jarred Nicholls

5 years ago

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.

Serkan Yer?en

5 years ago

I’m really amazed. But this application is a real CPU killer. When I was testing ?t never come down from 80%.

Arch Rajan

5 years ago

This is an awesome read! Perfect way to start my day. I am sure Ext.air applications would become more popular now smile

Nickolay

5 years ago

Try to imagine, what such technology can bring to the online gaming world.

seasharp2

5 years ago

It would be great to see the page effect linked with an Ext.Grid paging toolbar.

Pixel Bender Explorer: Bending Ext AIR Apps - ASP.

5 years ago

[...] see link Ext JS - Blog   Published Feb 19 2009, 06:05 by Stuart [...]

ExtJS, Adobe AIR ? ?????????? PixelBender - ??????

5 years ago

[...] ??????? ???????? ? ??????????? ???? ????????, ? ????? ????????????? ???????. ??? ??? ????????, ? ????????? ?????? ExtJS ?????? [...]

Steve Withington

5 years ago

This is pretty slick stuff! Nice work. I threw together a short video demo of your application at http://tinyurl.com/AirExtJSPixelBender

Originative

5 years ago

Nice, but too much expensive in terms of CPU processing…

David Davis

5 years ago

very cool!

CSS Guru » Blog Archive » Guru ????

5 years ago

[...] ??????? ???????? ? ??????????? ???? ????????, ? ????? ????????????? ???????. ??? ??? ????????, ? ????????? ?????? ExtJS ?????? [...]

Jay

5 years ago

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.

at9t

5 years ago

Quite an impressive air script!

Cool Pixel Bender experiments, resources | Photosh

5 years ago

[...] new Pixel Bender Explorer AIR app that demonstrates how to apply PB animations & effects to your JavaScript-based AIR [...]

Josh McDonald

5 years ago

Just tried it out, as I’m planning on getting into PB as soon as I get some more time (geddit?!). Very nice guys.

Manu Goel

5 years ago

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//Multimedia_(2008)

But you will have to view it on FF 3.1 minefield as 3.0.6 does not support video tag

John

5 years ago

What is Bender Can any 1 Tell me?

Manu Goel

5 years ago

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//Multimedia_(2008)

Creating cinematic effects with Adobe Pixel Bender

5 years ago

[...] 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 [...]

JSA

5 years ago

It seems useless for me… sorry, but cannot find either one thing that will make this usefull. Uhh…

elffikk(thebookle.com)

5 years ago

Is somewhere source code available for this example?

Aaron Conran

5 years ago

@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.

Ajaxian » Ext JS and Adobe AIR

5 years ago

[...] 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 [...]

localToGlobal » Blog Archive » news re

5 years ago

[...] > Ext JS - Blog [...]

Ben

5 years ago

prety cool

Justin L

5 years ago

This gives me so many ideas.  Fantastic work guys.  Ext is always one step ahead of the competition.  Great work!

Theba.hu

5 years ago

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…...

Ext JS and Adobe AIR | Guilda Blog

5 years ago

[...] 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 [...]

Balan

5 years ago

I AM A NEW LEANER OF EXT JS….IT SEEMS TO BE VERY VERY FANTASTIC!!!!!!!!

links for 2009-02-27 at adam hoyle presents suckmy

5 years ago

[...] Ext JS - Blog (tags: flash flex javascript air adobe pixelbender) [...]

wapo

5 years ago

q wapoooooo

photoshop design

5 years ago

Every time i come here I am not dissapointed, nice post

Eric Berens

5 years ago

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.

chunwon

5 years ago

???

TotalVac

5 years ago

It works, nice, but really burns up the CPU

gmr

5 years ago

This is very new technology…

Adobe Air Apps

5 years ago

nice apps.. im gonna try it!

Adobe Pixel Bender « dkor

5 years ago

[...] you may know the Pixel Bender Explorer AIR application develop by the Ext Core cross-browser JavaScript library [...]

William

5 years ago

Great Apps! I will try it when i have the time!

William

5 years ago

Well,just tried it.The CPU heated up pretty quick.

Pixel Bender Explorer | SWFever.com

5 years ago

[...] RIA?????ExtJS???????Pixel Bender Explorer? ???????????????Pixel [...]

Css howto » Ext JS and Adobe AIR

5 years ago

[...] 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 [...]

KetgooriaSori

5 years ago

? ??? ?? ??????????????, ??? ??? ?????

???????

5 years ago

??????????? ??????
???? ?? ???????????? grin

Air Purifiers

5 years ago

Wow very nice appearances

Ba?Xe?c???

5 years ago

?????????? ????, ?? ???? ?? ???????? ? ??????? ?? ?????. ??-????? ?? ??????? ????? smile ????, ??????? - ??? ?? ??? ???? smile

WiND

5 years ago

???????? ? ???????? smile  ??? ???? ??? ????? ????? ????????? smile

Adobe — ??? ?????? ???? » Pixel Bender Explo

5 years ago

[...] ? Adobe AIR. ??? ? ?????? ?????????? ?? ?????? – ??????? air-?????????? Pixel Bender Explorer.  ? ????????? (??) AIR, ??????? [...]

kabin

5 years ago

thank you. very nice..

Homepage Baukasten

5 years ago

wow good work!

Tobias

5 years ago

i like it!

MPS

5 years ago

nice work!

cinsellik

5 years ago

I am grateful to you for this great content.

oyunlar

5 years ago

It would be great to see the page effect linked with an Ext.Grid paging toolbar.

bayrak

5 years ago

JavaScript library for building rich

???????

5 years ago

Thank you my dear brother
On this post
It’s a very useful and wonderful
Best wishes you success

Versicherung

4 years ago

Great Work, thank u

Tapeten Shop

4 years ago

This is very new technology…

jeux gratuit

4 years ago

This is pretty slick stuff! Nice work. I threw together a short video demo of your application at http://gratuitjeux.net/jeux

hguhf

4 years ago

thank you Conran very much for your article.
it’ really helpfull.
i’m waiting for your news

Flash Video Round Up - ChurchMediaDesign.tv

4 years ago

[...] Inspiration: Pixel Blender Explorer - via extjs.com/blog Pixel Blender Info - via Adobe.com [...]

Web Machine

4 years ago

Very interesting technology

ekgelir

4 years ago

Thank’s you admins my name is Mike
While it is unfortunate the studios are so hooked on remakes, we’re bound to get some good ones in the plethora of crap.
They can argue all the wnt that what they are doing is done out of respect, but that only makes them liars.
No matter what they say, it can’t change a thing

Bilgi Bilgi

4 years ago

This program will very usefull to webmasters.You can download Pixel Bender Explorer’s demo.I download it and it is really facinating

??

4 years ago

You can download Pixel Bender Explorer’s

Sueann Hamlette

4 years ago

I am the first time on this site and am really enthusiastic about and so many good articles. I think it’s just very good.

jessica

3 years ago

Thanks for the wonderful directions.

Comments are Gravatar enabled. Your email address will not be shown.

Commenting is not available in this channel entry.