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:
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.