How to Change Angular Friction in Matter.js

This guide explains how to control and modify the angular friction—or rotational resistance—of a spinning body in Matter.js. You will learn how to adjust rotation slowdown using the engine's native frictionAir setting, as well as how to implement a custom angular drag coefficient when you need to slow down spin independently from linear movement.

Understanding Angular Drag in Matter.js

Matter.js does not provide a dedicated frictionAngular property. Instead, rotational slowdown is natively governed by the frictionAir property of a Body. By default, frictionAir has a value of 0.01, which acts as an ambient drag force that dampens both linear velocity and angular velocity over time.

Method 1: Using the Native frictionAir Property

To increase or decrease the rate at which a spinning body comes to rest, you can adjust its frictionAir property.

Setting It During Body Creation

const spinningBody = Matter.Bodies.circle(400, 300, 50, {
    frictionAir: 0.05 // Higher values slow the rotation down faster
});

Updating It on an Existing Body

You can change the value dynamically on an active body at any point in your simulation:

// Directly modifying the property
spinningBody.frictionAir = 0.08;

// Or using the Body module's setter
Matter.Body.set(spinningBody, 'frictionAir', 0.08);

• Low values (e.g., 0.001 or 0): The body will spin for a long time or indefinitely.
• High values (e.g., 0.1 or higher): The spin will halt almost immediately.

Method 2: Independent Angular Damping

Because adjusting frictionAir also dampens linear velocity (movement across the screen), it may not be ideal if you want a body to travel freely across the canvas while its spin slows down rapidly.

To apply angular friction independently without affecting linear motion, leave frictionAir at its standard value and dampen angularVelocity manually using an engine update listener:

const angularDampingFactor = 0.98; // Multiplier applied each frame (lower = stops faster)

Matter.Events.on(engine, 'beforeUpdate', function() {
    // Manually reduce angular velocity each physics step
    Matter.Body.setAngularVelocity(
        spinningBody, 
        spinningBody.angularVelocity * angularDampingFactor
    );
});

Completely Halting Rotation

If you need to eliminate spin instantly rather than applying gradual friction, set the angular velocity to zero directly:

Matter.Body.setAngularVelocity(spinningBody, 0);