Distancia entre circulos

En el capítulo anterior, aprendimos a obtener la posición del ratón, y a dibujar un círculo para indicar dicha posición en nuestro canvas. Para realmente poder interactuar entre círculos, crearemos nuestra función Circle, como anteriormente hicimos con Rect:

    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.stroke=function(ctx){
        ctx.beginPath();
        ctx.arc(this.x,this.y,this.radius,0,Math.PI*2,true);
        ctx.stroke();
    }

A nuestra función Circle la crearemos pasándole su posición en X y Y (centro) y su radio.

La función principal para que dos círculos interactuen entre sí, es calcular la distancia entre ellos. Eso nos remonta a nuestras amadas cláses de Física de la secundaria, donde aprendíamos distancia entre vectores. ¿Recuerdan esa fórmula?

d = √ (x₂ - x₁)² + (y₂ - y₁)²

Si alguno de ustedes no la recordaba, no se mortifique, yo tampoco; lo busqué en Google...

Pero ahora que ya tenemos esta formula, podemos crear una función que nos permita calcular la distancia con respecto a otro círculo, la cual agregaremos obviamente al prototipo de la función Circle:

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

La formula es clara, solo cambié a códigos lo que presenté antes. Calculo dx restando la posición en X de ambos círculos, y lo mismo con dy. Luego los multiplico por si mismo para elevarlos al cuadrado y saco la raíz cuadrada; ¡Tenemos la distancia!

Lo único que hice fue, después de ello, restar la suma del radio de ambos círculos. Esto nos permitirá obtener la distancia respecto a la circunferencia de ambos círculos, y no de su centro. ¿Por qué hago esto? Les explicaré en un momento...

Probemos ahora nuestra nueva función. Crearemos un círculo player, y un círculo target, que será con el que interactuaremos:

    var player=new Circle(0,0,5);
    var target=new Circle(100,100,10);

De nuestro código anterior, cambiaremos todas las posiciones X y Y por player.x y player.y. Ahora, en nuestra función paint, dibujaremos ambos círculos y al final una línea de texto que indicará la distancia entre ambos objectos:

    function paint(ctx){
        ctx.clearRect(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);
    }

Si corremos nuestro ejemplo, veremos que obtenemos la distancia entre nuestros dos círculos con demasiada precisión en decimales. ¡Demasiados dígitos! Eso es difícil de leer. En la última línea de nuestra función paint, cambiemos player.distance(target) por player.distance(target).toFixed(1). Esta función hará que de todos los decimales en la cantidad, solo se muestre los indicados entre paréntesis. En este caso, 1.

Ahora si, probamos el código, podremos analizar con mayor detalle la distancia de ambos círculos, y como en la función, he restado la suma de la circunferencia de ambos círculos, notaremos que al rozarse ambos círculos, la distancia es calculada como 0. ¿Que ocurre si ambos círculos entran en contacto?

¡Así es! Cuando ambos círculos entran en contacto, la distancia retorna un valor negativo. Con esto, no solo hemos encontrado una función que indica la distancia entre ambos círculos, ¡También hemos creado una forma de saber si dos círculos entran en contacto! De forma similar como hicimos con la función Rect.intersect.

Ahora con este conocimiento, podrás crear videojuegos que involucren círculos. ¡Felicidades!

Para hacer mas obvio el momento en que ambos círculos se entran en intersección, he agregado estas líneas en la función run que cambian el color de fondo por uno mas claro cuando ocurre lo anterior mencionado:

        if(player.distance(target)<0)
            bgColor='#333';
        else
            bgColor='#000';

No olvides declarar la variable "bgColor" al inicio para que funcione, y modificar el inicio de la función "paint" de la siguiente forma:

    function paint(ctx){
        ctx.fillStyle=bgColor;
        ctx.fillRect(0,0,canvas.width,canvas.height);

Código final:

[Canvas not supported by your browser]

(function(){
    'use strict';
    window.addEventListener('load',init,false);
    var canvas=null,ctx=null;
    var mousex=0,mousey=0;
    var bgColor='#000';
    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);
        act();
        paint(ctx);
    }

    function act(){
        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(player.distance(target)<0)
            bgColor='#333';
        else
            bgColor='#000';
    }

    function paint(ctx){
        ctx.fillStyle=bgColor;
        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);
    }

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