{"id":7400,"date":"2020-12-28T14:26:46","date_gmt":"2020-12-28T13:26:46","guid":{"rendered":"https:\/\/blog.via-internet.de\/?p=7400"},"modified":"2020-12-28T14:26:46","modified_gmt":"2020-12-28T13:26:46","slug":"angular-working-with-matterjs","status":"publish","type":"post","link":"https:\/\/via-internet.de\/blog\/2020\/12\/28\/angular-working-with-matterjs\/","title":{"rendered":"Angular | Getting Started with matter.js"},"content":{"rendered":"\n

Matter.js<\/a><\/em> is a 2D rigid body physics engine for the web written in JavaScript.<\/p>\n\n\n\n

Creating an angular app with pages using matter.js<\/strong> is easy. Complete code is here<\/a>.<\/p>\n\n\n\n

For a more details post, please take a look at here: Angular | Working with matter.js<\/a><\/p>\n\n\n\n

Create starter app<\/h4>\n\n\n\n

First, create a default angular app with ng new.<\/p>\n\n\n\n

\u276f ng new app-starter\n? Do you want to enforce stricter type checking and stricter bundle budgets in the workspace?\n  This setting helps improve maintainability and catch bugs ahead of time.\n  For more information, see https:\/\/angular.io\/strict Yes\n? Would you like to add Angular routing? Yes\n? Which stylesheet format would you like to use? SCSS<\/pre>\n\n\n\n
cd app-starter<\/pre>\n\n\n\n
Add matter.js<\/h4>\n\n\n\n
Matter.js<\/strong> is a javascript library, so we have to add the corresponding files to our angular app. We will use the npm module matter-js<\/strong>.<\/p>\n\n\n\n
npm install matter-js<\/pre>\n\n\n\n
We also add the type definitions, so that Visual Studio code knows how to check our code.<\/p>\n\n\n\n
npm install @types\/matter-js --save-dev <\/pre>\n\n\n\n
Clear content of app.component.html<\/h4>\n\n\n\n
To keep out demopage clean, we will remove unnecessary code from app.component.html.<\/p>\n\n\n\n
Remove all of the content and just keep the last line<\/p>\n\n\n\n
<router-outlet><\/router-outlet><\/pre>\n\n\n\n
Create pager for MatterJS democode<\/h4>\n\n\n\n
We will use a seperate Angular component\/page for our matter.js<\/strong> demo<\/p>\n\n\n\n
 ng generate component pages\/Demo<\/pre>\n\n\n\n
app-routing.module.ts<\/h4>\n\n\n\n
Next, we add a routing for our demopage.<\/p>\n\n\n\n
import { NgModule } from '@angular\/core';\nimport { Routes, RouterModule } from '@angular\/router';\nimport { DemoComponent } from '.\/pages\/demo\/demo.component';\n\nconst routes: Routes = [\n  { path: 'demo', component: DemoComponent },\n  { path: '',   redirectTo: '\/demo', pathMatch: 'full' },\n  { path: '**', redirectTo: '\/demo', pathMatch: 'full' },\n];\n\n@NgModule({\n  imports: [RouterModule.forRoot(routes)],\n  exports: [RouterModule],\n})\nexport class AppRoutingModule {}<\/pre>\n\n\n\n
Start App<\/h4>\n\n\n\n
Ready to take a first look at our app.<\/p>\n\n\n\n
yarn start<\/pre>\n\n\n\n
demo.component.scss<\/h4>\n\n\n\n
Now, we do a little styling<\/p>\n\n\n\n
.demo {\n    background-color: lightgray;\n    border: 4 dotted black;\n}<\/pre>\n\n\n\n
demo.component.ts<\/h4>\n\n\n\n
And finally the matter.js<\/strong> code. Starting with the default imports for a angular app<\/p>\n\n\n\n
import { Component, OnInit } from '@angular\/core'<\/pre>\n\n\n\n
Next, we import the required matter.js<\/strong> parts<\/p>\n\n\n\n
import { Engine, Runner, Render, World, Constraint, MouseConstraint, Bodies} from 'matter-js'<\/pre>\n\n\n\n
Following the definition for our DemoComponent<\/strong><\/p>\n\n\n\n
@Component({\n\tselector: 'app-minimal',\n\ttemplateUrl: '.\/demo.component.html',\n\tstyleUrls: ['.\/demo.component.scss'],\n})\nexport class DemoComponent implements OnInit {\n\tconstructor() {}\n\n\tngOnInit() {\n\t\tthis.demo()\n\t}\n\n\tdemo() {\n\t}\n}<\/pre>\n\n\n\n
The main code of out demo will be in the function demo()<\/strong><\/p>\n\n\n\n
\tdemo() {\n\t\tvar engine = Engine.create()\n\t\tvar render = Render.create({\n\t\t\telement: document.body,\n\t\t\tengine: engine,\n\t\t\toptions: {\n\t\t\t\twidth: 800,\n\t\t\t\theight: 400,\n\t\t\t\twireframes: false,\n\t\t\t},\n\t\t})\n\n\t\tvar boxA = Bodies.rectangle(400, 200, 80, 80)\n\t\tvar ballA = Bodies.circle(380, 100, 40, {})\n\t\tvar ballB = Bodies.circle(460, 10, 40, {})\n\t\tvar ground = Bodies.rectangle(400, 380, 810, 60, {\n\t\t\tisStatic: true,\n\t\t})\n\n\t\tWorld.add(engine.world, [boxA, ballA, ballB, ground])\n\n\t\tEngine.run(engine)\n\t\tRender.run(render)\n\t}\n}<\/pre>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
Matter.js is a 2D rigid body physics engine for the web written in JavaScript. Creating an angular app with pages using matter.js is easy. Complete code is here. For a more details post, please take a look at here: Angular | Working with matter.js Create starter app First, create a default angular app with ng new. Add matter.js Matter.js is a javascript library, so we have to add the corresponding files to our angular app. We will use the npm module matter-js. We also add the type definitions, so that Visual Studio code knows how to check our code. Clear content of […]<\/p>\n","protected":false},"author":1,"featured_media":7410,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[90,47],"tags":[],"class_list":["post-7400","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","category-matter-js"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/7400","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/comments?post=7400"}],"version-history":[{"count":0,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/7400\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/media?parent=7400"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/categories?post=7400"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/tags?post=7400"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}