please I need a really simple JavaScript code \"in detail\" for Quadratic spline
ID: 3840125 • Letter: P
Question
please I need a really simple JavaScript code "in detail" for Quadratic spline interpolation... I have to save it as HTML file then run it in a browser to get the output
build the quadratic spline interpolation piecewise continuous and differentiable set of quadratic polynomials that go through those points and evaluate the function at x=1.5. Define the data points like this: p = [[0,3.8414709848078967],[0.6931471805599453,6.6818861490654635],[1.0986122886681098,7.5355691627323065],[1.3862943611198906,7.788374949171635],[1.6094379124341003,8.478827375073264],[1.791759469228055,9.887622378713294],[1.9459101490553132,11.440627194940042],[2.0794415416798357,12.307124413342725]] Connect the first two points with a straight line. Then use the ending point and slope together with the following point to build the quadratic equation using the attached Cramer's Rule function. Keep repeating this until your last interval includes the value x. Use the that quadratic function to calculate the value of y.
Cramer's function
{ y = -5x2 -2x -6 } is (0,-6),-2,(1,-13) is { y = -5x2 -2x -6 } { y = -5x2 -2x -3 } is (0,-3),-2,(1,-10) is { y = -5x2 -2x -3 } { y = -5x2 -2x } is (0,0),-2,(1,-7) is { y = -5x2 -2x } { y = -5x2 -2x +3 } is (0,3),-2,(1,-4) is { y = -5x2 -2x +3 } { y = -5x2 -6 } is (0,-6),0,(1,-11) is { y = -5x2 -6 } { y = -5x2 -3 } is (0,-3),0,(1,-8) is { y = -5x2 -3 } { y = -5x2 } is (0,0),0,(1,-5) is { y = -5x2 } { y = -5x2 +3 } is (0,3),0,(1,-2) is { y = -5x2 +3 } { y = -5x2 +2x -6 } is (0,-6),2,(1,-9) is { y = -5x2 +2x -6 } { y = -5x2 +2x -3 } is (0,-3),2,(1,-6) is { y = -5x2 +2x -3 } { y = -5x2 +2x } is (0,0),2,(1,-3) is { y = -5x2 +2x } { y = -5x2 +2x +3 } is (0,3),2,(1,0) is { y = -5x2 +2x +3 } { y = -2x -6 } is (0,-6),-2,(1,-8) is { y = -2x -6 } { y = -2x -3 } is (0,-3),-2,(1,-5) is { y = -2x -3 } { y = -2x } is (0,0),-2,(1,-2) is { y = -2x } { y = -2x +3 } is (0,3),-2,(1,1) is { y = -2x +3 } { y = -6 } is (0,-6),0,(1,-6) is { y = -6 } { y = -3 } is (0,-3),0,(1,-3) is { y = -3 } { y = 0 } is (0,0),0,(1,0) is { y = 0 } { y = 3 } is (0,3),0,(1,3) is { y = 3 } { y = 2x -6 } is (0,-6),2,(1,-4) is { y = 2x -6 } { y = 2x -3 } is (0,-3),2,(1,-1) is { y = 2x -3 } { y = 2x } is (0,0),2,(1,2) is { y = 2x } { y = 2x +3 } is (0,3),2,(1,5) is { y = 2x +3 } { y = 5x2 -2x -6 } is (0,-6),-2,(1,-3) is { y = 5x2 -2x -6 } { y = 5x2 -2x -3 } is (0,-3),-2,(1,0) is { y = 5x2 -2x -3 } { y = 5x2 -2x } is (0,0),-2,(1,3) is { y = 5x2 -2x } { y = 5x2 -2x +3 } is (0,3),-2,(1,6) is { y = 5x2 -2x +3 } { y = 5x2 -6 } is (0,-6),0,(1,-1) is { y = 5x2 -6 } { y = 5x2 -3 } is (0,-3),0,(1,2) is { y = 5x2 -3 } { y = 5x2 } is (0,0),0,(1,5) is { y = 5x2 } { y = 5x2 +3 } is (0,3),0,(1,8) is { y = 5x2 +3 } { y = 5x2 +2x -6 } is (0,-6),2,(1,1) is { y = 5x2 +2x -6 } { y = 5x2 +2x -3 } is (0,-3),2,(1,4) is { y = 5x2 +2x -3 } { y = 5x2 +2x } is (0,0),2,(1,7) is { y = 5x2 +2x } { y = 5x2 +2x +3 } is (0,3),2,(1,10) is { y = 5x2 +2x +3 } { y = 4.9375x2 -20x } : (-4, 159) (-3, 104.4375) (-2, 59.75) (-1, 24.9375) (0, 0) (1, -15.0625) (2, -20.25) (3, -15.5625) (4, -1) (5, 23.4375) (6, 57.75) (7, 101.9375)
Explanation / Answer
Check the below sample example:
var ctx = document.getElementById("c").getContext("2d");
function drawCurve(ctx, ptsa, tension, isClosed, numOfSegments, showPoints) {
ctx.beginPath();
drawLines(ctx, getCurvePoints(ptsa, tension, isClosed, numOfSegments));
if (showPoints) {
ctx.beginPath();
for(var i=0;i<ptsa.length-1;i+=2)
ctx.rect(ptsa[i] - 2, ptsa[i+1] - 2, 4, 4);
}
ctx.stroke();
}
var myPoints = [10,10, 40,30, 100,10, 200, 100, 200, 50, 250, 120]; //minimum two points
var tension = 1;
drawCurve(ctx, myPoints); //default tension=0.5
drawCurve(ctx, myPoints, tension);
function getCurvePoints(pts, tension, isClosed, numOfSegments) {
// use input value if provided, or use a default value
tension = (typeof tension != 'undefined') ? tension : 0.5;
isClosed = isClosed ? isClosed : false;
numOfSegments = numOfSegments ? numOfSegments : 16;
var _pts = [], res = [], // clone array
x, y, // our x,y coords
t1x, t2x, t1y, t2y, // tension vectors
c1, c2, c3, c4, // cardinal points
st, t, i; // steps based on num. of segments
_pts = pts.slice(0);
// The algorithm require a previous and next point to the actual point array.
// Check if we will draw closed or open curve.
// If closed, copy end points to beginning and first points to end
// If open, duplicate first points to befinning, end points to end
if (isClosed) {
_pts.unshift(pts[pts.length - 1]);
_pts.unshift(pts[pts.length - 2]);
_pts.unshift(pts[pts.length - 1]);
_pts.unshift(pts[pts.length - 2]);
_pts.push(pts[0]);
_pts.push(pts[1]);
}
else {
_pts.unshift(pts[1]); //copy 1. point and insert at beginning
_pts.unshift(pts[0]);
_pts.push(pts[pts.length - 2]); //copy last point and append
_pts.push(pts[pts.length - 1]);
}
// ok, lets start..
// 1. loop goes through point array
// 2. loop goes through each segment between the 2 pts + 1e point before and after
for (i=2; i < (_pts.length - 4); i+=2) {
for (t=0; t <= numOfSegments; t++) {
// calc tension vectors
t1x = (_pts[i+2] - _pts[i-2]) * tension;
t2x = (_pts[i+4] - _pts[i]) * tension;
t1y = (_pts[i+3] - _pts[i-1]) * tension;
t2y = (_pts[i+5] - _pts[i+1]) * tension;
// calc step
st = t / numOfSegments;
// calc cardinals
c1 = 2 * Math.pow(st, 3) - 3 * Math.pow(st, 2) + 1;
c2 = -(2 * Math.pow(st, 3)) + 3 * Math.pow(st, 2);
c3 = Math.pow(st, 3) - 2 * Math.pow(st, 2) + st;
c4 = Math.pow(st, 3) - Math.pow(st, 2);
// calc x and y cords with common control vectors
x = c1 * _pts[i] + c2 * _pts[i+2] + c3 * t1x + c4 * t2x;
y = c1 * _pts[i+1] + c2 * _pts[i+3] + c3 * t1y + c4 * t2y;
//store points in array
res.push(x);
res.push(y);
}
}
return res;
}
function drawLines(ctx, pts) {
ctx.moveTo(pts[0], pts[1]);
for(i=2;i<pts.length-1;i+=2) ctx.lineTo(pts[i], pts[i+1]);
}
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.