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