Advertisement
  1. Code
  2. JavaScript

Empezando con Matter.js: Los módulos Composites y Composite

Scroll to top
Read Time: 9 min
This post is part of a series called Getting Started with Matter.js.
Getting Started With Matter.js: The Body Module

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

En el tercer tutorial de la serie, usted aprendió sobre los diferentes métodos y propiedades del módulo Body en Matter.js El módulo Body le permite manipular las instancias sencillas como círculos, rectángulos y trapecios. Matter.js también tiene otros módulos para ayudarle a crear y manipular algunas instancias integradas que son complejas pero comunes como los cars, las chains, las pyramids, las stacks y los soft body.

Todas estas integraciones y los métodos para manipularlos están disponibles en los módulos Composite y Composites que son parte de Matter.js En este tutorial, comenzará aprendiendo acerca de los diferentes módulos Composites como pyramids, cars, etc., que se pueden crear usando los módulos Composites. Después de eso, revisaremos algunos métodos y propiedades importantes que están disponibles en el módulo Composite.

Vamos a crear una estructura Stack y una Pyramid

Un stack y un pyramid son muy similares entre sí.  Un stack, puede ser creado usando la función stack(xx, yy, columns, rows, columnGap, rowGap, callback). De manera similar, usted puede crear un pyramid con la ayuda de la función pyramid(xx, yy, columns, rows, columnGap, rowGap, callback). Como puede ver, todos los parámetros son los mismos en ambos casos. De hecho, la formación pyramid es derivada de la formación stack.

Los nombres de todos los parámetros son claros. Los parámetros xx y yy usados en esta función son usados para especificar el punto de inicio del módulo composite. Los parámetros columns y rows determinan el número de columnas y filas en el módulo composite. El espacio entre las diferentes filas y columnas puede ser controlado usando los parámetros columnGap y rowGap.

Bajo la influencia de la gravedad, el parámetro rowGap, por lo general, desaparece en la mayoría de los casos sin cambiar el módulo composite. Sin embargo, algunas veces el impulso resultante de las instancias individuales puede mover las instancias debajo de ellas. Esto puede cambiar la forma del módulo composite.

La función callback es usada para crear instancias que pueden ser arregladas en un arreglo de cuadrícula o en un arreglo de pirámide mediante la función utilizada. Esto significa que puede usarlo para crear una formación stack o una pyramid de cajas rectangulares o trapezoides. Sin embargo, debería de tener en cuenta que usar un círculo hará el arreglo inestable. Aquí está el código para crear una formación stack de rectángulos:

1
var stack = Composites.stack(550, 100, 5, 3, 0, 0, function(x, y) {
2
  return Bodies.rectangle(x, y, 40, 20, {
3
    render: {
4
      fillStyle: 'orange',
5
      strokeStyle: 'black'
6
    }
7
  });
8
});

Usted puede hacer la función callback tan compleja como usted desee. En este caso, he usado las opciones render sobre las que aprendimos en el tutorial el módulo Body para crear rectángulos de color naranja con contornos negros.

Aquí está un código muy similar para crear formas de pirámides en Matter.js:

1
var pyramid = Composites.pyramid(0, 220, 11, 6, 0, 0, function(x, y) {
2
  return Bodies.rectangle(x, y, 30, 30, {
3
    render: {
4
      fillStyle: 'cornflowerblue',
5
      strokeStyle: 'black'
6
    }
7
  });
8
});

Cuando empieza a crear muchas formaciones pyramid con diferentes parámetros, observará que el número de filas creadas, algunas veces, es menor que el número de filas que usted especificó. Esto es porque la biblioteca usa las siguiente formula para calcular el número de filas:

1
Math.min(rows, Math.ceil(columns / 2))

Usted puede colocar con mucho cuidado una formación stack u otra formación pyramid sobre la pirámide para crear patrones interesantes. Por ejemplo, usted pudiera colocar una pirámide más pequeña sobre la de color rojo para crear una pirámide completa con dos colores.

Creando una formación Car y una Chain

Un car en Matter.js es una estructura que consiste de dos ruedas y un cuerpo. Las ruedas son creadas con una fricción de 0.8 y densidad igual a 0.01. Usted puede crear una estructura car usando la función car(xx, yy, width, height, wheelSize). Los parámetros xx y yy son usados para especificar la posición de la estructura car.

Los parámetros widthheight, determinan las dimensiones del cuerpo principal de la estructura. El parámetro wheelSize es usado para especificar el radio de las ruedas. No hay necesidad para invocar una función callback ya que el tipo de instancias necesarias para crear una estructura car es predeterminada.

1
var car = Composites.car(190, 100, 100, 45, 30);
2
3
$('.force').on('click', function () {
4
    Body.applyForce( car.bodies[0], {x: car.bodies[0].position.x, y: car.bodies[0].position.y}, {x: 0.5, y: 0});
5
});

Usted puede usar la función chain(composite, xOffsetA, yOffsetA, xOffsetB, yOffsetB, options) en Matter.js para conectar todas las instancias en un módulo composite dado usando constraints. Los parámetros de desplazamiento en la función son usados para determinar la posición relativa de los constraints conectados a diferentes cajas.

Además, usted necesitará constraints adicionales para conectar la cadena desde un punto en el mundo. Aquí está el código para crear una cadena y conectarla al tope de nuestro mundo.

1
var boxes = Composites.stack(500, 80, 3, 1, 10, 0, function(x, y) {
2
        return Bodies.rectangle(x, y, 50, 40);
3
    });
4
5
var chain = Composites.chain(boxes, 0.5, 0, -0.5, 0, { stiffness: 1});
6
7
Composite.add(boxes, Constraint.create({ 
8
        bodyA: boxes.bodies[0],
9
        pointB: { x: 500, y: 15 },
10
        stiffness: 0.8
11
    }));

Las cajas en nuestra cadena han sido creadas usando la función stack() que aprendió anteriormente. Las constraints creadas por la función chain() tienen una rigidez de 1.

Esto evita que la longitud de la cuerda entre las diferentes cajas cambie en todas. La constraint adicional que hemos creado aquí mantiene nuestras cajas conectadas desde el tope.

Aquí está el demo con una estructura car y la cadena creada del código anterior. Puede mover la instancia car hacia adelante o hacia atrás usando los botones anaranjados. Cada clic aplica una fuerza en el centro de la primera rueda, moviendo la instancia car por completo.

Creando una simulación Soft Body y un Péndulo de Newton

Un soft body es parecido a un stack con dos diferencias importantes. Los elementos individuales del soft body se ayudan entre sí por las constraints, y un soft body puede tener solamente círculos como sus elementos que lo constituyen. Usted puede considerar un soft body como un cruce entre una mesh y un stack. Crear un soft body es tan simple como invocar la función softBody(xx, yy, columns, rows, colGap, rowGap, crossBrace, pRadius, pOptions, cOptions) con sus valores de parámetros respectivos.

Ya está familiarizado con los primeros seis parámetros de la función. El parámetro crossBrace es un valor Booleano que determina si los soportes transversales deberían ser reproducidos o no. El parámetro pRadius determina el radio del círculo y el parámetro pOptions puede ser usado para controlar otras propiedades de las partículas como la masa o la inercia.

El parámetro cOptions especifica varias opciones para las restricciones que unen las partículas entre sí. El siguiente código creará un soft body para nuestro mundo Matter.js.

1
var particleOptions = { 
2
        friction: 0.05,
3
        frictionStatic: 0.1,
4
        render: { visible: true } 
5
    };
6
7
var constraintOptions = { 
8
        render: { visible: false } 
9
    };
10
11
var softBody = Composites.softBody(450, 200, 10, 5, 0, 0, true, 15, particleOptions, constraintOptions);

Crear un péndulo de Newton, también es un tarea sencilla usando la función integrada newtonsCradle(xx, yy, number, size, length) El parámetro number determina el número de bolas en el péndulo. El parámetro size determina sus radios y el parámetro length determina la longitud de la cuerda a las cuales las bolas están sujetadas. El biblioteca establece la restitución y los valores de fricción a cero para que puedan continuar su movimiento durante mucho tiempo.

El siguiente código crea el péndulo y mueve la primer bola a la posición más alta para que tenga algo de velocidad cuando venga hacia abajo y choque con las otras bolas. La posición especificada por la función translate() es relativa a la posición actual de la instancia. Todas estas funciones y propiedades del módulo Body se han analizado con más detalles en el tutorial anterior de esta serie.

1
var cradleA = Composites.newtonsCradle(200, 50, 5, 20, 250);
2
Body.translate(cradleA.bodies[0], { x: -100, y: -100 });

Métodos y Propiedades Importantes en el Módulo Composite

Ahora que ha aprendido a cómo crear diferentes tipos de cuerpos composite, es hora de que aprenda sobre los diferentes métodos y propiedades disponibles en el módulo Composite para manipular estos composites. Puede usar rotate(composite, rotation, point, [recursive=true])scale(composite, scaleX, scaleY, point, [recursive=true]) y la función translate(composite, translation, [recursive=true]) para rotar, cambiar el tamaño y convertir cualquier composite. Estas funciones son muy parecidas a sus contra partes del módulo Body.

Además, puede añadir o eliminar uno más métodos body(s), constraint(s) y composite(s) de un método composite dado usando las funciones add(composite, object)remove(composite, object, [deep=false]). Si quiere mover algunas instancias desde un método composite a otro, entonces puede hacerlo con ayuda de la función move(compositeA, objects, compositeB). Esta función moverá los objetos dados desde el método composite A hacia el B.

Si alguna vez quiso tener acceso a todas las instancias, métodos composites y constraints que son descendientes directos de un método composite dado, entonces puede usar las propiedades composite.bodiescomposite.composites y composite.constraints para tener acceso a todos ellos en forma de un array.

Ya hemos visto cómo usar la propiedad bodies para convertir una bola del péndulo de Newton a la izquierda y aplicar una fuerza sobre la rueda de nuestro composite car. Una vez que usted tenga una referencia a una instancia individual desde el composite, usted puede usar todos los métodos y propiedades del módulo Body para manipularlos.

Últimas reflexiones

En este tutorial aprendió cómo crear algunos composites complejos en Matter.js usando los módulos Composite y Composites. Además, aprendió sobre los diferentes métodos y propiedades que usted puede usar para manipular estos métodos composites.

Esta serie fue dirigida a que las personas empiecen a trabajar con la biblioteca Matter.js en una manera muy amigable. Tenga eso en mente, hemos analizado funciones importantes y propiedades de los módulos más comunes en la biblioteca.

Matter.js también tiene muchos otros módulos, los cuales hemos discutido en los primeros tutoriales de esta serie. Si usted quiere usar esta biblioteca para su potencial completo, entonces deberá leer la documentación de estos módulos en el sitio web oficial.

Si ha usado Matter.js en cualquiera de sus proyectos, por favor, cuéntenos sobre su experiencia en la sección de comentarios.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.