If you want to do a rotation as in your updated answer, all we have to do is... well, that. Rotate around (0.5,0.5) by a 180 degree, or π radians, angle. Let's assume we have a curve encoded as an array c
with four point objects { x:..., y... }
, then we can effect this rotation as:
c = [ {x:...,y:...}, ..., ..., ...];
function halfUnitTurn(v) {
// Note: it's actually 0.5 + ((v.x-0.5)*cos(pi) - (v.x-0.5)*sin(pi)),
// (and x*sin + y*cos for the y:... part) but: cos(pi) is just -1, and
// sin(pi) is 0, so things REALLY simplify!
return {
x: 0.5 - (v.x-0.5),
y: 0.5 - (v.y-0.5)
};
}
var rotated = c.map(function(p) { return halfUnitTurn(p); });
And as demonstrator code: http://jsfiddle.net/mokg77fq/