## Drowning in Curves

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.

**Tags:** as3·Bezier·Curves·Drawing API·flash·generate·Tweener

## 5 responses so far ↓

1

Lionel da Palma// Apr 24, 2009 at 3:44 pmGreat Article, pretty much as the rest of your stuff as far as I’ve read…

I’ve got a thing to do and can’t do it. If someone seems literate enough to succeed, it would be an Algebra teacher or you. Liked the structure of your code. So if you need a slave for life: here it goes:

Draw a cubic bezier line and between each curveTo points, draw the cosine or sine function (or any other polinomial for that matter) using the original bezier curve as function x-axis origin. Result would be a warped cos or sin function according to bezier curvature.

Could twist things up and contour the problem but I just got this perfeccionism thing.

I’ve spent about 2 weeks of after hours to try to figure this one out but the envolved algebra is way over my head and as you’re even drawing nests (!?) with math, you fully qualify for this one.

In the end, this is leaching. If you’ve got it on the top of your head, excellent, if not, don’t bother, I”l take it to the Maths Dept…

Keep at it and thanks for the time!

2

jacobmake// Apr 27, 2009 at 11:13 amLionel, thanks for the kudos. Unfortunately, I’m a designer first and a programming nerd second so I don’t fully posses the algebraic firepower you might need.

There are some nifty get functions built into that curve-fitting method I used from Tweener. I think you can get x/y position at any point in the curve, so it sounds like you might be able to use that as a starting point, and then maybe go back a few points along the path to figure out what direction that part of the curve is moving.

Good Luck! I’d love to see what you come up with.

3

Tim// May 18, 2009 at 3:11 amI think I’m at the beginning of the same obsessive journey try to find the perfect curve fitting function. I’m wondering if you might be able to fast forward me to the end?

4

jacobmake// May 20, 2009 at 9:36 amTim, I was pretty happy with the built in function in the tweening engine, Tweener; http://labs.zeh.com.br/blog/?p=104#

I’m no math whiz & I didn’t write the function. It would probably take some serious geometric skills to understand the math behind. Good luck and let me know what you find.

5

Tim// Jun 8, 2009 at 4:16 amHey thanks for getting back to me. Well I think I have tried out just about every possible curve fitting class I could find however I’m still not really happy with anything I have found. I took a look through the Tweener Source code and I presume you are talking about the _bezier_get function in the CurveModifers class? I can’t quite work out how to use this to actually draw a curve through a series of points. If you have time to send me an example I would greatly appreciate it! Thanks, Tim.

## Leave a Comment