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
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).
May 5th, 2011 at 11:42
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);
May 5th, 2011 at 11:46
and then pass these params like
var potrace:POTrace = new POTrace(params);
May 5th, 2011 at 13:08
Thanks Andreas!
BTW, i also recently documented the params a bit better:
https://github.com/PowerflasherBR/as3potrace/commit/892f0824b3393565a64d251f783e944672f6ebe2
June 3rd, 2011 at 19:52
[...] Here’s a great class to convert bitmaps to vectors. Hope to post an example soon. The comments are helpful as well. [...]
July 28th, 2011 at 06:27
Hi Andreas,
really nice work. I was searching As3 vectorization API in As3 and my search ends here. Thanks.
September 15th, 2011 at 03:51
[...] (*) as3potrace Copyright © 2001-2010 Peter Selinger (potrace) Copyright © 2009 Wolfgang Nagl (Vectorization) Copyright © 2011 Claus Wahlers (as3potrace) [...]
January 19th, 2012 at 22:48
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!
May 5th, 2012 at 20:34
This is amazing! Thankyou so much, finally actionscript 3 outlines ;)
May 9th, 2012 at 07:15
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?