ActionScript 3 Bitmap Tracer (Vectorizer): as3potrace

Ever wanted to convert a bitmap to vector shapes, at runtime, in Flash? Look no further. Let me introduce you to as3potrace, an ActionScript 3 library to trace bitmaps.

As the name suggests, this is a port of the well known C library potrace by Peter Selinger. To be more exact, it is a AS3 port of Vectorization, a C# port of potrace 1.8 by Wolfgang Nagl.

Like potrace, as3potrace is released under GPL. The SWC and source code are available on GitHub:

https://github.com/PowerflasherBR/as3potrace

Demo

This movie requires Flash Player 10

Demo source code: https://gist.github.com/940219 (Warning: ugly)

Usage example

A minimal example of how to trace a bitmap with as3potrace, and draw the result into a Shape:

Note that you can write your own backends to ease handling/processing of generated shapes. The one backend that i already wrote, GraphicsDataBackend, produces GraphicsData structures that you can immediately draw using Graphics.drawGraphicsData().

Alternatives

And as always, after i finished porting this little beauty, i found out that this has been done before by the amazing folks at LibSpark. Check out nitoyon’s PotrAs (also GPL’ed).

13 thoughts on “ActionScript 3 Bitmap Tracer (Vectorizer): as3potrace

  1. Excellent! Thanks a lot for sharing!

    A note for those who are, like me, not yet familiar with POTrace: if the result does not quite meet your needs and you feel tempted to tweak the bitmap (e.g. by applying filters) before passing it to be traced, have first a look into the POTraceParams class and pass in different values, in particular the ‘threshold’ and the ‘turdSize’ (sic!).
    Here’s an example:

    // NOTE: http://potrace.sourceforge.net/potracelib.pdf
    // explains what the params do
    var threshold:uint = 0.8* 0xFFFFFF;//default: 0×888888
    var thresholdOperator:String = “<=";
    var turdSize:int = 10;//default is 2. The bigger the less 'spots'
    var alphaMax:Number = 1;
    var curveOptimizing:Boolean = false;
    var optTolerance:Number = 0.2;

    var params = new POTraceParams(threshold, thresholdOperator, turdSize, alphaMax, curveOptimizing, optTolerance);

  2. Pingback: AS3 Bitmap to Vector Class | HauteRobot

  3. Hi Andreas,

    really nice work. I was searching As3 vectorization API in As3 and my search ends here. Thanks.

  4. Pingback: The tracing workflow. | Koen Caerels — digital media producer / artist

  5. hey all -

    looking for tips on how best to get an outline of an image on a transparent background? no fuzzy edges or transparency gradients, nice clean borders, should be doable

    I’ve gotten pretty close, but it’s not quite there. I’m after a really accurate outline, nothing else, ie, never anything from inside the borders of the image

    seems like there’s an optimal param set for this… thoughts?

    thanks!

  6. This is amazing! Thankyou so much, finally actionscript 3 outlines ;)

  7. Thank you very much for porting Potrace! I found a bug though: In certain cases, mostly when tracing rather curly outlines, AS3Potrace will confuse the inner and outer areas of the traced form. Try this example image to reproduce the bug:
    http://imageshack.us/photo/my-images/690/wappen2crop.jpg/

    This bug does not appear when testing with native potrace on Linux command line.

    Any guesses about the cause and how it could be fixed?

  8. This is awesome thanks, wanted to code this library on my own because I thought there is nothing like that out there but you just saved me a lot of work! Havent tested it so far but I am sure its pretty solid, thanks again! =D

  9. Hi Claus,

    Trying to use your AS3POTrace for a project. It looks like it will do the job great, but I can’t even get the demo to work locally. Do you have a repository that hold the demo that I can pull? I’m getting a lot of errors right now, and there is basically 0 documentation in the demo you posted above. Thanks

  10. Excellent work! Thanks for sharing…
    I’ve just tried it with a camera. Is it possible to get x,y coordinates of the traced geometries besier points?

    import com.powerflasher.as3potrace.*;
    import com.powerflasher.as3potrace.backend.GraphicsDataBackend;
    import com.powerflasher.as3potrace.backend.*;
    import com.powerflasher.as3potrace.geom.*;

    import flash.display.Bitmap;
    import flash.display.BitmapData;
    import flash.media.Camera;
    import flash.display.GraphicsStroke;
    import flash.display.LineScaleMode;
    import flash.display.CapsStyle;
    import flash.display.JointStyle;
    import flash.display.IGraphicsData;
    import flash.display.GraphicsSolidFill;
    import flash.display.Sprite;
    import flash.geom.Point;
    import com.powerflasher.as3potrace.POTraceParams;
    import com.powerflasher.as3potrace.backend.TraceBackend;
    import com.powerflasher.as3potrace.backend.NullBackend;

    var video : Video;
    var webcam : Camera;
    var _bitmapData : BitmapData;
    var canvas : Sprite = new Sprite();

    but_1.addEventListener(MouseEvent.MOUSE_DOWN, processss);

    video = new Video(550, 400);
    webcam = Camera.getCamera();
    webcam.setMode(550, 400, 25);
    video.attachCamera(webcam);
    addChild(video);
    addChild(canvas);
    addChild(but_1);

    _bitmapData = new BitmapData(550, 400);

    function processss(event:MouseEvent):void
    {
    canvas.graphics.clear();
    _bitmapData.draw(video);

    var gd:Vector. = new Vector.();
    var strokeFill:GraphicsSolidFill = new GraphicsSolidFill(0×008800, 1);
    gd.push(new GraphicsStroke(1, false, LineScaleMode.NONE, CapsStyle.ROUND, JointStyle.ROUND, 3, strokeFill));
    gd.push(new GraphicsSolidFill(0x00ff00, 0.75));

    var potrace:POTrace = new POTrace();
    potrace.backend = new GraphicsDataBackend(gd);
    potrace.potrace_trace(_bitmapData);

    gd.push(new GraphicsEndFill());
    canvas.graphics.drawGraphicsData(gd);
    addChild(canvas);
    removeChild(but_1);
    addChild(but_1);
    }

  11. Hello Claus

    I am trying to build a semi-automatic cropping system for bitmaps to allow the user to remove areas of the bitmap (something like a Photoshop’s Magic Wand tool) and i guess i should use a vectorizing system like yours.

    for that purpose, I have tried and modified this library:
    https://code.google.com/p/vectorizationpackage/

    but your code is SO MUCH FASTER.

    Do you have any idea where I should start in modifying your library so that it traces ALL the different areas of the bitmap into different shapes based on different tracings?

Comments are closed.