Desplazamiento angular

Anteriormente creamos un juego completo que involucra intersecciones circulares y eventos del ratón. Para continuar con este tema, veremos otra función importante que involucra intersecciones circulares: el Movimiento Angular. Para el ejemplo de hoy, tomaremos el código visto en la entrada Distancia entre círculos.

Hasta el momento, hemos visto como desplazar nuestros objetos en el eje X o en el eje Y. También podríamos desplazarlo a la diagonal cambiando el valor de ambos al mismo tiempo. ¿Pero como hacer si deseamos mover el objeto en un ángulo definido? ¿Y si deseamos que se desplace siempre la misma distancia, sin importar el ángulo de movimiento?

Para desplazar un objeto, dado un ángulo, es necesario obtener el seno del ángulo para obtener su desplazamiento en la coordenada Y, y el coseno del ángulo para obtener su desplazamiento en la coordenada X. Para conseguir estos valores, usaremos las funciones Math.sin y Math.cos, dado nuestro ángulo:

Math.cos(angle);
Math.sin(angle);

A estos valores multiplicamos la distancia que queremos se desplace nuestro objeto, y obtendremos así el desplazamiento angular final; Estos valores simplemente deberán ser sumados a la posición actual de nuestro objeto. Con esta información, podemos crear una función dentro de nuestro círculo que se encargue de este movimiento:

    Circle.prototype.move=function(angle,speed){
        if(speed!=null){
            this.x+=Math.cos(angle)*speed;
            this.y+=Math.sin(angle)*speed;
        }
    }

Con esta fórmula, podemos desplazar cualquier objeto en nuestra pantalla con un movimiento angular. Es importante resaltar que los ángulos recibidos deben ser en radianes, por lo que si deseas indicar el ángulo en grados, debes multiplicarlo por la constante PI sobre 180:

target.move(60*(Math.PI/180),deltaTime*100);

La función de arriba desplaza nuestro objetivo a una velocidad de 100 pixeles por segundo, en un ángulo de 60 grados. Ahora que sabemos como hacer este desplazamiento, veamos una forma dinámica de aprovecharlo; haremos que nuestro objetivo siga al jugador siempre que esté lejos de él.

Para empezar, necesitaremos conocer el ángulo entre el objetivo y nuestro jugador. Para obtener el ángulo entre dos puntos, necesitamos conocer el arco tangente entre la diferencia de las posiciones en X y la diferencia de las posiciones en Y. Agregamos la función que se encarga de esto:

    Circle.prototype.getAngle=function(circle){
        if(circle!=null)
            return (Math.atan2(circle.y-this.y,circle.x-this.x));
    }

Asegurémonos que el ángulo es el correcto, dibujando este valor en pantalla. Como el resultado es entregado en radianes, si deseas ver el valor expresado en grados, deberás multiplicarlo por 180 sobre la constante PI (Proceso inverso a lo que hicimos anteriormente):

        ctx.fillText('Angle: '+(player.getAngle(target)*(180/Math.PI)).toFixed(1),10,20);

Ya con este valor, podremos asignar este desplazamiento a nuestro objetivo, siempre que esté lejos del jugador:

        if(target.distance(player)>0){
            var angle=target.getAngle(player);
            target.move(angle,deltaTime*100);
        }

Recuerda que el valor es recibido en radianes en la primer función, por lo que no es necesario convertirlo en ningún punto antes de entregarlo a la segunda.

Probamos el código. Con esto, ya tenemos al objetivo siguiendo siempre a nuestro jugador. Por supuesto, un juego en que el objetivo vuele a donde estás tú no es divertido, pero hay miles de funciones que se pueden asignar a este tipo de movimiento... Quizá misiles teledirigidos...

Código final:

[Canvas not supported by your browser]

(function(){
    'use strict';
    window.addEventListener('load',init,false);
    var canvas=null,ctx=null;
    var lastUpdate=0;
    var mousex=0,mousey=0;
    var player=new Circle(0,0,5);
    var target=new Circle(100,100,10);

    function init(){
        canvas=document.getElementById('canvas');
        ctx=canvas.getContext('2d');
        canvas.width=300;
        canvas.height=200;
        
        run();
    }

    function run(){
        requestAnimationFrame(run);
            
        var now=Date.now();
        var deltaTime=(now-lastUpdate)/1000;
        if(deltaTime>1)deltaTime=0;
        lastUpdate=now;
        
        act(deltaTime);
        paint(ctx);
    }

    function act(deltaTime){
        player.x=mousex;
        player.y=mousey;
        
        if(player.x<0)
            player.x=0;
        if(player.x>canvas.width)
            player.x=canvas.width;
        if(player.y<0)
            player.y=0;
        if(player.y>canvas.height)
            player.y=canvas.height;
        
        if(target.distance(player)>0){
            var angle=target.getAngle(player);
            target.move(angle,deltaTime*100);
        }
    }

    function paint(ctx){
        ctx.fillStyle='#000';
        ctx.fillRect(0,0,canvas.width,canvas.height);
        
        ctx.strokeStyle='#0f0';
        player.stroke(ctx);
        ctx.strokeStyle='#f00';
        target.stroke(ctx);
        
        ctx.fillStyle='#fff';
        ctx.fillText('Distance: '+player.distance(target).toFixed(1),10,10);
        ctx.fillText('Angle: '+(player.getAngle(target)*(180/Math.PI)).toFixed(1),10,20);
    }

    document.addEventListener('mousemove',function(evt){
        mousex=evt.pageX-canvas.offsetLeft;
        mousey=evt.pageY-canvas.offsetTop;
    },false);

    function Circle(x,y,radius){
        this.x=(x==null)?0:x;
        this.y=(y==null)?0:y;
        this.radius=(radius==null)?0:radius;
    }
        
    Circle.prototype.distance=function(circle){
        if(circle!=null){
            var dx=this.x-circle.x;
            var dy=this.y-circle.y;
            return (Math.sqrt(dx*dx+dy*dy)-(this.radius+circle.radius));
        }
    }

    Circle.prototype.getAngle=function(circle){
        if(circle!=null)
            return (Math.atan2(circle.y-this.y,circle.x-this.x));
    }

    Circle.prototype.move=function(angle,speed){
        if(speed!=null){
            this.x+=Math.cos(angle)*speed;
            this.y+=Math.sin(angle)*speed;
        }
    }

    Circle.prototype.stroke=function(ctx){
        ctx.beginPath();
        ctx.arc(this.x,this.y,this.radius,0,Math.PI*2,true);
        ctx.stroke();
    }

    window.requestAnimationFrame=(function(){
        return window.requestAnimationFrame || 
            window.webkitRequestAnimationFrame || 
            window.mozRequestAnimationFrame || 
            function(callback){window.setTimeout(callback,17);};
    })();
})();