Cp-s05box Wiki
Tag: sourceedit
(Replaced content with "Test Page")
Tag: rte-wysiwyg
Line 1: Line 1:
  +
Test Page
;Status
 
:Stable
 
;Change(s)
 
:Providing scaling
 
;To do
 
:none
 
 
== 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, 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;
 
}
 
}
 
</syntaxhighlight>
 
 
== Example ==
 
<syntaxhighlight lang="javascript">
 
var graph = new Graph(1, 3, 2), // f(x) = x ^ 2 + 3x + 2
 
svg = document.querySelector("svg"), // the svg element
 
path = graph.toPath(0, 12, 0, 200, 20); // svg path node - start path at (0, 200) in the svg axis-system, and scale the x values by 20
 
path.setAttributeNS(null, "fill", "none"); // remove fill
 
path.setAttributeNS(null, "stroke", "purple"); // add stroke
 
svg.appendChild(path); // insert path
 
</syntaxhighlight>
 

Revision as of 13:34, 28 September 2015

Test Page