Empezando con Matter.js: El modulo Body

Spanish (Español) translation by Rodney Martinez (you can also view the original English article)

En el tutorial anterior de la serie, aprendió sobre los módulos World y Engine en Matter.js. Los métodos disponibles en estos dos módulos son importantes para controlar el comportamiento de múltiples cuerpos o el módulo World por completo de forma inmediata. Sin embargo, en algún punto será necesario tener control sobre las propiedades los cuerpos individuales en su módulo world.

Por ejemplo, tal vez usted quiera aplicar alguna fuerza sobre un objeto en particular o cambiar su coeficiente de fricción. En tales casos, el módulo Body en Matter.js puede ser de gran ayuda. Este módulo contiene muchos métodos y propiedades que le permiten especificar valores para todo tipo de atributos físicos, desde la masa hasta el coeficiente de restitución. En este tutorial, aprenderá sobre todos estos métodos y propiedades y cómo usarlos adecuadamente.

Escala, Rotación y Conversión de un módulo Body

Usted puede rotar cualquier cuerpo rígido en el módulo World de Matter.js usando el método rotate(body, rotation). La rotación es relativa al ángulo actual del cuerpo, y éste no aplicará ninguna velocidad angular a él. El ángulo de rotación está especificado en radianes.

También puede cambiar el tamaño de un cuerpo usando el método scale(body, scaleX, scaleY, [point]). Los parámetros scaleX y scaleY especifican la cantidad de escala en las direcciones horizontales y verticales, respectivamente. Tenga en mente que cualquier escala actualizará las propiedades físicas del cuerpo; como su masa, área e inercia. Los cuatro parámetros especifican el punto alrededor del cual ocurre la escala. Cuando no esté especificado, el valor por defecto del punto de la escala es asumido por el centro del cuerpo.

Es posible mover un cuerpo por un vector dado que es relativo a su posición actual usando el método translate(body, translation). El parámetro de traslación especifica la posición nueva del objeto relativo a su posición actual. Aquí está la porción de código del demo que escala, rota y mueve la caja alrededor.

var Body = Matter.Body;
var box = Bodies.rectangle(460, 120, 40, 40);

$('.scale').on('click', function () {
    Body.scale( box, 1.5, 1.2);
});

$('.rotate').on('click', function () {
    Body.rotate( box, Math.PI/6);
});

$('.translate').on('click', function () {
    Body.translate( box, {x: -10, y: 20});
});

Configurando las Velocidades y Aplicando Fuerzas

Además, puede aplicar velocidad lineal a un objeto usando el método setVelocity(body, velocity). Aplicando una velocidad en esta manera no cambia el ángulo, ni la fuerza aplicada o la posición del objeto afectado. La posición del objeto o su ángulo, probablemente, cambiará, pero la biblioteca no lo restablece a ningún valor. Sus valores son determinados por otras fuerzas que está están actuando sobre el objeto, como la fricción.

Tal como la velocidad lineal, usted también puede cambiar la velocidad angular de un objeto usando el método setAngularVelocity(body, velocity). En este caso, también la posición, ángulo y fuerza aplicada sobre el objeto quedarán sin cambios.

Una cosa que usted debería de tener en mente es que la velocidad es un vector en setVelocity() y un número en setAngularVelocity().

$('.linear').on('click', function () {
    Body.setVelocity( box, {x: 10, y: -10});
});

$('.angular').on('click', function () {
    Body.setAngularVelocity( box, Math.PI/6);
});

Además de aplicar velocidades a los objetos, también puede aplicar una fuerza vectorial sobre ellos. El método applyForce(body, position, force) puede ser usado para aplicar un vector force sobre un cuerpo desde una position dada. Esta fuerza puede o no resultar en la aplicación de fuerza sobre un objeto dado.

El siguiente código aplica una fuerza específica en el centro del objeto. El vector force es {x: 0, y: -0.05}. Esto significa que la fuerza aplicada será completamente vertical en una dirección ascendente. Usted deberá tener en mente que las fuerzas verticales en una dirección ascendente tiene un signo negativo en Matter.js. Otra cosa que es necesario mencionar es cuán pequeño es el número que especifica la fuerza vertical. La misma fuerza de gravedad tiene un valor de tan solo 1 en Matter.js.

El movimiento de la bola después de aplicar las fuerzas parece natural siempre y cuando esa bola no colisione con ninguna de las paredes o con el piso. Normalmente, cuando las cosas colisionan con algo, esperamos que reboten. La energía con la cual un objeto rebota está determinada por el coeficiente de restitución.

En Matter.js su valor está ajustado a cero de forma predeterminada. Esto significa que cualquier objeto que tenga restitución ajustada a cero y colisione con algo más, no rebotará en lo absoluto. Un valor de 1 significa que el objeto rebotará con energía cinética igual a la que éste tenía antes de la colisión. Un valor como de 0.5 significa que el objeto rebotará solamente con el 50% de su energía cinética anterior. El valor de restitución para un objeto puede ser controlado usando la clave restitution.

En ciertas simulaciones, esto podría volverse necesario para que usted cambie la fricción entre los diferentes cuerpos. Esto se puede lograr usando las claves friction, frictionAir y frictionStatic.

La clave friction especifica el valor de la fricción cinética para un cuerpo. Este puede tener un valor entre 0 y 1. Un valor de 0 implica que un cuerpo puede moverse indefinidamente una vez que ha estado en movimiento. La única manera de detenerlo será aplicando algunas fuerzas externas. El valor final de la fricción entre los dos objetos está determinado usando la formula Math.min(bodyA.friction, bodyB.friction).
La clave frictionStatic especifica el valor de la fricción cuando un cuerpo está en reposo. El valor predeterminado para la fricción estática es 0.5. Un valor más alto significa que una cantidad más grande de fuerza será requerida para conseguir que el cuerpo se mueva.
La clave frictionAir es usado para especifica el valor de fricción entre un cuerpo y el aire alrededor. Un valor más alto significa que el cuerpo frenará muy rápido cuando se mueva a través del aire. El efecto de la fricción del aire es no-lineal.

$('.red-friction').on('click', function () {
  circleA.friction = 0.05;
  circleA.frictionAir = 0.0005;
  circleA.restitution = 0.9;
});

$('.res-friction').on('click', function () {
  circleA.friction = 0.1;
  circleA.frictionAir = 0.001;
  circleA.restitution = 0;
});

El Control de Renderización de cuerpos

Hasta este punto, no hemos especificado el color, anchura de contorno o estilo de trazo para usar cuando un cuerpo sea renderizado. Todas estas propiedades están anidadas dentro de la clave render. La propiedad fillStyle acepta una cadena de texto para especificar el estilo de relleno que renderizará el cuerpo. La propiedad lineWidth acepta un número que define la anchura de la línea para usar cuando crea el contorno del cuerpo.

Un valor de cero significa que no será renderizada ninguna línea. La propiedad strokeStyle puede ser usada para especificar el estilo del trazo para usar cuando renderice el contorno del cuerpo. Usted puede evitar que un cuerpo realice la renderización ajustando la clave visible a false. La opacidad del cuerpo que usted quiere renderizar puede ser controlada usando la clave opacity.

Además, puede usar una imagen en lugar de colores y contornos para renderizar el cuerpo. Los parámetros para renderizar un cuerpo usando figuras web, son especificados usando un grupo diferente de propiedades. La propiedad texture define el trazo de la imagen que deberá ser usado como una textura de una figura web.

Las propiedades xOffset y yOffset pueden ser usadas para definir el desplazamiento en los ejes respectivos para las figuras web. De forma similar, puede usar las propiedades xScale y yScale para definir la escala en los ejes x y y para la figura web. Aquí está algo de código que reemplaza el fondo de color azul claro de nuestra bola con una figura de un balón de fútbol del sitio web Open Game Art.

var ball = Bodies.circle(90, 280, 20, {
  render: {
    sprite: {
      texture: "path/to/soccer_ball.png",
      xScale: 0.4,
      yScale: 0.4
    }
  }
});

Cambiando las Propiedades Físicas

Ya ha visto como especificar la fricción o coeficiente de restitución para un objeto en Matter.js. Hay muchas otras propiedades cuyos valores pueden ser especificados en la misma manera. Por otra parte, hay propiedades que son solamente de lectura y usted no las puede cambiar.

Usted puede ajustar la posición de un cuerpo en el módulo world, usando la clave position, la cual acepta un vector como su valor. Además, puede especificar la masa de un cuerpo usando la propiedad mass, pero luego, tendrá que ajustar el valor de la propiedad inverseMass, el cual se calcula usando la formula 1/mass. Una mejor forma de controlar la masa de un cuerpo es con la ayuda de la propiedad density.

Una vez que usted ha cambiado la densidad de un cuerpo, su masa será calculada de forma automática basado en su área. De esta manera, usted puede diferencias entre los diferentes objetos mediante sus densidades. Por ejemplo, un cuerpo que usa una roca como su figura, deberá tener un densidad más alta que la de un cuerpo del mismo tamaño que usa un balón de fútbol como figura.

Algunas propiedades como speed, velocity y angularVelocity, son solamente de lectura, sin embargo, sus valores pueden ajustarse usando métodos apropiados como setAngularVelocity() y setVelocity(). Usted puede leer más acerca de las diferentes propiedades del módulo Body en la documentación.

Conclusión

En este tutorial, ha aprendido sobre todos los métodos importantes y las propiedades en el módulo Body de la biblioteca Matter.js. Sabe sobre las diferentes propiedades y lo que hacen para poder ayudarle a crear simulaciones más realistas de la física en la vida real. En el siguiente y último tutorial de esta serie, usted aprenderá el módulo Composite en Matter.js.

Si usted tiene alguna pregunta relacionada a este tutorial o algún consejo para usar la biblioteca, por favor, compartalo con nosotros.