2

I am new to using JS scripts and extensions, and I am currently experimenting with smaller projects to learn more about the language. I am currently working on a project for a university assignment and I am using Matter.js and p5.js libraries to create a simulation of spheres colliding with each other and bouncing off walls.

I have created a number of circles using Matter.js and enabled mouse interactions with them using MouseConstraint.

However, when I drag a sphere too quickly, it often goes off the edge of the canvas and disappears. I've tried adjusting the restitution of the spheres as well as the walls and ground of the simulation and the parameters of MouseConstraint, but the issue still persists.

Can anyone suggest a solution or offer any advice on what might be causing this issue?

let engine;
let world;
let spheres = [];

function setup() {
  const canvas = createCanvas(windowWidth, windowHeight);

  engine = Matter.Engine.create();
  world = engine.world;
  world.gravity.y = 0.8;

  const radius = 25;
  const distanceBetweenSpheres = 2 * radius + 50; // adjust the space between spheres
  const totalWidth = 2 * distanceBetweenSpheres;

  for (let i = 0; i < 3; i++) {
    const x = (width - totalWidth) / 2 + i * distanceBetweenSpheres;
    const y = 50;
    spheres.push(new Sphere(x, y, radius));
  }

  const ground = Matter.Bodies.rectangle(width / 2, height + 25, width, 50, { isStatic: true });
  Matter.World.add(world, ground);

  // Create visible walls


  const wallOptions = { isStatic: true, render: { fillStyle: '#ED1C24' } };
  const leftWall = Matter.Bodies.rectangle(0, height / 2, 20, height, wallOptions);
  const rightWall = Matter.Bodies.rectangle(width, height / 2, 20, height, wallOptions);
  const ceiling = Matter.Bodies.rectangle(width / 2, 0, width, 20, wallOptions);
  
  
  Matter.World.add(world, [leftWall, rightWall, ceiling]);
  

  // Enable mouse interactions
  const mouse = Matter.Mouse.create(canvas.elt);
  const mouseParams = {
    mouse: mouse,
    constraint: {
      stiffness: 0.1,
      render: {
        visible: false,
      },
    },
  };

  const mouseConstraint = Matter.MouseConstraint.create(engine, mouseParams);
  Matter.World.add(world, mouseConstraint);

  // Make the canvas scalable
  canvas.elt.addEventListener('mousedown', (e) => e.preventDefault());
}



function draw() {
  background(240);
  Matter.Engine.update(engine);

  for (let sphere of spheres) {
    sphere.show();
  }
}

class Sphere {
  constructor(x, y, r) {
    this.body = Matter.Bodies.circle(x, y, r, { restitution: 0.5 });
    this.r = r;
    Matter.World.add(world, this.body);
  }

  show() {
    const pos = this.body.position;
    push();
    translate(pos.x, pos.y);
    ellipse(0, 0, this.r * 2);
    pop();
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.19.0/matter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.min.js"></script>
ggorlen
  • 44,755
  • 7
  • 76
  • 106
florizer
  • 43
  • 4
  • Related: [Prevent force-dragging bodies through other bodies with MatterJS](https://stackoverflow.com/questions/59321773/prevent-force-dragging-bodies-through-other-bodies-with-matterjs). Have you tried making your walls significantly thicker? – ggorlen Apr 13 '23 at 18:41
  • Thanks for your suggestion, @ggorlen. However, I have already tried increasing the thickness of the walls to 240, and even with that, I still experience the issue when abruptly moving the sphere and yeeting that sphere against one of the walls or colliding it with the other spheres. Do you have any other suggestions or ideas that might help solve this problem? – florizer Apr 13 '23 at 19:06
  • I'd start with the linked suggestions. I'd have to look into it, but I don't recall having any particular idea. I'd probably try to design the project so it can't be easily done, maybe by changing how the mouse interacts with the bodies. If it's just for a school project I'd probably not worry about it, because (as the linked thread shows), it's potentially difficult to solve. – ggorlen Apr 13 '23 at 19:22

0 Answers0