Posted by: pixelero | August 28, 2008

Pixel Bender: Blur with Linear Focus

An old effect in photography I wanted to check out as a custom shader for Flash 10 Astro – beta version needed for this demo to show correctly:
blurring sample

It works with three parameters: one float3 for line equation where the picture appears sharp (coefs like in Ax+By+C=0, in the demo there’s two dragable blue blocks to modify that), two scales for the blur radius, in parallel and perpendicular direction at the distance of 100 pixels from the line: try setting either one to a very low value like <2.0 for a more dynamic effect:

The current pixel bender version has some limitations in looping, I ended up using the shader in a recursive way in combination with actionscript. One single shader counts the blurring only by four sampled points: for a better quality – see parameter ‘quality’ in LinearBlurFilter.as– the principle is to add the same shader several times, like this.filters = [ shader1, shader2, …] . Original image and blurrings with 4, 16 and 64 samples – with 1,2 or 3 shaders: I’m glad the efficiency increases exponentally:

an example for using code:

package {
    import LinearBlurFilter;
    import flash.events.Event;
    import flash.display.*;
    public class BlurExample extends Sprite {

        [Embed(source='someImage.jpg')] // url to any bitmap
        public var MyPhoto:Class;

        public var myPhoto:Bitmap;
        public var linearBlurFilter:LinearBlurFilter;

        public function BlurExample():void {
            var lineEquation:Array = [0.707,-0.707,-6.0];
            var uScale:Number = 10.0;
            var vScale:Number = 5.0;
            var quality:int = 3;

            linearBlurFilter = new LinearBlurFilter(	lineEquation,
                    uScale,
                    vScale,
                    quality
                    );
            //	add listener to do something when bytecode gets loaded
            linearBlurFilter.addEventListener(Event.COMPLETE, shaderLoaded);

            myPhoto = new MyPhoto();
            addChild(myPhoto);
        }

        private function shaderLoaded(e:Event):void {
            //	add filters
            myPhoto.filters = linearBlurFilter.filters;
            linearBlurFilter.removeEventListener(Event.COMPLETE, shaderLoaded);
        }
    }
}

For further information: Example in photography. The old large scale cameras had the possibilities to adjust the ‘plane of sharp focus’

See also Lensbabies.

Off topic: Art of Roman Verostko.

Advertisements

Responses

  1. Tasty Petri.

    Nice workaround in using the filterjob several times.

    Kinda scary that pixel bender doesn´t support loops yet!

    Cheers
    _frank

  2. Brilliant! The effect is really compelling and there are so many ways to vary it.

  3. […] Read more […]

  4. Fantastic effect , certainly for faking DOF or tilt lenses. Really beautiful too

  5. […] maybe a should combine it with this Posted by pixelero Filed in actionscript, flash ·Tags: actionscript, Adobe, drawTriangles, […]

  6. Hi,
    I’m really strugeling with making a radial focused blur, I just can’t get the Hydra code to work, could anyone give a few tips or pointers?

  7. […] too, but not in the Pixel Bender shader. We are going to utilize the method presented in this post, which means that we will be processing the input image several times with several circular blur […]

  8. […] An old effect in photography I wanted to check out as a custom shader for Flash 10 Astro – beta version needed for this demo to show correctly: Pixel Bender -bytecode. Pixel Bender -source. LinearBlurFilter.as. It works with three parameters: one float3 for line equation where the picture appears sharp (coefs like in Ax+By+C=0, in the demo there's two dragable blue blocks to modify that), two scales for the blur radius, in parallel and perpendicu … Read More […]

  9. I changed the above link to http://peakmt.com/BlurTools.zip
    Couldn’t figure out how to remove my previous post

  10. […] : Thanks to nicoptere providing this link : Pixel Bender: Blur with Linear Focus, I believe this metod will be more efficient because there is only 1 filter ( for me 2 : 1 Blur + 1 […]

  11. I mean, I’d like to have a bigger section of the original picture in the center, and the blow effect only on the borders, not so central… what I have to change? thank you!

    • Hi Ivan,
      Use smaller values for uScale and vScale, and the picture should appear sharp on a larger area.

      • thanks for the prompt reply…
        yes in this way it works, but the amount of the effect is also reduced… I’d like to have a strong effect, like working with high value of uScale and vScale, but leaving a bigger “clean” area. Like if the line between the two nodes has a bigger size… can you help me?
        I tryed also to change the pixel bender file but dosn’t work like I thought…

      • Hi Again. Try in pixel bender pbk-file changing the line #47 (val *= 0.01;) to val = max(abs(0.01*val)-0.5,0.0);
        0.5 in that is the magic number for clear areas width.

  12. it worked, thanks for the kind help!

  13. […] new post is an html5 implementation of my older flash demo of applying a linear blur, e.g. to blur an image in such a way that some areas in it remain sharp. The solution in the new […]


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: