2

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?

viegets
  • 119
  • 1
  • 7
  • I assume it's acceptable that the new b-spline will approximate the set of b-curves--but the path of the b-spline will not exactly match your current b-curves, Yes? – markE Dec 15 '14 at 03:11
  • Yead, it would be acceptable. However, as the mini-curves connect to each other and create a bigger shape, the start/end point of each mini-curve should be the same after converting. – viegets Dec 15 '14 at 04:10

1 Answers1

5

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.

fang
  • 3,473
  • 1
  • 13
  • 19
  • A Bezier curve of any degree can be considered as a single segment B-spline curve? – June Wang May 19 '20 at 16:50
  • 3
    @June Wang: For example, a cubic Bezier curve with control points P0, P1, P2 and P3 is the same as a B-spline curve of same degree and same control points with knot vector [0,0,0,0,1,1,1,1]. – fang May 19 '20 at 17:27
  • Thanks. What about the other way, B-spline to Bezier. Say I want to split a B-spline at the start to 2nd knot to a Bezier and the last 2nd knot to end to another Bezier, leave the rest as a B-spline. Something like this https://imgur.com/a/BO9DS1Y – June Wang May 20 '20 at 14:15
  • 2
    @June Wang: Then, you need to perform "knot insertion" at the 2nd knot multiple times until that knot has a multiplicity equals (degree+1). Please refer to this article for more details. https://pages.mtu.edu/~shene/COURSES/cs3621/NOTES/spline/B-spline/subdivision.html – fang May 20 '20 at 16:47
  • Yup, thanks. Do you happen to know how to reconstruct a 4 sided Nurbs/B-spline surface's 4 sides to 4 B-spline curves? https://imgur.com/Kv3EP4A – June Wang May 21 '20 at 10:46
  • @June Way: This question is unrelated to original question posted. Please raise your new questions as a new post so that all experts can provide their comments/answers. – fang May 21 '20 at 17:26
  • sure, feel free to add your answer. https://stackoverflow.com/questions/61941442/how-to-reconstruct-a-4-sided-nurbs-b-spline-surfaces-4-sides-to-4-b-spline-curv – June Wang May 21 '20 at 18:35
  • Could you please help answer this question if you can? https://stackoverflow.com/questions/62257449/how-to-combine-rational-b-spline-surfaces Thanks! – June Wang Jun 08 '20 at 07:57