Bezier curve length
I have some code that calculates the length of Bezier curves. I am trying to write unit tests for it. But apart from trivial cases (faceless lines), I don't know the real correct values for the lengths. I looked online and couldn't find.
Does anyone have this information? I'm looking for a reference to a multi-row table containing four bezier breakpoints and then a length, or perhaps create a pair of beziers in a paint program that calculates the length (I've tried using blender and inkscape to get this information and they are quite complex).
Decision. Download the pomax bezier javascript code from here and then open this html in a web browser:
<html>
<head>
<script src="bezier.js"></script>
</head>
<body>
<script>
curve = new Bezier([4.0, 0.0, 4.0,
4.0, 0.0, 12.0,
16.0, 0.0, 12.0,
16.0, 0.0, 4.0]);
document.write(curve.length());
</script>
</body>
</html>
source to share
If you need actual arc lengths for testing, do https://github.com/Pomax/bezierjs/blob/gh-pages/lib/bezier.js#L602-604 - this will give you arbitrarily precise numbers based on Legendre's "squaring" -Gauss (you don't need to understand how this works, although the video link shows you that it is actually ridiculously simple. Hence, the implementation is actually easy).
Another option is to rely on something like wolframalpha.com or Mathematica ( which is free if you have Raspberri PI ): tweak an arbitrary curve and have them calculate the length "correctly", then use that result as a reference values in your unit tests.
source to share
You can try this to unit test your codes:
1) Divide the Bézier curve into multiple Bézier curves using the De Castellau algorithm
2) Calculate the arc length for each of these Bézier curves and then calculate their sum.
3) calculate the arc length for the original Bezier curve.
4) compare the result with step 2 and 3. They will differ only by a very small numerical error if your codes are correct.
Another way to check the arc length is to check if it is always between the two values calculated below:
1) Draw a few points (say 100) from the Bezier curve and calculate the length of the polygon from the selected points. This value will always be less than the actual arc length of the curve.
2) calculate the length of the driving polygon. This will always be greater than the actual arc length of the curve.
source to share
You can get some values by scrolling through js widgets on this page http://pomax.github.io/bezierinfo/#arclengthapprox
source to share
Understand this is an old question, but another solution is to use an SVG path element and method getTotalLength
. No libraries or complex equations required, let the browser do the hard work.
In its simplest form:
var a = {x: 0, y: 0}, // from
b = {x: 4, y: 4}, // to
c1 = {x: 2, y: 0}, // curve 1
c2 = {x: 2, y: 4}, // curve 2
// output the curve in SVG bezier syntax
svgBezier = `M${a.x} ${a.y} C ${c1.x} ${c1.y}, ${c2.x} ${c2.y}, ${b.x} ${b.y}`,
// create a new <path> element
path = document.createElementNS("http://www.w3.org/2000/svg", "path");
// add the curve
path.setAttribute('d', svgBezier);
// get the length using browser power
console.log(path.getTotalLength()); // 5.981128692626953
Note: the above returns reliable results in chrome and safari. firefox seems less reliable out of the box.
source to share