Following the Player

Now that the camera is set up and can translate the world, now it's time to start translating it in relation to the player. In order to do this, the camera first needs to know where the player is. This can be done in the update() function that you outlined earlier.

By passing in a target value into update(), the update function can manipulate this.translation. Since we only need the x coordinate of the player object, you can leave the y value of the translation at 0.

class Camera
{
    constructor()
    {
        this.translation = createVector(0, 0)
    }

    update(target)
    {
        this.translation = createVector(target.x,0)
    }
    ...
}

Passing in the player position

Now lets see how that looks when we bring the update function into the draw loop. In the draw loop, you'll need to call cam.update() and pass in the position of the player object's position (player.body.position)

...
function draw() 
{
    background(51);
    Engine.update(engine)
    player.update()

    cam.update(player.body.position)
    cam.begin()
    ...
    cam.end()
}
...

Why .body?

Because the player object is a matter.js object, it has a .body property that contains all of the physics information that the rest of matter.js needs to run the

Wait, the translation is going the wrong way!

Since the translation is moving the origin, we need to move it in the opposite direction of the thing we're tracking. Lets change the camera's update() function to reflect this.

class Camera
{
    constructor()
    {
        this.translation = createVector(0, 0)
    }

    update(target)
    {
        this.translation = createVector(-target.x,0)
    }
...
}

Hmm, still not quite right 🤔

Looks like the player ends up right at the edge of the canvas now. To fix this, let's add an offset to the translation so the player is in the center. Adding half of the width to the translation should be enough.

class Camera
{
...    
    update(target)
    {
        this.translation = createVector(-target.x+width/2,0)
    }
...
}

Great! Now the camera works! The rest of the level could use a bit more designing and fleshing out, but we can leave that to your friend's creative discretion.