Pivoting around a changing source - Javascript
So, I have an object revolving around the origin point. Once I rotate and then change the origin. My object seems to be jumping positions. After jumping it spins perfectly ... Need help finding the pattern / why it is jumping and what do I need to do to stop it.
Here's the rotation code:
adjustMapTransform = function (_x, _y) {
var x = _x + (map.width/2);
var y = _y + (map.height/2);
//apply scale here
var originPoint = {
x:originXInt,
y:originYInt
};
var mapOrigin = {
x:map.x + (map.width/2),
y:map.y + (map.height/2)
};
//at scale 1
var difference = {
x:mapOrigin.x - originPoint.x,
y:mapOrigin.y - originPoint.y
};
x += (difference.x * scale) - difference.x;
y += (difference.y * scale) - difference.y;
var viewportMapCentre = {
x: originXInt,
y: originYInt
}
var rotatedPoint = {};
var angle = (rotation) * Math.PI / 180.0;
var s = Math.sin(angle);
var c = Math.cos(angle);
// translate point back to origin:
x -= viewportMapCentre.x;
y -= viewportMapCentre.y;
// rotate point
var xnew = x * c - y * s;
var ynew = x * s + y * c;
// translate point back:
x = xnew + viewportMapCentre.x - (map.width/2);
y = ynew + viewportMapCentre.y - (map.height/2);
var coords = {
x:x,
y:y
};
return coords;
}
Also here is a JS Fiddle project that you can play around to get a better understanding of what's going on.
EDITED LINK - got rid of the originy bug and scaling https://jsfiddle.net/fionoble/6k8sfkdL/13/
Thank!
source to share
The direction of rotation is a consequence of the sign you choose for the elements in your rotation matrix. [This is Rodriguez's formula for rotation in two dimensions]. Therefore, to rotate in the opposite direction, just subtract your y-cosine term, not your y-term.
You can also try looking at different potential representations of your data.
If you use a symmetrical line representation between your points, you can avoid offset and simply transform your coordinates instead.
Take the origin [relative to your rotation], c_0, to be a constant offset in a symmetrical shape.
You have a point p relative to c_0:
var A = (p.x - c_0.x);
var B = (p.y - c_0.y);
//This is the symmetric form.
(p.x - c_0.x)/A = (p.y - c_0.y)/B
which will be true on coordinate change and for any point of the line (which also takes care of scaling / expanding).
Then after changing the coordinates for the rotation, you [noted that this rotation has the opposite meaning, not the one you have).
//This is the symmetric form of the line incident on your rotated point
//and on the center of its rotation
((p.x - c_0.x) * c + (p.y - c_0.y) * s)/A = ((p.x - c_0.x) * s - (p.y - c_0.y) * c)/B
therefore, multiplying, we get
(pn.x - c_0.x) * B * c + (pn.y - c_0.y) * B * s = (pn.x - c_0.x) * A * s - (pn.y - c_0.y) * A * c
gives
(pn.x - c_0.x) * (B * c - A * s) = - (pn.y - c_0.y) * (B * s + A * c)
pn.y = -(pn.x - c_0.x) * (B * c - A * s) / (B * s + A * c) + c_0.y;
for any scaling.
source to share