(Created page with ";Status :Stable ;Change(s) :Release ;To do :Provide axes scaling == Code == <syntaxhighlight lang="javascript"> function Graph(a, b, c) { // values this.v = { a: a, b: ...") Tag: sourceedit |
No edit summary Tag: sourceedit |
||
Line 55: | Line 55: | ||
} |
} |
||
} |
} |
||
+ | </syntaxhighlight> |
||
− | </snytaxhighlight> |
Revision as of 01:23, 18 August 2015
- Status
- Stable
- Change(s)
- Release
- To do
- Provide axes scaling
Code
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) { // 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),
m, // moveto command
q; // quadric bezier command
m = [originX + x1, originY - y1];
q = this.calcCtrl(x1, x2);
q.push(x2 - x1, y1 - y2);
q[0] -= x1; // xval control point
q[1] = y1 - q[1]; // yval control point
path.setAttributeNS(
null,
"d",
"M " + m.join(" ") + " q " + q.join(" ")
);
return path;
}
}