B-Splines
This is a visualization of B-Splines. A B-spline of degree \(p\) is a collection of piecewise polynomial nonnegative functions \(B_{i,p}(t)\) of degree \(p\), in a variable \(t\), and indexed with an integer \(0 \leq i \leq m-p-1\). I personally call the \(B_{i,p}(t)\) functions interpolators. The values of \(t\) where the pieces of polynomial meet are known as knots, denoted \(t_{0}, t_{1}, t_{2}, \ldots ,t_{m}\) and sorted into nondecreasing order. For a given sequence of knots, there is, up to a scaling factor, a unique set of interpolators \(B_{i,p}(x)\) satisfying \[ B_{i,p}(t)= \begin{cases} \text{non-zero} & \text{if } t_{i} \leq t < t_{i+p+1},\\ 0 & \text{otherwise}. \end{cases} \] If we add the additional constraint that \[ \sum_i B_{i,p}(t) = 1 \] for all \(t\) between the knots \(t_{p}\) and \(t_{m-p}\), then the scaling factor of \(B_{i,p}(t)\) becomes fixed. The knots in-between (and not including) \(t_{p}\) and \(t_{m-p}\) are called the internal knots.
In the first canvas the knots and interpolators are visualized. The knots are the dashed vertical lines, the colored curves are the interpolators, and the gray curve on top is the sum of all interpolators. In the second canvas these interpolators are used to create a spline through the vertices.
Controls
In the first canvas the knots can be dragged using your mouse or by touch. If one is selected you can delete it by pressing the Delete button on your keyboard. You can add knots and change the degree of the interpolators in the settings below. In the second canvas the vertices can be dragged using your mouse or by touch. If you want to add/remove a vertex just add/remove a knot.
Settings
You can add knots and change the degree of the B-spline here. The higher the degree the smoother the splines become.