Esempio d'uso minimo di Matter.js

    let cube;    // oggetto che cade
let ball;    // oggetto che rimbalza
let ground;  // piano statico

function setup() {
    createCanvas( 300, 300 );

    let engine = Matter.Engine.create();

    cube = Matter.Bodies.rectangle( 120,0, 30,30 );
    ball = Matter.Bodies.circle( 180,0, 18, {restitution:1.0} );
    ground = Matter.Bodies.rectangle( 150,260, 200,20, {isStatic:true} );

    Matter.World.add( engine.world, [ball, cube, ground] );

    Matter.Engine.run(engine);
}

function draw() {
    background(220);

    rectMode( CENTER );
    square( cube.position.x, cube.position.y, 30 );
    circle( ball.position.x, ball.position.y, 36 );
    rect( ground.position.x, ground.position.y, 200, 20 );
}
  

  let engine = Matter.Engine.create();

Inizializzazione della libreria.

  square = Matter.Bodies.rectangle( 120,0, 30,30 );
circle = Matter.Bodies.circle( 180,0, 18, {restitution:1.0} );
ground = Matter.Bodies.rectangle( 150,260, 200,20, {isStatic:true} );

Creazione degli oggetti con preimpostazione dei parametri per far rimbalzare circle e rendere immobile ground.

  Matter.World.add( engine.world, [circle, square, ground] );

Aggiunta degli oggetti al “mondo” (engine.world) che gestirà le interazioni fra loro e con lo “ambiente”.

  Matter.Engine.run(engine);

Avvio degli aggiornamenti automatici delle proprietà di tutti gli oggetti del “mondo”.

Per poter interagire con gli oggetti attraverso il mouse è necessario sostituire le prime due righe del setup():

      createCanvas( 300, 300 );
    let engine = Matter.Engine.create();

con:

      let canvas = createCanvas( 300,300 );
    let engine = Matter.Engine.create();
    let canvasM = Matter.Mouse.create( canvas.elt );
    let mouseC = Matter.MouseConstraint.create(engine,{mouse:canvasM});
    Matter.World.add( engine.world, mouseC );

Strutturazione dei file:

• CARTELLA-SKETCH
  • libs
    • p5.min.js
    • matter.min.js
  • index.html
  • sketch.js