Cp-s05box Wiki
Advertisement
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: 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; } } </snytaxhighlight>

Advertisement