Impossible d'animer matter.js

Question

J'essayais de copier un exemple sur le site Web matter.js, et je n'arrive pas à le faire fonctionner. J'ai essayé de tracer mon code même que les projets qui ont fait un travail, mais rien ...

var Engine = Matter.Engine, 
    World = Matter.World, 
    Bodies = Matter.Bodies; 

    var world; 

    var engine; 
    var particles=[]; 

function Particles(x,y,r){ 
    this.x=x; 
    this.y=y; 
    this.d=r*2; 
    this.body=Bodies.circle(x,y,r); 
    World.add(world,this.body); 
    this.disp=function(){ 
    fill(255); 
    ellipse(x,y,this.d, this.d); 
    } 

} 



function setup() { 
createCanvas(600,400); 
engine = Engine.create(); 
world=engine.world; 
Engine.run(engine); 
rect1=Bodies.rectangle(width/2,height/2,10,150); 
World.add(world,rect1); 



} 

function mousePressed(){ 
    particles.push(new Particles(mouseX,mouseY,5)); 
} 

function draw() { 
    background(51); 

Engine.update(engine); 
    push(); 
    rectMode(CENTER); 
    rect(width/2,height/2,10,150); 
    pop(); 

    for (var i = 0; i < particles.length; i++) { 
    particles[i].disp(); 



}} 

Donc, fondamentalement, le problème est que les particules que je peux créer avec la souris ne se déplacent pas (aswell comme le rectangle), mais ils sont référencés dans world.bodies (quand j'utilise la console en chrome). Je ne sais pas pourquoi ça ne marche pas ... J'utilise p5.js comme un environnement javascipt (c'est un peu comme Processing)

Answer 1

Veuillez essayer de formater correctement votre code avant de le poster. Au moins utiliser une indentation appropriée.

Mais votre problème est cette ligne:

ellipse(x,y,this.d, this.d); 

Chaque fois que vous dessinez une particule, vous utilisez les variables x et y d'origine passée dans le constructeur. Vous ne changez jamais ces valeurs, donc vos particules ne bougent jamais.

Vous utilisez un moteur physique, mais vous n'obtenez jamais la position des particules du moteur physique. Pour résoudre votre problème, vous devez consulter la documentation de la bibliothèque matter.js. En particulier, le body documentation contient des informations sur le champ body.position, qui contient la position du corps tel qu'il est mis à jour par le moteur physique.

ellipse(this.body.position.x, this.body.position.y, this.d, this.d);