Hola supongamos que tengo un objeto formado por vectores:

[
	{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):

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:

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:

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:

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:

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:

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