function Graph(a, b, c) {
// values
this.v = {
a: a,
b: b,
c: c
};
// function graph - f(x)
this.f = function(x) {
return a * Math.pow(x, 2) + b * x + c;
}
// prime function - f'(x)
this.fP = function(x) {
return 2 * a * x + b;
}
// calculate control points
this.calcCtrl = function(x1, x2) {
var y1 = this.f(x1),
y2 = this.f(x2),
m1 = this.fP(x1),
m2 = this.fP(x2),
ctrl = {};
ctrl.x = (x1 * m1 - x2 * m2 - y1 + y2) / (m1 - m2); // essentially compare g(x) and h(x), only constructed in a way that a result will be returned
ctrl.y = m1 * (ctrl.x - x1) + y1; // pass value to g(x)
console.log("Control points: ", ctrl);
return [ctrl.x, ctrl.y];
}
// to path
this.toPath = function(x1, x2, originX, originY, scaleX, scaleY) { // origin[XY] are the point in an svg object which will be used as the path's origin
var path = document.createElementNS("http://www.w3.org/2000/svg", "path"),
y1 = this.f(x1),
y2 = this.f(x2),
scaleX = arguments[4] || 1,
scaleY = arguments[5] || 1,
m, // moveto command
q; // quadric bezier command
m = [originX + scaleX * x1, originY - scaleY * y1];
q = this.calcCtrl(x1, x2);
q.push(scaleX * (x2 - x1), scaleY * (y1 - y2));
q[0] = scaleX * (q[0] - x1); // xval control point
q[1] = (y1 - q[1]) * scaleY; // yval control point
path.setAttributeNS(
null,
"d",
"M " + m.join(" ") + " q " + q.join(" ")
);
return path;
}
}