[Math] How to set control points for spline curves

algorithmsbezier-curveparametricspline

I've written a program that calculates points on spline curves (including Hermite, Bezier, and B-splines) and plot the curve on the screen (the curve is plotted on an html canvas using javascript). The equation that I'm using for the b-splines is
$B(t) = ((-P0 + 3P1 – 3P2 + P3)t^3)/6 + ((P0 – 2P1 + P2)t^2)/2 + ((-P0 + P2)t)/2 + (P0 + 4P1 + P2) /6 $

When I use the following control points for the curve (which I found by just playing around with the numbers), I'm getting at least a portion of a curve to display on the page:
var points = new Array({ x: 0.1, y: 0.5 }, { x: 500, y: 400 }, { x: 1000, y: 401 }, { x: 10, y: 120 }); where each coordinate pair corresponds to P0, P1, P2, and P3 respectively.

I'm not really sure why this combination of points seems to work as most other points just seem to result in a small line segment being plotted. I'm very new to splines and don't really have the best understanding of how they work so I have a couple of questions:

  1. What is the proper way to determine the control points that will be used to interpolate the curve.

  2. What approaches should I use for plotting each of the different types of spline curves(i.e. hermite, b-splines, bezier)

I apologize if these questions seem vague as I am just beginning to grasp how splines work.

Best Answer

The equation you show is a uniform cubic B-spline curve with single segment where the curve itself will not pass thru any of the 4 control points. This is probably the reason you only see a small curve on the screen. (BTW, I did not check your equation either)

Answers to your questions:
1) Bezier curve and B-spline curves are both defined by a set of control points, which generally do not lie on the curve itself (except the first and last control points for Bezier curve and for clamped B-spline curves). If you would like your curve (Bezier or B-spline curve) to pass thru a given set of points exactly, this is the so-called spline interpolation problem, which you can find many articles by searching against the term "spline interpolation". Please note that the interpolated points are sometimes also called "control points" in some community. Just don't get confused when reading thru all the articles.

2) To draw a spline, the standard way is to compute (or to sample) points on the spline starting from t_start to t_end with proper increment delta_t, then connect the points one by one like a polyline. Bezier curve's range is always 0 to 1. For B-spline curves and Hermite splines, the range could be of any values but you should know what these values are.

Converting Hermite splines or B-spline curves into Bezier curves is a more advanced topic and can be left to later stage in your learning curve.

Related Question