Share
I serieens tredje handledning lärde du dig om olika metoder och egenskaper hos kroppsmodulen i Matter.js. Kroppsmodulen gör att du kan manipulera enkla kroppar som cirklar, rektanglar och trapezier. Matter.js har också andra moduler som hjälper dig att skapa och manipulera några komplexa men gemensamma kompositkroppar som bilar, kedjor, pyramider, staplar och mjuka kroppar.
Alla dessa kompositer och metoderna för att manipulera dem finns tillgängliga i Sammansatt och Composites moduler i Matter.js. I denna handledning börjar du med att lära dig om olika kompositer som pyramider och bilar etc. som kan skapas med hjälp av Composites modul. Därefter kommer vi att gå över några viktiga metoder och egenskaper som finns tillgängliga i Sammansatt modul.
En stack och en pyramid är båda mycket lika varandra. En stapel kan skapas med hjälp av stapeln (xx, yy, kolumner, rader, columnGap, rowGap, callback) fungera. På samma sätt kan du skapa en pyramid med hjälp av pyramid (xx, yy, kolumner, rader, columnGap, rowGap, callback) fungera. Som du kan se är alla parametrar desamma i båda fallen. Faktum är att pyramidbildningen härledas från stapeldannelsen.
Namnen på alla parametrar är självklarande. De xx och yy Parametrar som används i denna funktion används för att ange utgångspunkten för kompositmaterialet. De kolonner och rader parametrar bestämmer antalet kolumner och rader i kompositmaterialet. Klyftan mellan olika rader och kolumner kan styras med hjälp av columnGap och rowGap parametrar.
Under inverkan av gravitationen, den rowGap vanligtvis försvinner i de flesta fall utan att ändra kompositen. Ibland kan den enskilda kroppens resulterande moment flytta kropparna under dem. Detta kan ändra formen på kompositmaterialet.
Återuppringningsfunktionen används för att skapa kroppar som kan arrangeras i antingen en rutanordning eller ett pyramidarrangemang baserat på den använda funktionen. Det innebär att du kan använda den för att skapa en stapel eller pyramid med rektangulära lådor eller trapezoider. Du bör komma ihåg att en cirkel gör arrangemangen instabil. Här är koden för att skapa en stapel rektanglar:
var stack = Composites.stack (550, 100, 5, 3, 0, 0, funktion (x, y) returnera Bodies.rectangle (x, y, 40, 20, render: fillStyle: 'orange', strokeStyle : 'svart'););
Du kan göra återuppringningsfunktionen så komplex som du önskar. I det här fallet har jag använt de renderingsalternativ som vi lärde oss om i kroppsmodulens handledning för att skapa bara orange rektanglar med svarta konturer.
Här är en del mycket liknande kod för att skapa pyramidformer i Matter.js:
var pyramid = Composites.pyramid (0, 220, 11, 6, 0, 0, funktion (x, y) returnera Bodies.rectangle (x, y, 30, 30, render: fillStyle: 'cornflowerblue', strokeStyle : 'svart'););
När du börjar skapa många pyramider med olika parametrar märker du att antalet rader som skapats är ibland mindre än antalet rader du angav. Detta beror på att biblioteket använder följande formel för att beräkna antalet rader:
Math.min (rader, Math.ceil (kolumner / 2))
Du kan noggrant placera en stapel eller en annan pyramid över en pyramid för att skapa intressanta mönster. Till exempel kan du placera en mindre pyramid över den röda för att skapa en komplett pyramid med två färger.
En bil i Matter.js är en struktur bestående av två hjul och en kropp. Hjulen är skapade med en friktion av 0,8 och densitet lika med 0,01. Du kan skapa en bil med funktionen bil (xx, yy, bredd, höjd, Hjuldiameter). De xx och yy Parametrar används för att ange bilens position.
De bredd och höjd bestämma dimensionerna för bilens huvudkropp. De hjul storlek Parametern används för att specificera hjulens radie. Det finns inget behov av en återuppringningsfunktion eftersom den typ av kroppar som behövs för att skapa en bil är förutbestämd.
Accentsconagua
var car = kompositer.car (190, 100, 100, 45, 30); $ ('. force') på ('klick', funktion () Body.applyForce (car.bodies [0], x: car.bodies [0] .position.x, y: car.bodies [0 ] .position.y, x: 0.5, y: 0););Du kan använda kedja (komposit, xOffsetA, yOffsetA, xOffsetB, yOffsetB, alternativ) funktion i Matter.js att kedja alla kroppar i en given komposit tillsammans med hjälp av begränsningar. Förskjutningsparametrarna i funktionen används för att bestämma det relativa läget för de begränsningar som förbinder olika lådor.
Du kommer också behöva ytterligare begränsningar för att hänga kedjan från en punkt i världen. Här är koden för att skapa en kedja och hänga den till taket i vår värld.
var boxar = Composites.stack (500, 80, 3, 1, 10, 0, funktion (x, y) returnera Bodies.rectangle (x, y, 50, 40);); var-kedja = Composites.chain (lådor, 0,5, 0, -0,5, 0, styvhet: 1); Composite.add (rutor, Constraint.create (bodyA: boxes.bodies [0], punktB: x: 500, y: 15, styvhet: 0,8));
Lådorna i vår kedja har skapats med hjälp av stack() funktion som du lärde dig om tidigare. De begränsningar som skapas av kedja() funktion har en styvhet av 1.
Detta förhindrar att repets längd mellan olika lådor förändras alls. Den ytterligare begränsningen som vi skapat här håller våra lådor hängande från taket.
Här är en demo med en bil och kedjan skapad från ovanstående kod. Du kan flytta bilen framåt och bakåt med hjälp av orange knapparna. Varje klick applicerar en kraft i mitten av förstahjulet och flyttar hela bilen.
En mjuk kropp liknar en stack, med två stora skillnader. De enskilda elementen i den mjuka kroppen hålls samman av begränsningar, och en mjuk kropp kan bara ha cirklar som dess beståndsdelar. Du kan överväga en mjuk kropp som ett kors mellan ett nät och en stapel. Att skapa en mjuk kropp är lika enkel som att ringa softBody (xx, yy, kolumner, rader, colGap, rowGap, krysstag, pRadius, pOptions, cOptions) med lämpliga parametervärden.
Du är redan bekant med de första sex parametrarna för funktionen. De krysstag parametern är ett booleskt värde som bestämmer om cross braces ska göras eller inte. De pRadius Parametern bestämmer cirkelns radie och pOptions Parametern kan användas för att styra andra egenskaper hos partiklarna, som massa och tröghet.
De cOptions Parametern anger olika alternativ för de begränsningar som binder partiklarna tillsammans. Följande kod kommer att skapa en mjuk kropp för vår Matter.js-värld.
var particleOptions = friktion: 0.05, friktionStatic: 0.1, render: visible: true; var constraintOptions = render: synlig: false; var softBody = Composites.softBody (450, 200, 10, 5, 0, 0, true, 15, particleOptions, constraintOptions);
Att skapa en Newtons vagga är också väldigt enkelt med hjälp av den inbyggda newtonsCradle (xx, yy, antal, storlek, längd) fungera. De siffra Parametern bestämmer antalet bollar i vaggan. De storlek Parametern bestämmer deras radie och längd Parametern bestämmer längden på repet som bollarna är fästa på. Biblioteket ställer in återställnings- och friktionsvärdena till noll så att de kan fortsätta sin rörelse under lång tid.
Följande kod skapar vaggan och flyttar den första bollen till en högre position så att den har viss hastighet när den faller ner och slår andra bollar. Den position som anges av Översätt() funktionen är i förhållande till kroppens nuvarande position. Alla dessa funktioner och egenskaper hos Kropp modulen har diskuterats mer i detalj i serieens tidigare handledning.
var cradleA = Composites.newtonsCradle (200, 50, 5, 20, 250); Body.translate (cradleA.bodies [0], x: -100, y: -100);
Nu när du har lärt dig hur du skapar olika typer av sammansatta kroppar, är det dags att lära dig om olika metoder och egenskaper som finns tillgängliga i kompositmodulen för att manipulera dessa kompositer. Du kan använda rotera (komposit, rotation, punkt, [rekursiv = true]), skala (komposit, scaleX, scaleY, punkt, [rekursiv = true]) och late (komposit, översättning, [rekursiv = true]) att rotera, skala och översätta någon komposit. Dessa funktioner liknar deras kroppsmodulets motsvarigheter.
Du kan också lägga till eller ta bort en eller flera kropp (er), begränsningar och komposit (er) från en given komposit med hjälp av lägga (komposit, objekt) och ta bort (komposit, objekt, [djup = false]) funktioner respektive. Om du vill flytta några kroppar från en komposit till en annan, kan du göra det med hjälp av flytta (compositeA, objekt, compositeB) fungera. Denna funktion flyttar de givna objekten från komposit A till komposit B.
Om du någonsin vill komma åt alla kroppar, kompositer och begränsningar som är direkta barn i den givna kompositen, kan du använda composite.bodies, composite.composites och composite.constraints egenskaper för att få tillgång till dem alla i form av en array.
Vi har redan sett hur man använder kroppar egendom att översätta en boll från Newtons vagga till vänster och tillämpa en kraft på ratten i vår bilkomposit. När du har en hänvisning till enskilda organ från kompositmaterialet kan du använda alla metoder och egenskaper hos kroppsmodulen för att manipulera dem.
I den här handledningen lärde du dig att skapa några komplexa kompositer med hjälp av Composite and Composites-modulerna i Matter.js. Du lärde dig också om olika metoder och egenskaper som du kan använda för att manipulera dessa kompositer.
Denna serie syftade till att få folk att börja med Matter.js-biblioteket på ett nybörjarevänligt sätt. Med tanke på detta har vi täckt viktiga funktioner och egenskaper hos de vanligaste modulerna i biblioteket.
Matter.js har också många andra moduler, som vi kort diskuterat i serieens första handledning. Om du vill utnyttja detta bibliotek fullt ut bör du läsa dokumentationen av alla dessa moduler på den officiella webbplatsen.
Om du har använt Matter.js i något av dina projekt, berätta om din erfarenhet i kommentarerna.
