How to Make a Body Completely Frictionless in Matter.js
Creating a completely frictionless body in Matter.js requires
removing three distinct types of resistance: surface friction, static
friction, and air resistance. By setting friction,
frictionStatic, and frictionAir to zero, you
can ensure an object moves endlessly without losing linear or angular
momentum during translation or contact. This guide demonstrates how to
configure these properties properly during body creation and how to
update them on existing bodies.
Key Friction Properties in Matter.js
Matter.js simulates resistance using three separate properties on a
Body:
friction: Kinetic friction during movement against another surface. Defaults to0.1.frictionStatic: Resistance required to start moving an object at rest while touching another surface. Defaults to0.5.frictionAir: Air resistance (drag) that continuously slows down the body even when it is not touching anything. Defaults to0.01.
Creating a Frictionless Body
When instantiating a body with Matter.Bodies, pass
options setting all three properties to 0:
const frictionlessBody = Matter.Bodies.rectangle(x, y, width, height, {
friction: 0,
frictionStatic: 0,
frictionAir: 0
});Because Matter.js calculates kinetic friction between colliding
surfaces using Math.min(bodyA.friction, bodyB.friction),
setting friction: 0 on your object ensures zero dynamic
friction regardless of the surface it touches.
However, static friction is resolved using
Math.max(bodyA.frictionStatic, bodyB.frictionStatic). If
your frictionless body comes to a complete stop against another surface
that has a default frictionStatic value greater than
0, it may stick. To guarantee perpetual sliding from a
standstill across surfaces, the colliding surface body must also have
frictionStatic: 0.
Modifying an Existing Body
If the body has already been added to the world, update its
properties using Matter.Body.set:
Matter.Body.set(body, {
friction: 0,
frictionStatic: 0,
frictionAir: 0
});Alternatively, set each property directly:
body.friction = 0;
body.frictionStatic = 0;
body.frictionAir = 0;Preserving Energy on Collisions
If you also want the object to preserve its velocity when bouncing
off walls or obstacles, set restitution (elasticity) to
1:
const perpetualBody = Matter.Bodies.circle(x, y, radius, {
friction: 0,
frictionStatic: 0,
frictionAir: 0,
restitution: 1
});