Matter-js: Understanding render.mouse and Render.lookAt

[Omkar76]

@liabru , I have watched the Cars example and have got pretty much good understanding of adding mouse constraints . (Thanks for nice example)

However, I don't understand following lines of code :

// keep the mouse in sync with rendering
    render.mouse = mouse;

    // fit the render viewport to the scene
    Render.lookAt(render, {
        min: { x: 0, y: 0 },
        max: { x: 800, y: 600 }
    });

I have also seen official documentation but I'm unable to get clear idea what these lines do.

Removing those lines had no effect on output.

Please someone explain.

Thanks.

[LeotomasMC]

I'm not sure what render.mouse = mouse; does, but I do know that the Render.lookAt() call basically sets the position of the camera, from what coordinate to what other coordinate is visible on the canvas

[Omkar76]

@LeotomasMC thanks for your help :)
I experimented a bit with Render.lookAt() . now I understand it.

render.mouse= mouse; is still a mystery

[LeotomasMC]

i think i also found what render.mouse = mouse is for.

the Renderer has an option to show the mouse position, and i think this gives the Renderer a mouse object from which to get the mouse position from, however, enabling this option causes the following error:
Uncaught TypeError: Cannot read property 'x' of undefined
I am assuming this is because the Matter.Mouse class actually doesn't have a Mouse.position property, and in fact, only has methods, as seen in the docs here. So I think in the end, functionally, it does nothing, but I also think that it was for rendering the mouse, which none of the examples even try to do anyway.

[liabru]

Thanks for looking into it @LeotomasMC - the render.mouse = mouse line is used to keep the mouse in sync with the render bounds. If the bounds are always equal to the canvas size then you won't need that, it's really only needed when the bounds size is changed e.g. for a zooming effect. You can see that in the views example by scrolling on the canvas.