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!