How do I determine the origin of the physics engine

Question

I was using matte.js, using my own rendering, and it was fine until I suddenly found out how matter knew the origin of my canvas, that is, when I created the rigid body, how did its position x,y determine where it was, and I didn't know how matter did it, I didn't make any additional Settings

import Matter from "matter-js";
import { useEffect, useRef, useState } from "react";

const Discuss = () => {
  const Engine = Matter.Engine;
  const Bodies = Matter.Bodies;
  const Composite = Matter.Composite;

  const viewWidth = window.innerWidth - 5
  const viewHeight = window.innerHeight - 80

  const discussRef = useRef(null);
  // create engine
  const engine = Engine.create();

  useEffect(() => {
    const ground = Bodies.rectangle(viewWidth / 2, viewHeight, viewWidth, 30, { 
      isStatic: true }
    );
    const ceiling = Bodies.rectangle(viewWidth / 2, -100, viewWidth, 200, { 
      isStatic: true }
    );
    const leftWall = Bodies.rectangle(-100, viewHeight / 2, 200, viewHeight, {
        isStatic: true,
      }
    )
    const rightWall = Bodies.rectangle(viewWidth + 100, viewHeight / 2, 200, viewHeight, {
      isStatic: true,
    }
  )
    const mouseConstraint = Matter.MouseConstraint.create(engine,{
      element: discussRef.current,
      constraint: {
        stiffness: 0.2,
      }
    });

    Composite.add(engine.world, [ceiling, ground, leftWall, rightWall, mouseConstraint]);

    (function rerender() {
      render(bubbles) //Ignoring him, I did a lot of other things
      Matter.Engine.update(engine);
      requestAnimationFrame(rerender);
    })();
    })

  return (
    <main className="min-h-[calc(100vh-80px)] relative">
      <div ref={discussRef} className="w-full h-[calc(100vh-80px)] relative"></div>
    </main>
  )
}

My code ran without any problems, I was just wondering why the engine's origin (0, 0) happened to be on my discussRef.current, how did I do this, I started to assume it was there, and suddenly I didn't make any Settings.

Here's the render related code:

const bubbles = messages.map((messageObject, index) => {
  const {text, body} = createBubbleMessage(discussRef.current, 
      messageObject.message)
  Composite.add(engine.world, body)
  return {text, body}
   })

  const render = (bubbles) => {
    bubbles.forEach((bubble, index) => {
    const element = bubble.text
    const body = bubble.body
    const {x, y} = body.position
    element.style.left = `${x - element.offsetWidth/2}px`
    element.style.top = `${y - element.offsetHeight/2}px`
    element.style.transform = `rotate(${body.angle}rad)` 
  })

createBubbleMessage returns an element(as text) and a rigid body with no internal problems

Answer 1

After thinking about it for some time, I have some guesses. First of all, I understand a point of view, physics engine is based on Newtonian mechanics to describe the physical characteristics of the object itself and the effect on other objects, using variables such as mass, speed, friction, air resistance to describe specifically, using a physical world to carry these objects with physical characteristics, and then render them together into visible container elements. Usually, the physical world and the container elements overlap, but one is invisible and the other is visible to us. Absolute positioning is used to determine the location of the object in the physical world. The reference is the physical world. Through real-time binding of the position relationship between the two, through the calculation inside matter.js, dom element is relative to the container element, that is, the object is relative to the physical world, so that the container element and the physical world are coincident, forming a deeply binding relationship. The question of all this comes from the use of

Matter.Render.create({
element: // A dom element or canvas
})

however, when rendering without Matter.Render, we don't manually determine a container element, which matter.js does for us. Unfortunately, I didn't find the source code, so I'll just say that this is my guess.