I'm trying to join the mode7 algorithm with RayCasting. For mode7, I'm using a simple rotation matrix to implement the rotation. The result is a little strange and I can't fix it. Do you know what is the problem of the alignment of the algorithms? See the gif below to understand:

enter image description here

The code I'm using is:

function mode7() {
    let _x = 0;
    let _y = 0;
    let z = 0;
    let sin = Math.sin(degreeToRadians(data.player.angle));
    let cos = Math.cos(degreeToRadians(data.player.angle));
    for(let y = data.projection.halfHeight; y < data.projection.height; y++) {
        for(let x = 0; x < data.projection.width; x++) {
            _x = ((data.projection.width - x) * cos) - (x * sin);
            _y = ((data.projection.width - x) * sin) + (x * cos);

            _x /= z;
            _y /= z;

            if(_y < 0) _y *= -1;
            if(_x < 0) _x *= -1;

            _y *= 8.0;
            _x *= 8.0;

            _y %= data.floorTextures[0].height;
            _x %= data.floorTextures[0].width;

            screenContext.fillStyle = data.floorTextures[0].data[Math.floor(_x) + Math.floor(_y) * data.floorTextures[0].width];
            screenContext.fillRect(x, y, 1, 1);
        z += 1;

Is there someway or a tutorial to teach how to fix this issue? I tried to find it but i didn't find anyone about RayCasting with mode7.

  • \$\begingroup\$ I'd suspect the problem is that your mode 7 code is using in effect a camera with a different field of view than your raycasting walls. I'm not sure at a glance exactly which values you'd need to change to bring these two virtual cameras into agreement \$\endgroup\$
    – DMGregory
    Oct 14, 2019 at 19:33
  • \$\begingroup\$ In my case I'm using the player x, y and angle attributes to reference the camera. To make the RayCasting step, I'm using a fov with 60 degrees, but in mode7, I'm not using this fov value. I don't know how to configure the mode7 too well... \$\endgroup\$ Oct 14, 2019 at 20:20

1 Answer 1


I assume you're using 8.0 for scaling here?

 _y *= 8.0;
 _x *= 8.0;

The scaling needs to take account the current horizontal FOV and viewport/screen width. I've found that if your FOV is 90 degrees using (ViewWidth/2) as the scaling factor works well.

If it's not 90 degrees FOV, you can approximate it via

90.0/fov * (ViewWidth/2)

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .