matter-js: Unexpected loss of energy in frictionless perfectly elastic setting

Adding this line of code seems resolve the issue.

Matter.Resolver._restingThresh = 0.001;

@karimshalapy thanks for sharing!

This is still on my list of improvements I’d like to make (quite a long list though!)

For now my suggestions are the following as discussed earlier in the thread:

• prevent friction body.friction = 0 and body.frictionAir = 0
• prevent rotation body.inertia = Infinity
• increase or decrease body.slop
• use a small fixed timestep Engine.update(engine, 1) and call multiple updates per frame
• use more iterations engine.positionIterations = 20 and engine.velocityIterations = 20
• manually set a constant velocity on every frame
  Body.setVelocity(body, Vector.mult(Vector.normalise(body.velocity), speed))

Hi! Sorry for gravedigging.

This still seems to be an issue. I put multiple balls in a box (no friction, infinite inertia) and calculate the total kinetic energy over time. I initialize all of them by applyForce. There are 3 major problems. 1. Energy loss over time, 2. Sticky walls, 3. reflection angle on walls not always correct (tendency towards the wall). If the E-loss would just be a small loss per collision it would be fine, but it seems to distort the collision angle as well. In case a wall is sticky, I checked on the body.velocity x/y ratio and it was still the same (ignoring that one component was 0 since it stuck in the wall).

With the Workaround of @Menowa1709 the energy is conserved, walls are not sticky and the angle looks fine. Here is a fiddle where the fix can be switched on/off on line 77 https://jsfiddle.net/dediggefedde/3n6whja5/22/

The problem of the workaround is ignoring inertia and friction if it is switched on. also momentum transfer based on mass is not working. (In my code I made a small error setting all speeds to the first ones, but even splitting them does not fix this. One would need to calculate the e-transfer by hand)

I wanted to do a collision simulation, and a Brownian motion simulation but the energy loss in a fully elastic world is recognizable and the system becomes idle fairly quickly especially when a ball hits a stationary wall. In order to get the desired outcome, I had to implement the physics logic in the “collisionStart” event on the engine.

And here’s what I did to achieve the Brownian motion…

Events.on(engine, "collisionStart", e => {
        e.pairs.forEach(pair => {
            const { bodyA, bodyB } = pair
            if (bodyA.label === "wallH") Body.setVelocity(bodyB, { x: bodyB.velocity.x, y: -bodyB.velocity.y }) //Horizontal wall collision
            else if (bodyB.label === "wallH") Body.setVelocity(bodyA, { x: bodyA.velocity.x, y: -bodyA.velocity.y }) //Horizontal wall collision
            else if (bodyA.label === "wallV") Body.setVelocity(bodyB, { x: -bodyB.velocity.x, y: bodyB.velocity.y }) //Vertical wall collision
            else if (bodyB.label === "wallV") Body.setVelocity(bodyA, { x: -bodyA.velocity.x, y: bodyA.velocity.y }) //Vertical wall collision
            else { //Two balls collision
                const vAXBefore = bodyA.velocity.x;
                const vBXBefore = bodyB.velocity.x;
                const vAYBefore = bodyA.velocity.y;
                const vBYBefore = bodyB.velocity.y;
                const mA = bodyA.mass
                const mB = bodyB.mass
                const { vAFinal: vAXFinal, vBFinal: vBXFinal } = calcElasticCollision(mA, mB, vAXBefore, vBXBefore)
                const { vAFinal: vAYFinal, vBFinal: vBYFinal } = calcElasticCollision(mA, mB, vAYBefore, vBYBefore)
                if (bodyA.label !== "wall") Body.setVelocity(bodyA, { x: vAXFinal, y: vBXFinal })
                if (bodyB.label !== "wall") Body.setVelocity(bodyB, { x: vAYFinal, y: vBYFinal })
            }
        })
    })

Add some walls

Composite.add(world, [
        Bodies.rectangle(-50, canvasHeight / 2, 50, canvasHeight + 200, {
            label: "wallV",
            isStatic: true,
            friction: 0,
            frictionAir: 0,
            frictionStatic: 0,
            restitution: 1,
            render: { visible: false }
        }),
        Bodies.rectangle(canvasWidth + 50, canvasHeight / 2, 50, canvasHeight + 200, {
            label: "wallV",
            isStatic: true,
            friction: 0,
            frictionAir: 0,
            frictionStatic: 0,
            restitution: 1,
            render: { visible: false }
        }),
        Bodies.rectangle(canvasWidth / 2, -50, canvasWidth + 200, 50, {
            label: "wallH",
            isStatic: true,
            friction: 0,
            frictionAir: 0,
            frictionStatic: 0,
            restitution: 1,
            render: { visible: false }
        }),
        Bodies.rectangle(canvasWidth / 2, canvasHeight + 50, canvasWidth + 200, 50, {
            label: "wallH",
            isStatic: true,
            friction: 0,
            frictionAir: 0,
            frictionStatic: 0,
            restitution: 1,
            render: { visible: false }
        }),
    ])

Then I add balls at random locations and set a random initial velocity to each one.

const balls = Array.from({ length: 100 }, () => Bodies.circle(getRandomNumber(5, canvasWidth - 5), getRandomNumber(5, canvasHeight - 5), 5, {
        render: { fillStyle: "blue" },
        frictionAir: 0,
        friction: 0,
        frictionStatic: 0,
        inertia: Infinity,
        restitution: 1,
    }))
 Composite.add(world, balls)
 balls.forEach(ball => Body.setVelocity(ball, { x: getRandomNumber(-3, 3), y: getRandomNumber(-3, 3) }))

And here are the Helper functions:

const getRandomNumber = (min, max) => Math.random() * (max - min) + min
const calcElasticCollision = (mA, mB, vAInitial, vBInitial) => ({
    vAFinal: (((mA - mB) / (mA + mB)) * vAInitial) + (((2 * mB) / (mA + mB)) * vBInitial),
    vBFinal: (((2 * mA) / (mA + mB)) * vAInitial) + (((mB - mA) / (mA + mB)) * vBInitial)
})

The function calcElasticCollision calculates the final velocity after an elastic collision according to the equations: For more information search Elastic collisions or check the equations for a brief explanation on the wiki here

Doing this will provide you with a fully elastic collision system that never loses energy, this would work with one-dimensional collision too, but too complicated stuff I have no guarantees it’ll work. Anyway, this is my workaround and I hope this helps someone who needed the same thing I did, and I hope this issue is solved and closed soon enough.

Regards,

in beforeUpdate event:

if(ball.speed != 0){
    let speedMultiplier = 11.241098900509593/ball.speed   // 11.241098900509593 == initial (starting) ball speed
    Body.setVelocity(
      ball,
      { x: ball.velocity.x*speedMultiplier, y: ball.velocity.y*speedMultiplier }
    );
  }

I am facing the same issues. I want a very slow body (ball or rectangle does not change what I get) that bounces forever with no friction. I get a body that stops at a wall, if the initial force is very low. I’ve used { inertia: Infinity, inverseInertia: 0, restitution: 1, frictionStatic: 1, frictionAir: 0, friction: 0 }

Any suggestion?

Thanks for the test case. My guess is that at least some of the loss is due to floating point errors (it seems that even box2d has the same issue). There’s an article on energy drift which suggests the same.

My suggestion is to artificially add energy (through velocity or forces) back in over time, which you may be able to do yourself using collision or tick events. But a generic solution for any situation might be difficult.

I was trying something similar to the original poster. Just a ball bouncing on a static body.

var ball = Bodies.circle(100, 250, 50, { inertia: Infinity, restitution: 1, friction: 0, frictionAir: 0, frictionStatic: 0});

Even with inertia set to Infinity, the ball loses energy and bounces closer and closer to the ground, although interestingly never fully stopping. It seemingly bounces forever very close to the ground. Am I missing something?

Here’s some HTML to quickly test this problem… (It’s a slightly modified version of the “Getting Started” Tutorial.)

<!DOCTYPE html>
<html lang="en">

<head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Bounce Test</title>
     <script src="matter.min.js"></script>
</head>

<body>
     <script>
          // module aliases
          var Engine = Matter.Engine,
               Render = Matter.Render,
               World = Matter.World,
               Bodies = Matter.Bodies;

          // create an engine
          var engine = Engine.create();

          // create a renderer
          var render = Render.create({
               element: document.body,
               engine: engine
          });

          // create two boxes and a ground
          var circle = Bodies.circle(400, 200, 80, { restitution: 1, friction: 0, frictionAir: 0, frictionStatic: 0 });
          var square = Bodies.rectangle(200, 200, 40, 40, { restitution: 1, friction: 0, frictionAir: 0, frictionStatic: 0 });
          var polygon = Bodies.polygon(600, 200, 1000, 80, { restitution: 1, friction: 0, frictionAir: 0, frictionStatic: 0 })
          var ground = Bodies.rectangle(400, 610, 810, 60, { isStatic: true, restitution: 1, friction: 0, frictionAir: 0, frictionStatic: 0 });

          // add all of the bodies to the world
          World.add(engine.world, [circle, square, polygon, ground]);

          // run the engine
          Engine.run(engine);

          // run the renderer
          Render.run(render);
     </script>

</body>

</html>

I saw the 0.15.0 update, and I thought that I saw this issue listed as closed, so I decided to test this issue once again. It seems that the problem still exists.

Through some experimentation, I realized that squares don’t bounce indefinitely. They don’t bounce very well at all actually. Also, liabru made an interesting suggestion…

Maybe try using Bodies.polygon with a high number of sides (like 50) to see if that helps.

That’s why I looked more closely at the circle body.

It doesn’t look like a circle. It looks like a 26-sided polygon. So, I added a 1000 sided polygon next to the circle. Surprisingly, the 1000-sided polygon bounces similarly. I thought it might be better at preserving energy. It is, but only towards the end. While the circle eventually stops, the polygon keeps bouncing — in a similar manner to the previous animated GIF.

This looks like it’s still an issue, so I’m posting up what I found.

The momentum loss is quite significant. I can’t just increase the bounce above 1, because then it will eventually gain too much energy. (Without CCD, the bouncing element will just fly out of the scene.)

Based on previous conversations, I tried two things to fix this problem.

You should check the slop property. https://github.com/liabru/matter-js/issues/862#issuecomment-635012278

I didn’t even know that setting existed. 😄 The initial value is 0.05. I set it to 0. I didn’t notice a difference.

Setting the Inertia to Infinity was another suggestion.

Here there’s also energy being converted to torque, so try also setting the ball’s inertia to infinity so the ball can not rotate, for me it then bounces for much longer - is this what you need? https://github.com/liabru/matter-js/issues/21#issuecomment-42775549

This didn’t solve the problem, but it did change the results. The bouncing element will still lose momentum quickly, but not totally. When the distance between the two colliding elements is really close, the bouncing element no longer seems to lose momentum. That’s not much new information, but that seemed like really strange behavior to me. Maybe that helps to track down this problem.

Take a look at this jsfiddle:

https://jsfiddle.net/vd7d25pu/10/

Notice that the ball does appear to bounce forever here. The only difference is that the ‘ground’ rectangle’s height is set to 1. I stumbled upon this accidentally.

It loses it noticeably quick.

https://jsfiddle.net/vd7d25pu/7/