Share
Dans le troisième tutoriel de la série, vous avez découvert différentes méthodes et propriétés du module Body dans Matter.js. Le module Corps vous permet de manipuler des corps simples tels que des cercles, des rectangles et des trapèzes. Matter.js propose également d'autres modules pour vous aider à créer et à manipuler des corps composites complexes mais courants tels que les voitures, les chaînes, les pyramides, les piles et les corps souples..
Tous ces composites et les méthodes pour les manipuler sont disponibles dans le Composite et Matériaux composites modules dans Matter.js. Dans ce didacticiel, vous allez commencer par vous familiariser avec différents composites, tels que des pyramides, des voitures, etc. pouvant être créés à l'aide du Matériaux composites module. Après cela, nous allons passer en revue quelques méthodes et propriétés importantes disponibles dans Composite module.
Une pile et une pyramide sont très similaires. Une pile peut être créée en utilisant le pile (xx, yy, colonnes, lignes, columnGap, rowGap, callback) une fonction. De même, vous pouvez créer une pyramide à l’aide de la pyramide (xx, yy, colonnes, lignes, columnGap, rowGap, callback) une fonction. Comme vous pouvez le constater, tous les paramètres sont les mêmes dans les deux cas. En fait, la formation de pyramide est dérivée de la formation de pile.
Les noms de tous les paramètres sont explicites. le xx et yy les paramètres utilisés dans cette fonction permettent de spécifier le point de départ du composite. le des colonnes et rangées les paramètres déterminent le nombre de colonnes et de lignes dans le composite. L’écart entre les différentes lignes et colonnes peut être contrôlé à l’aide de columnGap et rowGap paramètres.
Sous l’effet de la gravité, le rowGap disparaît généralement dans la plupart des cas sans changer le composite. Cependant, parfois, l'élan résultant des corps individuels peut déplacer les corps sous eux. Cela peut changer la forme du composite.
La fonction de rappel est utilisée pour créer des corps pouvant être disposés dans un agencement de grille ou dans un arrangement de pyramide en fonction de la fonction utilisée. Cela signifie que vous pouvez l'utiliser pour créer une pile ou une pyramide de boîtes rectangulaires ou trapézoïdales. N'oubliez pas que l'utilisation d'un cercle rend les arrangements instables. Voici le code pour créer une pile de rectangles:
var stack = Composites.stack (550, 100, 5, 3, 0, 0, fonction (x, y) return Bodies.rectangle (x, y, 40, 20, render: fillStyle: 'orange', strokeStyle : 'noir' ); );
Vous pouvez rendre la fonction de rappel aussi complexe que vous le souhaitez. Dans ce cas, j'ai utilisé les options de rendu décrites dans le didacticiel du module Corps pour ne créer que des rectangles orange avec des contours noirs..
Voici un code très similaire pour créer des formes pyramidales dans Matter.js:
var pyramid = Composites.pyramid (0, 220, 11, 6, 0, 0, fonction (x, y) return Bodies.rectangle (x, y, 30, 30, render: fillStyle: 'bleu corbeau', strokeStyle : 'noir' ); );
Lorsque vous commencez à créer un grand nombre de pyramides avec différents paramètres, vous remarquerez que le nombre de lignes créées est parfois inférieur au nombre de lignes que vous avez spécifié. En effet, la bibliothèque utilise la formule suivante pour calculer le nombre de lignes:
Math.min (rangées, Math.ceil (colonnes / 2))
Vous pouvez placer avec précaution une pile ou une autre pyramide sur une pyramide pour créer des motifs intéressants. Par exemple, vous pouvez placer une petite pyramide sur la rouge pour créer une pyramide complète avec deux couleurs..
Une voiture dans Matter.js est une structure composée de deux roues et d’une carrosserie. Les roues sont créées avec un frottement de 0,8 et une densité égale à 0,01. Vous pouvez créer une voiture en utilisant la fonction voiture (xx, aa, largeur, hauteur, taille de roue). le xx et yy les paramètres sont utilisés pour spécifier la position de la voiture.
le largeur et la taille déterminer les dimensions du corps principal de la voiture. le taille de roue Le paramètre est utilisé pour spécifier le rayon des roues. Il n’est pas nécessaire de recourir à une fonction de rappel car le type de carrosserie nécessaire pour créer une voiture est prédéterminé..
Accentsconagua
var car = Composites.car (190, 100, 100, 45, 30); $ ('. force'). sur ('clic', fonction () Body.applyForce (car.bodies [0], x: car.bodies [0] .position.x, y: car.bodies [0 ] .position.y, x: 0.5, y: 0););Vous pouvez utiliser le chaîne (composite, xOffsetA, yOffsetA, xOffsetB, yOffsetB, options) function dans Matter.js pour chaîner tous les corps d’un composite donné en utilisant des contraintes. Les paramètres de décalage dans la fonction permettent de déterminer la position relative des contraintes reliant différentes cases.
Vous aurez également besoin de contraintes supplémentaires pour suspendre la chaîne à un endroit du monde. Voici le code pour créer une chaîne et la suspendre au plafond de notre monde.
var box = Composites.stack (500, 80, 3, 1, 10, 0, fonction (x, y) return Bodies.rectangle (x, y, 50, 40);); var chain = Composites.chain (cases, 0.5, 0, -0.5, 0, rigidité: 1); Composite.add (cases, Contrainte.create (corpsA: cases.bodies [0], point B: x: 500, y: 15, rigidité: 0.8));
Les boîtes de notre chaîne ont été créées en utilisant le empiler() fonction que vous avez appris plus tôt. Les contraintes créées par le chaîne() la fonction a une rigidité de 1.
Cela empêche la longueur de la corde entre les différentes boîtes de changer. La contrainte supplémentaire que nous avons créée ici maintient nos boîtes suspendues au plafond.
Voici une démo avec une voiture et la chaîne créée à partir du code ci-dessus. Vous pouvez déplacer la voiture en avant et en arrière à l’aide des boutons orange. Chaque clic applique une force au centre de la première roue, déplaçant ainsi toute la voiture.
Un corps souple est semblable à une pile, avec deux différences majeures. Les éléments individuels du corps mou sont liés par des contraintes, et un corps mou ne peut avoir que des cercles comme éléments constitutifs. Vous pouvez considérer qu'un corps souple est un croisement entre un maillage et une pile. Créer un corps souple est aussi simple que d'appeler softBody (xx, yy, colonnes, lignes, colGap, rowGap, crossBrace, pRadius, pOptions, cOptions) avec les valeurs de paramètre appropriées.
Vous connaissez déjà les six premiers paramètres de la fonction. le crossBrace paramètre est une valeur booléenne qui détermine si les accolades doivent être rendues ou non. le pRadius paramètre détermine le rayon des cercles et le les options paramètre peut être utilisé pour contrôler d'autres propriétés des particules, telles que la masse et l'inertie.
le options Ce paramètre spécifie diverses options pour les contraintes qui lient les particules entre elles. Le code suivant créera un corps souple pour notre monde Matter.js.
var particuleOptions = friction: 0.05, frictionStatic: 0.1, restituer: visible: true; var constraintOptions = render: visible: false; var softBody = Composites.softBody (450, 200, 10, 5, 0, 0, true, 15, particleOptions, constraintOptions);
Créer un berceau de Newton est également très simple en utilisant le logiciel intégré newtonsCradle (xx, aa, nombre, taille, longueur) une fonction. le nombre paramètre détermine le nombre de balles dans le berceau. le Taille paramètre détermine leur rayon, et le longueur Ce paramètre détermine la longueur de la corde à laquelle les balles sont attachées. La bibliothèque met à zéro les valeurs de restitution et de friction afin qu’elles puissent continuer leur mouvement pendant une longue période..
Le code suivant crée le berceau et déplace la première balle vers une position plus élevée afin qu’elle ait une certaine vélocité lorsqu’elle tombe et frappe d’autres balles. La position spécifiée par le Traduire() la fonction est relative à la position actuelle du corps. Toutes ces fonctions et propriétés du Corps module ont été discutés plus en détail dans le précédent tutoriel de la série.
var berceauA = Composites.newtonsCradle (200, 50, 5, 20, 250); Body.translate (cradleA.bodies [0], x: -100, y: -100);
Maintenant que vous avez appris à créer différents types de corps composites, il est temps de connaître les différentes méthodes et propriétés disponibles dans le module Composite pour manipuler ces composites. Vous pouvez utiliser rotation (composite, rotation, point, [récursif = vrai]), scale (composite, scaleX, scaleY, point, [récursif = vrai]) et traduire (composite, translation, [recursive = true]) faire pivoter, redimensionner et traduire tout composite. Ces fonctions sont très similaires à leurs homologues du module Body.
Vous pouvez également ajouter ou supprimer un ou plusieurs corps, contrainte (s) et composite (s) d'un composite donné à l'aide de la commande ajouter (composite, objet) et remove (composite, objet, [deep = false]) fonctions respectivement. Si vous souhaitez déplacer des corps d’un composite à un autre, vous pouvez le faire avec l’aide du move (compositeA, objets, compositeB) une fonction. Cette fonction va déplacer les objets donnés du composite A au composite B.
Si vous souhaitez accéder à tous les corps, composites et contraintes qui sont des enfants directs du composite donné, vous pouvez utiliser le corps composites, composites.composites et contraintes composites propriétés pour avoir accès à tous sous la forme d'un tableau.
Nous avons déjà vu comment utiliser le corps propriété de traduire une balle du berceau de Newton vers la gauche et d’appliquer une force sur la roue de notre composite automobile. Une fois que vous avez une référence à des corps individuels à partir du composite, vous pouvez utiliser toutes les méthodes et propriétés du module Corps pour les manipuler..
Dans ce tutoriel, vous avez appris à créer des composites complexes à l'aide des modules Composite et Composites de Matter.js. Vous avez également découvert différentes méthodes et propriétés que vous pouvez utiliser pour manipuler ces composites..
Cette série visait à inciter les utilisateurs à utiliser la bibliothèque Matter.js de manière conviviale pour les débutants. Gardant cela à l'esprit, nous avons présenté les fonctions et propriétés importantes des modules les plus courants de la bibliothèque..
Matter.js contient également de nombreux autres modules, que nous avons brièvement décrits dans le premier tutoriel de la série. Si vous voulez utiliser pleinement cette bibliothèque, vous devriez lire la documentation de tous ces modules sur le site officiel.
Si vous avez utilisé Matter.js dans l’un de vos projets, veuillez nous faire part de votre expérience dans les commentaires..
