Matters.js - Obstacles not working

p5.js Libraries
1

Hi!

I’m following the matter.js for P5.js 'Coding Train tutorials (I’m at the second video) and I’m completely stuck with a bug.
I don’t know if some of you are familiar with this library and could help me?

I’m setting the different “grounds” or boundaries". At the moment there’s only one in my array.

It’s drawn on the screen but the objects are not falling on it. They fall and bounce on another ground, which is invisible on the screen! Here is my code, if someone would have an idea, it would be great!

// module aliases
let Engine = Matter.Engine,
    Runner = Matter.Runner,
    Bodies = Matter.Bodies,
    Composite = Matter.Composite;

let engine;
let world;
let shapes = [];
let runner;
let boundaries = [];

function setup() {
  createCanvas(400, 400);
  engine = Engine.create();
  world = engine.world;
  runner = Runner.create();
  Runner.run(runner, engine);
  
  boundaries.push(new Boundary (200, height, width, 30, 0.4));
  
}   
  
function mousePressed (){
  shapes.unshift (new Shape (mouseX, mouseY, 30, 30 ));
  }

function draw() {
  background(247, 253, 190);
   
  for (let i = 0; i < shapes.length; i++){
  shapes[i].show (); 
                                     
  }
  for (let i =0; i < boundaries.length; i++){
   boundaries[i].show(); 
  }
 }

class Shape {
  constructor (x,y, h,w){
    let options = {
     friction : 0.2,
     restitution : 1,
   } 
  this.h = h;
  this.w = w;
  this.body = Bodies.rectangle ( x,y,h,w, options);
   
  Composite.add(world, (this.body));
}
  
  show() {
    let pos = this.body.position;
    let angle = this.body.angle;
    push();
    translate (pos.x, pos.y)
    rectMode(CENTER);
    rotate (angle); 
    stroke (0);
    fill (165, 212,249)
    rect  (0,0, this. w, this.h);
    pop()   
  }
}

class Boundary {
  constructor (x,y, h, w, a){
    let options = {
     friction : 0.2,
     restitution : 1,
     isStatic : true,
     angle : a,  
   } 
 
  this.body = Bodies.rectangle (x,y,h,w, options);  
  this.h = h;
  this.w = w;
     
  Composite.add(world, (this.body));
}
  
  show() {
    let pos = this.body.position;
    let angle = this.body.angle;
    push();
    translate (pos.x, pos.y)
    rotate (angle); 
    rectMode(CENTER);
    stroke (0);
    fill (0)
    rect  (-50,0, this. w, this.h);
    pop()   
  }
}

Thanks !

2

I found the solution, it seems it came from the fact I had switched the height and width parameters of the obstacles…

1 Like