I am having an issue with wall heights in my 2D raycasting playground I made for practice.
Test code in P5.js editor: https://editor.p5js.org/tomekp/sketches/6fKPIAHNx (WASD to move, Left/Right arrow to turn)
In the code above, I have an implementation of 2D raycasting, it is the best I have so far in that the walls are mostly the correct height depending on the player's position. The core of the logic is in sketch.js (you may need to open the sidebar menu if it doesn't open by default).
However, the problem is that when you are standing directly in front of a wall (or walls), just far back enough to see the top and bottom of the wall slices you are looking at, the top and bottom of the lines that are being drawn vary in size just enough to make the wall look sort of concave.
I've also attached an image at the bottom from the P5 link above to illustrate the issue further.
What I've tried
I've read the Lodev's tutorial (https://lodev.org/cgtutor/raycasting.html), and a number of other articles online that explain the maths behind raycasting. I learned that I should be using
cos(rayAngle) * rayLength to get the perpendicular distance from wall to player. And after trying various code changes & studying up on my maths I still can't seem to grasp what's going wrong.
I think the issue is that despite the perpendicular distance being used there are still small variations in that distance causing the concave effect on the walls that you are directly perpendicular to, but not sure.
Any help/pointers would be appreciated, for context, I've been been mainly focusing on trigonometry when brushing up on my maths so I wonder if I am maybe just missing some required bit of maths to understand what I am doing wrong or if it's a case of misunderstanding how the computer renders rects/lines at specific canvas sizes. I think I basically don't know what I don't know to solve this problem.