Colision en arco

IXtremeLT · #1 (**permalink**) 09/04/2012, 14:26

Hola que tal buen dia,

No tengo buenos conocimientos en matematicas y ya busque por la red pero no logro encontrar un buen ejemplo de como hacer colisiones en un arco de X dibujo de canvas.

Por ejemplo, si tengo un circulo creado asi:

Código Javascript:

Ver originalContexto.beginPath();
Contexto.arc(100, 100, 50, 0, Math.PI*2, false);
Contexto.closePath();

¿Como puedo almacenar en un array todas las coordenadas de los puntos de su cicunferencia?

Con el fin de poder hacer mover el circulo y en cada movimiento detectar si algun punto de la circunferencia hace contacto con otro objeto.

He encontrado una ecuacion que dicen que es para encontrar los puntos de la coordenada teniendo el radio y punto central del circulo, la cual es:

Código mate:

Ver original(x-10)^2+(y-20)^2=25

Pero no se como aplicarla para obtener el "x" y "y" de cada punto de la circunferencia.

Tambien he visto que tiene que ver con el coseno y seno, pero ya no recuerdo como utilizarlos.

Lo unico que he logrado es hacer como si fuera un cuadrado pero se ve muy mal ya que hace colision en las esquinas transparentes.

Espero que puedan ayudarme, muchas gracias.

IXtremeLT · #2 (**permalink**) 09/04/2012, 14:29

Por cierto, ya pregunte en un foro de matematicas pero tampoco entendi lo que me dijeron XD.
Aqui esta el link donde pregunte:

http://rinconmatematico.com/foros/in...btopicseen#new

Haber si alguien le entiende para que me lo explique ya directamente en javascript, thx.

Panino5001 · #3 (**permalink**) 09/04/2012, 21:31

Fijate si te sirve:

Código PHP:

  <!DOCTYPE html>
<html>
<head>
<title></title>
<style>
*{ margin:0; padding:0;}
canvas{border:1px dashed #CCC}
</style>
</head>
<body>
<canvas id="c" width="500" height="500"></canvas>
<script>
var ctx,x=10,y=10,dx=3,dy=2,w=500,h=500,o={x:250,y:250,r:100},b={r:10};
function init(){
    ctx=document.getElementById('c').getContext('2d')
    
    setInterval(draw, 10);
}
function draw(){
    ctx.clearRect(0,0,w,h);
    ctx.fillStyle = "blue";
    ctx.beginPath();
    ctx.arc(o.x, o.y, o.r, 0, Math.PI*2, true); 
    ctx.closePath();
    ctx.fill();
    ctx.fillStyle = "red";
    ctx.beginPath();
    ctx.arc(x, y, b.r, 0, Math.PI*2, true); 
    ctx.closePath();
    ctx.fill();
    if (x + dx > w || x + dx < 0)
        dx = -dx;
     if (y + dy > h || y + dy < 0)
        dy = -dy;
    var collisionX = (o.x - x);
    var collisionY = (o.y - y);
    var distanceSquared = (collisionX * collisionX) + (collisionY * collisionY);
    var sumRadius = (b.r + o.r);
    var sumRadiusSquared = sumRadius * sumRadius;
    if(distanceSquared <= sumRadiusSquared){
            var collisionVectorLength = Math.sqrt(distanceSquared);
            if(collisionVectorLength == 0) collisionVectorLength = 1;
            var collisionNormalX = collisionX / collisionVectorLength;
            var collisionNormalY = collisionY / collisionVectorLength;
            var Acvx = (dx * collisionNormalX) + (dy * collisionNormalY);
            var Acvy = (dx * collisionNormalX) - (dy * collisionNormalY);
            var Afvx = -2;
            dx = (Afvx * collisionNormalX) - (Acvy * collisionNormalY);
            dy = (collisionNormalX * Acvy) + (Afvx * collisionNormalY);
    }
    x += dx;
      y += dy;
}
init();

</script>
</body>
</html>

Si lo razónás un poco vas a ver que de lo único que se trata es de usar el famoso Teorema de Pitágoras. Básicamente, asumiendo que ambos son círculos, te fijás en 2 puntos: el centro del obstáculo y el centro del móvil. Si la distancia entre ellos es menor o igual a la suma de los 2 radios, quiere decir que chocaron, si es mayor, no chocaron. Y es la distancia entre ellos la que calculás con el teorema de Pitágoras.

IXtremeLT · #4 (**permalink**) 11/04/2012, 13:25

Hola Panino5001, gracias veo que si funciona, solo es cuestion de recordar ese teorema, aunque por logica logro entenderle a la mitad jeje.

Yo encontre otra solucion similar pero no se cual sea mejor, lo que se que esta es mas corta por eso dudo de su efectividad, checala:

Código Javascript:

Ver original// Aplica a la ecuacion (x-a)^2 + (y-b)^2 = r^2;
var suma_radios = ( Obstaculo.radius + Movil.radius );
var xa = Math.pow( (Obstaculo.centerX - Movil.centerX), 2 );
var yb = Math.pow( (Obstaculo.centerY - Movil.centerY), 2 );
var condicion = suma_radios - Math.sqrt( xa + yb );
 
// Si condicion es mayor o igual que cero hay colision
if ( condicion >= 0 ) {
     dX = -dX;
     dY = -dY;
}

La aplique y tambien funciona, pero la verdad que no se si sea efectiva ya que aun no entiendo bien eso del teorema de pitagoras jeje.

Gracias y saludos.

Panino5001 · #5 (**permalink**) 11/04/2012, 14:10

Es lo mismo ;)
Me alegra que hayas encontrado la solución