elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Rompecabezas de Bitcoin, Medio millón USD en premios


+  Foro de elhacker.net
|-+  Programación
| |-+  Programación General
| | |-+  Rotar punto alrededor de otro punto
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Rotar punto alrededor de otro punto  (Leído 1,080 veces)
patilanz


Desconectado Desconectado

Mensajes: 481

555-555-0199@example.com


Ver Perfil WWW
Rotar punto alrededor de otro punto
« en: 13 Diciembre 2015, 13:11 pm »

Hola supongamos que tengo un objeto formado por vectores:
Código
  1. [
  2. {x:0,y:0},
  3. {x:30,y:0},
  4. {x:0,y:30}
  5. ]

Al unirlos se crea un triangulo que quiero girar. Quiero obtener los puntos resultantes de algo como esto(cuadrado en este caso):
Código
  1. var c = canvas.getContext('2d');
  2. var cuadrado = [{x:0,y:0},{x:100,y:0},{x:100,y:100},{x:0,y:100}]
  3. var width = 100;
  4. var height = 100;
  5. c.save();
  6. c.setTransform(1,0,0,1,0,0);
  7. c.translate(x+.5*width,y+.5*height); // Nos movemos en la mitad del cuadrado (u otra figura )
  8. c.rotate(Math.PI/180*angulo);
  9. dibujar(cuadrado); // Funcion que utiliza c.moveTo y c.lineTo para dibujar
  10. c.restore();
  11.  
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
  1. self.lineRotate = function(p,o,a){
  2. var diffX, diffY, dist, ca, na, x, y;
  3.  
  4. diffX = p.x - o.x;
  5. diffY = p.y - o.y;
  6. dist = this.pointsDistance(o,p);
  7. //dist = Math.sqrt(diffY*diffY + diffX*diffX);
  8.  
  9. ca = Math.atan2(diffY,diffX) * 180 / Math.PI;
  10. na = ((ca + a) % 360) * Math.PI/180;
  11.  
  12. x = (o.x + dist * Math.cos(na) + 0.5)|0;
  13. y = (o.y + dist * Math.sin(na) + 0.5)|0;
  14.  
  15. return {x:x,y:y};
  16. }
  17. self.lineMiddle = function(a,b){
  18. //return {x: a.x + (b.x - a.x)/2, y: a.y + (b.y - a.y)/2};
  19. return {x: (a.x + b.x)/2, y: (a.y + b.y)/2};
  20. }
  21.  
Y luego la funcion de girar:

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

El triangulo se deforma.
Luego también probé con esta función:
Código
  1. self.pointRotate = function(p,a,o){ // p = punto | a = angulo | o = origen
  2. o = o || {x:0,y:0};
  3. a = a * Math.PI/180;
  4. p.x -= o.x;
  5. p.y -= o.y;
  6.  
  7.  
  8. return new SAT.Vector(
  9. Math.cos(a) * p.x - Math.sin(a) * p.y + o.x,
  10. Math.sin(a) * p.x + Math.cos(a) * p.y + o.y
  11. );
  12. }
Y la función de girar:
Código
  1. var points = this.p.calcPoints;
  2. var average = new SAT.Vector(0,0);
  3. for(var i =0;i<this.p.calcPoints.length;i++){
  4. average.x += this.p.calcPoints[i].x;
  5. average.y += this.p.calcPoints[i].y;
  6. }
  7. average.x /= this.p.calcPoints.length;
  8. average.y /= this.p.calcPoints.length;
  9. var newPoints = [];
  10. if(points.length < 2)return false;
  11. for(var i=0;i<points.length;i++){
  12. newPoints.push(self.pointRotate(points[i].clone(), degrees, average));
  13. }
  14. 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
  1. rotate: function(degrees){
  2. theta = Math.PI/180 * degrees;
  3. var points = this.p.calcPoints;
  4.  
  5. var average = new v(0,0);
  6. points.forEach(function(p){
  7. average.x += p.x;
  8. average.y += p.y;
  9. });
  10. average.x /= points.length;
  11. average.y /= points.length;
  12.  
  13. var newPoints = [];
  14. points.forEach(function(p){
  15. newPoints.push(new v(
  16. ((p.x - average.x) * Math.cos(theta) + (p.y - average.y) * Math.sin(theta)) + average.x,
  17. (-(p.x - average.x) * Math.sin(theta) + (p.y - average.y) * Math.cos(theta)) + average.y
  18. ));
  19. });
  20. this.p.setPoints(newPoints);
  21. }


« Última modificación: 13 Diciembre 2015, 13:54 pm por patilanz » En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines