Rotar punto alrededor de otro punto

[patilanz]

Hola supongamos que tengo un objeto formado por vectores:

Código (javascript) [Seleccionar] Expandir

[
{x:0,y:0},
{x:30,y:0},
{x:0,y:30}
]

Al unirlos se crea un triangulo que quiero girar. Quiero obtener los puntos resultantes de algo como esto(cuadrado en este caso):

Código (javascript) [Seleccionar] Expandir

var c = canvas.getContext('2d');
var cuadrado = [{x:0,y:0},{x:100,y:0},{x:100,y:100},{x:0,y:100}]
var width = 100;
var height = 100;
c.save();
c.setTransform(1,0,0,1,0,0);
c.translate(x+.5*width,y+.5*height); // Nos movemos en la mitad del cuadrado (u otra figura )
c.rotate(Math.PI/180*angulo);
dibujar(cuadrado); // Funcion que utiliza c.moveTo y c.lineTo para dibujar
c.restore();

Quiero rotar los puntos del "cuadrado"  para no tener que utilizar c.rotate y poder comprobar colisiones con SAT


Intente mediante esta función:

Código (javascript) [Seleccionar] Expandir

self.lineRotate = function(p,o,a){
var diffX, diffY, dist, ca, na, x, y;

diffX = p.x - o.x;
diffY = p.y - o.y;
dist = this.pointsDistance(o,p);
//dist = Math.sqrt(diffY*diffY + diffX*diffX);

ca = Math.atan2(diffY,diffX) * 180 / Math.PI;
na = ((ca + a) % 360) * Math.PI/180;

x = (o.x + dist * Math.cos(na) + 0.5)|0;
y = (o.y + dist * Math.sin(na) + 0.5)|0;

return {x:x,y:y};
}
self.lineMiddle = function(a,b){
//return {x: a.x + (b.x - a.x)/2, y: a.y + (b.y - a.y)/2};
return {x: (a.x + b.x)/2, y: (a.y + b.y)/2};
}

Y luego la funcion de girar:

Código (javascript) [Seleccionar] Expandir

var newPoints = [];
if(points.length < 2)return false;
for(var i=0;i<points.length - 1;i++){
newPoints.push(self.lineRotate(points[i],self.lineMiddle(points[i],points[i+1]),degrees));
}
newPoints.push(self.lineRotate(points[points.length - 2],self.lineMiddle(points[points.length - 2], points[points.length - 1]), degrees));
this.p.setPoints(newPoints);

El triangulo se deforma.
Luego también probé con esta función:

Código (javascript) [Seleccionar] Expandir

self.pointRotate = function(p,a,o){ // p = punto | a = angulo | o = origen
o = o || {x:0,y:0};
a = a * Math.PI/180;
p.x -= o.x;
p.y -= o.y;


return new SAT.Vector(
Math.cos(a) * p.x - Math.sin(a) * p.y + o.x,
Math.sin(a) * p.x + Math.cos(a) * p.y + o.y
);
}
Y la función de girar:

Código (javascript) [Seleccionar] Expandir

var points = this.p.calcPoints;
var average = new SAT.Vector(0,0);
for(var i =0;i<this.p.calcPoints.length;i++){
average.x += this.p.calcPoints[i].x;
average.y += this.p.calcPoints[i].y;
}
average.x /= this.p.calcPoints.length;
average.y /= this.p.calcPoints.length;
var newPoints = [];
if(points.length < 2)return false;
for(var i=0;i<points.length;i++){
newPoints.push(self.pointRotate(points[i].clone(), degrees, average));
}
this.p.setPoints(newPoints);

También se deforma.

No encuentro porque falla. Ayuden pls


Un saludo

@Edit: Solucionado con esta función y un cambio en la función de dibujar que no es importante:

Código (javascript) [Seleccionar] Expandir

rotate: function(degrees){
theta = Math.PI/180 * degrees;
var points = this.p.calcPoints;

var average = new v(0,0);
points.forEach(function(p){
average.x += p.x;
average.y += p.y;
});
average.x /= points.length;
average.y /= points.length;

var newPoints = [];
points.forEach(function(p){
newPoints.push(new v(
((p.x - average.x) * Math.cos(theta) + (p.y - average.y) * Math.sin(theta)) + average.x,
(-(p.x - average.x) * Math.sin(theta) + (p.y - average.y) * Math.cos(theta)) + average.y
));
});
this.p.setPoints(newPoints);
}