Fisheye fix

Distorted view

After we implemented the RayCasting and ran the code, we could check that the walls of the projection were distorted. This occurs because the method to throw the ray that we used starts from player, so the side rays will be more distant then the middle rays. This effect is called Fisheye. To corret it, we need to translate the distance of the rays removing the distorted distance in relation of the player. Check the image below for understand:

Based of the first example, we can see the right triangle between player position and wall position. The value of the angles needs to be processed to get the correction of the distorted distance. For it, we can use this formula:

Formula: distance = distorted distance * Math.cos(ray angle - player angle)

This formula will be applied after get the distance in rayCasting() function. The code will be:

// ...

// Pythagoras theorem
let distance = Math.sqrt(Math.pow(data.player.x - ray.x, 2) + Math.pow(data.player.y - ray.y, 2));

// Fish eye fix
distance = distance * Math.cos(degreeToRadians(rayAngle - data.player.angle));

// Wall height
let wallHeight = Math.floor(data.projection.halfHeight / distance);

// ...

After this fix, you can check the result running the code fixed.

• Next: Basic Result Code
• Previous: Basic Movement