StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<h3>Cubic splines</h3> <p>If you want to draw lines <i>through</i> points, then you want interpolation. Beziers are cubic curves with off-curve control nodes, but a cubic spline is a set of cubic curves through n points, with smooth changes from each to the next. See the <a href="http://en.wikipedia.org/wiki/Cubic_spline">Wikipedia article</a> for more detail on the maths.</p> <p>To construct a cubic spline through a set of points, you unfortunately have to perform an iterative procedure; you are essentially making n-1 cubic curves and matching their parameters together, which gives you n+1 simultaneous equations to solve. Once you have done that once, as you move the points you can use your previous solution as a starting point.</p> <p>To do this in Raphael you'll need to generate the cubic spline, then calculate the equivalent Bezier control values for each segment. </p> <p>There are pieces of javascript out there to calculate cubic splines for you, for example <a href="http://blog.mackerron.com/2011/01/javascript-cubic-splines/">Cubic splines in JavaScript (via CoffeeScript)</a>.</p> <h3>Piecewise polynomial</h3> <p>An alternative to cubic splines is to fit a cubic (or higher) polynomial to each set of a few points; e.g. cubic to each 4 points, <i>including overlaps</i>. So points 10-13 make the cubic for the line from 11 to 12. It will not be as smooth as a cubic spline, but it should be much closer. This is pretty similar to cubic spline, but without equation solve for the curve parameters to make everything smooth.</p> <p>The problem with piecewise polynomial is that it uses higher order polynomials, which are unstable, and you can get large kinks and wiggles when the points don't lie on polynomial lines or when the points are close together.</p> <p>To draw this in Raphael you are probably best just sampling the line more frequently and using straight lines to draw it.</p> <h3>Line shape</h3> <p>One big consideration is what kind of line you want to draw. If you just want a smooth line, do cubic spline. But if you are drawing statistics or some other specific kind of line you may be better off looking into gaussian decomposition or other things: Cubic splines are cubic polynomials (ax<sup>3</sup> + bx<sup>2</sup> + cx + d = 0), so you cannot approximate sine curves very well (audio/signals), or Gaussians (signals/statistics), or exponentials (decay curves, long tail statistics).</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload