Cp-s05box Wiki
(Replaced content with "Test Page")
Tag: rte-wysiwyg
m (No thank you)
Tag: sourceedit
 
Line 1: Line 1:
  +
;Status
Test Page
 
  +
: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>

Latest revision as of 16:10, 28 September 2015

Status
Stable
Change(s)
Providing scaling
To do
none

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, 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;
	}
}

Example[]

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