How to set control points for spline curves

Question

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.

Answer 1

I didn't check that your formula for $\mathbf{B}(t)$ is correct. But let's assume for now that it is.

What I suggest is to draw the four points $\mathbf{P}_0$, $\mathbf{P}_1$, $\mathbf{P}_2$, $\mathbf{P}_3$, in addition to drawing the curve. If these four points are on screen, then the curve should be on screen, too (because the curve is contained within the convex hull of the four points).

Also, you can draw the point $\tfrac16(\mathbf{P}_0 + 4\mathbf{P}_1 + \mathbf{P}_2)$. The curve should start at this point (when $t=0$). If it doesn't, something is wrong.

Similarly, you should draw the point $\tfrac16(\mathbf{P}_1 + 4\mathbf{P}_2 + \mathbf{P}_3)$. The curve should end at this point (when $t=1$).

There are a couple of different ways to organize your code:

1. Write a "draw" function that is driven by a function $\mathbf{F}(t)$ that calculates the curve point corresponding to the parameter value $t$. You will have three diferent versions of the function $\mathbf{F}(t)$: one for Bezier curves, one for Hermite cubics, one for cubic b-splines. Then, if you decide later that you want to draw some other kind of curve, too, then all you have to do it write another $\mathbf{F}(t)$ function.

2. Write a function that draws a Bezier curve, and then write functions that convert Hermite cubics and b-splines into Bezier form. These conversions are fairly simple.

Two references that might be useful are this one and this one.

Answer 2

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.