如何用actionscript创建一个好的“草图”效果?

时间:2011-02-07 19:37:36

标签: flash flex actionscript-3

enter image description here

我已经能够使用像素弯曲器着色器获得草图效果(类型):Adobe Pixel Bender。右下方的样本照片(有令人毛骨悚然的眼睛)。

右上图像是使用Balsamiq模型创建的,是照片到草图效果的很好的例子。那么我该如何创建这样的东西呢?任何链接或源代码表示赞赏。

1 个答案:

答案 0 :(得分:6)

sketch filter

顶部图片由flash生成,代码如下,底部图片是我理解应该是目标。它们并不完全相同,但有点接近。

结果很大程度上取决于在源图像上执行的微调(//去饱和+亮度+对比度),我认为它不能在一系列图片上自动化。

package
{
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.BlendMode;
import flash.display.Sprite;
import flash.filters.ColorMatrixFilter;
import flash.filters.ConvolutionFilter;
import flash.geom.ColorTransform;
import flash.geom.Matrix;
import flash.geom.Point;
/**
 * @author Nicolas Barradeau
 * http://en.nicoptere.net
 */
public class Sketch extends Sprite
{
    [Embed(source = '../lib/test.jpg')]private var src:Class;
    private var bd:BitmapData = new src().bitmapData;
    public function Sketch() 
    {
        addChild( new Bitmap( bd ) );//need a bitmapData called bd
        sketch( bd );
    }

    private function sketch( bd:BitmapData ):void 
    {

        // desaturation + brightness + contrast 
        bd.applyFilter( bd, bd.rect, new Point, grayscale );
        bd.applyFilter( bd, bd.rect, new Point,brightness( 25 ) );
        bd.applyFilter( bd, bd.rect, new Point,contrast( 20 ) );
        bd.applyFilter( bd, bd.rect, new Point,brightness( 35 ) );

        //creates the outlines
        var outlines:BitmapData = bd.clone();
        outlines.applyFilter( outlines, outlines.rect, new Point, outline( 80 ) );
        outlines.applyFilter( outlines, outlines.rect, new Point, negative );
        outlines.applyFilter( outlines, outlines.rect, new Point, grayscale );

            //draws the outlines into the bd
            bd.draw( outlines, new Matrix( 1, 0, 0, 1 ), new ColorTransform( 1, 1, 1, .75 ), BlendMode.MULTIPLY );

        //creates some additionnal noise
        var noise:BitmapData = bd.clone();
        noise.noise( 0, 0, 255, 7, true);

            //draws the extra noise
            bd.draw( noise, new Matrix( 1, 0, 0, 1 ), new ColorTransform( 1, 1, 1, 0.15 ), BlendMode.ADD );

        //final contrast pass
        bd.applyFilter( bd, bd.rect, new Point, contrast( 55 ) );

    }

    private function outline( value:Number = 80 ):ConvolutionFilter
    {
        var q:Number = value / 4;
        return new ConvolutionFilter(   3,  3,  [
                                                0   ,    q  ,   0   , 
                                                q   ,   -value  ,   q   , 
                                                0   ,    q  ,   0   
                                                ],  10 );
    }

    private function get negative():ColorMatrixFilter
    {
        return new ColorMatrixFilter(   [
                                            -1  ,   0   ,   0   ,   0   ,   0xFF,
                                            0   ,   -1  ,   0   ,   0   ,   0xFF,
                                            0   ,   0   ,   -1  ,   0   ,   0xFF,
                                            0   ,   0   ,   0   ,   1   ,   0
                                        ]   );
    }

    private function get grayscale():ColorMatrixFilter
    {
        return new ColorMatrixFilter(   [
                                            .3086   ,   .6094   ,   .0820   ,   0   ,   0,
                                            .3086   ,   .6094   ,   .0820   ,   0   ,   0,
                                            .3086   ,   .6094   ,   .0820   ,   0   ,   0,
                                                0   ,   0   ,   0   ,   1   ,   0
                                        ]   );
    }

    private function brightness( value:Number ):ColorMatrixFilter
    {
        return new ColorMatrixFilter(   [
                                            1   ,   0   ,   0   ,   0   ,   value,
                                            0   ,   1   ,   0   ,   0   ,   value,
                                            0   ,   0   ,   1   ,   0   ,   value,
                                            0   ,   0   ,   0   ,   1   ,   0
                                        ]   );
    }

    private function contrast( value:Number ):ColorMatrixFilter
    {
        var a:Number = ( value * 0.01 + 1 )
        var b:Number = 0x80 * ( 1 - a );
        return new ColorMatrixFilter(   [
                                            a   ,   0   ,   0   ,   0   ,   b,
                                            0   ,   a   ,   0   ,   0   ,   b,
                                            0   ,   0   ,   a   ,   0   ,   b,
                                            0   ,   0   ,   0   ,   1   ,   0
                                        ] );
    }   
}
}