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.


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?


Leave a response

Your response:

Categories