Fit my curve!

In the same masochistic way I let a ping-pong sorting algorithim rule my life, I’ve been obsessing on how to draw elegant fluid curves in AS3 via Flash’s drawing API. This mostly started from being inspired by Erik Natzke’s work.

I started with the Flash drawing APIs generic “CurveTo” method, but it left “kink”s in the curves that passed through more than 2 points. Then I played with AS3′s built-in “BezierSegment” in the fl.motion package which produces a cubic bezier, which are similar to the curves in Illustrator.

I scoured the interwebs for the best curve fitting functions. Dug through old presentations of Rober Penner, The Father of Curves in Flash. Most of the math is way over my head but I did come across a few interesting ones:

• http://mike.teczno.com/notes/splines.html (AS2);
• http://www.paultondeur.com/2008/03/09/drawing-a-cubic-bezier-curve-using-actionscript-3/
• http://erikloyer.com/index.php/blog/cardinal_splines_in_actionscript/

These helped me better understand the differnt kinds of curves but ultimately what I wanted was a nice bezier curve fitting function. I wanted to say, “Here are 20 points, class. Now plot me a beautiful bezier curve based on them!”… And it was right under my nose the whole time. Tweener, which I use every day, has a built in Bezier curve fitting function that I somehow overlooked. Yowza!

In typical jacobmake fashion, I’ve spent an exuberent amount of time researching process without a pixel to show for it. Hopefully, I be able to present some rough generative sketches soon now that I’ve licked this curve addiction.

Then I had a eureka moment.

“I’ll use the bitmapData class, blur me some bitmap data. Then I could loop through and select pixel groups by value and trace out the groups!”

Then I had another eureka moment. (Two in one day, it was amazing.)

“Someone already did this, it’s called Live Trace and it lives in Adobe Illustrator.”

So here is what I did. I took this image. Then I killed the saturation, blurred it out and tweaked the contrast to get this;

Then I ran it through Live Trace with a grayscale setting and colors set to about 25. And it came out looking a lot like a topo map.

I think I could still do something siimilar in AS with the Bitmap data class, and maybe I will just to prove it to myself I can.

Here is my first version of the random circle project. I might add a deep brown element, I’m also thinking about how to string these together in a pattern on a canvas.