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: 0x888888
   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. and then pass these params like

   var potrace:POTrace = new POTrace(params);

3. Thanks Andreas!

   BTW, i also recently documented the params a bit better:
   https://github.com/PowerflasherBR/as3potrace/commit/892f0824b3393565a64d251f783e944672f6ebe2

4. Pingback: AS3 Bitmap to Vector Class | HauteRobot

5. Hi Andreas,

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

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

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

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

9. 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?

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

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

12. 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(0x008800, 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);
    }

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