How can I convert BezierCurve to B-Spline?

4.6k views Asked by At

I'm trying to create an animation of a complex path using HTML5 canvas. I've divided my path into some bezier curve and draw each one of them using the cubic bezier curves formula and javascript function lineTo(). The problem is the points that the curves connected to each other. They're not connecting smoothly. I've realized that this problem will be solved if I use the B-Spline curve instead of bezier curves. So, I'm wondering if there is any method to convert bezier curves to b-spline?

1

There are 1 answers

8
fang On BEST ANSWER

Theoretically, a Bezier curve can be considered as a single segment B-spline curve. So, there is really no such thing as "converting a Bezier curve to a B-spline curve". If you can implement cubic Bezier curve evaluation function according to the info in the Wikipedia page, it should not be difficult to implement B-spline curves according to the De Boor algorithm.

If you do not want to go with the extra length of implementing B-spline curves, then what you can do is to modify the Bezier curve's control points locally to make them smoothly joined together. Assuming you have two cubic Bezier curve C1(t) defined by P0,P1,P2 and P3 and C2(t) defined by Q0, Q1, Q2 and Q3 with P3=Q0. You can make C1(t) and C2(t) joined smoothly by projecting P2 and Q1 on a line passing thru the common point P3. How do you choose the line's direction is up to you.