How to calculate the length of a quadratic curve in Flash & as3

0 Flares Twitter 0 Facebook 0 Google+ 0 Email -- Filament.io 0 Flares ×

First, this is a way to “estimate” the length of a curve. It will not give you the exact value but rather a estimation based on its precision (that can be changed)

For this, I’ll use the class library programmed by Jim Armstrong from Singularity and particularly the “Bezier2.as” class as it allows us to manipulate a quadratic bezier curve, the same used by the “CurveTo” function in as3.

You can play with the demo by dragging one of the three control points, changing and showing the curve's lenght and its precision.
The white points on the curve represent the intermediary points used to calculate the length of the curve. The more points, the more precise your result is.

The precision affects the number of steps or points that will be required to calculate the length. But to understand this, you will need to know what the Bezier2 class brings us.
This class is used to get the coordinates of a point by its "time" along the curve. See, the full lenght of the curve has a time of 1. So, to know the position of the point at the middle of the curve, you will use a time of 0.5. You can see this as a percentage too.

So, how do we know the length of the curve with this value ?
By calculating the distance between each point on the curve. So with a precision of 0.1, we will have a point every time * 0.1 until we reach time 1 (t0.0, t0.1, t0.2, t0.3, ... , t1.0)
The lower the precision is, the more precise the result will be as there will be more points along the curve to estimate the length.

I'm pretty sure there is a faster method and if not faster, a more precise way to calculate the length of a quadratic curve. I'm not a genius in math so here is a way to do it.

The zip file contains all the classes and the .fla of the demo :
quadratic_curve_v01_as3

0 Flares Twitter 0 Facebook 0 Google+ 0 Email -- Filament.io 0 Flares ×

1 Comment

Leave a Comment