Physics of text using Matter.js

Matter.js is one of the libraries for physics

Final Image

Background

There were several libraries for arithmetic processing of squares, circles, and other shapes, but I couldn’t find a sample with text, so I’m going to research and post it as a reminder. As for the library selection, there were several libraries for physical operations, but I’m using Matter.js, which is lightweight and smartphone-compatible.

Custom Render

Matter.js uses a default render for displaying shapes. If you add a Body object to the **world**, this render will automatically display the body along with the physics operations. However, this default render does not support text display. Instead, you are instructed to use Custom Render, which seems to be a way to draw the body in the Canvas by itself using the calculated body information.

Normally the render is used as follows.

const Engine = Matter.Engine
const Render = Matter.Render
const engine = Engine.create()
const render = Render.create({
 element: document.getElementById('app'),
 engine: engine,
 options: {
  wireframes: false,
  width: 300,
  height: 400,
  background: 'rgba(255, 0, 0, 0.5)'
 }
})
Render.run(render)