How to Use showAngleIndicator in Matter.js

This article explains how to display the angular orientation indicator on rigid bodies using the built-in renderer in Matter.js. By enabling the showAngleIndicator flag within the renderer configuration, you can visually track rotation in your 2D physics simulation, which is particularly beneficial for symmetrical objects like circles that otherwise appear static while rotating.

Enabling showAngleIndicator in Matter.Render

The showAngleIndicator setting is a boolean property housed within the options object of a Matter.Render instance. When set to true, the renderer draws a single straight line from the center of each body to one of its vertices or edges, providing an immediate visual cue of its current angle of rotation.

Configuration During Initialization

The most common way to display angle indicators is to define the flag when initializing the renderer using Matter.Render.create():

// 1. Create the engine
const engine = Matter.Engine.create();

// 2. Create the renderer with showAngleIndicator enabled
const render = Matter.Render.create({
    element: document.body,
    engine: engine,
    options: {
        width: 800,
        height: 600,
        wireframes: false, // Works in both wireframe and solid render modes
        showAngleIndicator: true
    }
});

// 3. Run the renderer and engine
Matter.Render.run(render);
Matter.Runner.run(Matter.Runner.create(), engine);

Dynamic Toggling

If the simulation is already running, you can enable or disable the angle indicator at runtime by directly modifying the property on the existing render instance:

// Enable angle indicators
render.options.showAngleIndicator = true;

// Disable angle indicators
render.options.showAngleIndicator = false;

Practical Use Cases