Page Title

Matter.js - an exciting library

A first introduction dedicated to ( ͡⚆ ͜ʖ ͡⚆)

Introduction

I came across this cool library through this program.
I was sure I had to study it and learn animating physics.
A good starting place seemed to be here.

The idea

The general idea is to create a world with objects of its own phyiscal constants like friction.

Imagine, someone has knowledge about all that physical properties of each object and moves the objects of the world according to them. This is the Engine.
Someone else should show the current state to us. This is the Renderer.
Apropos objects --- they are called bodies
Usually one body is the surface of the world. A rectangle might do it. It should be below other objects and static... at least for the first created worlds.

Implementation

I you want to play with Matter.js on sololearn, the easiest would be to link the source.
src="https://code.sololearn.com/W34ytr86PioV/#html"

Engine,Render, World and Bodies

As you play Matter.js on Sololearn, the code should be
window.onload = function(){ mattercode }
Since Matter is written in OOP, we declare and initialize our protagonists within mattercode:

var Engine = Matter.Engine,

    Render = Matter.Render,

    World = Matter.World,

    Bodies = Matter.Bodies;

     

var engine = Engine.create();

 

var render = Render.create({

                element: document.body,

                engine: engine,

                options: {

                    width: 800,

                    height: 400,

                    wireframes: false

                }

             });



var boxA = Bodies.rectangle(400, 200, 80, 80);

var ballA = Bodies.circle(380, 100, 40, 10);

var ballB = Bodies.circle(460, 10, 40, 10);

var ground = Bodies.rectangle(400, 380, 810, 60, { isStatic: true });

Okay, we have them all together. The Renderer knows where to render, we have some Bodies and the engine. hey - where is our world?
We give her Bodies and the Engine and after the engine and the renderer begin to work

World.add(engine.world, [boxA, ballA, ballB, ground]);

 
Engine.run(engine);

Render.run(render);

Exploring Matter.js

Here the very first idea of Matter is demonstrated.
Maybe remixing a basic program like this or Haris Version be a good beginning.
For delving deeper, one should study examples and the API. You find them http://brm.io/matter-js/index.html
One can add collision detection, mouse-events as well as spawn new bodies. Assign properties to bodies to modify their shape or physical behaviour. Just study the examples and let you inspire for your own world.

Matter - a cool physical engine